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