Core

Space

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



Spacing scale

SizeCopy URL

Token Namevalue
$Space-size--0
0px
$Space-size--100
2px
$Space-size--200
4px
$Space-size--300
8px
$Space-size--350
12px
$Space-size--400
16px
$Space-size--450
24px
$Space-size--500
32px
$Space-size--600
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)

ExampleCopy URL

padding: $Space-size--400;

Example of using space tokens for padding

UsageCopy URL

  • 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 codeCopy URL

Design token documentation