The system exists to serve one rule: a figure a machine asserted and a figure a human verified must never look the same. Every token, state, and motion below is downstream of that.
Read this before changing anything. Most decisions in this system look arbitrary until you hold them against it.
Four semantic families and one accent. The accent is reserved for things the analyst has not yet decided, which is why it reads as attention rather than as brand.
Do not introduce a fifth semantic colour. If a state needs one, the state model is wrong.
Do not use --pass for a figure the agent proved but a human has not seen. Green means a
person is accountable for it, or a deterministic tool produced it. Those are the only two cases.
Three registers, and the split is the argument. Monospace means a machine asserted the value. The document face carries everything a person wrote, including the memo's own headings and field labels. The interface face is for the tool around the document. Nothing a human wrote is ever set in the machine register.
The signature decision in this system. Prose is set in the interface sans. Every figure a machine asserted is set in monospace. The analyst can see which words a human chose and which numbers a machine claimed without reading either.
| Axis | Permitted values |
|---|---|
| Size | 10 label · 12 supporting · 13 UI ·
15 prose · 17 panel · 21 figure · 25 title.
13.5 is the one exception: the machine figure, sized so monospace sits optically with
15px prose. |
| Weight | 400 body · 500 figures and numerals ·
600 headings and emphasis. Nothing between, because 550 renders inconsistently on
fallback fonts. |
| Leading | 1 figures · 1.2 display · 1.45 dense UI ·
1.6 supporting · 1.78 prose. |
| Tracking | -.02em display · .02em monospace body ·
.12em uppercase labels. Three values only. |
Do not set a machine figure below 13px or unlock its baseline. Mono inside prose shifts the line box and the paragraph leading goes uneven.
Do not set analyst written prose in monospace. The distinction stops meaning anything the moment it is used decoratively.
Every figure in the memo is in exactly one of six states. Five are visible to the analyst. The sixth, auto, is deliberately quiet: it was proved deterministically and is not the analyst's problem.
Four actions move a claim. Only two of them close it. Rejecting does not mark a figure wrong, it re-reasons the step and returns a new answer, which may be the same answer.
Asked does not block circulation. The memo goes to committee marked conditional rather than waiting on a reply, because blocking on the company is where throughput actually dies.
| Component | Purpose | Rules |
|---|---|---|
| Queue row | One unresolved claim | Always carries three signals: leverage bar, accuracy percentage for its source class, and state chip. Never sorted by document order except in the explicit comparison mode. |
| Proof panel | Evidence for one claim | Fixed order: consequence, side by side proof, inline source, track record, actions. The consequence comes first because it decides whether the analyst reads the rest. |
| Inline source | The document region cited | Tabbed when a claim cites more than one document. Max height 196px then scrolls. The cited region is always marked. Never the only way to reach the full document. |
| Accuracy dial | Measured track record | Always a button. Always opens the sample behind it, including the rows where the agent lost. Never displays a value the analyst cannot audit. |
| Margin marker | Section level state | Count of open figures, or a tick. Clicking jumps to the first open claim in that section. |
| Status stamp | Memo disposition | Three values only: held, conditional, cleared. Derived from claim states, never set directly. |
| Receipt | What travels with the memo | Machine proved, human accepted, open, spot checks, exceptions, attention spent. Generated, never composed. |
| Sheet | Full document, queue, calibration | Max 680px. Header, body, footer with a provenance note on the left and a ghost Close on the right. Escape always closes. Header and footer are pinned and only the body scrolls, so the line that is the reason the sheet exists is never below the fold. |
| Boundary block | What left the firm's environment | Deliberately neutral, --sunk on --rule, never a semantic colour. An
outbound lookup is neither a pass nor a warning, it is a fact the security team is entitled to see,
and colouring it would assert a judgement the product has not earned. States what was sent and what
was not. Appears only on claims that made a call outside the network. |
| Assumption tag | This is my call, not their fact | Dashed border, --faint, sits against the block label. Marks anything inferred about
the customer rather than told to us. Never on a figure, only on a design position. If it is on a
figure the state model is being used wrongly. |
Four moments. Each carries information the static frame cannot. Anything else does not ship. All of it is suppressed under prefers-reduced-motion.
No entrance animation on load. No motion on hover beyond a 140ms colour or border change. No spring easing. A credit tool that bounces reads as a toy.
4px base unit. Three columns collapse in a fixed order as width is lost, and the queue is the last thing to go because it carries the thesis.
| Width | Queue | Memo | Proof |
|---|---|---|---|
| 1440px and up | 336px | 680px | 428px |
| 1200 to 1440 | 296px | fills | 392px |
| 1100 to 1200 | 264px | fills | 352px |
| 720 to 1100 | 236px | fills | becomes a sheet |
| Below 720 | hidden | full width | sheet |
Under a coarse pointer every target grows to at least 28px and memo leading opens to 2.0, because the memo is read on a phone far more often than it is edited there.
| Requirement | Standard |
|---|---|
| Text contrast | 4.5:1 minimum against its own background, verified in browser at six
viewports. --faint at 4.6:1 is the floor and nothing lighter carries text. |
| Type floor | 10px, and only for uppercase monospace labels with .1em tracking or more. |
| State encoding | Never colour alone. Border style, glyph, or written label accompanies every state. |
| Keyboard | Full review loop without a mouse: ] [ to move,
Enter to accept, X to reject, A to ask,
Esc to close. |
| Focus | 2px accent ring on every interactive element, at 2px offset. Controls inside a
container that clips, the sort toggle, the tab strip, the list of 28, draw the ring inside
themselves at -2px instead, because an outset ring is cut off there and the control
reads as unfocused. |
| Reachability | Anything clickable is a real control, never a div or li with a click handler. The 28 proved figures are buttons for this reason: hidden is not the same as withheld, and a row a keyboard cannot reach is withheld. |
| Dialogs | A sheet carries role="dialog" and aria-modal, is
labelled by its own heading, takes focus when it opens, traps Tab and Shift Tab inside itself, and
returns focus to whatever opened it. Without the trap a keyboard user tabs through the rail behind
an overlay they cannot reach. |
| Motion | All animation suppressed under prefers-reduced-motion, in CSS and at four JavaScript call sites. |