Tokens · Token families

Spacing and sizing

The space scale for gaps and padding, and the heights of buttons and fields.

Files: tokens.json → spacing

Take every gap, padding and margin from this scale, so spacing lines up across components. Use the smaller steps inside a component and the larger ones between sections.

--luz-space-3xs unit × ½ · 2px
--luz-space-2xs unit × 1 · 4px
--luz-space-xs unit × 2 · 8px
--luz-space-sm unit × 3 · 12px
--luz-space-md unit × 4 · 16px
--luz-space-lg unit × 6 · 24px
--luz-space-xl unit × 8 · 32px
--luz-space-2xl unit × 12 · 48px
--luz-space-3xl unit × 16 · 64px
--luz-space-4xl unit × 24 · 96px

--luz-space-unit0.25rem · 4pxThe grid every step is a multiple of, in rem so spacing follows the reader's font size

A 2px hairline, then the unit --luz-space-unit (0.25rem, 4px at a 16px root) times 1, 2, 3, 4, 6, 8, 12, 16 and 24: each power of two and its 1.5× half step. The unit is in rem, so spacing follows the font size the reader sets in the browser, as text does. Set it on :root to change the whole scale; components read the steps, never the unit.

Control heights

tokens.json → control

--luz-control-sm · 28px

--luz-control-md · 36px

--luz-control-lg · 44px

--luz-control-xl · 56px

44px is the WCAG 2.5.5 target size; the other steps are about 1.25× apart on the 4px grid.

--luz-control-sm: close buttons and other small icon targets.
--luz-control-md: small buttons.
--luz-control-lg: buttons and fields, the default.
--luz-control-xl: large buttons.