Our theming sizing units are mainly categorized by Element type and Size.
Sizing / Sizing / container / xl
48px
48px
height
The average recommended height for the header of a calendar
Sizing / Sizing / container / lg
40px
40px
height
The average recommended height for a cell in the datatable
Sizing / Sizing / container / md
32px
32px
height
The minimmum recommended height for a medium container, like a button bar.
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.
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.
Sizing / Sizing / container / 2xs
12px
12px
size
The average recommended height for a small container, like a tag.
Sizing / Sizing / container / 3xs
8px
8px
size
Sizing / Sizing / container / 4xs
4px
4px
size
Sizing / Sizing / interactive / xl
40px
40px
size
The recommended size for extra-large-sized interactive components. For example a large button height.
Sizing / Sizing / interactive / md
32px
32px
size
The recommended size of medium-sized interactive components, for example buttons height.
Sizing / Sizing / interactive / sm
24px
24px
size
The recommended size for small-sized interactive components. For example small button height.
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.
Sizing / Sizing / form_control / field / text_input / lg
98px
98px
height
Sizing / Sizing / form_control / field / text_input / md
32px
32px
height
Sizing / Sizing / form_control / field / click_input / md
32px
32px
size
The recommended height form medium-size click inputs, like checkboxes or radio buttons.
Sizing / Sizing / form_control / field / click_input / sm
16px
16px
size
The recommended height for leaner click inputs, like toggles.
width
The default width of our divider, we usually represent dividers as rectangles on Figma instead of a single line layer.
height
The height for track elements, like the track of the slider.
width
The recommended divider indicator width, used for the indicators of active tabs, for example
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.