Foundations
Principles the rest is downstream of.
These are not aspirations. Each one has a mechanism behind it — a token, a gate, or a convention that makes the right thing easier than the wrong thing. A principle with no mechanism is a preference, and preferences do not survive contact with a deadline.
Calm by intent
People open a financial tool when something is uncertain. The interface's job at that moment is to be clear, not to editorialise. So the system has no alarm register: there is no colour reserved for panic, no size reserved for shouting, and the status language is written to describe a situation rather than judge it.
This is why the status tokens are named for meaning rather than temperature. A token called warning asks a designer what is being warned about; a token called red only asks what looks urgent.
The mechanism
Status colour is a small, closed set of semantic tokens. Adding a new one is a deliberate act with a review attached, which is what stops the palette drifting toward alarm one component at a time.
The token layer is the contract
Two products share this system. Neither owns it. The package defines every colour, radius, duration and easing once, and both applications consume it directly — there is no per-product theme file, because a second copy is a second thing to forget.
The rule that follows is blunt: a value that is not a token is not in the system. A hand-written colour in a component is not a shortcut, it is an unmeasured claim — it will not appear in a contrast audit, it will not respond to a theme, and nobody will find it when the palette changes.
The mechanism
The package gates its own invariants. The typed export and the stylesheet are asserted to agree value for value, every colour token is either mirrored or explicitly listed as stylesheet-only with a reason, and the contrast floors are checked on every change.
Evidence over assertion
Accessibility claims are checkable, which means a wrong one is worse than none. Every conformance figure this site publishes is computed during the build from the shipped values, by the same code that gates the products — not transcribed from a spreadsheet, and not measured once and remembered.
The same standard applies to the rules themselves. Where this site states a rule, the rule has a gate; where a rule has exceptions, they are named. A simplified rule presented as complete is a claim nobody can check, which puts it in the same category as a wrong one.
What this costs
Generating rather than writing means the site can say less than a hand-written one. It can only publish what it can compute or defend. That trade is the point: the ceiling is lower and the floor is real.
Restraint is a feature
The system deliberately withholds things. There is one glass treatment and it is reserved for a single anchoring surface per view; everything else is a plain card. There is one primary accent. Elevation is a short ladder rather than a continuum.
Scarcity is what makes emphasis work. A system where anything can be the most important thing on screen has no way to say that something is.
- One anchor per view. The glass surface marks the figure the view exists to show. A second one halves the meaning of the first.
- One accent. Primary is the only colour that means "act here". Everything else is surface, text, or data.
- A short elevation ladder. Sunken, base, raised, overlay. Four steps are enough to express hierarchy and few enough to keep consistent.
- Motion in proportion. The longest curve in the scale is reserved for a single brand moment. Everything else resolves quickly enough to feel like response rather than performance.