Spacing & Radius
The size scale for gaps and paddings, and the border radius scale.
Size scale
Gaps, paddings and fixed sizes come from one scale. The number is the size in hundredths of a rem: --size--100 is 1rem. As the scale is in rem, it follows the root font size of the theme — the productive theme is denser than the expressive one.
--size--10.125rem--size--25.25rem--size--35.375rem--size--50.5rem--size--75.75rem--size--1001rem--size--1251.25rem--size--1501.5rem--size--2002rem--size--2502.5rem--size--3003rem--size--4004rem--size--5005rem--size--6006rem--size--8008remChoosing a size
Related elements sit closer together than unrelated ones. Inner spacing is smaller than outer spacing, see Nesting.
| Between | Size |
|---|---|
| Icon and label | --size--35 |
| Items of a group, e.g. buttons | --size--50 |
| Content of a tile and its padding | --size--100 |
| Tiles and sections of a page | --grid--gap |
| Large page sections | --size--300 |
Border radius
Radii follow the same naming. Small elements like tags use small radii, surfaces like tiles use --border-radius--75, pills and avatars use --border-radius--full.
--border-radius--15--border-radius--25--border-radius--35--border-radius--50--border-radius--65--border-radius--75--border-radius--100--border-radius--200--border-radius--fullLayout tokens
| Token | Use |
|---|---|
--grid--gap | Gap between tiles, grows with the viewport |
--container-width--primary | Maximum width of page content |
--container-width--secondary | Narrower content, e.g. forms |
--container-width--tertiary | Text heavy pages |
--size--border-width | 1px borders |
--size--focus-ring-width | Width of focus rings |
--size--target-min | Smallest tap target, 24px |
Using sizes
Use the custom properties, never raw pixel values.
.card {padding: var(--size--100);gap: var(--size--50);border-radius: var(--border-radius--75);}