Scale

Strict 4px Grid; Tight Furniture, Generous Sections

01 Preview

02 Rule

Layout snaps to the 4px grid. Use the named steps (--space-1…10); don't invent one-off gaps. Micro-furniture sits tight on the grid (--space-2/3); sections separate at 64-144px - that contrast is the signature rhythm. Inside components a few optical values sit off-grid deliberately (10px button padding, 6px gaps) where the grid read wrong at small sizes; that is an existing exception, not licence for new ones.

03 Tokens

Token	Value
--space-1	`4px`
--space-2	`8px`
--space-3	`12px`
--space-4	`16px`
--space-5	`24px`
--space-6	`32px`
--space-7	`48px`
--space-8	`64px`
--space-9	`96px`
--space-10	`144px`
--page-max	`1120px`
--page-pad	`24px`

Defined in src/tokens/spacing.css. Use these via var(--name) rather than literal values — npm run lint enforces it wherever a token holds the value.