The frame
Every band on this site sits inside a rail on each edge. The rail is
clamp(1rem, 18.75vw - 6rem, 3rem) wide, so it grows with the viewport and
stops at 48 pixels, and it always draws the line at its inner edge. Above 1440
pixels a gutter opens between the rail and the content column and draws a
second line at its own inner edge — 1440 because that is the first width where
the gutter is wide enough for the two lines not to read as one thickened rule.
The content column is capped at 80rem. Everything else is margin. The gutter absorbs whatever is left over, which is what keeps the two sides symmetric rather than piling the slack against one edge.
Corner nodes
Where two bands meet, a six-pixel square rotated 45 degrees marks the corner, offset so its centre sits on the seam. That only holds because of one invariant: every frame row draws the boundary as a border on its own bottom edge, and the last row on the page draws none. A border moves the row’s padding box by the same pixel the node is offset against, so the node lands on the line without knowing anything about the row on the other side. A line drawn by anything else — an absolutely positioned hairline, a border on content nested inside the row — misses by one pixel, every time. They are decoration, hidden from assistive technology, and they are the one flourish the system allows itself.
Lines carry the structure
There are three kinds of line and they are not interchangeable:
- Rails and seams are full-strength
gray-500, painted as real borders. They are structure, and they must survive forced colours — which a border does, and which the seam names explicitly anyway. - Hatching is a 135-degree repeating gradient, one pixel of ink every five. It marks a major division between sections.
- Wisps are alpha tints at around 28%. They are ornament. They are allowed to disappear under forced colours, because a deliberate whisper repainted at full contrast is not the same design.
Type
IBM Plex Serif sets every heading, at weights between 340 and 400 — light enough that a large heading does not shout. IBM Plex Sans sets body text. The mono face carries eyebrows, metadata and code, always uppercase with wide tracking when it is a label.
Motion
One transition, 150 milliseconds, ease-out, on colour and small translations.
The page frame scales fractionally when a sheet opens over it. Everything stops
under prefers-reduced-motion.