Spacing
Spacing units
Spacing throughout our design system utilizes Spacing Units
to inform spacing, including margins and
padding for both horizontal and vertical rhythms. It aligns with our 4px/8px baseline grid, providing a single
measurement unit that works holistically across our design assets.
| Spacing unit | Rem | Pixels | Design Token |
|---|---|---|---|
| 0.25 | 0.125rem |
2px | $size-spacing-2 |
| 0.5 | 0.25rem |
4px | $size-spacing-4 |
| 1 | 0.5rem |
8px | $size-spacing-8 |
| 1.5 | 0.75rem |
12px | $size-spacing-12 |
| 2 | 1rem |
16px | $size-spacing-16 |
| 3 | 1.5rem |
24px | $size-spacing-24 |
| 4 | 2rem |
32px | $size-spacing-32 |
| 5 | 2.5rem |
40px | $size-spacing-40 |
| 6 | 3rem |
48px | $size-spacing-48 |
| 7 | 3.5rem |
56px | $size-spacing-56 |
| 8 | 4rem |
64px | $size-spacing-64 |
| 11 | 5.5rem |
88px | $size-spacing-88 |
| 15 | 7.5rem |
120px | $size-spacing-120 |