Clay

---
version: alpha
name: "Clay"
description: "Clay 的 DESIGN.md 中文参考模板，保留原始 design token 与专业术语，覆盖 color system、typography、layout、components、motion 与 interaction states。"
language: zh-CN
sourceLanguage: en
---

## 概览
Clay.com 是 GTM-data 类别中最 playful 的 B2B SaaS interface。基础氛围是 **cream-tinted white canvas** (`{colors.canvas}` — #fffaf0)，承载 dark-navy ink type，并以 **3D-rendered claymation illustrations**（山脉、mascot character、peach/ochre/lavender landscape）作为主导 brand voltage。大多数 data-platform 品牌用 grid 和 gradient 保持冷静，而 Clay 强烈转向看起来手工制作的 3D illustration 和 saturated single-color feature card。

Type voice 使用 **Plain Black**（或以 Inter weight 500-600 替代），这是一套定制 rounded display face，用于非常大的字号（72px hero），并带 negative letter-spacing。Body type 使用标准字重的 Inter。Display weight 保持 500，从不更粗；字体本身的 rounded character 已经提供温暖感，不需要靠加粗实现。

Component voltage 来自 6 色 palette 中的 **saturated single-color feature cards**：hot pink、deep teal、lavender、peach、ochre 和 cream-card。每张 card 都以小比例展示 product UI fragment：Claygent agent run、sequencer flow、CRM enrichment output。Colored card 就是每个长滚动页面上的 primary visual element。

**Key Characteristics:**
- Cream-tinted white canvas（`{colors.canvas}` — #fffaf0）。这种温暖感让 Clay 区别于 cool-gray 竞品站点。
- Dark navy/black primary CTA（`{colors.primary}` — #0a0a0a）。Button 使用 `{rounded.md}` (12px)；friendly modern，但不是 pill。
- 6 色 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 illustration（mountain、character、abstract shape）作为 full-bleed hero artifact，是品牌最可识别的 visual element。
- 定制 rounded Plain Black display typeface，weight 500，display size 使用 -1 到 -2.5px letter-spacing。
- Border radius 宽松：button + input 使用 `{rounded.md}` (12px)，content card 使用 `{rounded.lg}` (16px)，feature card 使用 `{rounded.xl}` (24px)。更大的 radius 与 rounded display type 的气质匹配。
- Product UI fragment 以小比例嵌入 colored card：agent run log、sequencer flow、enrichment result。
- 主要 band 之间使用 `{spacing.section}` (96px) section rhythm。
- Footer 是 cream-tinted（`{colors.surface-soft}`）；Clay 不使用 dark footer。即使 closing band 也保持 warm-light。

## Colors

### Brand & Accent
- **Primary** (`{colors.primary}` — #0a0a0a): 所有 primary CTA、h1/h2 ink type。带轻微温暖感的 near-black。
- **Brand Pink** (`{colors.brand-pink}` — #ff4d8b): Hot-pink feature card surface。用于 Sequencer / outbound feature page。
- **Brand Teal** (`{colors.brand-teal}` — #1a3a3a): Deep teal-green feature card。常作为 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 和 illustration accent。
- **Brand Mint** (`{colors.brand-mint}` — #a4d4c5): Illustration 和 small badge 上的 mint accent。
- **Brand Coral** (`{colors.brand-coral}` — #ff6b5a): 用于 highlight 的 coral accent。

### Surface
- **Canvas** (`{colors.canvas}` — #fffaf0): 默认 page floor。Cream-tinted white。
- **Surface Soft** (`{colors.surface-soft}` — #faf5e8): Footer 和 CTA-band background。
- **Surface Card** (`{colors.surface-card}` — #f5f0e0): Cream feature card、testimonial card。
- **Surface Strong** (`{colors.surface-strong}` — #ebe6d6): 更强的 cream，用于 emphasized band。
- **Surface Dark** (`{colors.surface-dark}` — #0a1a1a): 偏 dark teal 的 near-black，用于偶发 dark card（少见）。
- **Surface Dark Elevated** (`{colors.surface-dark-elevated}` — #1a2a2a): Elevated dark card。
- **Hairline** (`{colors.hairline}` — #e5e5e5): Card 和 input 上的 1px border。

### Text
- **Ink** (`{colors.ink}` — #0a0a0a): Headline 和 primary text。
- **Body Strong** (`{colors.body-strong}` — #1a1a1a): Emphasized body、lead paragraph。
- **Body** (`{colors.body}` — #3a3a3a): 默认 running-text。
- **Muted** (`{colors.muted}` — #6a6a6a): Sub-heading、breadcrumb、footer body。
- **Muted Soft** (`{colors.muted-soft}` — #9a9a9a): Caption、fine-print。
- **On Primary / On Dark** (`{colors.on-primary}` — #ffffff): Primary button + dark feature card（teal）上的文本。

### Semantic Colors
- **Success** (`{colors.success}` — #22c55e): Success state。
- **Warning** (`{colors.warning}` — #f59e0b): Warning callout。
- **Error** (`{colors.error}` — #ef4444): Validation error。

## Typography

### Font Family
系统使用 **Plain Black**（定制 rounded display face）处理 headline，使用 **Inter** 处理 body、navigation 和 UI。Plain Black 以 weight 500 和 negative letter-spacing 承载每个 display headline；Inter 处理其它一切。两者的 fallback stack 都是 `Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif`。

### Hierarchy

| Token | Size | Weight | Line Height | Letter Spacing | 用途 |
|---|---|---|---|---|---|
| `{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 head — Plain Black |
| `{typography.display-md}` | 40px | 500 | 1.1 | -1px | Sub-section head、product name |
| `{typography.display-sm}` | 32px | 500 | 1.15 | -0.5px | CTA-band head、feature card title |
| `{typography.title-lg}` | 24px | 600 | 1.3 | -0.3px | Pricing plan name、更大的 feature title |
| `{typography.title-md}` | 18px | 600 | 1.4 | 0 | Card title、intro paragraph |
| `{typography.title-sm}` | 16px | 600 | 1.4 | 0 | Small card title、list label |
| `{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 label、caption |
| `{typography.caption-uppercase}` | 12px | 600 | 1.4 | 1.5px | Section label、"FEATURED" badge |
| `{typography.button}` | 14px | 600 | 1.0 | 0 | Standard button label |
| `{typography.nav-link}` | 14px | 500 | 1.4 | 0 | Top-nav menu item |

### Principles
Plain Black weight 500 + negative letter-spacing 就是 brand voice。改成 weight 700 会显得夸张；字体本身的 rounded character 提供温暖感，更粗字重反而会把它压平。

Body-vs-display 的分工是功能性的：Plain Black 用于 Plain Black moment（headline），Inter 用于其它一切（running text、UI、button）。混用会违反系统。

### Font Substitutes
如果 Plain Black 不可用，**Inter** weight 500 并设置 -0.05em letter-spacing 是可用近似。若有授权，**Söhne Breit** weight Buch 可作为替代。**Recoleta** weight 500 也有相近的 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:** 主要 editorial band 之间使用 `{spacing.section}` (96px)。
- **Card internal padding:** Feature card 和 pricing tier 使用 `{spacing.xl}` (32px)；testimonial 和 product mockup card 使用 `{spacing.lg}` (24px)。

### Grid & Container
- **Max content width:** 居中约 1280px。
- **Editorial body:** 单一 12-column grid；hero 通常使用 7/5 split（h1 在左，illustration 在右）。
- **Feature card grids:** Desktop 3-up，tablet 2-up，mobile 1-up。
- **Pricing grid:** Desktop 3-4 up，mobile 1-up。

### Whitespace Philosophy
Clay 在大号 rounded display headline 和 saturated feature card 周围使用宽松 whitespace。Cream canvas + colored card + 3D illustration 创造了竞品 data-platform site 缺少的 playful warmth。

## Elevation & Depth

| Level | Treatment | 用途 |
|---|---|---|
| Flat | 无 shadow、无 border | Body section、top nav、hero |
| Soft hairline | 1px `{colors.hairline}` border | Input、小型 content card |
| Saturated card | Brand pink/teal/lavender/peach/ochre fill，无 shadow | Feature card |
| Cream card | `{colors.surface-card}` background，无 shadow | Testimonial、secondary card |
| Subtle drop shadow | 低 alpha faint shadow | Hover-elevated state（少见） |

系统不使用 heavy shadow。Depth 来自 cream canvas 与 bright feature card 之间的 saturated color contrast。

### Decorative Depth
- **3D claymation illustrations** — 山脉、角色、mascot 以手工感 3D style 渲染。品牌最可识别的 depth element。它不是 token，而是 illustrated asset。
- **Mascot characters** 作为 inline figure 出现在 feature card 和 CTA 中。

## Shapes

### Border Radius Scale

| Token | Value | 用途 |
|---|---|---|
| `{rounded.xs}` | 6px | Small badge、dropdown item |
| `{rounded.sm}` | 8px | Small button、hairline-border accent |
| `{rounded.md}` | 12px | Standard CTA button、text input |
| `{rounded.lg}` | 16px | Content card、testimonial card、pricing tier |
| `{rounded.xl}` | 24px | Feature card（saturated brand-color card） |
| `{rounded.pill}` | 9999px | Category tab、badge pill |
| `{rounded.full}` | 9999px / 50% | Avatar、icon button |

## Components

### Top Navigation

**`top-nav`** — 固定在顶部的 cream nav bar。高度 64px，背景为 `{colors.canvas}`。左侧是 Clay logo + wordmark，中间是 primary horizontal menu（Product, Solutions, Resources, Pricing, Customers），右侧 cluster 是 "Sign in" + "Try free" `{component.button-primary}`。Menu item 使用 `{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`** — 带 hairline outline 的 cream button。Background `{colors.canvas}`、text `{colors.ink}`、1px hairline border。

**`button-on-color`** — 用于 saturated brand-color feature card 上的 white button。Shape 与 primary 相同，但反转为 white background、ink text。

**`button-text-link`** — Inline text button，无 background。用于 "Sign in" 和 inline link CTA。

**`text-link`** — `{colors.ink}` 中带 underline 的 inline body link。

### Cards & Containers

**`hero-band`** — Cream-canvas hero，采用 7-5 grid：左侧是 h1 + sub-headline + button row，右侧是 3D claymation illustration。Vertical padding `{spacing.section}` (96px)。

**`hero-illustration-card`** — 右侧 artifact，承载 3D claymation illustration（mountain、mascot character、abstract shape）。Background `{colors.surface-soft}`，rounded `{rounded.xl}` (24px)。Illustration 本身就是 artifact。

**`feature-card-pink`** / **`feature-card-teal`** / **`feature-card-lavender`** / **`feature-card-peach`** / **`feature-card-ochre`** — Saturated single-color feature card。Background 随 variant 变化；rounded `{rounded.xl}` (24px)；padding `{spacing.xl}` (32px)。每张 card 包含 `{typography.title-md}` 的 h3、body description，以及 product UI fragment 或 mascot illustration。Pink 和 teal card 上 text color 切换为 `{colors.on-dark}`（white），lavender/peach/ochre card 上使用 `{colors.ink}`（dark），因为较浅饱和色对 dark text 有足够 contrast。

**`feature-card-cream`** — `{colors.surface-card}` 上更低调的 feature card variant。用于不需要 saturated color 的次级 feature。

**`product-mockup-card`** — 展示真实 Clay product UI 的 card（Claygent agent run、sequencer flow、CRM enrichment table）。Background `{colors.canvas}`，带 hairline border，rounded `{rounded.lg}`，padding `{spacing.lg}` (24px)。

**`testimonial-card`** — Customer quote card。Background `{colors.surface-card}` (cream)，rounded `{rounded.lg}`，padding `{spacing.lg}` (24px)。Top row 包含 avatar + name + role；下方是 `{typography.body-md}` 的 testimonial。

**`pricing-tier-card`** — 标准 tier card。Background `{colors.canvas}`，带 hairline，rounded `{rounded.lg}`，padding `{spacing.xl}` (32px)。

**`pricing-tier-card-featured`** — Featured tier 反转为 `{colors.brand-teal}`（deep teal-green）。Teal surface 本身就是 featured signal。

**`expert-card`** — 用于 /experts page。Background `{colors.canvas}`，带 hairline，rounded `{rounded.lg}`，padding `{spacing.lg}`。顶部承载 avatar，随后是 expert name、specialization 和 "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 加粗并变为 ink，以强调 focus。

### Tabs / Badges

**`category-tab`** + **`category-tab-active`** — Sub-nav 中的 pill-shaped tab。Inactive: transparent + muted text。Active: cream-card background + ink text。Padding 8px × 16px。

**`badge-pill`** — 小型 cream-fill pill label，使用 `{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。包含 `{typography.display-md}` 的 h2、sub-line 和 `{component.button-primary}`，通常搭配 mascot 或场景的 3D illustration。

**`footer`** — Cream-tinted footer（不像大多数 SaaS site 那样使用 dark navy）。Background `{colors.surface-soft}`、text `{colors.body}`。4-column link list。Vertical padding 80px。底部常出现 horizon-style 3D mountain illustration，也就是 Clay signature footer mountain。

## Do's and Don'ts

### Do
- 每个页面都锚定在 cream canvas（`{colors.canvas}` — #fffaf0）上。Warm tint 让 Clay 区别于 cool-gray data site。
- 使用 3D claymation illustration 作为 hero artifact。手工感 3D character 和 mountain 就是品牌。
- 页面中循环使用 saturated feature card：pink → teal → lavender → peach → ochre → cream。连续两次重复同一种颜色会显得节奏错误。
- 每个 display headline 都使用 Plain Black weight 500 和 negative letter-spacing。
- 在 saturated feature card 内展示 product UI fragment。Brand voltage 是 product-driven，而不是 abstract。
- 使用 cream footer（不是 dark）。Clay 有意用 warm cream 收尾页面，而不是标准 dark-footer SaaS template。
- 每个 band 都用 `{spacing.section}` (96px) vertical rhythm 锚定。

### Don't
- 不要给 canvas 使用 cool gray。Cream tint 不可妥协。
- 不要添加第 7 种 brand-color card。6 色 palette 已经足够饱和。
- 不要把 display weight 加粗到 500 以上。Plain Black 700 会显得夸张。
- 不要连续重复同一种 brand-color card。
- 不要用 flat vector art 替代 claymation illustration。手工感 3D character 就是 brand voice。
- 不要使用 dark footer。Cream footer 是系统 warm-throughout pacing 的一部分。
- 不要添加系统已编码之外的 hover state styling。

## Responsive Behavior

### Breakpoints

| Name | Width | 关键变化 |
|---|---|---|
| Mobile | < 768px | Hamburger nav；hero h1 72→36px；hero-illustration-card 下移堆叠；feature grid 1-up；pricing 1-up |
| Tablet | 768–1024px | Top nav 收紧；feature card 2-up；pricing 2-up |
| Desktop | 1024–1440px | Full top-nav；3-up feature card；3-up pricing tier |
| Wide | > 1440px | 与 desktop 相同，但呼吸空间更多；max content 1280px |

### Touch Targets
- `{component.button-primary}` 最小 44 × 44px（符合 WCAG AAA）。
- `{component.text-input}` 高度为 44px。

### Collapsing Strategy
- Top nav 在 < 768px 折叠为 hamburger。
- Hero 7-5 grid 在 mobile 上变为 single-column。
- Feature card grid 通过减少列数响应，而不是缩放。
- Saturated feature card 在每个 breakpoint 都保留 colored fill。
- Pricing tier card 折叠为 4 → 2 → 1。

## Iteration Guide

1. 一次只聚焦一个 component。引用它的 YAML key（`{component.feature-card-pink}`、`{component.pricing-tier-card-featured}`）。
2. 为 feature 选择正确的 brand-color card：outbound/sequencer 用 pink，enterprise/featured 用 teal，AI-agent product 用 lavender，general SaaS warmth 用 peach，community / experts 用 ochre。
3. 现有 component 的 variant（`-active`、`-disabled`）作为独立条目存在。
4. 全部使用 `{token.refs}`，不要 inline hex。
5. 永远不要记录 hover。
6. Display headline 保持 Plain Black 500 + negative letter-spacing。Body 保持 Inter 400。
7. Cream-throughout palette 是系统契约；不要添加 dark footer。

## Known Gaps

- Plain Black 授权给 Clay，不能作为公开 web font 使用；Inter weight 500 + negative letter-spacing 是最接近替代。
- 3D claymation illustration 是 commissioned asset，不是 system token；它们按页面渲染。
- Mascot character（站点中反复出现的命名角色）是 illustrated asset；其精确 lineage 和命名没有以 token 形式正式化。
- Animation 和 transition timing（滚动时 3D illustration parallax、feature card entrance animation）不在范围内。
- `{component.text-input-focused}` 之外的 form validation state 未提取。
- 真实 Clay product surface（in-app data table、formula editor、agent builder）与 marketing site 共享部分 token，但增加了许多 product-specific component，不在范围内。