Design System Inspired by 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