Spacing Tokens

Prefer aliases (xxs-xxl) over primitives (1-50) where possible. Spacing tokens are for use as padding, gap, and margin values exclusively. When spacing must scale with screen, container, or text size, relative values (em, vw, vh, cqw, cqh, etc.) are permitted. When extending the system with new components, non-standardized fixed px values are never permitted. Primitive values are calculated using base value --tui-spacing-base (default 4px).

Visual swatches: see the interactive page. Token values are in the primitive token reference.

Notes

• The gap between the pink dashed lines represents the actual vertical space equal to the token’s computed value.
• Values are read live from CSS variables, so host overrides show up here automatically.