Foundations

Layout

Container widths, sticky chrome, and document rhythm — the rules behind every doc and demo page.

Container

The shell uses three width tiers:

max-w-3xl — long-form prose (docs body, article).
max-w-5xl — feature pages (landing tiles, demos with side-by-side).
max-w-7xl — full app chrome (header, footer, dashboard).

Sticky chrome

sticky top-0 z-40 backdrop-blur

Header sits over a translucent paper background, scrolls always stay readable.

Rhythm

Vertical stacks default to gap-3 (12px) for control groups, gap-6 (24px) for content blocks, gap-12 (48px) for top-level page sections. Anything else needs a reason.