Chakra UI
TOKENS
Colors
Letter Spacings
Line Heights
Font Weights
Font Sizes
Sizes
Border Radius
Text Styles
Layer Styles
Token analyzer
PLAYGROUND
Typography
Spacing
Color Contrast
Gap
Spacing
breakpoint-2xl
breakpoint-xl
breakpoint-lg
breakpoint-md
breakpoint-sm
fit - fit-content
max - max-content
min - min-content
full - 100%
prose - 65ch
8xl - 1440px
7xl - 1280px
6xl - 1152px
5xl - 1024px
4xl - 896px
3xl - 768px
2xl - 672px
xl - 576px
lg - 512px
md - 448px
sm - 384px
xs - 320px
3.5 - 14px
2.5 - 10px
1.5 - 6px
0.5 - 2px
96 - 384px
80 - 320px
72 - 288px
64 - 256px
60 - 240px
56 - 224px
52 - 208px
48 - 192px
44 - 176px
40 - 160px
36 - 144px
32 - 128px
28 - 112px
24 - 96px
20 - 80px
16 - 64px
14 - 56px
12 - 48px
11 - 44px
10 - 40px
9 - 36px
8 - 32px
7 - 28px
6 - 24px
5 - 20px
4 - 16px
3 - 12px
2 - 8px
1 - 4px
Horizontal
01
02
03
Vertical
01
02
03
Padding
Spacing
breakpoint-2xl
breakpoint-xl
breakpoint-lg
breakpoint-md
breakpoint-sm
fit - fit-content
max - max-content
min - min-content
full - 100%
prose - 65ch
8xl - 1440px
7xl - 1280px
6xl - 1152px
5xl - 1024px
4xl - 896px
3xl - 768px
2xl - 672px
xl - 576px
lg - 512px
md - 448px
sm - 384px
xs - 320px
3.5 - 14px
2.5 - 10px
1.5 - 6px
0.5 - 2px
96 - 384px
80 - 320px
72 - 288px
64 - 256px
60 - 240px
56 - 224px
52 - 208px
48 - 192px
44 - 176px
40 - 160px
36 - 144px
32 - 128px
28 - 112px
24 - 96px
20 - 80px
16 - 64px
14 - 56px
12 - 48px
11 - 44px
10 - 40px
9 - 36px
8 - 32px
7 - 28px
6 - 24px
5 - 20px
4 - 16px
3 - 12px
2 - 8px
1 - 4px
Horizontal
max-content
Vertical
max-content
All sides
max-content
🐼 Made with Panda