Spacing
This is a token-based 4px spacing scale that ensures consistent spacing in components and layouts.
Spacing philosophy
Every spacing value is a multiple of the 4 px base unit, so all spacing decisions align to the same grid without counting pixels. The visual rhythm, or consistency, make interfaces easier to scan, read, and navigate.
The scale below is a guide, not a script. Think of spacing as a design decision based on hierarchy, consistency, and content. Choose the value that best fits your context, and adjust as needed to keep the layout clear and easy to scan – even if that means stepping outside the scale.
Spacing scale
| Token | Value | Intended use |
|---|---|---|
spacing.none | 0 | Explicitly no spacing (overrides, resets) |
spacing.3xsmall | 2px | Hairline gaps, badge padding |
spacing.2xsmall | 4px | Tight internal spacing within compact components |
spacing.xsmall | 8px | Component internal padding at small scale |
spacing.small | 12px | Standard component padding and small gaps |
spacing.medium | 16px | Default gap between related elements |
spacing.large | 24px | Section separation within a view |
spacing.xlarge | 40px | Major section gaps and layout padding |
spacing.2xlarge | 48px | Page-level sections |
spacing.3xlarge | 56px | Large layout gaps, generous section breathing room |
spacing.4xlarge | 64px | Hero spacing, top-of-page vertical rhythm |