Start
Eight rules, each written so that a specific piece of work can be shown to break it. A principle that only says what to aim for settles no argument.
White, not off-white, and the same white on every surface. There is no card colour, no elevated panel tint, and no "subtle background" that quietly becomes a second ground.
Rules out
A card that separates itself from the page by being a different shade of white.
The system has no light source, so it has no elevation ramp. Depth is a hairline, a change of ground, or a hard ink offset with no blur radius.
Rules out
box-shadow: 0 2px 8px rgba(0,0,0,.08) — and the whole scale it belongs to.
Three weights, and each is chosen by what it separates: hairline between rows, edge between blocks, hard under a masthead. A monochrome page has nothing else to divide with.
Rules out
Five hand-tuned greys, picked per component, that nobody can tell apart.
The floor clears AA on white at 6.7:1. Every step above it is darker. A third, lighter grey is not a design decision available here.
Rules out
#999 on white, for "secondary" text that half the readers cannot see.
Green, amber and red mean succeeded, needs attention, and failed. They are never decorative, and the meaning is always doubled — by an icon, by the words, or by both.
Rules out
A blue badge because the row needed some colour.
Five heading steps, fluid between a phone and the full page, and nothing sits above the page title. Two headings that nest must skip a step, or the hierarchy is not readable as one.
Rules out
A card title on one page that is larger than another page’s own h1.
In a monochrome system the single editorial pointer collapses onto the mark. What used to be carried by hue is carried by weight, by an underline, by a filled pill, or by reversal.
Rules out
A brand hue reintroduced through a link colour or a hover state.
The same token names, different values. That is why a component reads a semantic alias and never a primitive: the alias re-resolves on its own when the mode flips. The two exceptions — type over a photograph, and a foreign brand mark — are documented where they are defined, because their ground is not the theme.
Rules out
A .dark block in a component’s own stylesheet, freezing one side of the swap.