Design System Inspiration of Clay

1. Visual Theme & Atmosphere

Clay's website is a warm, playful celebration of color that treats B2B data enrichment like a craft rather than an enterprise chore. The design language is built on a foundation of warm cream backgrounds (#faf9f7) and oat-toned borders (#dad4c8, #eee9df) that give every surface the tactile quality of handmade paper. Against this artisanal canvas, a vivid swatch palette explodes with personality — Matcha green, Slushie cyan, Lemon gold, Ube purple, Pomegranate pink, Blueberry navy, and Dragonfruit magenta — each named like flavors at a juice bar, not colors in an enterprise UI kit.

The typography is anchored by Roobert, a geometric sans-serif with character, loaded with an extensive set of OpenType stylistic sets ("ss01", "ss03", "ss10", "ss11", "ss12") that give the text a distinctive, slightly quirky personality. At display scale (80px, weight 600), Roobert uses aggressive negative letter-spacing (-3.2px) that compresses headlines into punchy, billboard-like statements. Space Mono serves as the monospace companion for code and technical labels, completing the craft-meets-tech duality.

What makes Clay truly distinctive is its hover micro-animations: buttons on hover rotate slightly (rotateZ(-8deg)), translate upward (translateY(-80%)), change background to a contrasting swatch color, and cast a hard offset shadow (rgb(0,0,0) -7px 7px). This playful hover behavior — where a button literally tilts and jumps on interaction — creates a sense of physical delight that's rare in B2B software. Combined with generously rounded containers (24px–40px radius), dashed borders alongside solid ones, and a multi-layer shadow system that includes inset highlights, Clay feels like a design system that was made by people who genuinely enjoy making things.

Key Characteristics:

• Warm cream canvas (#faf9f7) with oat-toned borders (#dad4c8) — artisanal, not clinical
• Named swatch palette: Matcha, Slushie, Lemon, Ube, Pomegranate, Blueberry, Dragonfruit
• Roobert font with 5 OpenType stylistic sets — quirky geometric character
• Playful hover animations: rotateZ(-8deg) + translateY(-80%) + hard offset shadow
• Space Mono for code and technical labels
• Generous border radius: 24px cards, 40px sections, 1584px pills
• Mixed border styles: solid + dashed in the same interface
• Multi-layer shadow with inset highlight: 0px 1px 1px + -1px inset + -0.5px

2. Color Palette & Roles

Primary

• Clay Black (#000000): Text, headings, pricing card text, --_theme--pricing-cards---text
• Pure White (#ffffff): Card backgrounds, button backgrounds, inverse text
• Warm Cream (#faf9f7): Page background — the warm, paper-like canvas

Swatch Palette — Named Colors

Matcha (Green)

• Matcha 300 (#84e7a5): --_swatches---color--matcha-300, light green accent
• Matcha 600 (#078a52): --_swatches---color--matcha-600, mid green
• Matcha 800 (#02492a): --_swatches---color--matcha-800, deep green for dark sections

Slushie (Cyan)

• Slushie 500 (#3bd3fd): --_swatches---color--slushie-500, bright cyan accent
• Slushie 800 (#0089ad): --_swatches---color--slushie-800, deep teal

Lemon (Gold)

• Lemon 400 (#f8cc65): --_swatches---color--lemon-400, warm pale gold
• Lemon 500 (#fbbd41): --_swatches---color--lemon-500, primary gold
• Lemon 700 (#d08a11): --_swatches---color--lemon-700, deep amber
• Lemon 800 (#9d6a09): --_swatches---color--lemon-800, dark amber

Ube (Purple)

• Ube 300 (#c1b0ff): --_swatches---color--ube-300, soft lavender
• Ube 800 (#43089f): --_swatches---color--ube-800, deep purple
• Ube 900 (#32037d): --_swatches---color--ube-900, darkest purple

Pomegranate (Pink/Red)

• Pomegranate 400 (#fc7981): --_swatches---color--pomegranate-400, warm coral-pink

Blueberry (Navy Blue)

• Blueberry 800 (#01418d): --_swatches---color--blueberry-800, deep navy

Neutral Scale (Warm)

• Warm Silver (#9f9b93): Secondary/muted text, footer links
• Warm Charcoal (#55534e): Tertiary text, dark muted links
• Dark Charcoal (#333333): Link text on light backgrounds

Surface & Border

• Oat Border (#dad4c8): Primary border — warm, cream-toned structural lines
• Oat Light (#eee9df): Secondary lighter border
• Cool Border (#e6e8ec): Cool-toned border for contrast sections
• Dark Border (#525a69): Border on dark sections
• Light Frost (#eff1f3): Subtle button background (at 0% opacity on hover)

Badges

• Badge Blue Bg (#f0f8ff): Blue-tinted badge surface
• Badge Blue Text (#3859f9): Vivid blue badge text
• Focus Ring (rgb(20, 110, 245) solid 2px): Accessibility focus indicator

Shadows

• Clay Shadow (rgba(0,0,0,0.1) 0px 1px 1px, rgba(0,0,0,0.04) 0px -1px 1px inset, rgba(0,0,0,0.05) 0px -0.5px 1px): Multi-layer with inset highlight — the signature
• Hard Offset (rgb(0,0,0) -7px 7px): Hover state — playful hard shadow

3. Typography Rules

Font Families

• Primary: Roobert, fallback: Arial
• Monospace: Space Mono
• OpenType Features: "ss01", "ss03", "ss10", "ss11", "ss12" on all Roobert text (display uses all 5; body/UI uses "ss03", "ss10", "ss11", "ss12")

Hierarchy

Principles

• Five stylistic sets as identity: The combination of "ss01", "ss03", "ss10", "ss11", "ss12" on Roobert creates a distinctive typographic personality. ss01 is reserved for headings and emphasis — body text omits it, creating a subtle hierarchy through glyph variation.
• Aggressive display compression: -3.2px at 80px, -2.4px at 60px — the most compressed display tracking alongside the most generous body spacing (1.60 line-height), creating dramatic contrast.
• Weight 600 for headings, 500 for UI, 400 for body: Clean three-tier system where each weight has a strict role.
• Uppercase labels with positive tracking: 12px uppercase at 1.08px letter-spacing creates the systematic wayfinding pattern.

4. Component Stylings

Buttons

Primary (Transparent with Hover Animation)

• Background: transparent (rgba(239, 241, 243, 0))
• Text: #000000
• Padding: 6.4px 12.8px
• Border: none (or 1px solid #717989 for outlined variant)
• Hover: background shifts to swatch color (e.g., #434346), text to white, rotateZ(-8deg), translateY(-80%), hard shadow rgb(0,0,0) -7px 7px
• Focus: rgb(20, 110, 245) solid 2px outline

White Solid

• Background: #ffffff
• Text: #000000
• Padding: 6.4px
• Hover: oat-200 swatch color, animated rotation + shadow
• Use: Primary CTA on colored sections

Ghost Outlined

• Background: transparent
• Text: #000000
• Padding: 8px
• Border: 1px solid #717989
• Radius: 4px
• Hover: dragonfruit swatch color, white text, animated rotation

Cards & Containers

• Background: #ffffff on cream canvas
• Border: 1px solid #dad4c8 (warm oat) or 1px dashed #dad4c8
• Radius: 12px (standard cards), 24px (feature cards/images), 40px (section containers/footer)
• Shadow: rgba(0,0,0,0.1) 0px 1px 1px, rgba(0,0,0,0.04) 0px -1px 1px inset, rgba(0,0,0,0.05) 0px -0.5px 1px
• Colorful section backgrounds using swatch palette (matcha, slushie, ube, lemon)

Inputs & Forms

• Text: #000000
• Border: 1px solid #717989
• Radius: 4px
• Focus: rgb(20, 110, 245) solid 2px outline

Navigation

• Sticky top nav on cream background
• Roobert 15px weight 500 for nav links
• Clay logo left-aligned
• CTA buttons right-aligned with pill radius
• Border bottom: 1px solid #dad4c8
• Mobile: hamburger collapse at 767px

Image Treatment

• Product screenshots in white cards with oat borders
• Colorful illustrated sections with swatch background colors
• 8px–24px radius on images
• Full-width colorful section backgrounds

Distinctive Components

Swatch Color Sections

• Full-width sections with swatch-colored backgrounds (matcha green, slushie cyan, ube purple, lemon gold)
• White text on dark swatches, black text on light swatches
• Each section tells a distinct product story through its color

Playful Hover Buttons

• Rotate -8deg + translate upward on hover
• Hard offset shadow (-7px 7px) instead of soft blur
• Background transitions to contrasting swatch color
• Creates a physical, toy-like interaction quality

Dashed Border Elements

• Dashed borders (1px dashed #dad4c8) alongside solid borders
• Used for secondary containers and decorative elements
• Adds a hand-drawn, craft-like quality

5. Layout Principles

Spacing System

• Base unit: 8px
• Scale: 1px, 2px, 4px, 6.4px, 8px, 12px, 12.8px, 16px, 18px, 20px, 24px

Grid & Container

• Max content width centered
• Feature sections alternate between white cards and colorful swatch backgrounds
• Card grids: 2–3 columns on desktop
• Full-width colorful sections break the grid
• Footer with generous 40px radius container

Whitespace Philosophy

• Warm, generous breathing: The cream background provides a warm rest between content blocks. Spacing is generous but not austere — it feels inviting, like a well-set table.
• Color as spatial rhythm: The alternating swatch-colored sections create visual rhythm through hue rather than just whitespace. Each color section is its own "room."
• Craft-like density inside cards: Within cards, content is compact and well-organized, contrasting with the generous outer spacing.

Border Radius Scale

• Sharp (4px): Ghost buttons, inputs
• Standard (8px): Small cards, images, links
• Badge (11px): Tag badges
• Card (12px): Standard cards, buttons
• Feature (24px): Feature cards, images, panels
• Section (40px): Large sections, footer, containers
• Pill (1584px): CTAs, pill-shaped buttons

6. Depth & Elevation

Shadow Philosophy: Clay's shadow system is uniquely three-layered: a downward cast (0px 1px 1px), an upward inset highlight (0px -1px 1px inset), and a subtle edge (0px -0.5px 1px). This creates a "pressed into clay" quality where elements feel both raised AND embedded — like a clay tablet where content is stamped into the surface. The hover hard shadow (-7px 7px) is deliberately retro-graphic, referencing print-era drop shadows and adding physical playfulness.

Decorative Depth

• Full-width swatch-colored sections create dramatic depth through color contrast
• Dashed borders add visual texture alongside solid borders
• Product illustrations with warm, organic art style

7. Do's and Don'ts

Do

• Use warm cream (#faf9f7) as the page background — the warmth is the identity
• Apply all 5 OpenType stylistic sets on Roobert headings: "ss01", "ss03", "ss10", "ss11", "ss12"
• Use the named swatch palette (Matcha, Slushie, Lemon, Ube, Pomegranate, Blueberry) for section backgrounds
• Apply the playful hover animation: rotateZ(-8deg), translateY(-80%), hard shadow -7px 7px
• Use warm oat borders (#dad4c8) — not neutral gray
• Mix solid and dashed borders for visual variety
• Use generous radius: 24px for cards, 40px for sections
• Use weight 600 exclusively for headings, 500 for UI, 400 for body

Don't

• Don't use cool gray backgrounds — the warm cream (#faf9f7) is non-negotiable
• Don't use neutral gray borders (#ccc, #ddd) — always use the warm oat tones
• Don't mix more than 2 swatch colors in the same section
• Don't skip the OpenType stylistic sets — they define Roobert's character
• Don't use subtle hover effects — the rotation + hard shadow is the signature interaction
• Don't use small border radius (<12px) on feature cards — the generous rounding is structural
• Don't use standard shadows (blur-based) — Clay uses hard offset and multi-layer inset
• Don't forget the uppercase labels with 1.08px tracking — they're the wayfinding system

8. Responsive Behavior

Breakpoints

Touch Targets

• Buttons: minimum 6.4px + 12.8px padding for adequate touch area
• Nav links: 15px font with generous spacing
• Mobile: full-width buttons for easy tapping

Collapsing Strategy

• Hero: 80px → 60px → smaller display text
• Navigation: horizontal → hamburger at 767px
• Feature sections: multi-column → stacked
• Colorful sections: maintain full-width but compress padding
• Card grids: 3-column → 2-column → single column

Image Behavior

• Product screenshots scale proportionally
• Colorful section illustrations adapt to viewport width
• Rounded corners maintained across breakpoints

9. Agent Prompt Guide

Quick Color Reference

• Background: Warm Cream (#faf9f7)
• Text: Clay Black (#000000)
• Secondary text: Warm Silver (#9f9b93)
• Border: Oat Border (#dad4c8)
• Green accent: Matcha 600 (#078a52)
• Cyan accent: Slushie 500 (#3bd3fd)
• Gold accent: Lemon 500 (#fbbd41)
• Purple accent: Ube 800 (#43089f)
• Pink accent: Pomegranate 400 (#fc7981)

Example Component Prompts

• "Create a hero on warm cream (#faf9f7) background. Headline at 80px Roobert weight 600, line-height 1.00, letter-spacing -3.2px, OpenType 'ss01 ss03 ss10 ss11 ss12', black text. Subtitle at 20px weight 400, line-height 1.40, #9f9b93 text. Two buttons: white solid pill (12px radius) and ghost outlined (4px radius, 1px solid #717989)."
• "Design a colorful section with Matcha 800 (#02492a) background. Heading at 44px Roobert weight 600, letter-spacing -1.32px, white text. Body at 18px weight 400, line-height 1.60, #84e7a5 text. White card inset with oat border (#dad4c8), 24px radius."
• "Build a button with playful hover: default transparent background, black text, 16px Roobert weight 500. On hover: background #434346, text white, transform rotateZ(-8deg) translateY(-80%), hard shadow rgb(0,0,0) -7px 7px."
• "Create a card: white background, 1px solid #dad4c8 border, 24px radius. Shadow: rgba(0,0,0,0.1) 0px 1px 1px, rgba(0,0,0,0.04) 0px -1px 1px inset. Title at 32px Roobert weight 600, letter-spacing -0.64px."
• "Design an uppercase label: 12px Roobert weight 600, text-transform uppercase, letter-spacing 1.08px, OpenType 'ss03 ss10 ss11 ss12'."

Iteration Guide

1. Start with warm cream (#faf9f7) — never cool white
2. Swatch colors are for full sections, not small accents — go bold with matcha, slushie, ube
3. Oat borders (#dad4c8) everywhere — dashed variants for decoration
4. OpenType stylistic sets are mandatory — they make Roobert look like Roobert
5. Hover animations are the signature — rotation + hard shadow, not subtle fades
6. Generous radius: 24px cards, 40px sections — nothing looks sharp or corporate
7. Three weights: 600 (headings), 500 (UI), 400 (body) — strict roles

10. Voice & Tone

Clay's voice is playfully irreverent + sales-team-fluent. Marketing mixes GTM jargon ("outbound-sourced pipeline", "CRM enrichment") with disarming humor and motion (cards rotate on hover). The combination: "we know GTM is dry, we made the tool fun."

Voice samples

• "Start building for free"
• "How Clay uses Clay"

Forbidden phrases. "AI-powered" without explanation. "10× your outbound" superlative. Aggressive sales pressure.

11. Brand Narrative

Clay was founded in 2017 by Kareem Amin (CEO) in New York (Sequoia — Partnering with Clay, Kareem Amin LinkedIn). Varun Anand joined as co-founder + Head of Operations in 2021 (Inside Clay's unconventional path to $1.25B — First Round Review podcast). Pivot from no-code-platform to GTM-data-platform around 2021 when sales/RevOps teams emerged as the actual customers — "Spreadsheet for outbound" → GTM-specific Airtable. Now: 10,000+ customers, 150+ integrated data sources. Funding: Series B expansion $40M at $1.25B valuation, then Series C $100M led by CapitalG (Alphabet's independent growth fund) on 2025-08-05 (BusinessWire). Clay coined the "GTM Engineering" role category — published for it as a signature marketing position.

12. Principles

1. Cells are the unit. UI implication: table-first canvas, no tabs above data plane.
2. Recipe-style, not magic. Workflows show every step + provider. UI implication: every step editable, never opaque.
3. Hover is the play. Cards rotate, shadows pop. UI implication: generous hover transitions on cards (rotate ~3deg + hard shadow 4px 4px 0 #000).
4. Customer voice over marketing voice. UI implication: case studies first-class nav.
5. Three weights, strict roles. UI implication: never introduce 700 or 300.

13. Personas

Personas are fictional archetypes informed by Clay user segments (RevOps, BDR managers, founders), not individual people.

Yusuf Khan, 32, NYC. RevOps lead at B2B SaaS. 15 nightly enrichment workflows.

Sarah Yoon, 27, San Francisco. Founding BDR at Series A startup. Clay for list building + AI personalization.

Olivia Bennett, 45, London. Agency founder running outbound for 12 clients. Workflow templates across clients.

14. States

15. Motion & Easing

Easings: ease-rotate cubic-bezier(0.4, 0, 0.2, 1), slight overshoot. Hover rotation is the signature — never disable except under prefers-reduced-motion: reduce.

---

Verified: 2026-05-08 (B1 loop) Tier 1 sources: clay.com (live DOM via playwright — Black #000000 Primary 12px / 8×16 / 42px / 16px·500; content cards 16px radius) Tier 2 sources: styles.refero.design / getdesign.md — no record. Tier 1 (Philosophy): clay.com homepage; founder LinkedIn / podcast appearances. Style ref: stripe. Conflicts unresolved: none.