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.

Example Description Token name
  • Spacing 00
    $spacing-00
  • Spacing 01
    $spacing-01
  • Spacing 02
    $spacing-02
  • Spacing 03
    $spacing-03
  • Spacing 04
    $spacing-04
  • Spacing 05
    $spacing-05
  • Spacing 06
    $spacing-06
  • Spacing 07
    $spacing-07
  • Spacing 08
    $spacing-08
  • Spacing 09
    $spacing-09
  • Spacing 10
    $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 help our teams and our products' visual look to stay aligned.