Design language

Calm, honest, and always in view

How EDFlow looks, reads and behaves on every surface: the principles, the tokens, and every component rendered live from production code in each state, light and dark, English and French.

Principles

  1. 01

    Answer first

    Every patient screen answers four questions in order: where am I in my visit, who is looking after me, what is happening now, and what can I do. Everything else sits below.

  2. 02

    One glow per screen

    Signal Amber marks the single most relevant thing for this person right now: the current step, or a task waiting for them. If two things glow, one of them is wrong.

  3. 03

    Honest time

    Estimates are a usual range plus the "most people" line, and they say what they are based on. Never "up to", never a countdown, never a comparison with anyone else.

  4. 04

    Calm density

    Patient views are generous: 16 to 17 px text, 56 px rows, one column. Staff views are dense but quiet: 13 to 14 px, 36 to 44 px rows, hairline structure that is felt, not seen.

  5. 05

    Native everywhere

    SwiftUI and Liquid Glass on iOS 26, Material 3 Expressive on Android, accessible semantic HTML on the web. The same tokens and the same words, each platform's own controls.

  6. 06

    Private by design

    Show the minimum necessary. Family never sees tests. Notifications, text messages and URLs never contain health information. The wall board shows initials and location only.

  7. 07

    Never colour alone

    Every state is tone, icon and words, plus its position in the timeline. Nothing depends on colour alone.

  8. 08

    Not an emergency channel

    Any path that signals deterioration also says: tell a nurse in person now. The app never stands between a patient and a person.

What makes it calm

  • Paper, not clinical white. Warm neutrals and one deep navy carry the page; Harbour Blue is the working colour.
  • Square corners on the web, generous line height, and type that never shouts: Bricolage Grotesque for headings, Figtree for reading.
  • Motion only explains a change (a step advancing, a sheet arriving), on critically damped springs, and stops under reduced motion.
  • No alarm red for patients. Danger is reserved for "tell staff now" and for staff-only critical events.

How status is encoded

Tests under wayBackSent
  • Tone comes from a domain map (visitStageStatus, testStageStatus, requestStatusStyle, codeSeverityStatus), never picked by hand.
  • Every state has an icon from the brand icon map and a label from the catalogue. Screen readers get the label, not the colour.
  • Results are never good news: "Back" is the neutral info tone with the tray icon, never a success check.
  • One solid pill per row at most; subtle is the default.

How estimates are written

  • Lead with the usual range ("Usually 40 min to 1 h"), then the "most people" line ("Most people (9 in 10) are done within about 1 h 30 min").
  • Say what it is based on: "Based on past Tuesdays around 7 p.m. at this hospital".
  • Round to 5 minutes. No seconds, no countdowns, no "up to", no "at the longest".
  • Past the usual range, replace the numbers with a sentence that points to a person, never red.
  • When data is thin, say so and use the catalogue default.

Explore