Spacing

Thirteen steps on a 4px base. The scale is intentionally sparse at the top end — gaps exist so a component can't reach for an "almost right" value.

Source: packages/tokens/src/spacing.tokens.json.

The scale

Tailwind mapping

The step numbers match Tailwind v4's default spacing utilities directly: p-1 = 4px, p-4 = 16px, p-24 = 96px. Reach for the Tailwind utility and you get the token value for free — no custom @theme mapping required.

Tailwind ships every integer step from 0 to 96 by default. Clarity by Nivoda intentionally does not. p-7 (28px), p-9 (36px), p-11 (44px), p-14 (56px), p-18 (72px), p-22 (88px) are not in the scale — the gaps are load-bearing. If a layout "needs" 28px, the answer is 24 or 32, not a new token.

When to use which

• spacing.1 / spacing.2 — icon-to-label gap, dense form rows.
• spacing.3 / spacing.4 — default padding inside buttons, inputs, list items.
• spacing.6 / spacing.8 — card padding, section breathing room inside a surface.
• spacing.12 / spacing.16 — gaps between sections on a page.
• spacing.20 / spacing.24 — hero and landing-page blocks. Rarely justified inside product surfaces.

Consumption

Every spacing value in the component library is applied through a Tailwind utility (p-*, m-*, gap-*, space-*). Raw pixel literals are a lint violation — if a component needs a value that isn't in the scale, the fix is to pick an adjacent step, not to add the value.