Colour
Three ramps carry the brand, five fixed hues carry clinical meaning, and the two groups are never allowed to be confused with one another.
Overview
Colour in a clinical interface does two jobs that pull in opposite directions. It expresses a brand, and it encodes safety-critical state. When those two jobs share a hue, the brand wins by accident and the safety signal degrades.
This system separates them explicitly. Brand colour — teal, coral, warm neutral — is free to be expressive and may be re-themed. Alarm colour — the five fixed hues below — is a controlled characteristic, fixed by standard, and must not be re-themed by any product, theme or customer skin.
Meaningful
Every colour in the product palette has one job. If a hue means "urgent" in one screen it cannot mean "selected" in another.
Never alone
Colour is always a second channel. Any state encoded chromatically is also encoded in text, shape or position, so the interface survives greyscale and colour-vision deficiency.
Environment-proof
The palette is validated in both a bright ward and a darkened reading room. Contrast is measured, not judged by eye on a designer's calibrated monitor.
Brand ramps
Three primitive ramps. These are raw values — components never consume them directly, they consume the semantic tokens further down.
Teal — the brand spine
Steps 500–900 are the exact anchors from md.notjustany.tech. Steps 50–400 are derived from the same hue for tints and dark-theme use.
Coral — brand accent
Step 500 is the brand coral. See Why coral is banned in product before using any of this ramp inside an application.
Warm neutral
Plus three warm paper surfaces carried over from the brand:
--njt-paper #FFFDF9, --njt-cream #F6F1E7,
--njt-cream-card #FBF7EE.
Alarm colour is not brand colour
IEC 60601-1-8 assigns meaning to three specific hues for alarm priority. They are not suggestions and not a starting point for a palette — they are the reason a clinician trained on one device can read another.
| Token | Hue | Priority | Foreground | Contrast |
|---|---|---|---|---|
--alarm-critical |
#CE0E2D red | IEC high — immediate response | White | 5.64:1 AA |
--alarm-urgent |
#F2C200 yellow | IEC medium — prompt response | Black | 12.49:1 AAA |
--alarm-advisory |
#4FB3D9 cyan | IEC low — awareness | Black | 8.78:1 AAA |
--alarm-info |
#B3BEB9 warm grey | Not an alarm — state change | Black | 10.98:1 AAA |
--alarm-ok |
#1D6E62 teal-600 | Not an alarm — action succeeded | White | 6.07:1 AA |
The three IEC hues must not be re-themed by a product, a customer skin, a dark mode or an accessibility preference. They are identical in both themes by design. Changing them is a design change with safety consequence and requires re-validation, not a token override.
Two consequences that designers reliably want to "fix" and must not:
- Yellow, cyan and grey carry black text. White on
#F2C200measures 1.68:1 — a hard failure. The mixed black/white foreground across alarm levels is correct, not an inconsistency. - Confirmation is teal, not green. A generic green would sit close to the cyan advisory hue and add a sixth signal colour for no gain. Using teal-600 keeps the brand in the palette and keeps the count of meaningful hues down.
Why coral is banned in product
The brand coral #D8593A is not permitted anywhere inside a clinical
product interface. At distance, in peripheral vision, under warm ward lighting, or for
a user with a red–green deficiency, it is not reliably distinguishable from the IEC
high-priority alarm red #CE0E2D.
#D8593A
#CE0E2D
Adjacent and at full saturation they are separable. Across a room, on a 3 m wall display, or as a 24 px button beside a banner, they are not.
So the split is:
- Documentation — coral is the accent. Eyebrows, section rules, card accent bars. This is where the brand gets to be itself.
- Product —
--primaryis teal#0F3B35. No coral in any state, hover, focus ring, chart series or illustration.
The brand still reads as itself in-product through teal, the warm paper surfaces, Fraunces in headings and a dark theme built on teal-900. It gives up one accent colour in the one place where colour carries clinical meaning.
Coral #D8593A on cream measures 3.45:1, which is below AA for
the small uppercase eyebrow text it currently sets on md.notjustany.tech. This system uses
--njt-coral-700 #A03920 (6.58:1) for small coral text and reserves
#D8593A for rules and accent bars, which carry no contrast requirement.
Semantic tokens
What components actually consume. These follow the shadcn/ui contract exactly, so any shadcn block or third-party example drops in unmodified.
--destructive means "this button deletes something." It shares a hue with
--alarm-critical because both are red, but they are different tokens with
different jobs and must never be substituted for one another. A destructive button is a
control; an alarm is a signal about the patient.
The two themes
Light is the ward default. Dark is not a preference — it is the required mode for darkened reading rooms, and it is built on the brand's own teal-900 rather than a neutral black so the product still reads as NotJustAnyMed.Tech at 2 a.m.
| Token | Light | Dark | Note |
|---|---|---|---|
--background | #FDFCF8 | #0B2A26 | Warm white reduces glare versus pure #FFF. |
--foreground | #16231F | #F6F1E7 | 13.58:1 on the dark canvas. |
--primary | #0F3B35 | #3BC4AF | Lifted to teal-400 in dark to clear AA against its foreground. |
--muted-foreground | #54635E | #A8BDB6 | 7.73:1 on canvas, 6.26:1 on card. |
--alarm-* | identical | Deliberately unchanged. The standard's hues are absolute. | |
Theming mechanism
// Standard shadcn — a class on the root element.
<html className={theme === "dark" ? "dark" : undefined}>
// Theme must be a user-controlled setting, never automatic from ambient
// light or time of day: an unexpected theme flip mid-procedure is a hazard.Do's and don'ts
Yellow with black text, and the word "cannot be excluded" carrying the same meaning independently of the colour.
White on yellow measures 1.68:1. Unreadable, and the title no longer says what the finding means.
Teal primary. Distinct from every alarm hue at any size or distance.
Brand coral as a primary action. Reads as an alarm, and competes with the real one when both are on screen.
Data visualisation
Charts get their own categorical ramp, drawn from the brand rather than the alarm hues, so a trend line can never be mistaken for a priority signal.
- Never use red, yellow or cyan for a data series. Those three are spent.
- Encode the series in a second channel too — dash pattern, marker shape or a direct label. Assume the chart will be printed in greyscale for a patient record.
- Reference ranges are shading, not colour-coded state. A troponin trend crossing a decision threshold is announced by an Alert Banner, not by the line turning red.
More do's and don'ts
Hue, glyph and word together. Remove any two and the priority still arrives.
A legend of coloured dots. Nothing survives greyscale print, forced-colours mode, or a colour-vision deficiency.
The alarm hue is identical in both themes. A clinician moving from a bright bay to a reading room sees the same signal.
Amber muted so the dark theme looks calmer. It is now neither the IEC hue nor recognisable as medium priority.
Clinical safety notes
Trace these in your risk file (ISO 14971). Each is a mitigation, not a preference.
- Alarm hues are locked. No theme, skin or user preference may alter them. Mitigates: a clinician trained on one deployment misreading priority in another.
- Coral excluded from product. Mitigates: brand accent being read as a high-priority alarm, and alarm red losing salience through nearby competition.
- Colour never sole carrier. Mitigates: missed state for the ~8 % of male users with a colour-vision deficiency, and loss of meaning in greyscale print.
- Contrast measured, not estimated. Every pairing in this system is computed and published. Mitigates: unreadable text under real ward lighting.
- Theme is user-controlled and explicit. Mitigates: an automatic theme change altering perceived contrast during a time-critical task.
Related
- Tokens — how these values are structured and consumed.
- Typography — the other half of legibility at distance.
- Alert Banner — where the alarm hues are applied.