System
Four widths, nested. --containeris a retune of a registry token; the other three are this site's own.
| Width | Token | Value | Note |
|---|---|---|---|
| Page | --container | 960px | Chrome and rules: the header, the footer, and the widest a section may run. The registry sets this to 1540px for a docs layout with a sidebar; at that width a single column of prose reads as a banner.Registry ships 1540px |
| Content | --container-narrow | 800px | The default column for a content section inside the page width. |
| Prose | --max-width-md | 384px | Running text. Narrow enough to hold a comfortable line length without setting a character measure. |
| Panel | --max-width-sm | 320px | A form column or a narrow card. |
The space outside the column, and the band the fixed header reserves at the top of every page.
| Token | Value | Note |
|---|---|---|
| --spacing-gutter | 32px | The page's side inset at desktop widths. |
| --spacing-gutter-snug | 24px | The tighter inset, for a section that should sit closer to the edge than the page does. |
| --header-h | 80px | The height the fixed header occupies. Anything that must clear the header offsets by this rather than by a number. |
| --spacing-chrome-bleed | 16px | How far a full-bleed element may run past the gutter. A retune: the registry ships 0, and this site widens it at larger viewports. |