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