# Brand

## 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`.