Dark Mode

# 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

Company Name
Default
Email
Focus (blue ring)
Domain
Error (pomegranate ring)
Notes

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