Hairlines Over Shadows

Depth on the web is usually faked with shadows. A card floats above a background, a modal floats above a card, and each layer adds blur radius, spread, opacity and a colour that has to be tuned twice for light and dark.

This site removes the entire category. Depth is expressed with a single 1px rule and a background tone shift of roughly four percent luminance.

What that changes in practice

• No elevation scale. There is no shadow-sm/md/lg decision to make, because there are no shadows. A surface either has a hairline boundary or it does not.
• Two backgrounds, three accents. canvas and surface are the only fills. Signal red marks operational state; moss and brass appear only when they carry meaning.
• Grids come free. A container with a rule background and 1px gaps between cells renders a perfect hairline matrix with no borders on individual children and no double-border artefacts at the seams.
• Dark mode is a token swap. Because nothing depends on a shadow colour, the dark theme is five variables and three slightly lifted accents. The layout does not change.

The 1px discipline

Rules are always exactly 1px, never 2px for emphasis. Hierarchy is carried by position, uppercase mono labels at 10–11px with wide tracking, and colour weight — not by thicker lines or bigger shadows.

The exception is the 3px signal-red bar at the top of the document. It is a registration mark, not a border.

Accessibility notes

Hairlines at #D8D4CA on #F7F6F2 are decorative, not semantic: they never carry information on their own. Focus states use a 2px outline in signal red rather than a border change, so keyboard position is unambiguous at any zoom level.

If a rule is the only thing separating two data cells, the cells are also separated by the data model (definition list, table headers, column labels). Colour and lines are reinforcement, never the only signal.