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
Chakra UI
font Size
2xs (0.5rem)
xs (0.75rem)
sm (0.875rem)
md (1rem)
lg (1.125rem)
xl (1.25rem)
2xl (1.5rem)
3xl (1.875rem)
4xl (2.25rem)
5xl (3rem)
6xl (3.75rem)
7xl (4.5rem)
8xl (6rem)
9xl (8rem)
letter Spacing
tighter (-0.05em)
tight (-0.025em)
normal (0em)
wide (0.025em)
wider (0.05em)
widest (0.1em)
font Weight
thin (100)
extralight (200)
light (300)
normal (400)
medium (500)
semibold (600)
bold (700)
extrabold (800)
black (900)
line Height
none (1)
tight (1.25)
snug (1.375)
normal (1.5)
relaxed (1.625)
loose (2)
🐼 Made with Panda