Layout. Page width, gutters, and the header's reserved band.
Widths
Four widths, nested. --container is 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.
Gutters and Chrome
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.