Clay Design System

---

version: alpha

name: Clay-design-analysis

description: A vibrant claymation-meets-data interface for Clay.com (GTM data-orchestration platform). Anchors on white canvas with dark-navy primary CTAs, custom rounded display type, and saturated single-color feature cards — hot pink, deep teal, lavender, peach, ochre — that punctuate long-scroll explainer pages. Brand voltage comes from 3D-rendered claymation illustrations (mountains, characters, mascots) used as full-bleed hero artifacts and the bright multi-color card surfaces showing product UI fragments.

colors:

primary: "#0a0a0a"

primary-active: "#1f1f1f"

primary-disabled: "#e5e5e5"

ink: "#0a0a0a"

body: "#3a3a3a"

body-strong: "#1a1a1a"

muted: "#6a6a6a"

muted-soft: "#9a9a9a"

hairline: "#e5e5e5"

hairline-soft: "#f0f0f0"

canvas: "#fffaf0"

surface-soft: "#faf5e8"

surface-card: "#f5f0e0"

surface-strong: "#ebe6d6"

surface-dark: "#0a1a1a"

surface-dark-elevated: "#1a2a2a"

on-primary: "#ffffff"

on-dark: "#ffffff"

on-dark-soft: "#a0a0a0"

brand-pink: "#ff4d8b"

brand-teal: "#1a3a3a"

brand-lavender: "#b8a4ed"

brand-peach: "#ffb084"

brand-ochre: "#e8b94a"

brand-mint: "#a4d4c5"

brand-coral: "#ff6b5a"

success: "#22c55e"

warning: "#f59e0b"

error: "#ef4444"

typography:

display-xl:

fontFamily: "Plain Black, Inter, sans-serif"

fontSize: 72px

fontWeight: 500

lineHeight: 1

letterSpacing: -2.5px

display-lg:

fontFamily: "Plain Black, Inter, sans-serif"

fontSize: 56px

fontWeight: 500

lineHeight: 1.05

letterSpacing: -2px

display-md:

fontFamily: "Plain Black, Inter, sans-serif"

fontSize: 40px

fontWeight: 500

lineHeight: 1.1

letterSpacing: -1px

display-sm:

fontFamily: "Plain Black, Inter, sans-serif"

fontSize: 32px

fontWeight: 500

lineHeight: 1.15

letterSpacing: -0.5px

title-lg:

fontFamily: "Inter, sans-serif"

fontSize: 24px

fontWeight: 600

lineHeight: 1.3

letterSpacing: -0.3px

title-md:

fontFamily: "Inter, sans-serif"

fontSize: 18px

fontWeight: 600

lineHeight: 1.4

letterSpacing: 0

title-sm:

fontFamily: "Inter, sans-serif"

fontSize: 16px

fontWeight: 600

lineHeight: 1.4

letterSpacing: 0

body-md:

fontFamily: "Inter, sans-serif"

fontSize: 16px

fontWeight: 400

lineHeight: 1.55

letterSpacing: 0

body-sm:

fontFamily: "Inter, sans-serif"

fontSize: 14px

fontWeight: 400

lineHeight: 1.55

letterSpacing: 0

caption:

fontFamily: "Inter, sans-serif"

fontSize: 13px

fontWeight: 500

lineHeight: 1.4

letterSpacing: 0

caption-uppercase:

fontFamily: "Inter, sans-serif"

fontSize: 12px

fontWeight: 600

lineHeight: 1.4

letterSpacing: 1.5px

button:

fontFamily: "Inter, sans-serif"

fontSize: 14px

fontWeight: 600

lineHeight: 1

letterSpacing: 0

nav-link:

fontFamily: "Inter, sans-serif"

fontSize: 14px

fontWeight: 500

lineHeight: 1.4

letterSpacing: 0

rounded:

xs: 6px

sm: 8px

md: 12px

lg: 16px

xl: 24px

pill: 9999px

full: 9999px

spacing:

xxs: 4px

xs: 8px

sm: 12px

md: 16px

lg: 24px

xl: 32px

xxl: 48px

section: 96px

components:

button-primary:

backgroundColor: "{colors.primary}"

textColor: "{colors.on-primary}"

typography: "{typography.button}"

rounded: "{rounded.md}"

padding: 12px 20px

height: 44px

button-primary-active:

backgroundColor: "{colors.primary-active}"

textColor: "{colors.on-primary}"

rounded: "{rounded.md}"

button-primary-disabled:

backgroundColor: "{colors.primary-disabled}"

textColor: "{colors.muted}"

rounded: "{rounded.md}"

button-secondary:

backgroundColor: "{colors.canvas}"

textColor: "{colors.ink}"

typography: "{typography.button}"

rounded: "{rounded.md}"

padding: 12px 20px

height: 44px

button-on-color:

backgroundColor: "{colors.canvas}"

textColor: "{colors.ink}"

typography: "{typography.button}"

rounded: "{rounded.md}"

padding: 12px 20px

height: 44px

button-text-link:

backgroundColor: transparent

textColor: "{colors.ink}"

typography: "{typography.button}"

text-link:

backgroundColor: transparent

textColor: "{colors.ink}"

typography: "{typography.body-md}"

top-nav:

backgroundColor: "{colors.canvas}"

textColor: "{colors.ink}"

typography: "{typography.nav-link}"

height: 64px

hero-band:

backgroundColor: "{colors.canvas}"

textColor: "{colors.ink}"

typography: "{typography.display-xl}"

padding: 96px

hero-illustration-card:

backgroundColor: "{colors.surface-soft}"

textColor: "{colors.ink}"

rounded: "{rounded.xl}"

feature-card-pink:

backgroundColor: "{colors.brand-pink}"

textColor: "{colors.on-primary}"

typography: "{typography.title-md}"

rounded: "{rounded.xl}"

padding: 32px

feature-card-teal:

backgroundColor: "{colors.brand-teal}"

textColor: "{colors.on-dark}"

typography: "{typography.title-md}"

rounded: "{rounded.xl}"

padding: 32px

feature-card-lavender:

backgroundColor: "{colors.brand-lavender}"

textColor: "{colors.ink}"

typography: "{typography.title-md}"

rounded: "{rounded.xl}"

padding: 32px

feature-card-peach:

backgroundColor: "{colors.brand-peach}"

textColor: "{colors.ink}"

typography: "{typography.title-md}"

rounded: "{rounded.xl}"

padding: 32px

feature-card-ochre:

backgroundColor: "{colors.brand-ochre}"

textColor: "{colors.ink}"

typography: "{typography.title-md}"

rounded: "{rounded.xl}"

padding: 32px

feature-card-cream:

backgroundColor: "{colors.surface-card}"

textColor: "{colors.ink}"

typography: "{typography.title-md}"

rounded: "{rounded.xl}"

padding: 32px

product-mockup-card:

backgroundColor: "{colors.canvas}"

textColor: "{colors.ink}"

typography: "{typography.title-md}"

rounded: "{rounded.lg}"

padding: 24px

testimonial-card:

backgroundColor: "{colors.surface-card}"

textColor: "{colors.ink}"

typography: "{typography.body-md}"

rounded: "{rounded.lg}"

padding: 24px

pricing-tier-card:

backgroundColor: "{colors.canvas}"

textColor: "{colors.ink}"

typography: "{typography.title-lg}"

rounded: "{rounded.lg}"

padding: 32px

pricing-tier-card-featured:

backgroundColor: "{colors.brand-teal}"

textColor: "{colors.on-dark}"

typography: "{typography.title-lg}"

rounded: "{rounded.lg}"

padding: 32px

text-input:

backgroundColor: "{colors.canvas}"

textColor: "{colors.ink}"

typography: "{typography.body-md}"

rounded: "{rounded.md}"

padding: 12px 16px

height: 44px

text-input-focused:

backgroundColor: "{colors.canvas}"

textColor: "{colors.ink}"

rounded: "{rounded.md}"

category-tab:

backgroundColor: transparent

textColor: "{colors.muted}"

typography: "{typography.nav-link}"

rounded: "{rounded.pill}"

padding: 8px 16px

category-tab-active:

backgroundColor: "{colors.surface-card}"

textColor: "{colors.ink}"

typography: "{typography.nav-link}"

rounded: "{rounded.pill}"

badge-pill:

backgroundColor: "{colors.surface-card}"

textColor: "{colors.ink}"

typography: "{typography.caption}"

rounded: "{rounded.pill}"

padding: 4px 12px

expert-card:

backgroundColor: "{colors.canvas}"

textColor: "{colors.ink}"

typography: "{typography.title-md}"

rounded: "{rounded.lg}"

padding: 24px

cta-band-illustrated:

backgroundColor: "{colors.surface-soft}"

textColor: "{colors.ink}"

typography: "{typography.display-md}"

rounded: "{rounded.xl}"

padding: 80px

footer:

backgroundColor: "{colors.surface-soft}"

textColor: "{colors.body}"

typography: "{typography.body-sm}"

padding: 80px

---

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:**

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.

| 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 |

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.

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.

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.

| 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.

| 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 |

**`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).

**`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.

**`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.

**`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.

**`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-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.

| 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 |

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.