Spacing
Spacing tokens keep margin, padding, and gutters consistent across components and screens. The scale is rem-based so layout grows with the user's text size.
Rems and Pixels
The root font size is 16px (1rem). Rem units scale with the browser's text size settings; pixels do not scale as reliably. Figma works in pixels, so designs assume 16px = 1rem.
Spacing Scale + Tokens
Use these tokens for margin, padding, and gaps. Prefer the named scale over arbitrary values.
| Token | Rem | Px | Preview |
|---|---|---|---|
$spacing-12_5 | 0.125 | 2 | spacing/0.5 |
$spacing-25 | 0.25 | 4 | spacing/1 |
$spacing-50 | 0.5 | 8 | spacing/2 |
$spacing-75 | 0.75 | 12 | spacing/3 |
$spacing-100 | 1 | 16 | spacing/4 |
$spacing-150 | 1.5 | 24 | spacing/6 |
$spacing-200 | 2 | 32 | spacing/8 |
$spacing-250 | 2.5 | 40 | spacing/10 |
$spacing-300 | 3 | 48 | spacing/12 |
$spacing-350 | 3.5 | 56 | spacing/14 |
Usage Guidelines
Spacing tokens apply margin, padding, and gutters consistently. Which token to use is defined at the component level — refer back here for the available scale.
When in doubt, use 1rem / 16px
Elements should generally have 1rem (16px) of spacing between them. Elements in a bounding box — nav headers, cards, menus, and similar — should have 1rem padding on all sides. When unsure, $spacing-100 is the default.
These are just guidelines
Many elements will not neatly size to 0.5rem (8px) increments — especially boxes sized by percentage of screen or parent. That is fine. Visual rhythm comes more from spacing between elements than from perfectly sizing the elements themselves.
Unique elements such as main navigation may be fine-tuned for look and feel. Icon and text pairings sometimes need small adjustments because icon sizes vary.
This scale establishes visual consistency. If something does not look consistent, it probably needs a bit of tweaking — and that is ok.