Ladder

Thirteen steps carry the whole system. Steps lead a quiet life: the small ones live inside controls, the large ones structure the page.

Token	Size	Where it leads
--space-0	0pt	Intentional zero — touching, not a default.
--space-1	3pt	Inside glyphs and tight chips.
--space-2	6pt	Inside a control — icon to label, pill padding.
--space-3	9pt	Between related controls.
--space-4	12pt	Between siblings in a group.
--space-5	15pt	Header to body inside a section.
--space-6	18pt	Between blocks inside a component.
--space-7	24pt	Between related groups.
--space-8	36pt	Surface padding — tiles and bands.
--space-9	48pt	Section rhythm — between page sections.
--space-10	60pt	Large zone separation.
--space-11	72pt	Hero air.
--space-12	84pt	Maximum structural air.
--space-32	14rem	Off-ladder: the fixed sidebar span.

Margins

The ladder applied outside a box — the air between it and its neighbors. Siblings prefer gap; a margin offsets a box from its surroundings.

margin-left: var(--space-3)

margin-left: var(--space-5)

margin-left: var(--space-8)

The ladder applied inside a box — between its edge and its content. The tinted band is the padding itself.

padding: var(--space-3)

padding: var(--space-5)

padding: var(--space-8)

The main application: the page anatomy itself. Every gap in this schematic is the real token — the same rhythm this page is built with.

top section band — padding: space-9 top · space-8 sides

Section header

Header to body — space-5. This box is a section of the page; its inside mirrors every section on every Doxt page.

Next section header

Header to body — space-5. This box is a section of the page; its inside mirrors every section on every Doxt page.

The air around and between these two sections — space-9 — is the page's section rhythm; the content column holds space-8 of side padding.