Clay

---

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.