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.
Example Description Token name
- Spacing 00 0dp/sp/px or 0rem$spacing-00
- Spacing 01 4dp/sp/px or 0.25rem$spacing-01
- Spacing 02 8dp/sp/px or 0.5rem$spacing-02
- Spacing 03 12dp/sp/px or 0.75rem$spacing-03
- Spacing 04 16dp/sp/px or 1rem$spacing-04
- Spacing 05 24dp/sp/px or 1.5rem$spacing-05
- Spacing 06 32dp/sp/px or 2rem$spacing-06
- Spacing 07 40dp/sp/px or 2.5rem$spacing-07
- Spacing 08 56dp/sp/px or 3.5rem$spacing-08
- Spacing 09 64dp/sp/px or 4rem$spacing-09
- Spacing 10 80dp/sp/px or 5rem$spacing-10
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.