Every shared element of an α product, live. The rules are in design-system.md; the reasons are in docs/principles.md.
A product changes a handful of colour values and nothing else. Switching here is a preview; the product's theme is set in product.ts.
Ocean: #03045E panel, #0077B6 action, #00B4D8 glow. Locked by the owner, 2026-10-28.
Brand colours change per product. Neutrals carry almost everything. Status colours mean healthy, watch and risk, and nothing else.
Brand
Neutrals
Status
Inter, on the Apple text styles. Hierarchy comes from size and weight, never from colour.
One primary button per problem on a screen. Everything else is secondary or quiet.
Status is always colour plus words. The accent dot marks the one state that needs a person. Demo data is always labelled.
A short headline, one supporting line, one action. The reasoning opens on demand: try See evidence and Why?
Reviews are slowing progress
11 documents are waiting for a signature
You asked: Which sites are behind?
North is furthest behind, at 86% of its target.
Against target so far
A tile holds one number or one small visual. Help appears only beside terms a first-time user may not know.
Health strip: every unit once, worst first
RiskWatchHealthy
A chart replaces a sentence or it does not belong. One colour for data; identity is carried by labels and shape, never by colour alone.
An icon, what happened, where it stands, one way in. The reason opens when a row is selected. Items that need a person come first.
Long lists sit on white with thin dividers and a quiet header band. A row leads somewhere.
Detail lives one tap away: a side panel for reading, a dialog for a decision, a confirmation before anything hard to undo. "What does this mean?" sits only beside unfamiliar terms.
A skeleton has the shape of the screen it stands in for, and appears only while data is really loading. Content never starts invisible.
Nothing needs your attention
An empty state says what is true and, if there is one, what to do next.
This page could not be loaded
An error says what happened and that approved work is not affected.
α design system · shared by every product demo · demo data throughout