Spacing & layout
Built on a 4 px base. Compose layouts from the scale below and trust the rhythm.
Scale
--space-0 0 --space-1 0.25rem --space-2 0.5rem --space-3 0.75rem --space-4 1rem --space-5 1.25rem --space-6 1.5rem --space-8 2rem --space-10 2.5rem --space-12 3rem --space-16 4rem --space-20 5rem --space-24 6rem --space-32 8rem Breakpoints
| Token | Width | Use |
|---|---|---|
--breakpoint-sm | 480px | Large phones |
--breakpoint-md | 768px | Tablets, side-nav appears |
--breakpoint-lg | 1024px | Laptops |
--breakpoint-xl | 1280px | Desktops, max content width hits |
--breakpoint-2xl | 1536px | Large displays |