Spacing
Space is the unseen component in designed solutions that enables clear, concise, and consistent arrangement of interface elements across a screen.
The spacing system uses standardized tokens to ensure consistent spatial relationships across all interface elements. These tokens are based on an 8-pixel grid system with additional fractional values for fine-grained control.
Spacing Tokens
Spacing tokens provide a systematic approach to managing space in your designs. Built on multiples of 8 pixels, these tokens ensure visual harmony and consistency across all components and layouts. The system includes half-step (4px) and quarter-step (2px) values for precise spacing requirements.
| Token | Pixel Value | REM Value | Visual |
|---|---|---|---|
| 0px (8 × 0) | 0rem | ||
| 2px (8 × 0.25) | 0.125rem | ||
| 4px (8 × 0.5) | 0.25rem | ||
| 8px (8 × 1) | 0.5rem | ||
| 16px (8 × 2) | 1rem | ||
| 24px (8 × 3) | 1.5rem | ||
| 32px (8 × 4) | 2rem | ||
| 40px (8 × 5) | 2.5rem | ||
| 48px (8 × 6) | 3rem | ||
| 56px (8 × 7) | 3.5rem | ||
| 64px (8 × 8) | 4rem | ||
| 72px (8 × 9) | 4.5rem | ||
| 80px (8 × 10) | 5rem |
Implementation
These spacing tokens can be applied across three primary contexts: inset (padding), stack (vertical spacing), and inline (horizontal spacing). Each token maintains the 8-pixel grid relationship to ensure consistent alignment and visual rhythm throughout your interface.
When implementing spacing in code, reference these tokens by their semantic names rather than hardcoded pixel values. This approach maintains design system consistency and makes future updates more manageable across your entire application.
