Theme
Space and size
One spacing scale in rem, named by multiples of 0.25rem, and the fixed sizes of controls, icons, borders and the focus ring. Layout primitives take a step of the scale, so a gap off the scale is a type error.
Space
| Token | Value | Preview | Use |
|---|---|---|---|
space.0 | 0rem | ||
space.1 | 0.25rem | ||
space.2 | 0.5rem | ||
space.3 | 0.75rem | ||
space.4 | 1rem | ||
space.5 | 1.25rem | ||
space.6 | 1.5rem | ||
space.8 | 2rem | ||
space.10 | 2.5rem | ||
space.12 | 3rem | ||
space.16 | 4rem | ||
space.20 | 5rem | ||
space.24 | 6rem |
Size
| Token | Value | Use |
|---|---|---|
size.controlSm | 1.75rem | Height of a small control. |
size.controlMd | 2.25rem | Height of a control. |
size.controlLg | 2.75rem | Height of a large control. |
size.iconSm | 1rem | An icon inside small text or a small control. |
size.iconMd | 1.125rem | An icon beside body text or in a control. |
size.iconLg | 1.5rem | A standalone icon. |
size.target | 1.5rem | The smallest pointer target (WCAG 2.5.8: 24 CSS pixels). |
size.border | 1px | The width of borders and dividers. |
size.focusRing | 2px | The width of the focus ring. |
size.focusOffset | 1px | The gap between an element and its focus ring. |