Typography
Base Font · Roobert
Roobert
The quick brown fox jumps over the lazy dog
Regular · 400
Medium · 500
Semibold · 600
Bold · 700
Mono Font · Roobert Mono
Roobert Mono
Go to market with unique data—and the ability to act on it
Regular · 400
Medium · 500
Display
Display · 80px · Semibold · line-height: 80px · letter-spacing: −3.2px
Go to market with Clay
Heading XL · 60px · Semibold · line-height: 60px
Unique data, actionable insights
Heading Large · 44px · Semibold · line-height: 48px
Build your go-to-market engine
Heading Medium · 32px · Semibold · line-height: 35.2px
Clay helps teams go to market with unique data and the ability to act on it — at scale.
Body Large · 20px · Regular · line-height: 28px
Connect your data sources, enrich leads, and automate outreach campaigns.
Body Default · 16px · Regular · line-height: 24px
Last enriched 2 minutes ago · 12,480 records processed
Body Small · 14px · Regular · line-height: 14.4px
CRM · ENRICHMENT · OUTREACH
Caption / Label · 14px · Semibold · uppercase · letter-spacing: 1px
Letter Spacing
Clay Platform
Tight
−3.2px · display headings
Go to Market
Normal
−2.4px · large headings
Data Enrichment
Wide
−1.32px · section titles
CRM · GTM · ENRICH
Tracking +1
1px · uppercase labels
Spacing
Spacing Scale
41 tokens — 1.6px → 320px
Shadows / Elevation
Shadow Tokens
3 tokens
Small
×4
rgba(0,0,0,.1) 0px 1px 1px · subtle lift for inputs and cards
Medium
×2
rgba(0,0,0,.1) 0px 2px 6px 2px · panels, dropdowns
Large
×1
rgba(0,0,0,0) transparent inset · used for color overlay effects
Z-Index
| Layer | Value | Usage |
|---|
| Background | −1 | Decorative background elements, canvas underlays |
| Base | 1 | Default content stacking layer |
| Raised | 2 | Slightly elevated content cards |
| Positioned | 3 | Positioned UI elements |
| Navigation | 10 | Sticky headers, nav bars |
| Overlay | 30 | Side panels, drawers, overlays |
| Dropdown | 99 | Dropdowns, popovers, tooltips |
| Modal | 900 | Modal dialogs, lightboxes |
| Toast | 1000 | Toast notifications, snackbars |
| Top Layer | 9999 | Critical alerts, critical overlays |
| Max | 2147483647 | Absolute top — never obscured |
Breakpoints
📱
--breakpoint-xs
479px
Extra small / mobile
📲
--breakpoint-sm
767px
Small breakpoint max
💻
--breakpoint-md
768px
Tablet / medium start
🖥
--breakpoint-lg
991px
Large breakpoint max
🖥️
--breakpoint-xl
992px
Desktop / xl start
Opacity
Opacity Tokens
2 tokens — 0.05 · 0.56
Accessibility — Contrast Ratios
WCAG 2.1 thresholds: AA ≥ 4.5:1 (normal text) · AA Large ≥ 3:1 (large/bold) · AAA ≥ 7:1
| Text Color | Background Color | Ratio | WCAG Rating |
|---|
| Mid Gray (#9F9B93) | Black (#000000) | 7.58:1 | AAA |
| Mid Gray (#9F9B93) | White (#FFFFFF) | 2.77:1 | Fail |
| Mid Gray (#9F9B93) | White 2 (#F9F8F6) | 2.61:1 | Fail |
| Mid Gray (#9F9B93) | Light Gray (#F3F2ED) | 2.47:1 | Fail |
| Dark Gray (#55534E) | Black (#000000) | 2.73:1 | Fail |
| Dark Gray (#55534E) | White (#FFFFFF) | 7.68:1 | AAA |
| Dark Gray (#55534E) | White 2 (#F9F8F6) | 7.24:1 | AAA |
| Dark Gray (#55534E) | Light Gray (#F3F2ED) | 6.85:1 | AA |
| Mid Gray 2 (#7B7974) | Black (#000000) | 4.83:1 | AA |
| Mid Gray 2 (#7B7974) | White (#FFFFFF) | 4.35:1 | AA Large |
| Blue (#3859F9) | Black (#000000) | 3.97:1 | AA Large |
| Blue (#3859F9) | White (#FFFFFF) | 5.3:1 | AA |
| Dark Gray 2 (#222222) | White (#FFFFFF) | 15.91:1 | AAA |
| Dark Gray 2 (#222222) | White 2 (#F9F8F6) | 14.99:1 | AAA |
| Dark Gray 2 (#222222) | Light Gray (#F3F2ED) | 14.19:1 | AAA |
CSS Variables Reference
Black--color-black#000000
White--color-white#FFFFFF
White 2--color-white-2#F9F8F6
White 3--color-white-3#F0F8FF
White 4--color-white-4#FEFDFB
White 5--color-white-5#F7F8F9
Light Gray--color-light-gray#F3F2ED
Dark Cyan--color-dark-cyan#03331D
Dark Cyan 2--color-dark-cyan-2#005870
Dark Cyan 3--color-dark-cyan-3#078A52
Blue 3--color-blue-3#0667D9
Yellow--color-yellow#CBD810
Orange--color-orange#FF7614
Blue 6--color-blue-6#429DFF
Dark Gray 3--color-dark-gray-3#181818
Mid Gray--color-mid-gray#9F9B93
Dark Gray--color-dark-gray#55534E
Mid Gray 2--color-mid-gray-2#7B7974
Dark Gray 2--color-dark-gray-2#222222
Blue 2--color-blue-2#525A69
Dark Gray 4--color-dark-gray-4#333333
Mid Gray 3--color-mid-gray-3#85817A
Light Orange--color-light-orange#DAD4C8
Light Orange 2--color-light-orange-2#EEE9DF
Light Gray 2--color-light-gray-2#E6E8EC
Light Gray 3--color-light-gray-3#D0D0D0
Blue 5--color-blue-5#717989
Base Font--font-family-baseRoobert
Mono Font--font-family-2Roobert mono
Regular--font-weight-regular400
Medium--font-weight-medium500
Semibold--font-weight-semibold600
Bold--font-weight-bold700
2XS--font-size-2xs9.6px
XS--font-size-xs10px
SM--font-size-sm11px
Base--font-size-base11.6px
LG--font-size-lg12px
2XL--font-size-2xl14px
4XL--font-size-4xl16px
5XL--font-size-5xl18px
6XL--font-size-6xl20px
32px--font-size-32px32px
44px--font-size-44px44px
60px--font-size-60px60px
80px--font-size-80px80px
Tight Tracking--letter-spacing-tight−3.2px
Normal Tracking--letter-spacing-normal−2.4px
Wide Tracking--letter-spacing-wide−1.32px
Label Tracking--letter-spacing-ls-131px
Hairline--border-width-hairline0.5px
Thin--border-width-thin1px
Base--border-width-base2px
Instant--duration-instant0.1s
Fast--duration-fast0.15s
Normal--duration-normal0.2s
Slow--duration-slow0.25s
Slower--duration-slower0.3s
Duration 6--duration-duration-60.35s
Duration 7--duration-duration-70.4s
Ease Out--easing-ease-outease-out
Ease In-Out--easing-ease-in-outease-in-out
Background--z-1−1
Base--z-21
Raised--z-32
Positioned--z-43
Navigation--z-510
Overlay--z-630
Dropdown--z-799
Modal--z-8900
Toast--z-91000
Top Layer--z-109999
Max--z-112147483647
Design System Preview · Clay (Light) · Generated 14/04/2026 · 40 color tokens · 15 font-size · 2 font-family · 4 font-weight · 18 line-height · 14 letter-spacing · 41 spacing · 12 radius · 3 border-width · 3 shadow · 7 duration · 2 easing · 11 z-index · 5 breakpoints · 2 opacity