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

Size

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;

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