Spacing
Variables for spacing used for margins and padding
Spacing Scale
The spacing scale is a base-8 scale because 8 is a highly composable number (it can be divided and multiplied many times and result in whole numbers), yet it allows spacing dense enough for a variety of UI's. The scale's exception is that it begins at 4px to allow smaller padding and margin for denser parts of the site, from there it steps up consistently in equal values of 8px.
Design System v2.0 Notes:
In addition to the pixel values, we have provided the values in rem. Due to some of the new sizing in this release of the Design System, some of the values no longer increment by 8. There are additional larger values as well that now go through $spacer-16.
| Token | Scale | Value - px | Value - rem |
|---|---|---|---|
| $spacer-0 | 0 | 0 | 0 |
| $spacer-1 | 1 | 4px | .3125rem |
| $spacer-2 | 2 | 8px | .625rem |
| $spacer-3 | 3 | 20px | 1.25rem |
| $spacer-4 | 4 | 24px | 1.5rem |
| $spacer-5 | 5 | 30px | 1.875rem |
| $spacer-6 | 6 | 40px | 2.5rem |
| $spacer-7 | 7 | 50px | 3.12rem |
| $spacer-8 | 8 | 60px | 3.75rem |
| $spacer-9 | 9 | 64px | 4rem |
| $spacer-10 | 10 | 72px | 4.5rem |
| $spacer-11 | 11 | 80px | 5rem |
| $spacer-12 | 12 | 88px | 5.5rem |
| $spacer-13 | 13 | 100px | 6.25rem |
| $spacer-14 | 14 | 110px | 6.875rem |
| $spacer-15 | 15 | 120px | 7.5rem |
| $spacer-16 | 16 | 140px | 8.75rem |