Clay

Overview

Clay.com is the most playful B2B SaaS interface in the GTM-data category. The base atmosphere is **cream-tinted white canvas** (`{colors.canvas}` — #fffaf0) holding dark-navy ink type and **3D-rendered claymation illustrations** (mountains, mascot characters, peach/ochre/lavender landscapes) as the dominant brand voltage. Where most data-platform brands play it cool with grids and gradients, Clay leans hard into hand-crafted-looking 3D illustrations and saturated single-color feature cards.

Type voice runs **Plain Black** (or substituted with Inter weight 500-600) — a custom rounded display face used at very large sizes (72px hero) with negative letter-spacing. Body type uses Inter at standard weights. The display weight stays at 500, never bolder — the rounded character of the typeface gives it warmth without needing weight.

Component voltage comes from **saturated single-color feature cards** in a 6-color palette: hot pink, deep teal, lavender, peach, ochre, and cream-card. Each card shows product UI fragments at small scale — Claygent agent runs, sequencer flows, CRM enrichment outputs. The colored card IS the primary visual element on every long-scroll page.

**Key Characteristics:**

• Cream-tinted white canvas (`{colors.canvas}` — #fffaf0). The warmth differentiates Clay from cool-gray competitor sites.
• Dark navy/black primary CTAs (`{colors.primary}` — #0a0a0a). Buttons rounded `{rounded.md}` (12px) — friendly modern but not pill.
• 6-color saturated feature card palette: `{colors.brand-pink}`, `{colors.brand-teal}`, `{colors.brand-lavender}`, `{colors.brand-peach}`, `{colors.brand-ochre}`, `{colors.surface-card}` (cream).
• 3D claymation illustrations (mountains, characters, abstract shapes) as full-bleed hero artifacts — the brand's most-recognized visual element.
• Custom rounded Plain Black display typeface at 500 weight with -1 to -2.5px letter-spacing on display sizes.
• Border radius is generous: `{rounded.md}` (12px) for buttons + inputs, `{rounded.lg}` (16px) for content cards, `{rounded.xl}` (24px) for feature cards. The bigger radius matches the rounded display type's character.
• Product UI fragments embedded inside colored cards at small scale — agent run logs, sequencer flows, enrichment results.
• Section rhythm `{spacing.section}` (96px) between major bands.
• Footer is cream-tinted (`{colors.surface-soft}`) — Clay does NOT use a dark footer. Even the closing band stays warm-light.

Colors

Brand & Accent

• **Primary** (`{colors.primary}` — #0a0a0a): All primary CTAs, h1/h2 ink type. Near-black with slight warmth.
• **Brand Pink** (`{colors.brand-pink}` — #ff4d8b): Hot-pink feature card surface. Sequencer / outbound feature pages.
• **Brand Teal** (`{colors.brand-teal}` — #1a3a3a): Deep teal-green feature card. Often the featured pricing tier.
• **Brand Lavender** (`{colors.brand-lavender}` — #b8a4ed): Soft lavender feature card.
• **Brand Peach** (`{colors.brand-peach}` — #ffb084): Warm peach feature card.
• **Brand Ochre** (`{colors.brand-ochre}` — #e8b94a): Mustard / ochre feature card and illustration accents.
• **Brand Mint** (`{colors.brand-mint}` — #a4d4c5): Mint accent on illustrations and small badges.
• **Brand Coral** (`{colors.brand-coral}` — #ff6b5a): Coral accent for highlights.

Surface

• **Canvas** (`{colors.canvas}` — #fffaf0): The default page floor. Cream-tinted white.
• **Surface Soft** (`{colors.surface-soft}` — #faf5e8): Footer and CTA-band background.
• **Surface Card** (`{colors.surface-card}` — #f5f0e0): Cream feature cards, testimonial cards.
• **Surface Strong** (`{colors.surface-strong}` — #ebe6d6): Stronger cream for emphasized bands.
• **Surface Dark** (`{colors.surface-dark}` — #0a1a1a): Dark teal-tinted near-black for occasional dark cards (rare).
• **Surface Dark Elevated** (`{colors.surface-dark-elevated}` — #1a2a2a): Elevated dark cards.
• **Hairline** (`{colors.hairline}` — #e5e5e5): 1px borders on cards and inputs.

Text

• **Ink** (`{colors.ink}` — #0a0a0a): Headlines and primary text.
• **Body Strong** (`{colors.body-strong}` — #1a1a1a): Emphasized body, lead paragraphs.
• **Body** (`{colors.body}` — #3a3a3a): Default running-text.
• **Muted** (`{colors.muted}` — #6a6a6a): Sub-headings, breadcrumbs, footer body.
• **Muted Soft** (`{colors.muted-soft}` — #9a9a9a): Captions, fine-print.
• **On Primary / On Dark** (`{colors.on-primary}` — #ffffff): Text on primary buttons + dark feature cards (teal).

Semantic

• **Success** (`{colors.success}` — #22c55e): Success states.
• **Warning** (`{colors.warning}` — #f59e0b): Warning callouts.
• **Error** (`{colors.error}` — #ef4444): Validation errors.

Typography

Font Family

The system runs **Plain Black** (a custom rounded display face) for headlines and **Inter** for body, navigation, and UI. Plain Black at weight 500 with negative letter-spacing handles every display headline; Inter handles the rest. The fallback stack walks `Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif` for both.

Hierarchy

| Token | Size | Weight | Line Height | Letter Spacing | Use |

|---|---|---|---|---|---|

| `{typography.display-xl}` | 72px | 500 | 1.0 | -2.5px | Homepage h1 ("Go to market with unique data") — Plain Black |

| `{typography.display-lg}` | 56px | 500 | 1.05 | -2px | Section heads — Plain Black |

| `{typography.display-md}` | 40px | 500 | 1.1 | -1px | Sub-section heads, product names |

| `{typography.display-sm}` | 32px | 500 | 1.15 | -0.5px | CTA-band heads, feature card titles |

| `{typography.title-lg}` | 24px | 600 | 1.3 | -0.3px | Pricing plan names, larger feature titles |

| `{typography.title-md}` | 18px | 600 | 1.4 | 0 | Card titles, intro paragraphs |

| `{typography.title-sm}` | 16px | 600 | 1.4 | 0 | Small card titles, list labels |

| `{typography.body-md}` | 16px | 400 | 1.55 | 0 | Default running-text |

| `{typography.body-sm}` | 14px | 400 | 1.55 | 0 | Footer body, fine-print |

| `{typography.caption}` | 13px | 500 | 1.4 | 0 | Badge labels, captions |

| `{typography.caption-uppercase}` | 12px | 600 | 1.4 | 1.5px | Section labels, "FEATURED" badges |

| `{typography.button}` | 14px | 600 | 1.0 | 0 | Standard button labels |

| `{typography.nav-link}` | 14px | 500 | 1.4 | 0 | Top-nav menu items |

Principles

Plain Black at weight 500 + negative letter-spacing IS the brand voice. Going to weight 700 reads as bombastic; the rounded character of the typeface adds warmth that bolder weight would flatten.

The body-vs-display split is functional: Plain Black for Plain Black moments (headlines), Inter for everything else (running text, UI, buttons). Mixing them is a system violation.

Note on Font Substitutes

If Plain Black is unavailable, **Inter** at weight 500 with -0.05em letter-spacing is a usable approximation. **Söhne Breit** at weight Buch is an alternative if licensed. **Recoleta** at weight 500 carries similar rounded-display warmth.

Layout

Spacing System

• **Base unit:** 4px.
• **Tokens:** `{spacing.xxs}` 4px · `{spacing.xs}` 8px · `{spacing.sm}` 12px · `{spacing.md}` 16px · `{spacing.lg}` 24px · `{spacing.xl}` 32px · `{spacing.xxl}` 48px · `{spacing.section}` 96px.
• **Section padding:** `{spacing.section}` (96px) between major editorial bands.
• **Card internal padding:** `{spacing.xl}` (32px) for feature cards and pricing tiers; `{spacing.lg}` (24px) for testimonial and product mockup cards.

Grid & Container

• **Max content width:** ~1280px centered.
• **Editorial body:** Single 12-column grid; hero often uses 7/5 split (h1 left, illustration right).
• **Feature card grids:** 3-up at desktop, 2-up at tablet, 1-up at mobile.
• **Pricing grid:** 3-4 up at desktop, 1-up at mobile.

Whitespace Philosophy

Clay uses generous whitespace around big rounded display headlines and saturated feature cards. The cream canvas + colored cards + 3D illustrations create a playful warmth that competing data-platform sites lack.

Elevation & Depth

| Level | Treatment | Use |

|---|---|---|

| Flat | No shadow, no border | Body sections, top nav, hero |

| Soft hairline | 1px `{colors.hairline}` border | Inputs, small content cards |

| Saturated card | Brand pink/teal/lavender/peach/ochre fill — no shadow | Feature cards |

| Cream card | `{colors.surface-card}` background — no shadow | Testimonial, secondary cards |

| Subtle drop shadow | Faint shadow at low alpha | Hover-elevated states (rare) |

The system uses no heavy shadows. Depth comes from the saturated color contrast between cream canvas and bright feature cards.

Decorative Depth

• **3D claymation illustrations** — mountains, characters, mascots rendered in a hand-crafted 3D style. The brand's most-recognized depth element. Not a token — these are illustrated assets.
• **Mascot characters** appear as inline figures in feature cards and CTAs.

Shapes

Border Radius Scale

| Token | Value | Use |

|---|---|---|

| `{rounded.xs}` | 6px | Small badges, dropdown items |

| `{rounded.sm}` | 8px | Small buttons, hairline-border accent |

| `{rounded.md}` | 12px | Standard CTA buttons, text inputs |

| `{rounded.lg}` | 16px | Content cards, testimonial cards, pricing tiers |

| `{rounded.xl}` | 24px | Feature cards (the saturated brand-color cards) |

| `{rounded.pill}` | 9999px | Category tabs, badge pills |

| `{rounded.full}` | 9999px / 50% | Avatars, icon buttons |

Components

Top Navigation

**`top-nav`** — Cream nav bar pinned to top. 64px tall, `{colors.canvas}` background. Carries the Clay logo + wordmark at left, primary horizontal menu (Product, Solutions, Resources, Pricing, Customers) center, right-side cluster with "Sign in" + "Try free" `{component.button-primary}`. Menu items in `{typography.nav-link}` (Inter 14px / 500).

Buttons

**`button-primary`** — Background `{colors.primary}` (near-black), text `{colors.on-primary}` (white), type `{typography.button}` (Inter 14px / 600), padding 12px × 20px, height 44px, rounded `{rounded.md}` (12px).

**`button-secondary`** — Cream button with hairline outline. Background `{colors.canvas}`, text `{colors.ink}`, 1px hairline border.

**`button-on-color`** — White button used over saturated brand-color feature cards. Same shape as primary but inverted (white background, ink text).

**`button-text-link`** — Inline text button, no background. Used for "Sign in" and inline link CTAs.

**`text-link`** — Inline body links in `{colors.ink}` with underline.

Cards & Containers

**`hero-band`** — Cream-canvas hero with 7-5 grid: h1 + sub-headline + button row on the left, 3D claymation illustration on the right. Vertical padding `{spacing.section}` (96px).

**`hero-illustration-card`** — Right-side artifact holding 3D claymation illustration (mountains, mascot character, abstract shapes). Background `{colors.surface-soft}`, rounded `{rounded.xl}` (24px). The illustration IS the artifact.

**`feature-card-pink`** / **`feature-card-teal`** / **`feature-card-lavender`** / **`feature-card-peach`** / **`feature-card-ochre`** — Saturated single-color feature cards. Background varies per variant; rounded `{rounded.xl}` (24px); padding `{spacing.xl}` (32px). Each card carries an h3 in `{typography.title-md}`, a body description, and a product UI fragment or mascot illustration. Text color flips to `{colors.on-dark}` (white) on pink and teal cards, `{colors.ink}` (dark) on lavender/peach/ochre cards (the lighter saturations have enough contrast for dark text).

**`feature-card-cream`** — Lower-key feature card variant on `{colors.surface-card}`. Used for less-emphasized features that don't warrant a saturated color.

**`product-mockup-card`** — Card showing actual Clay product UI (Claygent agent runs, sequencer flows, CRM enrichment tables). Background `{colors.canvas}` with hairline border, rounded `{rounded.lg}`, padding `{spacing.lg}` (24px).

**`testimonial-card`** — Customer quote cards. Background `{colors.surface-card}` (cream), rounded `{rounded.lg}`, padding `{spacing.lg}` (24px). Top row has avatar + name + role; below sits the testimonial in `{typography.body-md}`.

**`pricing-tier-card`** — Standard tier card. Background `{colors.canvas}` with hairline, rounded `{rounded.lg}`, padding `{spacing.xl}` (32px).

**`pricing-tier-card-featured`** — The featured tier flips to `{colors.brand-teal}` (deep teal-green). The teal surface IS the featured signal.

**`expert-card`** — Used on /experts page. Background `{colors.canvas}` with hairline, rounded `{rounded.lg}`, padding `{spacing.lg}`. Carries an avatar at top, expert name, specialization, and a "Book session" link.

Inputs & Forms

**`text-input`** — Background `{colors.canvas}`, text `{colors.ink}`, type `{typography.body-md}`, rounded `{rounded.md}` (12px), padding 12px × 16px, height 44px. 1px hairline border.

**`text-input-focused`** — Border thickens to ink for emphasis.

Tabs / Badges

**`category-tab`** + **`category-tab-active`** — Pill-shaped tabs in sub-nav. Inactive: transparent + muted text. Active: cream-card background + ink text. Padding 8px × 16px.

**`badge-pill`** — Small cream-fill pill labels in `{typography.caption}` (13px / 500), rounded `{rounded.pill}`.

CTA / Footer

**`cta-band-illustrated`** — Pre-footer "Turn your growth ideas into reality today" band. Background `{colors.surface-soft}`, rounded `{rounded.xl}`, padding 80px. Carries an h2 in `{typography.display-md}`, a sub-line, and a `{component.button-primary}` — usually paired with a 3D illustration of a mascot or scene.

**`footer`** — Cream-tinted footer (NOT dark navy unlike most SaaS sites). Background `{colors.surface-soft}`, text `{colors.body}`. 4-column link list. Vertical padding 80px. Often features a horizon-style 3D mountain illustration at the very bottom — Clay's signature footer mountain.

Do's and Don'ts

Do

• Anchor every page on the cream canvas (`{colors.canvas}` — #fffaf0). The warm tint differentiates Clay from cool-gray data sites.
• Use 3D claymation illustrations as hero artifacts. Hand-crafted 3D characters and mountains ARE the brand.
• Cycle saturated feature cards across the page — pink → teal → lavender → peach → ochre → cream. Repeating the same color twice in a row reads as off-rhythm.
• Use Plain Black at weight 500 with negative letter-spacing on every display headline.
• Show product UI fragments inside saturated feature cards. The brand voltage is product-driven, not abstract.
• Use cream footer (NOT dark). Clay deliberately closes pages with warm cream rather than the standard dark-footer SaaS template.
• Anchor every band with `{spacing.section}` (96px) vertical rhythm.

Don't

• Don't use cool grays for canvas. The cream tint is non-negotiable.
• Don't use a 7th brand-color card. The 6-color palette is saturated enough.
• Don't bold display weight beyond 500. Plain Black at 700 reads as bombastic.
• Don't repeat the same brand-color card twice in a row.
• Don't replace claymation illustrations with flat vector art. The hand-crafted 3D character IS the brand voice.
• Don't use a dark footer. The cream footer is part of the system's warm-throughout pacing.
• Don't add hover state styling beyond what the system already encodes.

Responsive Behavior

Breakpoints

| Name | Width | Key Changes |

|---|---|---|

| Mobile | < 768px | Hamburger nav; hero h1 72→36px; hero-illustration-card stacks below; feature grids 1-up; pricing 1-up |

| Tablet | 768–1024px | Top nav tightens; feature cards 2-up; pricing 2-up |

| Desktop | 1024–1440px | Full top-nav; 3-up feature cards; 3-up pricing tiers |

| Wide | > 1440px | Same as desktop with more breathing room; max content 1280px |

Touch Targets

• `{component.button-primary}` at minimum 44 × 44px (matches WCAG AAA).
• `{component.text-input}` height is 44px.

Collapsing Strategy

• Top nav collapses to hamburger at < 768px.
• Hero 7-5 grid → single-column on mobile.
• Feature card grids reduce columns rather than scaling.
• Saturated feature cards retain their colored fill at every breakpoint.
• Pricing tier cards collapse 4 → 2 → 1.

Iteration Guide

1. Focus on ONE component at a time. Reference its YAML key (`{component.feature-card-pink}`, `{component.pricing-tier-card-featured}`).

2. Pick the right brand-color card for the feature: pink for outbound/sequencer, teal for enterprise/featured, lavender for AI-agent products, peach for general SaaS warmth, ochre for community / experts.

3. Variants of an existing component (`-active`, `-disabled`) live as separate entries.

4. Use `{token.refs}` everywhere — never inline hex.

5. Never document hover.

6. Display headlines stay Plain Black 500 with negative letter-spacing. Body stays Inter 400.

7. The cream-throughout palette is a system contract — don't add a dark footer.

Known Gaps

• Plain Black is licensed to Clay and not available as a public web font; Inter weight 500 with negative letter-spacing is the closest substitute.
• 3D claymation illustrations are commissioned assets, not system tokens — they're rendered per-page.
• The mascot characters (named characters that recur across the site) are illustrated assets; their exact lineage and naming are not formalized in tokens.
• Animation and transition timings (3D illustration parallax on scroll, feature card entrance animations) are not in scope.
• Form validation states beyond `{component.text-input-focused}` are not extracted.
• The actual Clay product surface (in-app data tables, formula editor, agent builder) shares some tokens with the marketing site but adds many product-specific components that are out of scope.

개요

Clay.com은 GTM 데이터 카테고리에서 가장 재미있는 B2B SaaS 인터페이스입니다. 기본 분위기는 **크림색의 흰색 캔버스**(`{colors.canvas}` — #fffaf0)로 짙은 남색 잉크 유형과 **3D 렌더링 클레이메이션 일러스트레이션**(산, 마스코트 캐릭터, 복숭아/황토/라벤더 풍경)을 지배적인 브랜드 전압으로 유지합니다. 대부분의 데이터 플랫폼 브랜드가 그리드와 그라디언트를 멋지게 활용하는 반면 Clay는 손으로 만든 듯한 3D 일러스트레이션과 강렬한 단색 기능 카드를 사용합니다.

유형 음성은 **일반 검정색**(또는 Inter Weight 500-600으로 대체)을 실행합니다. 음수 문자 간격이 있는 매우 큰 크기(72px Hero)에 사용되는 사용자 정의 둥근 디스플레이 면입니다. 체형은 표준체중으로 인터를 사용합니다. 디스플레이 무게는 500으로 유지되며 결코 굵게 표시되지 않습니다. 서체의 둥근 문자는 무게를 필요로 하지 않고도 따뜻함을 제공합니다.

구성 요소 전압은 핫 핑크, 딥 청록색, 라벤더, 복숭아, 황토, 크림 카드 등 6가지 색상 팔레트의 **포화 단일 색상 기능 카드**에서 나옵니다. 각 카드에는 Claygent 에이전트 실행, 시퀀서 흐름, CRM 강화 출력 등 소규모 제품 UI 조각이 표시됩니다. 컬러 카드는 모든 긴 스크롤 페이지의 기본 시각적 요소입니다.

**주요 특징:**

• 크림색 흰색 캔버스(`{colors.canvas}` — #fffaf0). 따뜻함은 Clay를 차가운 회색 경쟁 사이트와 차별화합니다.
• 어두운 남색/검은색 기본 CTA(`{colors.primary}` — #0a0a0a). 둥근 `{rounded.md}`(12px) 버튼 — 친근하고 현대적이지만 알약 모양은 아닙니다.
• 6가지 색상 포화 기능 카드 팔레트: `{colors.brand-pink}`, `{colors.brand-teal}`, `{colors.brand-lavender}`, `{colors.brand-peach}`, `{colors.brand-ochre}`, `{colors.surface-card}`(크림).
• 3D 클레이메이션 일러스트레이션(산, 캐릭터, 추상 모양)을 완전한 영웅 유물로 표현한 브랜드의 시각적 요소입니다.
• 디스플레이 크기에 문자 간격이 -1~-2.5px이고 무게가 500인 맞춤형 둥근 일반 검정색 디스플레이 서체입니다.
• 테두리 반경은 넉넉합니다. 버튼 + 입력의 경우 `{rounded.md}`(12px), 콘텐츠 카드의 경우 `{rounded.lg}`(16px), 기능 카드의 경우 `{rounded.xl}`(24px). 반경이 클수록 둥근 표시 유형의 문자와 일치합니다.
• 소규모 컬러 카드 내부에 포함된 제품 UI 조각(에이전트 실행 로그, 시퀀서 흐름, 강화 결과)
• 주요 밴드 사이의 섹션 리듬 `{spacing.section}`(96px).
• 바닥글은 크림색입니다(`{colors.surface-soft}`) — Clay는 어두운 바닥글을 사용하지 않습니다. 클로징 밴드도 따뜻한 빛을 유지합니다.

색상

브랜드 및 액센트

• **기본**(`{colors.primary}` — #0a0a0a): 모든 기본 CTA, h1/h2 잉크 유형. 약간의 따뜻함이 있는 니어 블랙입니다.
• **브랜드 핑크**(`{colors.brand-pink}` — #ff4d8b): 핫핑크 기능 카드 표면. 시퀀서/아웃바운드 기능 페이지.
• **브랜드 청록색** (`{colors.brand-teal}` — #1a3a3a): 진한 청록색 기능 카드. 주요 가격 책정 계층인 경우가 많습니다.
• **브랜드 라벤더** (`{colors.brand-lavender}` — #b8a4ed): 소프트 라벤더 기능 카드.
• **브랜드 복숭아** (`{colors.brand-peach}` — #ffb084): 따뜻한 복숭아 기능 카드.
• **Brand Ochre** (`{colors.brand-ochre}` — #e8b94a): 머스타드/오커 기능 카드 및 일러스트레이션 악센트.
• **브랜드 민트** (`{colors.brand-mint}` — #a4d4c5): 일러스트레이션과 작은 배지에 민트 악센트가 있습니다.
• **브랜드 산호초** (`{colors.brand-coral}` — #ff6b5a): 하이라이트를 위한 산호색 액센트.

표면

• **캔버스** (`{colors.canvas}` — #fffaf0): 기본 페이지 바닥입니다. 크림색의 흰색.
• **Surface Soft** (`{colors.surface-soft}` — #faf5e8): 바닥글 및 CTA 밴드 배경.
• **Surface 카드** (`{colors.surface-card}` — #f5f0e0): 크림 기능 카드, 추천 카드.
• **Surface Strong** (`{colors.surface-strong}` — #ebe6d6): 강조된 밴드를 위한 더 강한 크림입니다.
• **Surface Dark** (`{colors.surface-dark}` — #0a1a1a): 가끔씩 어두운 카드에 사용되는 어두운 청록색 색조의 검정색입니다(드물게).
• **표면이 어두워짐** (`{colors.surface-dark-elevated}` — #1a2a2a): 높아진 어두운 카드.
• **헤어라인** (`{colors.hairline}` — #e5e5e5): 카드 및 입력에 1px 테두리.

텍스트

• **잉크**(`{colors.ink}` — #0a0a0a): 헤드라인 및 기본 텍스트입니다.
• **Body Strong** (`{colors.body-strong}` — #1a1a1a): 본문을 강조하고 단락을 리드합니다.
• **본문**(`{colors.body}` — #3a3a3a): 기본 실행 텍스트입니다.
• **음소거됨** (`{colors.muted}` — #6a6a6a): 하위 제목, 탐색경로, 바닥글 본문.
• **음소거 소프트** (`{colors.muted-soft}` — #9a9a9a): 캡션, 작은 글씨.
• **On Primary / On Dark** (`{colors.on-primary}` — #ffffff): 기본 버튼의 텍스트 + 어두운 기능 카드(청록색).

의미론

• **성공** (`{colors.success}` — #22c55e): 성공 상태입니다.
• **경고** (`{colors.warning}` — #f59e0b): 경고 문구.
• **오류** (`{colors.error}` — #ef4444): 유효성 검사 오류입니다.

타이포그래피

글꼴 계열

시스템은 헤드라인에 **Plain Black**(맞춤형 둥근 표시면)을 실행하고 본문, 탐색 및 UI에 **Inter**를 실행합니다. 음수 문자 간격이 있는 무게 500의 일반 검정색이 모든 디스플레이를 처리합니다.

概要

Clay.com は、GTM データ カテゴリで最も遊び心のある B2B SaaS インターフェイスです。基本的な雰囲気は、ダークネイビーのインクタイプと **3D レンダリングされたクレイメーションのイラスト** (山、マスコット キャラクター、桃/黄土色/ラベンダーの風景) を主なブランド ボルテージとして保持する **クリーム色がかった白いキャンバス** (`{colors.canvas}` — #fffaf0) です。ほとんどのデータ プラットフォーム ブランドがグリッドやグラデーションでクールに演出するのに対し、Clay は手作り風の 3D イラストや飽和した単色のフィーチャー カードに力を入れています。

タイプ音声は **プレーン ブラック** (またはインター ウェイト 500 ～ 600 で置き換え) を実行します。これは、負の文字間隔で非常に大きなサイズ (72 ピクセル ヒーロー) で使用されるカスタムの丸い表示面です。体型は標準体重でインターを使用。表示ウェイトは 500 のままで、これ以上太くなることはありません。書体の丸みを帯びた文字により、重みを必要とせずに暖かみが生まれます。

コンポーネント電圧は、ホット ピンク、ディープ ティール、ラベンダー、ピーチ、オークル、クリーム カードの 6 色パレットの **飽和単色フィーチャー カード**から得られます。各カードには、小規模な製品 UI フラグメント (Claygent エージェントの実行、シーケンサー フロー、CRM エンリッチメント出力) が表示されます。カラーカードは、すべてのロングスクロールページの主要な視覚要素です。

**主な特徴:**

• クリーム色の白いキャンバス (`{colors.canvas}` — #fffaf0)。この暖かさにより、Clay はクールグレーの競合サイトと区別されます。
• ダークネイビー/ブラックのプライマリ CTA (`{colors.primary}` — #0a0a0a)。ボタンは丸い `{rounded.md}` (12px) — フレンドリーでモダンですが毛玉ではありません。
• 6 色の飽和機能カード パレット: `{colors.brand-pink}`、`{colors.brand-teal}`、`{colors.brand-lavender}`、`{colors.brand-peach}`、`{colors.brand-ochre}`、`{colors.surface-card}` (クリーム)。
• フルブリードのヒーロー アーティファクトとしての 3D クレイメーション イラスト (山、キャラクター、抽象的な形状) - ブランドで最もよく知られた視覚要素。
• カスタムの丸みを帯びたプレーンブラック表示書体 (ウェイト 500、表示サイズで -1 ～ -2.5 ピクセルの文字間隔)。
• 境界線の半径は十分です。ボタン + 入力の場合は `{rounded.md}` (12px)、コンテンツ カードの場合は `{rounded.lg}` (16px)、フィーチャー カードの場合は `{rounded.xl}` (24px) です。より大きな半径は、丸みを帯びた表示タイプの特性と一致します。
• 小規模のカラーカード内に埋め込まれた製品 UI フラグメント — エージェント実行ログ、シーケンサー フロー、エンリッチメント結果。
• メジャーバンド間のセクションリズム`{spacing.section}` (96px)。
• フッターはクリーム色です (`{colors.surface-soft}`) — Clay は暗いフッターを使用しません。クロージングバンドも暖かな光を保ちます。

色

ブランドとアクセント

• **プライマリ** (`{colors.primary}` — #0a0a0a): すべてのプライマリ CTA、h1/h2 インク タイプ。ほんのり温かみのある黒に近い色。
• **ブランド ピンク** (`{colors.brand-pink}` — #ff4d8b): ホットピンクのフィーチャー カード表面。シーケンサー/アウトバウンド特集ページ。
• **ブランド ティール** (`{colors.brand-teal}` — #1a3a3a): 深いティール グリーンのフィーチャー カード。多くの場合、注目の価格帯です。
• **ブランド ラベンダー** (`{colors.brand-lavender}` — #b8a4ed): ソフト ラベンダーのフィーチャー カード。
• **Brand Peach** (`{colors.brand-peach}` — #ffb084): 温かみのあるピーチのフィーチャー カード。
• **ブランド オークル** (`{colors.brand-ochre}` — #e8b94a): マスタード/オークルのフィーチャー カードとイラストのアクセント。
• **Brand Mint** (`{colors.brand-mint}` — #a4d4c5): イラストと小さなバッジにミントのアクセント。
• **ブランド コーラル** (`{colors.brand-coral}` — #ff6b5a): ハイライトにコーラルのアクセント。

表面

• **キャンバス** (`{colors.canvas}` — #fffaf0): デフォルトのページフロア。クリームがかった白。
• **Surface Soft** (`{colors.surface-soft}` — #faf5e8): フッターと CTA バンドの背景。
• **Surface Card** (`{colors.surface-card}` — #f5f0e0): クリーム色のフィーチャー カード、紹介カード。
• **Surface Strong** (`{colors.surface-strong}` — #ebe6d6): 強調されたバンド用のより強力なクリーム。
• **Surface Dark** (`{colors.surface-dark}` — #0a1a1a): 時折ダーク カード用に使用される、黒に近い濃い青緑色 (レア)。
• **Surface Dark Elevated** (`{colors.surface-dark-elevated}` — #1a2a2a): 強化されたダーク カード。
• **ヘアライン** (`{colors.hairline}` — #e5e5e5): カードと入力の 1 ピクセルの境界線。

テキスト

• **インク** (`{colors.ink}` — #0a0a0a): 見出しと主要テキスト。
• **Body Strong** (`{colors.body-strong}` — #1a1a1a): 本文を強調し、段落をリードします。
• **本文** (`{colors.body}` — #3a3a3a): デフォルトの実行テキスト。
• **ミュート** (`{colors.muted}` — #6a6a6a): 小見出し、パンくずリスト、フッター本文。
• **ミュート ソフト** (`{colors.muted-soft}` — #9a9a9a): キャプション、細字。
• **プライマリ上 / ダーク上** (`{colors.on-primary}` — #ffffff): プライマリ ボタン上のテキスト + ダーク フィーチャ カード (青緑)。

セマンティック

• **成功** (`{colors.success}` — #22c55e): 成功の状態。
• **警告** (`{colors.warning}` — #f59e0b): 警告コールアウト。
• **エラー** (`{colors.error}` — #ef4444): 検証エラー。

タイポグラフィー

フォントファミリー

システムは、見出しには **Plain Black** (カスタムの丸い表示面)、本文、ナビゲーション、UI には **Inter** を実行します。ウェイト 500 のプレーン ブラック、負の文字間隔で表示ごとに処理