Colour
The complete token inventory — semantic tokens, never raw hex. Every pairing passes WCAG 2.2 AA in both light and dark; flip the theme toggle and watch the semantic groups follow.
Brand
The source-of-truth HMS palette. These do not flip in dark mode; the *-text variants do, staying AA on the current surface.
--brand-primaryDeep teal
--brand-cyanMarketing cyan
--brand-streamAI / Stream
--brand-coralAccent — the heartbeat
--brand-navyAI / dark surface
--brand-cream-100Off-white
--brand-cream-200Cream
--brand-cream-300Cool cream
--brand-cyan-textAA cyan text
--brand-stream-textAA stream text
--brand-coral-textAA coral text
Semantic
The shadcn token contract — every component styles itself from these.
--background--foreground--canvasApp canvas behind cards
--card--card-foreground--popover--popover-foreground--primary--primary-foreground--primary-strongAA teal text / links
--secondary--secondary-foreground--muted--muted-foreground--accent--accent-foreground--destructive--destructive-foreground--destructive-subtle--destructive-text--decorative-redDecorative only — never text
--border--input--ringFocus ring
Status
Four tones, each a quartet: fill + foreground, and subtle wash + AA text.
--success--success-foreground--success-subtle--success-text--warning--warning-foreground--warning-subtle--warning-text--info--info-foreground--info-subtle--info-text--accent-blue--accent-blue-foreground--accent-blue-subtle--accent-blue-textChart
Brand-led categorical ramp for data visualisation, in series order.
--chart-1--chart-2--chart-3--chart-4--chart-5Sidebar
The branded dark-teal navigation has its own token set — it stays dark in both themes.
--sidebar--sidebar-foreground--sidebar-primary--sidebar-primary-foreground--sidebar-accent--sidebar-accent-foreground--sidebar-border--sidebar-ringGradients live on the Brand page. The same inventory with live hex values is in Storybook → Design Tokens.
Grid
A responsive 12–8–4 column grid keeps layouts aligned across breakpoints: 12 columns on desktop, 8 on tablet, 4 on mobile.
Background colour
Two background layers: chrome (top bars, side menus) sits on --background; product content regions sit on --canvas — a muted warm cream in light mode, deep navy-black in dark — with white cards floating on top.