Design Tokens
Color palette, spacing, typography, and more
Colors
Background
--background
Foreground
--foreground
Primary
--primary
Primary Foreground
--primary-foreground
Secondary
--secondary
Secondary Foreground
--secondary-foreground
Muted
--muted
Muted Foreground
--muted-foreground
Accent
--accent
Accent Foreground
--accent-foreground
Destructive
--destructive
Destructive Foreground
--destructive-foreground
Border
--border
Input
--input
Ring
--ring
Spacing Scale
1
0.25rem (4px)
2
0.5rem (8px)
3
0.75rem (12px)
4
1rem (16px)
6
1.5rem (24px)
8
2rem (32px)
12
3rem (48px)
16
4rem (64px)
24
6rem (96px)
Typography
xs
The quick brown fox jumps over the lazy dog
0.75rem (12px)
sm
The quick brown fox jumps over the lazy dog
0.875rem (14px)
base
The quick brown fox jumps over the lazy dog
1rem (16px)
lg
The quick brown fox jumps over the lazy dog
1.125rem (18px)
xl
The quick brown fox jumps over the lazy dog
1.25rem (20px)
2xl
The quick brown fox jumps over the lazy dog
1.5rem (24px)
3xl
The quick brown fox jumps over the lazy dog
1.875rem (30px)
4xl
The quick brown fox jumps over the lazy dog
2.25rem (36px)
Shadows
sm
base
md
lg
xl
2xl
Border Radius
rounded-sm
rounded-md
rounded-lg
rounded-xl