A single 8px-based scale drives margins, padding, and gaps across the site, so whitespace stays consistent instead of ad-hoc. A per-site density multiplier scales the whole rhythm up or down — tighter for compact UIs, looser for more breathing room.
Location: Site Config → Theme → Spacing → Density (theme.spacing.scale). Current density: 1×. In code, read a step with getSpace(props, 'MD')so it tracks the density knob.
Bars are drawn at the current density (1×); the base value is the 1.0 default.
XXS
4px base
XS
8px base
SM
12px base
MD
16px base
LG
24px base
XL
32px base
XXL
48px base
XXXL
64px base
XS (8px)
MD (16px)
XL (32px)
These cards take their padding from the scale, so moving the density slider in Site Config visibly loosens or tightens them — along with page padding, grids, and gaps site-wide.
Comfortable
Raise the density above 1.0 for airier layouts with more breathing room between elements.
Default (1.0)
The baseline rhythm. Most sites stay here; the scale alone keeps spacing consistent.
Compact
Lower the density below 1.0 to tighten things up for dense, information-rich screens.
Reach for adjacent steps rather than inventing one-off values — small jumps (XS→SM→MD) for tight component spacing, larger steps (LG→XL→XXL) for separating sections. Keeping to the scale is what makes the density knob work everywhere.
