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 |