Spacing

A 4px-based scale, exposed as named steps only — there is no base --spacing token. All six density modes ship in every build and swap at runtime through the data-density attribute on <html> — the “Size” control in the theme picker (bottom-right) — cascading to every nx:p-* and nx:gap-* utility at once. The bars below read the live var, so swap the control and watch them rescale.

The scale

Fourteen steps from 2px to 128px. Each bar’s width is the runtime --nx-spacing-N var, so the whole ladder rescales when the Size mode changes.

--nx-spacing-0_52px

--nx-spacing-14px

--nx-spacing-28px

--nx-spacing-312px

--nx-spacing-416px

--nx-spacing-520px

--nx-spacing-624px

--nx-spacing-832px

--nx-spacing-1040px

--nx-spacing-1248px

--nx-spacing-1664px

--nx-spacing-2080px

--nx-spacing-2496px

--nx-spacing-32128px

Role tokens

Components don’t reach for raw steps — they consume these semantic roles (e.g. a button’s padding). Because the roles map onto the active density mode, swapping Size rescales whole components, not just bare utilities. Values shown are the default baseline.

Token	px	Use
container-p	24	Card / panel inner padding
container-gap	16	Gap between items inside a container
layout-section-gap	32	Vertical gap between page sections
layout-stack-gap	8	Gap in a tight vertical stack

Six density modes

Every build ships all six. Swapping the “Size” control in the theme picker rescales the whole page live. The default mode is the bundled baseline.

Mode	Archetype
compact	Compact / tool
relaxed	Editorial / airy
tight	Tighter utility scale
default ★	Bundled :root default and @theme numeric baseline
comfortable	Density variant
spacious	Density variant