Spacing

Spacing uses a scale of named steps, based on 4px. The density field scales every nx:p-* and nx:gap-* utility at once. Change density (Size in the theme picker) to see it.

The scale

Fourteen steps, from 2px to 128px. Each bar uses its --nx-spacing-N variable, so it resizes with density. nxds has no base --spacing token.

--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 use these role tokens, like a button’s padding, instead of raw steps. Roles follow density too, so whole components resize. Values are for the default density.

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

All six are in every build. Set one with the density field in Appearance, which sets data-density on <html>. default is the starting value.

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