--- version: alpha name: Clay 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 --- ## 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.