# 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](https://storybook-tangible-ui.pages.dev/?path=/docs/tokens-spacing--docs). Token values are in [the primitive token reference](https://storybook-tangible-ui.pages.dev/docs/reference-primitive-tokens.md).

---

## 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.

---

Interactive version: https://storybook-tangible-ui.pages.dev/?path=/docs/tokens-spacing--docs