Skip to content

Design Tokens

Visual reference for the Cookest design system tokens. Click any swatch to copy its CSS variable.

Brand Colors
Semantic Colors
Light
Dark
Status Colors
Font Families
SerifPlayfair Display

The quick brown fox jumps over the lazy dog

SansInter

The quick brown fox jumps over the lazy dog

MonoJetBrains Mono

The quick brown fox jumps over the lazy dog

Font Sizes
xs — 12px
Cookest
sm — 14px
Cookest
base — 16px
Cookest
lg — 18px
Cookest
xl — 20px
Cookest
2xl — 24px
Cookest
3xl — 30px
Cookest
4xl — 36px
Cookest
5xl — 48px
Cookest
Font Weights
light — 300
Cookest Design System
normal — 400
Cookest Design System
medium — 500
Cookest Design System
semibold — 600
Cookest Design System
bold — 700
Cookest Design System
4px Grid Scale
14px
28px
312px
416px
624px
832px
1248px
sm4px
md8px
lg12px
xl16px
2xl24px
full9999px
Transition Timing
fast
normal
slow
bounce

Hover each row to see the transition in action.

Stacking Order
base
0
Default stacking
dropdown
10
Select menus, popups
sticky
20
Sticky headers, nav
overlay
30
Backdrop overlays
modal
40
Modal dialogs
popover
50
Popovers, tooltips
tooltip
60
Tooltip layer (top)

Contrast Checker

Check color contrast ratios for WCAG 2.1 compliance. Minimum 4.5:1 for normal text (AA), 3:1 for large text.

Sample TextThe quick brown fox jumps over the lazy dog.Small text at 12px size
11.38:1
WCAG AAA

Passes for all text sizes

Cookest Token Pairs