Foundation
Design Tokens
Design tokens are the visual design atoms of the design system. They store visual design attributes and ensure consistency across all platforms and products.
Color Tokens
Primary
Primary actions, links, focus states
OKLCH: oklch(0.7 0.19 230)
HEX: #5B8EF5
Background
Main background color
OKLCH: oklch(0.09 0 0)
HEX: #171717
Foreground
Primary text color
OKLCH: oklch(0.98 0 0)
HEX: #FAFAFA
Muted
Subtle backgrounds, disabled states
OKLCH: oklch(0.18 0 0)
HEX: #2D2D2D
Border
Borders, dividers
OKLCH: oklch(0.2 0 0)
HEX: #333333
Spacing Scale
xs
0.25rem (4px)
sm
0.5rem (8px)
md
1rem (16px)
lg
1.5rem (24px)
xl
2rem (32px)
2xl
3rem (48px)
Typography Scale
Heading 1
36px / 2.25rem • font-bold
Heading 2
30px / 1.875rem • font-bold
Heading 3
24px / 1.5rem • font-semibold
Body Text
16px / 1rem • font-normal
Small Text
14px / 0.875rem • font-normal