Clay Design System

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.