Design System

Colour is a safety channel

In a clinical record, colour spent on decoration is vocabulary stolen from criticality. This interface is deliberately near-monochrome — colour is reserved for two jobs only: clinical severity (allergy criticality, alerts) and identity state (MPI match confidence, Health ID status). They use entirely separate hues so a potential duplicate record can never be misread as a medical emergency.

The brand blue is deliberately not the auto-generated seed colour (a warm coral at hue 45°) — that hue sits inside the amber band this system reserves for Caution. A brand colour must never collide with a clinical signal.

Single UI family for headings, labels, body and data. Mono is functional, not stylistic: MPI duplicate review is a character-by-character comparison, so identifiers need tabular figures and disambiguated 0/O, 1/l/I.

Under 250ms on all standard transitions, cubic-bezier(0.23, 1, 0.32, 1) ease-out. No orchestrated page-load choreography — this is a tool people work in, not a page they watch load. No animation on the command palette (⌘K is high-frequency). Two moments earn a real transition because they are rare and consequential: an MPI merge confirmation and a facility switch — a brief crossfade + 2px blur signalling a genuine context change. Full prefers-reduced-motion alternates throughout.

• WCAG 2.1 AA minimum; body text targets AAA (≥7:1) given the clinical context.
• --ink-muted is the contrast floor for text — nothing lighter is used, including placeholders.
• Colour is never the sole indicator: every semantic colour pairs with an icon and a text label.
• Full keyboard path with visible :focus-visible rings (3px, offset 2px) throughout.
• Touch targets ≥44×44px on the patient self-service surface.