Tokens

Space

A 4px base with a 2px micro step. The fine end carries component interiors and the coarse end carries page rhythm — with very little used in between, which is what keeps density legible.

Scale

Each bar is drawn at the width of its own token, so the ramp reads as a shape rather than a list.

--space-4xs · 2px · optical nudges only

--space-3xs · 4px · icon gaps

--space-2xs · 8px · inside a control

--space-xs · 12px · control padding

--space-sm · 16px · card interiors

--space-md · 24px · between related blocks

--space-lg · 32px · between blocks

--space-xl · 48px · between sections

--space-2xl · 72px · between major sections

--space-3xl · 104px · page top and tail

Steps are named rather than numbered so that component code reads as intent. A gap of --space-2xs says “these belong to each other”; a gap of 8px says nothing.

Containers

--measure 70ch — the reading limit. Applied globally to p and li, because a full-width paragraph on a desktop is unreadable no matter how good the type is.
--container 1180px — wide documents and specimen grids, and the width these documentation pages are built on. Every section holds the same measure, so the page rails never move as you navigate.
--container-narrow 720px — prose pages.
--rail-offset 36px and --rail-outer-gap 30px — the gutter between the container and the first page rail, and between the two rails. Together they are --rail-reach-outer, which is how anything that has to meet a rail finds it without measuring.
--gutter clamp(16px, 4vw, 32px) — the page edge. Fluid, so a phone is not wasting a third of its width on margin.
--sidebar-width 244px — the navigation panel, which is the container's first column rather than a margin: that is what lets these pages keep the full measure. It collapses behind a disclosure button below 1024px.