Spacing tokens separate elements inside components and layout blocks — both horizontally, and vertically.
Our spacing scale helps make things consistent, while also making content easier to scan in a screen layout.

- Use tokens coming from the design system.
- Use semantic tokens instead of token values.
- Don’t use custom or hard-coded values.
Name | Value |
---|---|
space-2x-small | 4px |
space-x-small | 8px |
space-small | 16px |
space-medium | 24px |
space-large | 32px |
space-x-large | 40px |
space-2x-large | 56px |
Horizontal spacing refers to how elements distribute inside a component — for example, avatars from texts and actions. It also applies to cases where components go next to each other in a given layout.
Error messages
The smallest token is used on error messages on inputs, to space the icon from the text that goes alongside it.
Tokens:
space-2x-small

Input fields
Most of the inputs use an 8px horizontal spacing to separate the content inside the field.
Tokens:
space-x-small

Small interactive
Small interactive components use an 8px separation to space the icon and text inside a component.
Tokens:
space-x-small


Data components
More complex components that may host a series of elements such as icons, actions, titles and descriptions, use a separation of 16px. This is so they have space to breathe, and their content is easier to read.
Tokens:
space-small


Vertical spacing refers to how sections of a screen separate within a layout. It also applies to the spacing between components, and elements inside a component.
Stacked content
When stacking content that's closely related, use very little vertical spacing.
Remember that some components which stack (such as items on a list) already include top and bottom padding within the component itself.
Tokens:
None
space-small


Subsections
When a layout has different subsections on the same screen, consistent vertical spacing helps show all subsections are related. These subsections are usually separated by the section header component.
Tokens:
space-large

Headings
Headings are surrounded by different elements, top and bottom. Spacing will be different depending on what those elements are. In some cases, components below headings already include some padding, so separation needs to be adjusted accordingly.
Tokens:
space-x-small
space-medium
space-large
space-x-large





Safety areas
Separation between content and other main wrappers allows information to be visible and distinct, and makes sure it doesn’t clash with the rest of the content.
Tokens:
space-large
