Spacing

A single linear-then-modular scale drives every gap, pad and margin. Inherited from the hub unchanged — use tokens, never raw pixels, so density stays consistent across the kit.

Spacing scale

Each bar renders at its real token width. Steps climb in 2–4px increments through the dense UI range, then jump to layout-scale spacing.

--spacing-050 — · —

--spacing-100 — · —

--spacing-150 — · —

--spacing-200 — · —

--spacing-250 — · —

--spacing-300 — · —

--spacing-400 — · —

--spacing-500 — · —

--spacing-600 — · —

--spacing-650 — · —

--spacing-700 — · —

--spacing-800 — · —

--spacing-900 — · —

--spacing-950 — · —

--spacing-1000 — · —

Usage

Reach for the dense steps (050–400) inside controls and cards; the larger steps (500+) for section and page rhythm.

.card {
  padding: var(--spacing-400);   /* 16px */
  gap: var(--spacing-300);       /* 12px */
}
.section + .section {
  margin-top: var(--spacing-700); /* 48px */
}