Spacing

The organization of space is critical to every great design. Spatial systems provide rules that give your designs a consistent rhythm and constrain decision-making and consistency across teams.

Our theming spacing units are mainly categorized by Element type and Size.

Extra-Large containers

Spacing / Spacing / container / xl
24px
24px
gap
The recommended gap between items inside a xlarge container, like progress and loading.
32px
32px
padding
We uses this spacing as the default padding for large containers like modals.

Large container

Spacing / Spacing / container / lg
16px
16px
gap
The recommended gap between items inside a large container, like a modal.
24px
24px
padding
The default horizontal padding of a medium-sized container, like a card.

Medium container

Spacing / Spacing / container / md
12px
12px
gap
The recommended medium gap between items inside a container, like the gap between elements inisde a modal.
16px
16px
padding
The default horizontal padding of a medium-sized container, like an alert.

Small container

Spacing / Spacing / container / sm
8px
8px
gap
The recommended medium gap between items inside a container, like the gap between elements inisde an alert.
12px
12px
padding
The default padding of a small-sized container, like a tooltip.

Extra-Small container

Spacing / Spacing / container / xs
4px
4px
gap
The recommended gap between items inside a container, like the gap between elements inisde a card.
8px
8px
padding
The default padding of a extra small-sized container, like the container of an eyebrow title.

2 Extra-Small container

Spacing / Spacing / container / 2xs
2px
2px
gap
The recommended xsmall gap between items inside a container, like the gap between elements inside a tag.
2px
2px
padding
The default padding of a our smallest containers, like the container of an tag.

Extra-Large Interactive elements

Spacing / Spacing / interactive / xl
12px
12px
gap
The recommended gap between the content inside of a xlarge-sized interactive component.
16px
16px
padding
The recommended horizontal padding for xlarge-sized components.

Large Interactive elements

Spacing / Spacing / interactive / lg
8px
8px
gap
The recommended gap between the content inside of a medium-sized interactive component.
12px
12px
padding
The recommended horizontal padding for large-sized components.

Medium Interactive elements

Spacing / Spacing / interactive / md
4px
4px
gap
The recommended gap between the content inside of a medium-sized interactive component.
8px
8px
padding
The recommended horizontal padding for medium-sized components.

Small Interactive elements

Spacing / Spacing / interactive / sm
2px
2px
gap
The recommended gap between the content inside of a small-sized interactive component.
4px
4px
padding
The recommended horizontal padding for small-sized horizontal components.

Extra-Small Interactive elements

Spacing / Spacing / interactive / xs
2px
2px
padding
The recommended padding for extra-small-sized interactive components.

Form field units

These are the spacing units we use in every form field we have

4px
gap
The default gap for between elements inside a form field, for example, the space between a label and its input or its helper text.
8px
padding
The default gap for between elements inside a form field, for example, the space between a label and its input or its helper text.

Medium Text-Based input elements

Spacing / Spacing / form_control / field / text_input / medium
12px
12px
padding
The recommended horizontal padding for text inputs.

Small Text-Based input elements

Spacing / Spacing / form_control / field / text_input / small
8px
8px
padding
The default vertical padding for inputs inside a form control.

Click-based input elements

Spacing / Spacing / form_control / field / click_input
8px
8px
gap
The default gap for between elements inside a form group, like checkboxes, radio buttons.
4px
4px
padding
The default padding for between elements inside a form group, like checkboxes, radio buttons.

Grouped input elements

Spacing / Spacing / form_control / field / grouped_input
8px
8px
gap
The recommended gap between groped inputs, like the sapce inbetween checkboxes or radio buttons.

Large divider elements

Spacing / Spacing / divider / lg
8px
8px
margin

Medium divider elements

Spacing / Spacing / divider / md
4px
4px
margin
4px
4px
padding

Small divider elements

Spacing / Spacing / divider / sm
2px
2px
margin

Extra-Small divider elements

Spacing / Spacing / divider / xs
1px
1px
margin

Focus outline units

Spacing / Spacing / focus_outline
1px
1px
offset