Calm, clinical and fast.
White cards with soft hairline edges on a calm off-white ground, one deep-teal primary with a mint wash, coral for attention, green for resolved, amber for warnings, ink pills for where you are. Five colour themes, two looks (Design: 22 px cards, Instrument Serif titles and KPI numerals; Classic: 16 px cards, bold sans) and three navigation layouts. Plus Jakarta Sans for everything else, 4 px spacing grid. Never colour alone for status — every chip carries a word.
Themes, looks, accents and layouts
Four choices combine per browser (top bar → Appearance, or Settings → Appearance): the colour theme on data-theme, the look on data-look, the accent on data-accent and the navigation layout on data-layout. Every tile below is the same DOM; only the attributes differ. Contrast per theme and accent: Docs/ui-kit.md §10.
Design look · Serif titles, ink pills, framed surface
Light
Default
Slate
Cool blue-grey
Dark
Low light
Night ward
Warm, low glare
High contrast
Strongest text and borders
Classic look · The earlier EHMS look
Light
Default
Slate
Cool blue-grey
Dark
Low light
Night ward
Warm, low glare
High contrast
Strongest text and borders
Accents · the brand colour of buttons, links, focus and selection; status colours never change
Teal
EHMS default · Light
Ocean
Blue · Light
Indigo
Blue-violet · Light
Violet
Purple · Light
Graphite
Neutral slate · Light
Teal
EHMS default · Dark
Ocean
Blue · Dark
Indigo
Blue-violet · Dark
Violet
Purple · Dark
Graphite
Neutral slate · Dark
Navigation layouts
- SidebarGrouped menu at ≥1280, icon rail 1024–1279, phone menu below 1024.
- Top tabsPinned screens as pill tabs in the top bar; More opens the whole menu. Phone menu below 1024.
- Icon railThe icon rail at every desktop width; names as tooltips, an expand button opens the full menu.
Colour tokens
Light value, then dark. The old indigo* classes are aliases of primary*, so both render teal.
Ground #F4F7F6 · Card #FFFFFF · Hairline #E1E8E6 · Control border #7A8A87 (3.6:1) · Text #14232B · Muted #506169. Dark: ground #0B1214 · card #172326 (lifted 1.17:1) · control border #687B79 (3.6:1). Slate, Night ward and High contrast: the theme matrix above and Docs/ui-kit.md §10. Success is green (hue 141°), kept apart from the teal primary (hue 175°) so a brand button never reads as “done”.
Measured pairs
- ButtonWhite on primary5.5:1 · dark 5.5:1
- SelectedDeep on the mint wash7.1:1 · dark 10.2:1
- LinkPrimary on white5.5:1 · dark 9.7:1
- DoneGreen ink on green tint4.8:1 · dark 8.7:1
- DueAmber ink on amber tint5.4:1 · dark 9.1:1
- OverdueCoral ink on coral tint4.9:1 · dark 7.7:1
- CriticalCritical on its tint5.4:1 · dark 7.1:1
- CaptionMuted on the ground6.0:1 · dark 8.3:1
Type scale
Switch the Look above: in Design, the page title, section titles and KPI numerals turn to Instrument Serif 400 (44 / 28 / 40 px). Clinical values never do.
Status & severity
EWS bed tiles
Patient identity strip (all screens)
Name, sex, age, date of birth, MRN, location and allergies are pinned on every clinical screen (details: Clinical safety below).