Design System
Inspired by Clay

A design token catalog generated from DESIGN.md. Every color, font, component, and spacing value — visualized.

Start Building Documentation
01 / Colors

Color Palette

Primary
Clay Black
#000000
Text, headings
Pure White
#ffffff
Cards, buttons
Warm Cream
#faf9f7
Page background
Swatch Palette
Matcha 300
#84e7a5
Light green
Matcha 600
#078a52
Mid green
Matcha 800
#02492a
Deep green sections
Slushie 500
#3bd3fd
Bright cyan
Lemon 500
#fbbd41
Primary gold
Ube 300
#c1b0ff
Soft lavender
Ube 800
#43089f
Deep purple
Pomegranate 400
#fc7981
Coral pink
Blueberry 800
#01418d
Deep navy
Neutral & Border
Warm Silver
#9f9b93
Secondary text
Warm Charcoal
#55534e
Tertiary text
Oat Border
#dad4c8
Primary border
Oat Light
#eee9df
Secondary border
02 / Typography

Typography Scale

Display Hero
Display — 80px / 600 / 1.00 / -3.2px / Roobert
Display Secondary
Secondary — 60px / 600 / 1.00 / -2.4px / Roobert
Section Heading
Section — 44px / 600 / 1.10 / -1.32px / Roobert
Card Heading
Card — 32px / 600 / 1.10 / -0.64px / Roobert
Feature Title
Feature — 20px / 600 / 1.40 / -0.4px / Roobert
Body — Go to market with unique data — and the ability to act on it. Clay helps sales teams build pipeline.
Body — 18px / 400 / 1.60 / -0.36px / Roobert
Button — Start your free trial
Button — 16px / 500 / 1.50 / -0.16px / Roobert
Caption — Updated 3 minutes ago
Caption — 14px / 400 / 1.50 / Roobert
Uppercase Label
Label — 12px / 600 / uppercase / 1.08px / Roobert
clay.people.enrich({ email: 'user@company.com' })
Code — 14px / 400 / Space Mono
03 / Buttons

Button Variants

Start Building
Primary Solid
Learn More
White Card
View Docs
Ghost Outlined
NEW FEATURE
Badge

Hover over buttons to see the playful rotateZ + hard shadow animation.

04 / Cards

Card Examples

Data Enrichment

Turn data into action

Enrich any record with 100+ data providers. Build automated workflows with Clay tables.

Dashed Border

Flexible integrations

Connect to any CRM, email tool, or data source. Dashed border variant for secondary content.

Colored Section

Growth on autopilot

Full-width colored section using the Matcha 800 swatch background.

05 / Forms

Form Elements

Default
Focus (blue ring)
Error (pomegranate ring)
06 / Spacing

Spacing Scale

2
4
8
12
16
20
24
07 / Radius

Border Radius Scale

4px
Inputs
8px
Small cards
12px
Buttons
24px
Feature cards
40px
Sections
pill
CTAs
08 / Elevation

Elevation & Depth

Level 0: Flat
Cream canvas
Level 1: Clay
Multi-layer + inset
Level 2: Hover Hard
Hard offset shadow
Focus
Blue focus ring