Spacing
Spacing tokens define consistent spacing values for margins, padding, and gaps throughout the UI. Based on a 4px/8px grid system.
| Preview | Token | Value | Description |
|---|---|---|---|
| 2 | 2px | Fine-tune adjustments; Link inline padding | |
| 4 | 4px | Tight gaps; ButtonGroup, Menu compact padding | |
| 8 | 8px | Standard gap; SectionTabs, TagFilter, RadioGroup | |
| 12 | 12px | MenuItem padding; TagLink, Checkbox/Radio spacing | |
| 16 | 16px | Input padding; Modal, Button md size, NavigationTab | |
| 24 | 24px | SectionTabs, Dialog, BottomSheet padding | |
| 32 | 32px | Dialog header padding; large section spacing | |
| 40 | 40px | Layout spacing; section margins | |
| 48 | 48px | Layout spacing; content blocks | |
| 56 | 56px | Layout spacing; major sections | |
| 64 | 64px | Layout spacing; page-level sections | |
| 72 | 72px | Layout spacing; large page-level gaps |