Space

Flowing surfaces — marketing, docs, print, this site — sit on an 8px doubling grid: everything is a multiple of 8, each step up doubles, and the 32px gutter belongs to the column rather than sitting between them. Columns halve to 8 below 1056px and to 4 below 672px, so spans clamp instead of reflowing. Resize the window and the readout changes.

Viewport is a layout axis, not a density axis. Density is data-density; a coarse pointer is a hit-target floor. Below 672px the frame is one column: topbar, a horizontal nav strip, main, status. Between 672 and 1055 the grid is 8 columns; an app shell keeps the sidebar. The language-site shell stacks below 1312px. Section tabs wrap onto their own row below 1056px. At 1056 and up the grid is 16 columns. Splits and tiles clamp. There is no hamburger. A long site catalog becomes a select — the current page is the label — rather than a drawer.

Twelve steps from 2 to 128px, named by index rather than t-shirt size. Layout uses the 8-based steps; the 4px steps exist for control interiors. Controls are 24 / 30 / 38px tall; table and list rows are 28px.

Layout is full-bleed regions divided by hairlines, not floating cards on a canvas. Panels butt directly against each other and share a single 1px border. Below 1056px the specimen drops the inspector; below 672px it is top, main, status.