Design system

data-1 … data-8 · inside diagrams and legends only, never in the chrome

• The Two Exemptions Rule. The chrome is achromatic. Exactly two chromatic tokens exist outside the data palette, accent and danger, and a third is admitted only against this test: not 'would a colour help' but 'is there a fact on screen that nothing else says'.
• The Ink Button Rule. The primary button is ink on paper. A button filled with the accent is forbidden.
• The Two Grounds Rule. ground is darker than paper on purpose. The diagram lies on the desk; the reading panels are sheets on top of it.
• The Two Voices Rule. The tool speaks sans, the game speaks serif. If it would survive the game shipping, it is serif.
• The Rendered Prose Rule. A longtext value is the game's own writing and is markdown: a screen renders it and never shows the source. Two shapes, and the room decides which: a block in the Prose role, capped at the measure, where there is a column for it, and one clipped line in a 36-pixel row, with the whole of it on the thing's own page. The rendering is the server's, from the one renderer this product has, and it reaches the browser only on the browser's own route.
• The Band Rule. A screen made of bands is a stack of peers: one section each, one Headline heading each, separated by xxxl and by a 1px line rule above every heading after the first. Nothing is ranked under a band by type size, because no two adjacent roles are far enough apart to say so, and nothing is ranked by face, because a face change means a change of owner. Two bands may stand side by side at 1200px and above, and only when they encode the same unit and are read against each other; the pair shares one grid measurement, and falls back to one column when either side has no rows.
• The No Uppercase Rule. Labels are sentence case with light tracking. All-caps labels are the admin-panel tell.
• The Copyable Is Mono Rule. If a value is a machine identifier a person might paste, it is monospace.
• The Warm Shadow Rule. On the light ground every shadow is rgba(94, 72, 55, ...), the paper's own brown, and pure black is forbidden. On the dark ground it inverts: a warm shadow on a near-black desk is a rust halo rather than depth, so the dark set's three are black at .4, .45 and .5. The rule said "forbidden everywhere" for a whole build while the product and this page both did the opposite.
• The Earned Elevation Rule. A shadow answers a question about stacking, never about importance.
• The Named Absence Rule. Nothing is blank because a value is missing. Absent gets a word, empty gets a different word.
• The Drawn Boolean Rule. A yes or a no is a mark and not a word: a check in data-5 for true, a cross in danger for false, the em dash of a Named Absence where there is no value. Three states, three shapes, and the shape alone carries the meaning — the hue is the second thing that says it, which is what keeps the column legible without colour. The word stays as the cell's accessible name. The mark is centred under the heading that names it in a column and sits beside its label on a thing's own page. The two marks are two paths rather than an icon set: the shipped font subset carries no check, and two shapes do not justify a library.
• The Shadow Boundary Rule. An element selector in the global stylesheet does not reach inside a component's shadow root, and custom properties do. No component writes a bare button rule of its own; every one adopts the shared control stylesheet written in terms of var(--...).
• The Never Hidden Rule. Navigation is never hidden without being moved somewhere reachable. Below 780px the destinations join the game switcher's menu; exactly one of the two carries them at any width.