Appearance
Spacing
The space between and inside things, on one scale.
Each step is a utility: --spacing-4 is p-4, gap-4, mt-4. The named steps at the end are a region's: p-region inside it, p-region-dense in a dense one, gap-region-gap between regions.
| Token | Size | Specimen |
|---|---|---|
--spacing-0\.5 | 2px | |
--spacing-1 | 4px | |
--spacing-1\.5 | 6px | |
--spacing-2 | 8px | |
--spacing-3 | 12px | |
--spacing-4 | 16px | |
--spacing-5 | 20px | |
--spacing-6 | 24px | |
--spacing-8 | 32px | |
--spacing-10 | 40px | |
--spacing-11 | 44px | |
--spacing-12 | 48px | |
--spacing-16 | 64px | |
--spacing-20 | 80px | |
--spacing-24 | 96px | |
--spacing-region | 20px | |
--spacing-region-dense | 16px | |
--spacing-region-gap | 12px |