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

#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

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

#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

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