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.
| Token | Scale | Value |
|---|---|---|
| $spacer-0 | 0 | 0 |
| $spacer-1 | 1 | 4px |
| $spacer-2 | 2 | 8px |
| $spacer-3 | 3 | 16px |
| $spacer-4 | 4 | 24px |
| $spacer-5 | 5 | 32px |
| $spacer-6 | 6 | 40px |
| $spacer-7 | 7 | 48px |
| $spacer-8 | 8 | 56px |
| $spacer-9 | 9 | 64px |
| $spacer-10 | 10 | 72px |
| $spacer-11 | 11 | 80px |
| $spacer-12 | 12 | 88px |