Design Tokens
Design tokens are the visual design atoms of the design system — specifically, they are named entities that store visual design attributes.
Colors
Brand
primary#1e293b
primaryDark#0f172a
accent#3b82f6
accentLight#dbeafe
accentDark#1d4ed8
Background
default#ffffff
subtle#f8fafc
muted#f1f5f9
inverse#1e293b
inverseDark#0f172a
Text
primary#0f172a
secondary#475569
muted#94a3b8
inverse#ffffff
link#3b82f6
Typography
Font Families
'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif
The quick brown fox jumps over the lazy dog.
'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace
The quick brown fox jumps over the lazy dog.
Font Sizes
xs
0.75rem
Visual hierarchy
sm
0.875rem
Visual hierarchy
base
1rem
Visual hierarchy
lg
1.125rem
Visual hierarchy
xl
1.25rem
Visual hierarchy
2xl
1.5rem
Visual hierarchy
3xl
1.875rem
Visual hierarchy
4xl
2.25rem
Visual hierarchy
Spacing
0
0
1
0.25rem
2
0.5rem
3
0.75rem
4
1rem
5
1.25rem
6
1.5rem
8
2rem
10
2.5rem
12
3rem
16
4rem
20
5rem
0.5
0.125rem
1.5
0.375rem
2.5
0.625rem
Border Radius
none0
sm0.25rem
md0.375rem
lg0.5rem
xl0.75rem
2xl1rem
full9999px