SIGNAL BOX · MASTER DESIGN SYSTEM · v7

The whole system, in one place.

Money moves on rails — so the interface is a transit map. Daylight paper for teaching, one dark board for live data, signal lights that each mean exactly one thing. Everything below is driven by the same --sb-* tokens the rest of the site uses; nothing here is a mock-up.

Principles

Four rules the whole system answers to.

Plain terms firstSay it in plain language before the acronym; a depth dial reveals L0–L4.
The diagram is the interfaceStations are books, checkpoints are controls, rails are routes.
Signal lights, not decorationGreen/amber/red and family colours never appear without a word.
Evidence at arm's reachSources, version badges, and review dates are components, not footnotes.

Colour tokens

Colours live only in tokens.css. Reference a token, never a hex.

--sb-paperPaper — the page

--sb-cardCard — panels

--sb-boardBoard — live data only

--sb-inkInk — text & rails

--sb-goGo — proceed + accent

--sb-holdHold — controls

--sb-stopStop — exceptions only

--sb-painpain — customer↔bank

--sb-pacspacs — bank↔bank

--sb-camtcamt — reporting

--sb-mtMT — legacy

--sb-hairHairline — borders

Type — three voices

One face per job; facts never wear the display face.

Archivo — wayfinding, titles, controls.

Newsreader — all explanation. ≥13px, ≤68ch; italic carries disclosure.

IBM Plex Mono — messages, ledgers, micro-labels · pacs.008

Transit grammar

Rails, families and edges — each colour redundant with a label or a stroke.

SEPASWIFTCBPR+DOMESTIC

pain.001pacs.008camt.056MT103

MESSAGECLEARING OBLIGATIONSETTLEMENTPOSTING

Surfaces

Paper → card → soft → the one earned board.

paper

card

soft

board

Reskin the system, live

Move the hue and every accent retints at once — ink and paper stay off the dial.

Move the hue and every accent retints at once. Ink and paper stay off the dial — contrast is a contract.

ACCENT HUE 152°CORNER RADIUS 18pxDENSITY 18px

pacs.008● SETTLED

Clearing vs settlement — the accent retints live.

Components in service

The same chips the diagrams and lessons use.

SETTLEDHELDRETURNEDBLOCKED

Voice & cast

How it speaks, who it uses.

Plain-terms first; expand-then-teach acronyms; disclose every simplification in italic Newsreader; numbers exact and mono; calm about failure. Banned words: seamless, cutting-edge, revolutionize, effortless, leverage, robust. The full contract lives in content/editorial/voice.md and cast.json.

The rules that don't bend

Eight non-negotiables, always on.

Plain first — no jargon without its plain-language twin.
No hue without a job — every colour carries a text label.
The board is earned — the one dark surface is for live data & code only.
Diagrams are controls — grayscale-safe, ≥40px hit targets, one green pulse.
Evidence is a component — provenance travels with the claim.
Fiction is labelled — SYNTHETIC / TRAINING ONLY.
Soft shapes, hard facts — calm about failure, exact with numbers.
Access is table stakes — focus-visible, reduced-motion, ≥4.5:1 contrast.

The standards manual is design-system/SIGNAL-BOX.md; the canonical tokens are design-system/signal-box-tokens.css. See the methodology for how claims are sourced.