Spacing
Space is the horizontal and vertical distance between or around different design elements.
Our global spacing scale
We have defined a series of global tokens to define our various spacing measures. The global spacing scale works in increments of 8px and 4px.
| $spacing-00 | 0dp/sp/px or 0rem |
| $spacing-01 | 4dp/sp/px or 0.25rem |
| $spacing-02 | 8dp/sp/px or 0.5rem |
| $spacing-03 | 12dp/sp/px or 0.75rem |
| $spacing-04 | 16dp/sp/px or 1rem |
| $spacing-05 | 24dp/sp/px or 1.5rem |
| $spacing-06 | 32dp/sp/px or 2rem |
| $spacing-07 | 40dp/sp/px or 2.5rem |
| $spacing-08 | 56dp/sp/px or 3.5rem |
| $spacing-09 | 64dp/sp/px or 4rem |
| $spacing-10 | 80dp/sp/px or 5rem |
Why do we use 8px and 4px increments?
We use an 8px and 4px grid because they’re easily divisible by 4 and 2. This makes it easy to resize any element or component without the need to use half-pixels.
The importance of sticking to the space scale
Sticking to the space scale is key to every great design. Spatial systems, grids and layouts help us keep a consistent rhythm in our designs, promotes easier decision making and helps our products look visually aligned.