Size

The organization of space is critical to every great design. Mindful sizing gives your designs a consistent rhythm and constrains decision-making and consistency across teams.

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

Extra-Large containers

Sizing / Sizing / container / xl
48px
48px
height
The average recommended height for the header of a calendar

Large container

Sizing / Sizing / container / lg
40px
40px
height
The average recommended height for a cell in the datatable

Medium container

Sizing / Sizing / container / md
32px
32px
height
The minimmum recommended height for a medium container, like a button bar.

Small container

Sizing / Sizing / container / sm
20px
20px
min_height
The minimum height recommended for a small container, like a tooltip.
32px
32px
height
The average recommended height for a small container, like a tooltip.

Extra-Small container

Sizing / Sizing / container / xs
16px
16px
min_height
The minimum height recommended for a small container, like a tag.
20px
20px
height
The average recommended height for a small container, like a tag.

2 Extra-Small container

Sizing / Sizing / container / 2xs
12px
12px
size
The average recommended height for a small container, like a tag.

3 Extra-Small container

Sizing / Sizing / container / 3xs
8px
8px
size

4 Extra-Small container

Sizing / Sizing / container / 4xs
4px
4px
size

Extra-Large Interactive elements

Sizing / Sizing / interactive / xl
40px
40px
size
The recommended size for extra-large-sized interactive components. For example a large button height.

Medium Interactive elements

Sizing / Sizing / interactive / md
32px
32px
size
The recommended size of medium-sized interactive components, for example buttons height.

Small Interactive elements

Sizing / Sizing / interactive / sm
24px
24px
size
The recommended size for small-sized interactive components. For example small button height.

Extra-Small Interactive elements

Sizing / Sizing / interactive / xs
20px
20px
size
The recommended size for small-sized interactive components. For example small link.
20px
20px
height
This token is recommended for special interactive elements, such as color swatches in the Rich Text Editor.
20px
20px
width
This token is recommended for special interactive elements, such as color swatches in the Rich Text Editor.

Large Text-Based Input elements

Sizing / Sizing / form_control / field / text_input / lg
98px
98px
height

Medium Text-Based Input elements

Sizing / Sizing / form_control / field / text_input / md
32px
32px
height

Medium Click-based Input elements

Sizing / Sizing / form_control / field / click_input / md
32px
32px
size
The recommended height form medium-size click inputs, like checkboxes or radio buttons.

Small Click-based Input elements

Sizing / Sizing / form_control / field / click_input / sm
16px
16px
size
The recommended height for leaner click inputs, like toggles.

Divider elements

1px
width
The default width of our divider, we usually represent dividers as rectangles on Figma instead of a single line layer.
4px
height
The height for track elements, like the track of the slider.
2px
width
The recommended divider indicator width, used for the indicators of active tabs, for example

Assets sizing units

Sizing / Sizing / assets / xs
8px
8px
size
The recommended size of small-sized for assets, for example super small icons.
Sizing / Sizing / assets / sm
16px
16px
size
The recommended size of small-sized for styles, for example small icons.
Sizing / Sizing / assets / xl
48px
48px
size
The recommended size of xlarge-sized for styles, for example avatar
Sizing / Sizing / assets / lg
32px
32px
size
The recommended size of large-sized for styles, for example icons.
Sizing / Sizing / assets / md
24px
24px
size
The recommended size of medium-sized for styles, for example medium icons.