Space Tokens
Spacing system based on multiples of 4px. Consistency across all components and layouts.
Multiples of 4px. A value outside the scale breaks the vertical rhythm of the whole screen.
xsInternal gaps, icons
sm
mdDefault padding
lg
xl
2xl
3xl
Eight named levels. An invented z-index always beats whoever needs it most.
| base | Default content | |
| dropdown | Dropdown menus | |
| sticky | Fixed headers | |
| overlay | Backdrops | |
| modal | Modals, sheets | |
| popover | Tooltips, popovers | |
| toast | Toast notifications | |
| max | Cookie banner |
| Token | Width | Columns | Use |
|---|---|---|---|
| xs | 1 col | Mobile small | |
| sm | 1-2 cols | Mobile large | |
| md | 2 cols | Tablet portrait | |
| lg | 2-3 cols | Tablet landscape / Laptop | |
| xl | 3-4 cols | Desktop | |
| 2xl | 4 cols | Wide desktop |