Skip to main content


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.