Visual

Space

Our spacing tokens make it easy to add padding, margins, and position coordinates.



Spacing scale

Size

Token Namevalue
0px
2px
4px
8px
12px
16px
24px
32px
40px

We operate on an 8px grid with two half sizes. For larger space sizes, multiply Space 600 (40px) by any whole number between 2 and 40. (ex. 40px x 2 = 80px, 40px x 3 = 120px)

Example

padding: $Space-size--400;

Example of using space tokens for padding

Usage

  • Spacing can be applied uniformly or individually to the sides of an element.
  • Spacing is flexible based on viewport size. It can scale up or down proportional to the root font size.

Using Space in code

Design token documentation