Brand book
EDFlow · Brand
Every step of your ED visit, in view.
The EDFlow brand for hospital communications teams, partners and the people who build it: the idea, the logo, colour, type, voice and motion, and the files to download.
Your emergency visit, step by step.
02
The idea
An emergency department runs on flow: arrival, triage, assessment, tests, results, a decision. Staff track it minute by minute. The person waiting sees none of it.
Keep people in the flow.
In view, not exposed
Show only what the person needs. Minimum necessary is a privacy rule, and good design.
Steady
Calm under pressure. The voice, the motion and the colour never escalate; urgency appears only where someone has to act.
One flow, two sides
Patients, families and the care team see the same visit from their own side.
Positioning
For patients and families in hospital emergency departments, who wait for hours without knowing what is happening, EDFlow is a live, plain-language companion to the visit that shows your stage, your care team, your tests and typical waits for this day and hour. Unlike patient portals, which show records after the fact, it is built for the visit as it happens.
Pillars
- Calm
- Clear
- Honest about uncertainty
- Private by default
- Human
The name
- "ED" is the sign over the door. "Flow" is what everyone behind that door is managing: patient flow is how hospitals describe how people move from arrival to a decision.
- For the person waiting, being in the flow means being informed: where you are, what is happening now and what usually comes next.
- Plain and literal: no "Med-", no crosses, no heartbeats. The name is never translated.
- Discreet by default: patient and family messages use a neutral sender name, never the product name, because the name says someone is in an emergency department.
03
Logo
The name built as a sign: the letters knocked out of a rounded square, then the word. The letters show the surface behind them, so the logo follows the theme.
Lockup, mark and wordmark
Construction
Every measure is a fraction of H, the height of the square, which is also the height of the whole logo.
Light, dark and one colour
Clear space
Clear space is half the cap height of the letters (about a quarter of the logo's height) on every side.
Minimum sizes
Lockup 20 px on screen and 6 mm in print; mark 16 px and 5 mm.
Font fallback
If the configured name no longer matches the traced art, the logo switches to a font fallback built to the same proportions, until the art is regenerated.
Don't
Co-branding with a hospital
04
App icon
The letters in Paper on a full-bleed Deep Navy field, with the live dot on the baseline. On a home screen the platform's mask is the square.
The live dot is the same Signal Amber dot that marks "you are here" in every visit timeline: the icon on the home screen and the current step in the app say the same thing.
Platform masks
Monochrome (themed icons)
Favicons use the mark, which keeps the letters legible at 16 px.
05
Colour
Paper by day, night after dark. One calm working colour, Harbour Blue, and one warm accent, Signal Amber, used for "you, now" and nothing else.
Brand colours
Signal Amber
The live dot: the app icon’s dot, “you are here”, things that need the patient
Harbour Blue
Primary actions, links, focus — the calm, trustworthy working colour
Ink
Primary text on light surfaces
Deep Navy
Logo square and “flow” on light, app icon field, deep brand surfaces
Paper
Light backgrounds — warm, never clinical white
Primitive palette
| Ramp | 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 950 |
|---|---|---|---|---|---|---|---|---|---|---|---|
| stone | |||||||||||
| night | |||||||||||
| harbour | |||||||||||
| glow | |||||||||||
| fern | |||||||||||
| ochre | |||||||||||
| signal | |||||||||||
| iris | |||||||||||
| rose |
Semantic roles, light and dark
light
dark
Status tones
Contrast
Computed live from the tokens with the same function the brand tests use. Text needs 4.5:1, interface marks 3:1.
| Foreground | Background | Light | Dark |
|---|---|---|---|
| foreground | background | 17.15:1AA | 17.71:1AA |
| mutedForeground | card | 5.78:1AA | 7.49:1AA |
| primaryForeground | primary | 6.77:1AA | 11.63:1AA |
| link | card | 6.77:1AA | 9.80:1AA |
| brandForeground | brand | 12.82:1AA | 18.90:1AA |
| glowForeground | glow | 7.36:1AA | 7.36:1AA |
| statusInfoFg | statusInfoBg | 5.80:1AA | 7.25:1AA |
| statusDangerFg | statusDangerBg | 6.29:1AA | 7.33:1AA |
| input | card | 3.62:1AA | 4.93:1AA |
| ring | card | 3.25:1AA | 7.15:1AA |
06
Typography
Bricolage Grotesque for headlines, Figtree for reading, Geist Mono for codes and identifiers.
Aa
ABC Diatype
Aa
ABC Diatype
Aa
Sequel Sans Head
Figtree's ss02 set gives I, l and 1 distinct shapes, so a visit code never reads wrong.
Il1 · KB01-T7RM
Type scale
display2xl · 72/80
Every step of your ED visit, in view.
displayXl · 56/64
Every step of your ED visit, in view.
displayLg · 44/48
Every step of your ED visit, in view.
displayMd · 36/40
Every step of your ED visit, in view.
displaySm · 28/32
Every step of your ED visit, in view.
headingLg · 24/28
Every step of your ED visit, in view.
headingMd · 20/24
Every step of your ED visit, in view.
headingSm · 17/24
Every step of your ED visit, in view.
bodyLg · 18/28
Every step of your ED visit, in view.
bodyMd · 16/24
Every step of your ED visit, in view.
bodySm · 14/20
Every step of your ED visit, in view.
labelLg · 16/20
Every step of your ED visit, in view.
Native mapping
| Web | iOS | Android |
|---|---|---|
| display2xl | largeTitle | displayLarge |
| displayXl | largeTitle | displayMedium |
| displayLg | largeTitle | displaySmall |
| displayMd | largeTitle | headlineLarge |
| displaySm | title1 | headlineMedium |
| headingLg | title2 | headlineSmall |
| headingMd | title3 | titleLarge |
| headingSm | headline | titleMedium |
| bodyLg | body | bodyLarge |
| bodyMd | body | bodyLarge |
| bodySm | subheadline | bodyMedium |
| labelLg | headline | titleMedium |
| labelMd | subheadline | labelLarge |
| labelSm | footnote | labelMedium |
| caption | footnote | bodySmall |
| overline | caption1 | labelSmall |
| numericXl | heroNumber | heroNumber |
| numericLg | numberLarge | numberLarge |
| numericMd | numberMedium | numberMedium |
| monoLg | code | code |
| monoMd | codeSmall | codeSmall |
07
Voice and tone
A calm, capable person sitting beside you: here is where things are, here is what you can do.
Calm
We sayYour blood work is in the lab.
We don't sayTests pending!!
Clear
We sayA CT scan is a detailed X-ray.
We don't sayCT w/ contrast ordered, pending protocol.
Honest about uncertainty
We sayUsually 30 to 55 min at this time on a Tuesday. Most people (9 in 10) are done within about 90 min.
We don't sayResults in 30 min.
Kind, never blaming
We sayThank you for your patience. The department is very busy tonight.
We don't sayWait times are longer due to non-urgent visits.
Registers
- Patients
- Second person, present tense, a usual range and the "most people" line. Never results.
- Families
- Even shorter: the stage, a wait and first names. Never test names or clinical detail.
- Staff
- Operational and dense. Numbers first, standard abbreviations, verbs for actions.
- Administration
- Confident and evidence-led: outcomes first, then how it works, privacy stated plainly.
Sensitive moments
The canonical copy for sensitive moments, from the shared catalogue, in both languages.
Your wait may be longer
Someone in the emergency department needs urgent care right now, so part of our team is with them. This may add time to your wait. We haven't forgotten you, and we'll be with you as soon as we can.
Votre attente pourrait être plus longue
Une personne à l'urgence a besoin de soins immédiats, alors une partie de notre équipe est auprès d'elle. Votre attente pourrait s'allonger. Nous ne vous oublions pas et nous serons avec vous dès que possible.
Tell a staff member now
Don't wait for a reply on your phone. Tell any nurse or staff member right away, or press your call bell. If you're in the waiting room, go to the triage desk.
Avisez un membre du personnel maintenant
N'attendez pas de réponse sur votre téléphone. Avisez tout de suite une infirmière, un infirmier ou un autre membre du personnel, ou appuyez sur votre bouton d'appel. Si vous êtes dans la salle d'attente, allez au poste de triage.
It's very busy right now. We see the sickest people first, so some waits will be long. We're sorry for the wait.
If you feel worse while you wait, tell a staff member right away.
L'urgence est très occupée en ce moment. Nous voyons d'abord les personnes les plus malades, alors certaines attentes seront longues. Nous sommes désolés de l'attente.
Si vous vous sentez plus mal pendant l'attente, avisez tout de suite un membre du personnel.
Updates are paused. Please speak with the care team or call the hospital.
Les mises à jour sont en pause. Veuillez parler à l'équipe de soins ou appeler l'hôpital.
You're offline. We'll update this as soon as you reconnect.
Vous êtes hors ligne. Nous mettrons l'information à jour dès votre reconnexion.
08
Iconography
One icon map for every platform: Lucide on the web, SF Symbols on iOS and Material Symbols on Android. Icons never carry meaning alone.
- circle.inset.filled
- person.2
- flask
- viewfinder
- tray.and.arrow.down
- clock
- hand.raised
- exclamationmark.bubble
- square.and.arrow.up
- figure.2.and.child.holdinghands
- globe
- lock.shield
- rectangle.grid.2x2
- chart.bar.xaxis
- antenna.radiowaves.left.and.right
- light.beacon.max
09
Imagery and illustration
Nothing here yet: a path with no dot on it.
Offline: the dot is dimmed.
- Flow is the motif: a line through a few stations, with one Signal Amber dot for you.
- Flat colour on Paper or Night, with at most one soft glow behind the dot. No 3D, no glossy blobs, no purple gradients.
- People, when shown, are diverse, calm and dignified: hands, faces, waiting-room moments. Never procedures, blood, needles or distress.
- Never real patients, real hospital interiors or anything that could be mistaken for real health information.
10
Motion
Motion explains a change and never decorates. Critically damped springs, one breathing dot, and everything pauses under reduced motion.
11
Downloads
Every file is generated from the brand configuration by the brand pipeline, so the kit always matches the product.
Every logo variant as SVG and PNG, the fonts with their licences, and a README.
- Lockup, lightSVGPNG
- Lockup, darkSVGPNG
- Lockup, one colourSVG
- Mark, lightSVGPNG
- Mark, darkSVGPNG
- Mark, one colourSVG
- Wordmark, lightSVG
- Wordmark, darkSVG
- App iconSVGPNG
The fonts are Bricolage Grotesque, Figtree and Geist Mono, all under the SIL Open Font License 1.1; the licence texts are in the kit.