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 인터페이스입니다. 베이스 분위기는 **크림색의 흰색 캔버스**(`` — #fffaf0)로 짙은 남색 잉크 유형과 **3D 렌더링 클레이메이션 일러스트레이션**(산, 마스코트 캐릭터, 복숭아/황토/라벤더 풍경)을 지배적인 브랜드 전압으로 유지합니다. 대부분의 데이터 플랫폼 브랜드가 그리드와 그라데이션을 멋지게 활용하는 반면, Clay는 손으로 만든 듯한 3D 일러스트레이션과 풍부한 단색 기능 카드를 활용합니다.

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

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

**주요 특성:**

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

색상

브랜드 및 액센트

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

표면

• **캔버스** (`` — #fffaf0): 기본 페이지 바닥입니다. 크림색 흰색.
• **부드러운 표면**(`` — #faf5e8): 바닥글 및 CTA 밴드 배경.
• **표면 카드**(`` — #f5f0e0): 크림 기능 카드, 추천 카드.
• **표면 강함**(`` — #ebe6d6): 강조된 밴드를 위한 더 강한 크림.
• **어두운 표면**(`` — #0a1a1a): 가끔 어두운 카드용으로 검정색에 가까운 청록색 색조(드물게).
• **표면이 어두워짐** (`` — #1a2a2a): 높아진 어두운 카드.
• **가는 선** (`` — #e5e5e5): 카드 및 입력의 1px 테두리.

텍스트

• **잉크**(`` — #0a0a0a): 헤드라인 및 기본 텍스트.
• **Body Strong** (`` — #1a1a1a): 본문 강조, 단락 리드.
• **본문**(`` — #3a3a3a): 기본 실행 텍스트.
• **음소거됨**(`` — #6a6a6a): 하위 제목, 탐색경로, 바닥글 본문.
• **음소거 소프트**(`` — #9a9a9a): 캡션, 작은 글씨.
• **기본/어두움**(`` — #ffffff): 기본 버튼의 텍스트 + 어두운 기능 카드(청록색).

의미

• **성공**(`` — #22c55e): 성공 상태.
• **경고** (`` — #f59e0b): 경고 문구.
• **오류**(`` — #ef4444): 유효성 검사 오류.

타이포그래피

글꼴군

시스템은 헤드라인에 **Plain Black**(맞춤형 둥근 표시면)을 실행하고 본문, 탐색 및 UI에 **Inter**를 실행합니다. 음수 문자 간격이 있는 무게 500의 일반 검정색이 모든 디스플레이 헤드라인을 처리합니다. Inter가 나머지를 처리합니다. 대체 스택은 두 가지 모두에 대해 `Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif`을 수행합니다.

계층

| 토큰 | 사이즈 | 무게 | 라인 높이 | 문자 간격 | |

사용

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

| _`` | 72px | 500 | 1.0 | -2.5px | 홈페이지 h1("고유 데이터로 시장 진출") — 일반 검정색 |

| _`` | 56px | 500 | 1.05 | -2px | 섹션 헤드 — 일반 검정색 |

| _`` | 40px | 500 | 1.1 | -1픽셀 | 하위 섹션 제목, 제품 이름 |

| _`` | 32px | 500 | 1.15 | -0.5px | CTA 밴드 헤드, 기능 카드 제목 |

| _`` | 24px | 600 | 1.3 | -0.3px | 가격 계획 이름, 더 큰 기능 제목 |

| _`` | 18px | 600 | 1.4 | 0 | 카드 제목, 소개 단락 |

| _`` | 16px | 600 | 1.4 | 0 | 작은 카드 제목, 목록 라벨 |

| _`` | 16px | 400 | 1.55 | 0 | 기본 실행 텍스트 |

| _`` | 14px | 400 | 1.55 | 0 | 바닥글 본문, 작은 글씨 |

| _`` | 13px | 500 | 1.4 | 0 | 배지 라벨, 캡션 |

| _`` | 12px | 600 | 1.4 | 1.5픽셀 | 섹션 라벨, '추천' 배지 |

| _`` | 14px | 600 | 1.0 | 0 | 표준 버튼 라벨 |

| _`` | 14px | 500 | 1.4 | 0 | 상단 탐색 메뉴 항목 |

원칙

무게 500 + 음수 문자 간격의 일반 검정색이 브랜드 목소리입니다. 무게를 700으로 늘리는 것은 과격한 것으로 읽힙니다. 서체의 둥근 문자는 더 대담한 무게감으로 인해 따뜻함을 더해줍니다.

본체 대 디스플레이 분할은 기능적입니다. 일반 검정색 순간(헤드라인)은 일반 검정색, 기타 모든 것(실행 텍스트, UI, 버튼)은 Inter입니다. 이들을 혼합하는 것은 시스템 위반입니다.

글꼴 대체에 대한 참고사항

일반 검정색을 사용할 수 없는 경우 문자 간격 -0.05em의 무게 500의 **Inter**가 사용 가능한 근사치입니다. **Söhne Breit** 무게 기준 Buch는 라이센스가 있는 경우 대안이 됩니다. **Recoleta** 무게 500은 비슷한 둥근 디스플레이의 따뜻함을 전달합니다.

레이아웃

간격 시스템

• **기본 단위:** 4px.
• **토큰:** `` 4px · `` 8px · `` 12px · `` 16px · `` 24px · `` 32px · `` 48px · `` 96px.
• **섹션 패딩:** ``(96px) 주요 편집 밴드 사이.
• **카드 내부 패딩:** 기능 카드 및 가격 계층의 경우 ``(32px); ``(24px) 고객 평가 및 제품 모형 카드용.

그리드 및 컨테이너

• **최대 콘텐츠 너비:** 중앙 중심 ~1280px.
• **편집 본문:** 단일 12열 그리드; Hero는 종종 7/5 분할을 사용합니다(h1 왼쪽, 그림 오른쪽).
• **기능 카드 그리드:** 데스크톱에서 3업, 태블릿에서 2업, 모바일에서 1업.
• **가격표:** 데스크톱에서는 3~4위, 모바일에서는 1위입니다.

공백 철학

Clay는 크고 둥근 디스플레이 헤드라인과 풍부한 기능 카드 주위에 넉넉한 공백을 사용합니다. 크림색 캔버스 + 컬러 카드 + 3D 일러스트레이션은 경쟁 데이터 플랫폼 사이트에는 없는 유쾌한 따뜻함을 만들어냅니다.

고도 및 깊이

| 레벨 | 치료 | |

사용

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

| 플랫 | 그림자 없음, 테두리 없음 | 본문 섹션, 상단 탐색, 히어로 |

| 부드러운 헤어라인 | 1px `` 테두리 | 입력, 작은 콘텐츠 카드 |

| 포화 카드 | 브랜드 핑크/청록색/라벤더/복숭아/황토색 채우기 — 그림자 없음 | 기능 카드 |

| 크림 카드 | `` 배경 — 그림자 없음 | 추천서, 보조 카드 |

| 미묘한 그림자 | 낮은 알파의 희미한 그림자 | 마우스 오버 상태(드물게) |

시스템은 무거운 그림자를 사용하지 않습니다. 깊이감은 크림색 캔버스와 밝은 기능 카드 사이의 포화된 색상 대비에서 비롯됩니다.

장식적 깊이

• **3D 클레이메이션 일러스트레이션** — 손으로 만든 3D 스타일로 렌더링된 산, 캐릭터, 마스코트. 브랜드에서 가장 잘 알려진 깊이 요소입니다. 토큰이 아닙니다. 이는 일러스트 자산입니다.
• **마스코트 캐릭터**는 기능 카드 및 CTA에서 인라인 그림으로 표시됩니다.

도형

경계 반경 배율

| 토큰 | 가치 | |

사용

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

| _`` | 6픽셀 | 작은 배지, 드롭다운 항목 |

| _`` | 8픽셀 | 작은 버튼, 헤어라인 테두리 액센트 |

| _`` | 12px | 표준 CTA 버튼, 텍스트 입력 |

| _`` | 16px | 콘텐츠 카드, 추천 카드, 가격 책정 등급 |

| _`` | 24px | 기능 카드(포화 상태의 브랜드 색상 카드) |

| _`` | 9999px | 카테고리 탭, 배지 알약 |

| _`` | 9999px / 50% | 아바타, 아이콘 버튼 |

구성요소

상단 탐색

_**`top-nav`** — 크림색 탐색 모음이 상단에 고정되었습니다. 높이 64px, `` 배경. 왼쪽에는 Clay 로고 + 워드마크가 있고, 기본 수평 메뉴(제품, 솔루션, 리소스, 가격, 고객) 중앙, 오른쪽 클러스터에는 "로그인" + "무료 체험" ``이 있습니다. ``(Inter 14px / 500).

의 메뉴 항목

버튼

**`button-primary`** — 배경 ``(검은색에 가까움), 텍스트 ``(흰색), 유형 ``(간 14px/600), 패딩 12px × 20px, 높이 44px, 반올림 ``(12px).

**`button-secondary`** — 가는선 윤곽선이 있는 크림색 버튼. 배경 ``, 텍스트 ``, 1px 가는선 테두리.

**`button-on-color`** — 포화된 브랜드 색상 기능 카드 위에 사용되는 흰색 버튼입니다. 기본과 동일한 모양이지만 반전되었습니다(흰색 배경, 잉크 텍스트).

_**`button-text-link`** — 인라인 텍스트 버튼, 배경 없음. "로그인" 및 인라인 링크 CTA에 사용됩니다.

_**`text-link`** — 밑줄이 있는 ``의 인라인 본문 링크.

카드 및 용기

_**`hero-band`** — 7-5 그리드가 있는 크림 캔버스 영웅: h1 + 하위 제목 + 왼쪽의 버튼 행, 오른쪽의 3D 클레이메이션 일러스트레이션. 수직 패딩 `` (96px).

**`hero-illustration-card`** — 3D 클레이메이션 일러스트레이션(산, 마스코트 캐릭터, 추상 모양)이 포함된 오른쪽 유물. 배경 ``, 반올림 ``(24px). 그림은 인공물입니다.

**`feature-card-pink`** / **`feature-card-teal`** / **`feature-card-lavender`** / **`feature-card-peach`** / **`feature-card-ochre`** — 포화된 단색 기능 카드. 배경은 변형마다 다릅니다. 반올림 ``(24px); 패딩 ``(32px). 각 카드에는 ``의 h3, 본문 설명, 제품 UI 조각 또는 마스코트 그림이 포함되어 있습니다. 분홍색과 청록색 카드에서는 텍스트 색상이 ``(흰색)으로 바뀌고 라벤더/복숭아색/황토색 카드에서는 ``(어두움)으로 바뀝니다(밝은 채도는 어두운 텍스트에 대비가 충분합니다).

_**`feature-card-cream`** — ``의 하위 키 기능 카드 변형입니다. 채도가 높은 색상을 보장하지 않는 덜 강조된 기능에 사용됩니다.

**`product-mockup-card`** — 실제 Clay 제품 UI(Claygent 에이전트 실행, 시퀀서 흐름, CRM 강화 테이블)를 보여주는 카드입니다. 가는선 테두리가 있는 배경 ``, 둥근 ``, 패딩 ``(24px).

**`testimonial-card`** — 고객 견적 카드. 배경 ``(크림), 둥근 ``, 패딩 ``(24px). 맨 윗줄에는 아바타 + 이름 + 역할이 있습니다. 아래는 ``.

에 사용후기가 있습니다.

**`pricing-tier-card`** — 표준 등급 카드. 헤어라인이 있는 배경 ``, 둥근 ``, 패딩 ``(32px).

**`pricing-tier-card-featured`** — 추천 계층이 ``(짙은 청록색)으로 변경됩니다. 청록색 표면이 주요 신호입니다.

**`expert-card`** — /experts 페이지에서 사용됩니다. 헤어라인이 있는 배경 ``, 둥근 ``, 패딩 ``. 상단에는 아바타, 전문가 이름, 전문 분야 및 '도서 세션' 링크가 표시됩니다.

입력 및 양식

**`text-input`** — 배경 ``, 텍스트 ``, 유형 ``, 반올림 ``(12px), 패딩 12px × 16px, 높이 44px. 가는선 테두리 1px.

**`text-input-focused`** — 강조를 위해 테두리가 잉크로 두꺼워집니다.

탭/배지

_**`category-tab`** + **`category-tab-active`** — 하위 탐색 메뉴에 알약 모양 탭이 있습니다. 비활성: 투명 + 음소거된 텍스트. 활성: 크림색 카드 배경 + 잉크 텍스트. 패딩 8px × 16px.

**`badge-pill`** — ``(13px/500) 형식의 작은 크림 충전 알약 라벨, 반올림 ``.

CTA/바닥글

**`cta-band-illustrated`** — 앞머리 "오늘 성장 아이디어를 현실로 전환하세요" 밴드. 배경 ``, 반올림 ``, 패딩 80px. ``, 하위 라인 및 ``에 h2를 전달합니다. 일반적으로 마스코트 또는 장면의 3D 일러스트레이션과 쌍을 이룹니다.

_**`footer`** — 크림색 바닥글(대부분의 SaaS 사이트와 달리 짙은 남색이 아님) 배경 ``, 텍스트 ``. 4열 링크 목록. 수직 패딩 80px. 맨 아래에는 수평선 스타일의 3D 산 그림이 있는 경우가 많습니다. Clay의 대표적인 바닥글 산입니다.

해야 할 일과 하지 말아야 할 일

하세요

• 크림색 캔버스(`` — #fffaf0)에 모든 페이지를 고정합니다. 따뜻한 색조는 Clay를 차가운 회색 데이터 사이트와 차별화합니다.
• 3D 클레이메이션 일러스트레이션을 영웅 유물로 사용하세요. 손으로 만든 3D 캐릭터와 산이 브랜드입니다.
• 페이지 전반에 걸쳐 포화된 기능 카드를 순환합니다(분홍색 → 청록색 → 라벤더색 → 복숭아색 → 황토색 → 크림색). 같은 색상을 연속으로 두 번 반복하는 것은 리듬을 벗어난 것으로 읽힙니다.
• 모든 디스플레이 헤드라인에 음수 문자 간격이 있는 무게 500의 일반 검정색을 사용하세요.
• 포화 기능 카드 내에 제품 UI 조각을 표시합니다. 브랜드 전압은 추상적인 것이 아니라 제품 중심입니다.
• 크림색 바닥글을 사용하세요(어둡지 않음). Clay는 표준적인 어두운 바닥 SaaS 템플릿이 아닌 따뜻한 크림으로 페이지를 의도적으로 닫습니다.
• ``(96px) 수직 리듬으로 모든 밴드를 고정하세요.

하지 마세요

• 캔버스에 쿨 그레이를 사용하지 마세요. 크림틴트는 협의 불가입니다.
• 7번째 브랜드 색상 카드를 사용하지 마세요. 6색 팔레트는 충분히 포화 상태입니다.
• 500을 넘는 무게를 굵은 글씨로 표시하지 마세요. 700의 일반 검정색은 과장된 것으로 읽혀집니다.
• 동일한 브랜드 색상 카드를 두 번 연속으로 반복하지 마세요.
• 클레이메이션 일러스트레이션을 평면 벡터 아트로 대체하지 마세요. 손으로 만든 3D 캐릭터가 바로 브랜드의 목소리입니다.
• 어두운 바닥글을 사용하지 마세요. 크림색 바닥글은 시스템의 따뜻한 속도의 일부입니다.
• 시스템이 이미 인코딩한 것 이상으로 마우스 오버 상태 스타일을 추가하지 마세요.

반응적 행동

중단점

| 이름 | 폭 | 주요 변경 사항 |

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

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

| 태블릿 | 768~1024px | 상단 탐색이 강화됩니다. 기능 카드 2개; 2업 가격 |

| 데스크탑 | 1024~1440px | 전체 상단 탐색; 3업 기능 카드; 3업 가격 책정 등급 |

| 와이드 | > 1440px | 더 많은 호흡 공간을 갖춘 데스크탑과 동일합니다. 최대 콘텐츠 1280px |

터치 대상

• `` 최소 44 × 44px(WCAG AAA와 일치).
• `` 높이는 44픽셀입니다.

축소 전략

• 상단 탐색 메뉴가 < 768px.
에서 햄버거로 접힙니다.
• Hero 7-5 그리드 → 모바일의 단일 열.
• 기능 카드 그리드는 크기를 조정하는 대신 열을 줄입니다.
• 포화 기능 카드는 모든 중단점에서 색상 채우기를 유지합니다.
• 가격 등급 카드는 4 → 2 → 1로 축소됩니다.

반복 가이드

1. 한 번에 하나의 구성 요소에만 집중하세요. YAML 키(``, ``)를 참조합니다.

2. 기능에 적합한 브랜드 색상 카드를 선택하세요. 아웃바운드/시퀀서의 경우 분홍색, 엔터프라이즈/특집의 경우 청록색, AI 에이전트 제품의 경우 라벤더, 일반 SaaS 따뜻함의 경우 복숭아, 커뮤니티/전문가의 경우 황토색입니다.

3. 기존 구성 요소의 변형(`-active`, `-disabled`)은 별도의 항목으로 표시됩니다.

4. 어디에서나 ``을 사용하세요. 16진수 인라인은 사용하지 마세요.

5. 문서에 마우스를 올리지 마세요.

6. 디스플레이 헤드라인은 문자 간격이 음수인 일반 검정색 500으로 유지됩니다. 바디 스테이 인터 400.

7. 크림색 팔레트는 시스템 계약입니다. 어두운 바닥글을 추가하지 마세요.

알려진 격차

• Plain Black은 Clay에 라이선스가 부여되었으며 공개 웹 글꼴로 사용할 수 없습니다. 음수 문자 간격을 갖는 가중치 500이 가장 가까운 대체물입니다.
• 3D 클레이메이션 일러스트레이션은 시스템 토큰이 아닌 위탁 자산입니다. 페이지별로 렌더링됩니다.
• 마스코트 캐릭터(사이트 전반에 걸쳐 반복되는 명명된 캐릭터)는 일러스트 자산입니다. 정확한 계보와 이름은 토큰으로 공식화되지 않습니다.
• 애니메이션 및 전환 타이밍(스크롤 시 3D 그림 시차, 기능 카드 시작 애니메이션)은 범위에 포함되지 않습니다.
• __CODEBCK_693___ 이후의 양식 유효성 검사 상태는 추출되지 않습니다.
• 실제 Clay 제품 표면(인앱 데이터 테이블, 수식 편집기, 에이전트 빌더)은 마케팅 사이트와 일부 토큰을 공유하지만 범위를 벗어나는 많은 제품별 구성요소를 추가합니다.

概要

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

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

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

**主な特徴:**

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

色

ブランドとアクセント

• **プライマリ** (`` — #0a0a0a): すべてのプライマリ CTA、h1/h2 インク タイプ。わずかに暖かみのあるほぼ黒。
• **ブランド ピンク** (`` — #ff4d8b): ホットピンクのフィーチャーカード表面。シーケンサー / アウトバウンド機能ページ。
• **ブランド ティール** (`` — #1a3a3a): 深いティールグリーンのフィーチャー カード。 多くの場合、注目の価格帯。
• **ブランド ラベンダー** (`` — #b8a4ed): ソフト ラベンダーのフィーチャー カード。
• **ブランド ピーチ** (`` — #ffb084): 温かみのあるピーチのフィーチャー カード。
• **ブランドオークル** (`` — #e8b94a): マスタード/オークルのフィーチャーカードとイラストのアクセント。
• **ブランド ミント** (`` — #a4d4c5): イラストと小さなバッジにミントのアクセント。
• **ブランド コーラル** (`` — #ff6b5a): ハイライトのコーラル アクセント。

サーフェス

• **キャンバス** (`` — #fffaf0): デフォルトのページフロア。クリーム色がかった白。
• **Surface Soft** (`` — #faf5e8): フッターと CTA バンドの背景。
• **表面カード** (`` — #f5f0e0): クリーム色のフィーチャー カード、紹介カード。
• **表面強力** (`` — #ebe6d6): 強調されたバンド用のより強力なクリーム。
• **サーフェス ダーク** (`` — #0a1a1a): 時折ダーク カード用に使用される、黒に近い濃い青緑色 (レア)。
• **サーフェス ダーク エレベート** (`` — #1a2a2a): エレベート ダーク カード。
• **ヘアライン** (`` — #e5e5e5): カードと入力の 1 ピクセルの境界線。

テキスト

• **インク** (`` — #0a0a0a): 見出しと主要テキスト。
• **強固な本文** (`` — #1a1a1a): 本文を強調し、段落をリードします。
• **本文** (`` — #3a3a3a): デフォルトの実行テキスト。
• **ミュート** (`` — #6a6a6a): 小見出し、パンくずリスト、フッター本文。
• **ミュート ソフト** (`` — #9a9a9a): キャプション、細字。
• **プライマリ / ダーク** (`` — #ffffff): プライマリ ボタンのテキスト + ダーク機能カード (ティール)。

セマンティック

• **成功** (`` — #22c55e): 成功状態。
• **警告** (`` — #f59e0b): 警告コールアウト。
• **エラー** (`` — #ef4444): 検証エラー。

タイポグラフィ

フォント ファミリー

_システムは、見出しには **プレーン ブラック** (カスタムの丸い表示面)、本文、ナビゲーション、UI には **インター** を実行します。ウェイト 500 のプレーン ブラック (負の文字間隔) は、すべての表示見出しを処理します。残りはインテルが処理する。 フォールバック スタックは両方とも `Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif` を実行します。

階層

|トークン |サイズ |重量 |行の高さ |文字間隔 | |

を使用します

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

| `` | 72ピクセル | 500 | 1.0 | -2.5ピクセル |ホームページ h1 (「独自のデータで市場投入」) — プレーン ブラック |

| `` | 56ピクセル | 500 | 1.05 | -2ピクセル |セクションの見出し — 黒無地 |

| `` | 40ピクセル | 500 | 1.1 | -1ピクセル |サブセクションの見出し、製品名 |

| `` | 32ピクセル | 500 | 1.15 | -0.5ピクセル | CTA バンドの責任者、フィーチャー カードのタイトル |

| `` | 24ピクセル | 600 | 1.3 | -0.3ピクセル |価格プラン名、大きな機能タイトル |

| `` | 18ピクセル | 600 | 1.4 | 0 |カードのタイトル、紹介文 |

| `` | 16ピクセル | 600 | 1.4 | 0 |小さなカード タイトル、リスト ラベル |

| `` | 16ピクセル | 400 | 1.55 | 0 |デフォルトの実行テキスト |

| `` | 14ピクセル | 400 | 1.55 | 0 |フッター本文、細字 |

| `` | 13ピクセル | 500 | 1.4 | 0 |バッジのラベル、キャプション |

| `` | 12ピクセル | 600 | 1.4 | 1.5ピクセル |セクション ラベル、「FEATURED」バッジ |

| `` | 14ピクセル | 600 | 1.0 | 0 |標準のボタン ラベル |

| `` | 14ピクセル | 500 | 1.4 | 0 |トップナビゲーション メニュー項目 |

原則

ウェイト 500 のプレーン ブラック + 負の文字間隔がブランドの声です。体重 700 にすると大げさだと思われます。書体の丸みを帯びた文字は、大胆な太さによって平坦になってしまう暖かさを加えます。

本体とディスプレイの分割は機能します。プレーン ブラックの瞬間 (見出し) にはプレーン ブラック、その他すべて (実行中のテキスト、UI、ボタン) にはインターが使用されます。これらを混在させるとシステム違反になります。

フォントの代替に関する注意

無地の黒が使用できない場合は、ウェイト 500、文字間隔 -0.05em の **Inter** が使用可能な近似値となります。 **Söhne Breit** の重量 Buch は、ライセンスがあれば代替品となります。重量 500 の **Recoleta** は、同様の丸みを帯びたディスプレイの暖かさを伝えます。

レイアウト

間隔システム_

• **基本単位:** 4px.
• **トークン:** `` 4px · `` 8px · `` 12px · `` 16px · `` 24px · `` 32px · `` 48px · `` 96px.
• **セクション パディング:** 主要な編集バンド間の `` (96 ピクセル)。
• **カードの内部パディング:** フィーチャー カードと価格帯の場合は `` (32 ピクセル)。 `` (24px) お客様の声および製品モックアップ カード用。

グリッドとコンテナ

• **コンテンツの最大幅:** 中央に最大 1280 ピクセル。
• **編集本文:** 単一の 12 列グリッド。ヒーローは 7/5 分割 (h1 左、イラスト右) をよく使用します。
• **フィーチャー カード グリッド:** デスクトップでは 3 アップ、タブレットでは 2 アップ、モバイルでは 1 アップ。
• **価格グリッド:** デスクトップでは 3 ～ 4 アップ、モバイルでは 1 アップ。

ホワイトスペースの哲学

Clay は、大きな丸い表示見出しと飽和した機能カードの周囲に十分な空白を使用します。 クリーム色のキャンバス + カラー カード + 3D イラストは、競合するデータ プラットフォーム サイトにはない遊び心のある温かみを生み出します。

標高と深さ

|レベル |治療 | |

を使用します

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

|フラット |影も境界線もありません |本文セクション、トップ ナビゲーション、ヒーロー |

|柔らかいヘアライン | 1px `` 境界線 |入力、小さなコンテンツ カード |

|飽和状態のカード |ブランド ピンク/ティール/ラベンダー/ピーチ/オークルの塗りつぶし — 影なし |フィーチャー カード |

|クリームカード | `` 背景 — 影なし |お客様の声、二次カード |

|微妙なドロップシャドウ |低アルファでのかすかな影 |ホバー上昇状態 (まれ) |

_システムは濃い影を使用しません。深みは、クリーム色のキャンバスと明るいフィーチャ カードの間の飽和した色のコントラストから生まれます。

装飾の深さ

• **3D クレイメーション イラスト** — 手作りの 3D スタイルでレンダリングされた山、キャラクター、マスコット。ブランドで最も認知されている深さの要素。トークンではありません。これらはイラスト付きのアセットです。
• **マスコット キャラクター** は、機能カードおよび CTA のインライン図として表示されます。

図形

境界線の半径スケール

|トークン |値 | |

を使用します

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

| `` | 6ピクセル |小さなバッジ、ドロップダウン項目 |

| `` | 8ピクセル |小さなボタン、ヘアラインボーダーのアクセント |

| `` | 12ピクセル |標準 CTA ボタン、テキスト入力 |

| `` | 16ピクセル |コンテンツ カード、紹介カード、価格帯 |

| `` | 24ピクセル |フィーチャー カード (飽和したブランド カラー カード) |

| `` | 9999ピクセル |カテゴリ タブ、バッジの錠剤 |

| `` | 9999ピクセル / 50% |アバター、アイコン ボタン |

コンポーネント

トップナビゲーション

**`top-nav`** — 上部に固定されたクリーム色のナビゲーション バー。高さ 64 ピクセル、__CODEBCK_614___ 背景。左側に Clay のロゴ + ワードマーク、中央にプライマリ水平メニュー (製品、ソリューション、リソース、価格、顧客)、右側のクラスターに「サインイン」+「無料試用」__CODEBCK_615___ が表示されます。 `` (Inter 14px / 500).

のメニュー項目

ボタン

_**`button-primary`** — 背景 `` (黒に近い)、テキスト `` (白)、タイプ `` (インター 14px / 600)、パディング 12px × 20px、高さ 44px、丸め `` (12 ピクセル).

**`button-secondary`** — ヘアラインの輪郭を持つクリーム色のボタン。背景__CODEBCK_623___、テキスト__CODEBCK_624___、1ピクセルのヘアライン枠。

_**`button-on-color`** — 飽和したブランドカラーのフィーチャーカードの上に白いボタンが使用されています。プライマリと同じ形状ですが、反転されています (白い背景、インクのテキスト)。

**`button-text-link`** — インライン テキスト ボタン、背景なし。 「サインイン」およびインライン リンク CTA に使用されます。

**`text-link`** — `` のインライン本文リンクに下線を付けます。

カードとコンテナ

_**`hero-band`** — 7 ～ 5 グリッドのクリーム キャンバス ヒーロー: 左側に h1 + 小見出し + ボタンの列、右側に 3D クレイメーションのイラスト。 垂直パディング `` (96px).

**`hero-illustration-card`** — 3D クレイメーション イラスト (山、マスコット キャラクター、抽象的な形状) を保持する右側のアーティファクト。背景__CODEBCK_632___、角丸__CODEBCK_633___ (24ピクセル)。イラストは成果物です。

**`feature-card-pink`** / **`feature-card-teal`** / **`feature-card-lavender`** / **`feature-card-peach`** / **`feature-card-ochre`** — 飽和した単色のフィーチャー カード。背景はバリエーションごとに異なります。丸みを帯びた__CODEBCK_639___ (24ピクセル);パディング__CODEBCK_640___ (32ピクセル)。各カードには、__CODEBCK_641___ の h3、本文の説明、製品 UI フラグメントまたはマスコットのイラストが含まれています。テキストの色は、ピンクとティールのカードでは `` (白)、ラベンダー/ピーチ/オークルのカードでは `` (ダーク) に切り替わります (明るい彩度は暗いテキストに十分なコントラストを持っています)。

**`feature-card-cream`** — `` の低キー機能カードのバリアント。彩度の高い色を保証しない、あまり強調されない特徴に使用されます。

_**`product-mockup-card`** — 実際の Clay 製品 UI (Claygent エージェントの実行、シーケンサー フロー、CRM エンリッチメント テーブル) を示すカード。背景__CODEBCK_647___、ヘアライン枠、丸みのある__CODEBCK_648___、パディング__CODEBCK_649___ (24ピクセル)。

**`testimonial-card`** — 顧客見積カード。背景__CODEBCK_651___ (クリーム色)、丸い__CODEBCK_652___、パディング__CODEBCK_653___ (24ピクセル)。上の行にはアバター + 名前 + 役割が表示されます。以下は__CODEBCK_654___.

の紹介文です。

_**`pricing-tier-card`** — 標準層カード。背景__CODEBCK_656___、ヘアライン付き、丸みのある__CODEBCK_657___、パディング__CODEBCK_658___ (32ピクセル)。

**`pricing-tier-card-featured`** — 注目の層が `` (濃い青緑) に切り替わります。青緑色の表面が注目の信号です。

**`expert-card`** — /experts ページで使用されます。ヘアライン付きの背景__CODEBCK_662___、丸みのある__CODEBCK_663___、パディング__CODEBCK_664___。上部にアバター、専門家名、専門分野、および「セッションの予約」リンクが表示されます。

入力とフォーム

_**`text-input`** — 背景 ``、テキスト ``、タイプ ``、丸め `` (12 ピクセル)、パディング 12 ピクセル × 16 ピクセル、高さ 44 ピクセル。 1 ピクセルのヘアラインの境界線。

**`text-input-focused`** — 強調するために境界線をインクで太くします。

タブ/バッジ

**`category-tab`** + **`category-tab-active`** — サブナビゲーションの錠剤型のタブ。非アクティブ: 透明 + ミュートされたテキスト。アクティブ: クリーム色のカード背景 + インク テキスト。パディング 8px × 16px.

_**`badge-pill`** — `` (13px / 500)、角丸__CODEBCK_675___.

の小さなクリーム入り錠剤ラベル

CTA / フッター

_**`cta-band-illustrated`** — プレフッター「成長のアイデアを今すぐ現実に」バンド。背景__CODEBCK_677___、角丸__CODEBCK_678___、パディング80ピクセル。 ``、サブライン、__CODEBCK_680___ に h2 が含まれます。通常は、マスコットまたはシーンの 3D イラストと組み合わせられます。

**`footer`** — クリーム色のフッター (ほとんどの SaaS サイトとは異なり、濃いネイビーではありません)。背景__CODEBCK_682___、テキスト__CODEBCK_683___。 4列のリンクリスト。垂直パディング80ピクセル。多くの場合、一番下に地平線風の 3D 山のイラスト (Clay の特徴的なフッター山) が表示されます。

推奨事項と禁止事項

_実行

• クリーム色のキャンバスにすべてのページを固定します (`` — #fffaf0)。 暖色系の色合いにより、Clay は寒色グレーのデータ サイトと区別されます。
• 3D クレイメーション イラストをヒーロー アーティファクトとして使用します。手作りの 3D キャラクターと山がブランドです。
• ピンク→ティール→ラベンダー→ピーチ→オークル→クリームという、飽和した特徴カードをページ全体で循環させます。同じ色を 2 回続けて繰り返すと、リズムが崩れたと見なされます。
• すべての表示見出しに負の文字間隔でウェイト 500 のプレーン ブラックを使用します。
• 飽和した機能カード内に製品 UI フラグメントを表示します。ブランドのボルテージは抽象的なものではなく、製品主導型です。
• クリーム色のフッターを使用します (暗い色ではありません)。 Clay は、標準的なダークフッターの SaaS テンプレートではなく、意図的に暖かいクリームでページを閉じます。
• __CODEBCK_685___ (96 ピクセル) の垂直リズムですべてのバンドをアンカーします。

しないでください

• キャンバスにクールなグレーを使用しないでください。クリーム色の色合いは交渉の余地がありません。
• 7 番目のブランド カラー カードは使用しないでください。 6 色のパレットは十分に飽和しています。
• 500 を超えるウェイトを太字で表示しないでください。700 の黒無地は大げさだと思われます。
• 同じブランドカラーのカードを 2 回続けて繰り返さないでください。
• クレイメーションのイラストをフラットなベクター アートに置き換えないでください。手作りの 3D キャラクターはブランドの声です。
• 暗いフッターを使用しないでください。クリーム色のフッターは、システムのウォームスルー ペーシングの一部です。
• システムが既にエンコードしているものを超えてホバー状態のスタイルを追加しないでください。

応答動作

ブレークポイント_

|名前 |幅 |主な変更点 |

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

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

|タブレット | 768–1024ピクセル |上部のナビゲーションが引き締められます。フィーチャーカード 2 アップ。価格設定 2 アップ |

|デスクトップ | 1024–1440ピクセル |完全なトップナビゲーション。 3アップのフィーチャーカード。 3 段階の価格帯 |

|ワイド | > 1440ピクセル |デスクトップと同じですが、より広いスペースを備えています。最大コンテンツ 1280px |

タッチターゲット

• `` 最小 44 × 44 ピクセル (WCAG AAA と一致)。
• `` 高さは 44 ピクセルです。

戦略の崩壊

• __HTMLTAG_498___ で上部のナビゲーションが折りたたまれてハンバーガーになります
• Hero 7-5 グリッド → モバイルでは単一列。
• フィーチャー カード グリッドは、拡大縮小ではなく列を削減します。
• 飽和した機能カードは、すべてのブレークポイントで色の塗りつぶしを保持します。
• 価格帯カードは 4 → 2 → 1 に崩壊します。

反復ガイド

1.一度に 1 つのコンポーネントに焦点を当てます。 YAML キー (``、__CODEBCK_689___) を参照します。

2.機能に適切なブランド カラー カードを選択します。ピンクはアウトバウンド/シーケンサー、ティールはエンタープライズ/注目の製品、ラベンダーは AI エージェント製品、ピーチは一般的な SaaS の暖かさ、黄土色はコミュニティ/エキスパートに対応します。

3.既存のコンポーネントのバリアント (`-active`、__CODEBCK_691___) は、別個のエントリとして存在します。

4.どこでも `` を使用します。16 進数をインライン化しないでください。

5.決してホバーを文書化しないでください。

6.見出しの表示は、文字間隔が負の Plain Black 500 のままです。 ボディは Inter 400 のままです。

7.クリーム全体のパレットはシステム規約です。暗いフッターを追加しないでください。

既知のギャップ

• Plain Black は Clay にライセンスされており、パブリック Web フォントとしては利用できません。負の文字間隔を持つインターウェイト 500 が最も近い代替品です。
• 3D クレイメーション イラストは、システム トークンではなく委託されたアセットであり、ページごとにレンダリングされます。
• _マスコット キャラクター (サイト内で繰り返し登場する名前付きキャラクター) はイラスト付きのアセットです。正確な系統と名前はトークンで形式化されていません。
• アニメーションと遷移のタイミング (スクロール時の 3D イラストの視差、フィーチャー カードの入口アニメーション) は対象外です。
• __CODEBCK_693___ を超えるフォーム検証状態は抽出されません。
• 実際の Clay 製品サーフェス (アプリ内データ テーブル、数式エディター、エージェント ビルダー) は、マーケティング サイトと一部のトークンを共有しますが、範囲外の多くの製品固有のコンポーネントが追加されます。

Accessibility Considerations

Clay's color system, anchored by #0a0a0a, must balance brand identity with sufficient contrast for readability. The documented palette suggests an awareness of accessibility needs — with dedicated neutral tones for body text and UI elements. When implementing design tokens from this system, designers should verify contrast ratios for all text-on-color combinations, particularly for the brand color used as a button or link background. WCAG 2.1 AA compliance (4.5:1 for normal text, 3:1 for large text) should guide any production implementation.

Accessibility Considerations

Clay's color system, anchored by #0a0a0a, must balance brand identity with sufficient contrast for readability. The documented palette suggests an awareness of accessibility needs — with dedicated neutral tones for body text and UI elements. When implementing design tokens from this system, designers should verify contrast ratios for all text-on-color combinations, particularly for the brand color used as a button or link background. WCAG 2.1 AA compliance (4.5:1 for normal text, 3:1 for large text) should guide any production implementation.

Accessibility Considerations

Clay's color system, anchored by #0a0a0a, must balance brand identity with sufficient contrast for readability. The documented palette suggests an awareness of accessibility needs — with dedicated neutral tones for body text and UI elements. When implementing design tokens from this system, designers should verify contrast ratios for all text-on-color combinations, particularly for the brand color used as a button or link background. WCAG 2.1 AA compliance (4.5:1 for normal text, 3:1 for large text) should guide any production implementation.

Related Design Systems

Explore similar design languages from the same category:

• Sanity Design System
• Vercel Design System
• Linear Design System
• Resend Design System