---
id: clay
name: Clay
country: US
category: design-tools
homepage: "https://www.clay.com"
primary_color: "#ffd23f"
logo:
  type: github
  slug: clay-run
verified: "2026-05-15"
omd: "0.1"
ds:
  name: Clay Newsroom
  url: "https://www.clay.com/press"
  type: brand
  description: Clay's official press kit and co-branding guidelines.
tokens:
  source: prose-derived
  extracted: "2026-06-08"
  note: "primary = live interactive/text Clay Black (#000000, Tier 1); brand = Lemon-gold marketing swatch (#fbbd41). primary_color field #ffd23f is the press-kit gold, not present verbatim in prose."
  colors:
    primary: "#000000"
    brand: "#fbbd41"
    canvas: "#faf9f7"
    foreground: "#000000"
    muted: "#9f9b93"
    on-primary: "#ffffff"
    surface: "#ffffff"
    hairline: "#dad4c8"
    body: "#55534e"
    link: "#333333"
    accent-matcha: "#078a52"
    accent-slushie: "#3bd3fd"
    accent-lemon: "#fbbd41"
    accent-ube: "#43089f"
    accent-pomegranate: "#fc7981"
    accent-blueberry: "#01418d"
    error: "#ef4444"
    badge-bg: "#f0f8ff"
    badge-text: "#3859f9"
  typography:
    family: { sans: "Roobert", mono: "Space Mono" }
    display-hero:      { size: 80, weight: 600, lineHeight: 1.00, tracking: -3.2, use: "Hero headlines, all 5 stylistic sets" }
    display-secondary: { size: 60, weight: 600, lineHeight: 1.00, tracking: -2.4, use: "Secondary hero headlines" }
    section:           { size: 44, weight: 600, lineHeight: 1.10, tracking: -1.32, use: "Section headings" }
    card-heading:      { size: 32, weight: 600, lineHeight: 1.10, tracking: -0.64, use: "Card headings" }
    feature-title:     { size: 20, weight: 600, lineHeight: 1.40, tracking: -0.4, use: "Feature titles" }
    subheading:        { size: 20, weight: 500, lineHeight: 1.50, tracking: -0.16, use: "Sub-headings, no ss01" }
    body-large:        { size: 20, weight: 400, lineHeight: 1.40, use: "Large body text" }
    body:              { size: 18, weight: 400, lineHeight: 1.60, tracking: -0.36, use: "Relaxed body text" }
    body-standard:     { size: 16, weight: 400, lineHeight: 1.50, use: "Standard reading text" }
    button:            { size: 16, weight: 500, lineHeight: 1.50, tracking: -0.16, use: "Button label" }
    button-large:      { size: 24, weight: 400, lineHeight: 1.50, use: "Large button label" }
    nav-link:          { size: 15, weight: 500, lineHeight: 1.60, use: "Navigation links" }
    caption:           { size: 14, weight: 400, lineHeight: 1.50, tracking: -0.14, use: "Captions" }
    small:             { size: 12, weight: 400, lineHeight: 1.50, use: "Small text" }
    uppercase-label:   { size: 12, weight: 600, lineHeight: 1.20, tracking: 1.08, use: "Uppercase wayfinding labels" }
    badge:             { size: 9.6, weight: 600, use: "Pill badges" }
  spacing: { xs: 4, sm: 8, md: 16, base: 16, lg: 24, xl: 32, xxl: 48, section: 64 }
  rounded: { sm: 4, md: 8, badge: 11, card: 12, feature: 24, section: 40, full: 1584 }
  shadow:
    clay: "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"
    hard-offset: "rgb(0,0,0) -7px 7px"
  components_harvested: true
  components:
    button-primary: { type: button, fg: "#000000", use: "Transparent fill, black text, hover rotateZ(-8deg) + hard offset shadow" }
    button-white-solid: { type: button, bg: "#ffffff", fg: "#000000", radius: 12, use: "White fill, animated rotation hover — CTA on colored sections" }
    button-ghost: { type: button, fg: "#000000", radius: 4, use: "Transparent fill, 1px border, dragonfruit hover" }
    card: { type: card, bg: "#ffffff", radius: 12, use: "White surface on cream, 1px solid #dad4c8 oat border, multi-layer clay shadow with inset highlight" }
    swatch-section: { type: card, use: "Full-width swatch-colored background (matcha/slushie/ube/lemon), white or black text by contrast" }
    dashed-border: { type: card, use: "1px dashed #dad4c8 for secondary/decorative containers — hand-drawn craft quality" }
    uppercase-label: { type: badge, fg: "#000000", font: "12/600", use: "Uppercase, 1.08px tracking — wayfinding system" }
---

# 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

| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|------|------|------|--------|-------------|----------------|-------|
| Display Hero | Roobert | 80px (5.00rem) | 600 | 1.00 (tight) | -3.2px | All 5 stylistic sets |
| Display Secondary | Roobert | 60px (3.75rem) | 600 | 1.00 (tight) | -2.4px | All 5 stylistic sets |
| Section Heading | Roobert | 44px (2.75rem) | 600 | 1.10 (tight) | -0.88px to -1.32px | All 5 stylistic sets |
| Card Heading | Roobert | 32px (2.00rem) | 600 | 1.10 (tight) | -0.64px | All 5 stylistic sets |
| Feature Title | Roobert | 20px (1.25rem) | 600 | 1.40 | -0.4px | All 5 stylistic sets |
| Sub-heading | Roobert | 20px (1.25rem) | 500 | 1.50 | -0.16px | 4 stylistic sets (no ss01) |
| Body Large | Roobert | 20px (1.25rem) | 400 | 1.40 | normal | 4 stylistic sets |
| Body | Roobert | 18px (1.13rem) | 400 | 1.60 (relaxed) | -0.36px | 4 stylistic sets |
| Body Standard | Roobert | 16px (1.00rem) | 400 | 1.50 | normal | 4 stylistic sets |
| Body Medium | Roobert | 16px (1.00rem) | 500 | 1.20–1.40 | -0.16px to -0.32px | 4–5 stylistic sets |
| Button | Roobert | 16px (1.00rem) | 500 | 1.50 | -0.16px | 4 stylistic sets |
| Button Large | Roobert | 24px (1.50rem) | 400 | 1.50 | normal | 4 stylistic sets |
| Button Small | Roobert | 12.8px (0.80rem) | 500 | 1.50 | -0.128px | 4 stylistic sets |
| Nav Link | Roobert | 15px (0.94rem) | 500 | 1.60 (relaxed) | normal | 4 stylistic sets |
| Caption | Roobert | 14px (0.88rem) | 400 | 1.50–1.60 | -0.14px | 4 stylistic sets |
| Small | Roobert | 12px (0.75rem) | 400 | 1.50 | normal | 4 stylistic sets |
| Uppercase Label | Roobert | 12px (0.75rem) | 600 | 1.20 (tight) | 1.08px | `text-transform: uppercase`, 4 sets |
| Badge | Roobert | 9.6px | 600 | — | — | Pill badges |

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

| Level | Treatment | Use |
|-------|-----------|-----|
| Flat (Level 0) | No shadow, cream canvas | Page background |
| Clay Shadow (Level 1) | `rgba(0,0,0,0.1) 0px 1px 1px, rgba(0,0,0,0.04) 0px -1px inset, rgba(0,0,0,0.05) 0px -0.5px` | Cards, buttons — multi-layer with inset highlight |
| Hover Hard (Level 2) | `rgb(0,0,0) -7px 7px` | Hover state — playful hard offset shadow |
| Focus (Level 3) | `rgb(20, 110, 245) solid 2px` | Keyboard focus ring |

**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
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile Small | <479px | Single column, tight padding |
| Mobile | 479–767px | Standard mobile, stacked layout |
| Tablet | 768–991px | 2-column grids, condensed nav |
| Desktop | 992px+ | Full layout, 3-column grids, expanded sections |

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

| Context | Tone |
|---|---|
| CTA | Direct verb. "Get started", "Book a demo", "Start building for free" |
| Marketing | Customer-quote-driven. "How Clay uses Clay" |
| Error | Specific. "LinkedIn rate limit hit. Resume in 4 hours or upgrade plan." |
| Documentation | Recipe-style, copy-paste examples |

**Voice samples**
- *"Start building for free"* <!-- verified: clay.com homepage 2026-05 -->
- *"How Clay uses Clay"* <!-- verified: clay.com case studies -->

**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](https://sequoiacap.com/article/partnering-with-clay-on-a-mission-to-grow/), [Kareem Amin LinkedIn](https://www.linkedin.com/in/kareemamin)). **Varun Anand** joined as **co-founder + Head of Operations in 2021** ([Inside Clay's unconventional path to $1.25B — First Round Review podcast](https://review.firstround.com/podcast/inside-clays-unconventional-path-to-1-25b/)). 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](https://www.businesswire.com/news/home/20250805719448/en/AI-GTM-Leader-Clay-Raises-$100M-Series-C-to-Fuel-GTM-Engineering-Roles-Industrywide)). 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

| State | Treatment |
|---|---|
| **Empty (no workflows)** | Centered illustration + "Create your first workflow" CTA |
| **Empty (no data in table)** | Inline "+ Add a column" / "+ Add a row" with playful arrows |
| **Loading (enrichment)** | Per-cell spinner with elapsed time, cancellable |
| **Loading (workflow run)** | Top-bar progress with step count |
| **Error (provider failed)** | Cell shows red `#ef4444` border + tooltip with provider name |
| **Error (rate limit)** | Banner with countdown to next-allowed time + upgrade CTA |
| **Success (enrichment)** | Subtle green border pulse on cells, no toast |
| **Success (workflow ran)** | Notification chip top-right, dismissible |
| **Skeleton (table loading)** | Rotating skeleton cards (signature motion) |
| **Disabled (preview-only)** | 0.6 opacity + lock icon overlay |
| **Loading (AI generation)** | Per-row "AI is writing..." with cancel link |

## 15. Motion & Easing

| Token | Value | Use |
|---|---|---|
| `motion-instant` | 0ms | Cell commit |
| `motion-fast` | 200ms | Hover (slower for rotation effect) |
| `motion-rotate` | 300ms | Card rotation on hover |
| `motion-shadow-snap` | 100ms | Hard shadow pop-in |
| `motion-standard` | 300ms | Modal, panel |

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.


---
Source: https://oh-my-design.kr/design-systems/clay · Raw twin of references/clay/DESIGN.md
Install 221 verified references for your AI coding agent: npx oh-my-design-cli install-skills