Guide de marque

EDFlow · Marque

Chaque étape de votre visite aux urgences, sous vos yeux.

La marque EDFlow pour les équipes de communication des hôpitaux, les partenaires et celles et ceux qui la construisent : l'idée, le logo, la couleur, la typographie, le ton et le mouvement, et les fichiers à télécharger.

Votre visite à l'urgence, étape par étape.

02

L'idée

Un service d'urgence fonctionne au rythme du flux : arrivée, triage, évaluation, examens, résultats, décision. Le personnel le suit minute par minute. La personne qui attend n'en voit rien.

Garder les gens dans le flux.

  • À la vue, sans exposer

    Montrer seulement ce dont la personne a besoin. Le strict nécessaire est une règle de confidentialité, et un bon design.

  • Posée

    Calme sous pression. Le ton, le mouvement et la couleur ne s'emballent jamais; l'urgence apparaît seulement quand quelqu'un doit agir.

  • Un flux, deux côtés

    Les patients, les proches et l'équipe de soins voient la même visite, chacun de son côté.

Positionnement

Pour les patients et les proches aux urgences, qui attendent des heures sans savoir ce qui se passe, EDFlow est un compagnon de visite en direct, en langage clair, qui montre votre étape, votre équipe de soins, vos examens et les délais habituels pour ce jour et cette heure. Contrairement aux portails patients, qui montrent le dossier après coup, il est conçu pour la visite pendant qu'elle se déroule.

Piliers

  • Calme
  • Clair
  • Honnête sur l'incertitude
  • Confidentiel par défaut
  • Humain

Le nom

  • « ED » est l'enseigne au-dessus de la porte, en anglais. « Flow », le flux, est ce que tout le monde gère derrière cette porte : le flux des patients, de l'arrivée à la décision.
  • Pour la personne qui attend, être dans le flux, c'est être informée : où elle en est, ce qui se passe et ce qui vient habituellement ensuite.
  • Simple et littéral : pas de « Med- », pas de croix, pas de battements de cœur. Le nom ne se traduit jamais.
  • Discret par défaut : les messages aux patients et aux proches utilisent un nom d'expéditeur neutre, jamais le nom du produit, car le nom indique que quelqu'un est aux urgences.

04

Icône de l'application

Les lettres en Papier sur un fond Bleu marine profond, avec le point vivant sur la ligne de base. Sur l'écran d'accueil, le masque de la plateforme fait le carré.

Le point vivant est le même point Ambre signal qui marque « vous êtes ici » dans chaque chronologie de visite : l'icône sur l'écran d'accueil et l'étape en cours disent la même chose.

Masques des plateformes

Monochrome (icônes thématiques)

Les favicons utilisent le symbole, qui garde les lettres lisibles à 16 px.

163248

05

Couleur

Papier le jour, nuit le soir. Une couleur de travail calme, le Bleu port, et un seul accent chaud, l'Ambre signal, réservé à « vous, maintenant ».

Couleurs de marque

  • Signal Amber

  • Harbour Blue

  • Ink

  • Deep Navy

  • Paper

Palette de base

Palette de base
Ramp50100200300400500600700800900950
stone
night
harbour
glow
fern
ochre
signal
iris
rose

Rôles sémantiques, clair et sombre

light

background
foreground
card
muted
mutedForeground
border
primary
link
ring
brand
glow
destructive

dark

background
foreground
card
muted
mutedForeground
border
primary
link
ring
brand
glow
destructive

Tons d'état

neutralinfoprogresshighlightsuccesswarningdanger
neutralinfoprogresshighlightsuccesswarningdanger

Contraste

Calculé en direct à partir des jetons, avec la même fonction que les tests de la marque. Le texte exige 4,5:1, les éléments d'interface 3:1.

Contraste
Premier planArrière-planClairSombre
foregroundbackground17.15:1AA17.71:1AA
mutedForegroundcard5.78:1AA7.49:1AA
primaryForegroundprimary6.77:1AA11.63:1AA
linkcard6.77:1AA9.80:1AA
brandForegroundbrand12.82:1AA18.90:1AA
glowForegroundglow7.36:1AA7.36:1AA
statusInfoFgstatusInfoBg5.80:1AA7.25:1AA
statusDangerFgstatusDangerBg6.29:1AA7.33:1AA
inputcard3.62:1AA4.93:1AA
ringcard3.25:1AA7.15:1AA

06

Typographie

Bricolage Grotesque pour les titres, Figtree pour la lecture, Geist Mono pour les codes et les identifiants.

Aa

ABC Diatype

Aa

ABC Diatype

Aa

Sequel Sans Head

Le jeu ss02 de Figtree donne des formes distinctes à I, l et 1, pour qu'un code de visite ne se lise jamais de travers.

Il1 · KB01-T7RM

Échelle typographique

  • display2xl · 72/80

    Chaque étape de votre visite aux urgences, sous vos yeux.

  • displayXl · 56/64

    Chaque étape de votre visite aux urgences, sous vos yeux.

  • displayLg · 44/48

    Chaque étape de votre visite aux urgences, sous vos yeux.

  • displayMd · 36/40

    Chaque étape de votre visite aux urgences, sous vos yeux.

  • displaySm · 28/32

    Chaque étape de votre visite aux urgences, sous vos yeux.

  • headingLg · 24/28

    Chaque étape de votre visite aux urgences, sous vos yeux.

  • headingMd · 20/24

    Chaque étape de votre visite aux urgences, sous vos yeux.

  • headingSm · 17/24

    Chaque étape de votre visite aux urgences, sous vos yeux.

  • bodyLg · 18/28

    Chaque étape de votre visite aux urgences, sous vos yeux.

  • bodyMd · 16/24

    Chaque étape de votre visite aux urgences, sous vos yeux.

  • bodySm · 14/20

    Chaque étape de votre visite aux urgences, sous vos yeux.

  • labelLg · 16/20

    Chaque étape de votre visite aux urgences, sous vos yeux.

Correspondance native

Correspondance native
WebiOSAndroid
display2xllargeTitledisplayLarge
displayXllargeTitledisplayMedium
displayLglargeTitledisplaySmall
displayMdlargeTitleheadlineLarge
displaySmtitle1headlineMedium
headingLgtitle2headlineSmall
headingMdtitle3titleLarge
headingSmheadlinetitleMedium
bodyLgbodybodyLarge
bodyMdbodybodyLarge
bodySmsubheadlinebodyMedium
labelLgheadlinetitleMedium
labelMdsubheadlinelabelLarge
labelSmfootnotelabelMedium
captionfootnotebodySmall
overlinecaption1labelSmall
numericXlheroNumberheroNumber
numericLgnumberLargenumberLarge
numericMdnumberMediumnumberMedium
monoLgcodecode
monoMdcodeSmallcodeSmall

07

Ton et style

Une personne calme et compétente assise à côté de vous : voici où en sont les choses, voici ce que vous pouvez faire.

  • Calme

    Nous disons

    Vos analyses de sang sont au laboratoire.

    Nous ne disons pas

    Examens en attente!!

  • Clair

    Nous disons

    Une tomodensitométrie est une radiographie détaillée.

    Nous ne disons pas

    TDM avec contraste demandée, protocole en attente.

  • Honnête sur l'incertitude

    Nous disons

    Habituellement de 30 à 55 min à cette heure un mardi. La plupart des gens (9 sur 10) ont terminé en environ 90 min.

    Nous ne disons pas

    Résultats dans 30 min.

  • Bienveillant, jamais culpabilisant

    Nous disons

    Merci de votre patience. Le service est très occupé ce soir.

    Nous ne disons pas

    L'attente est plus longue à cause des visites non urgentes.

Registres

Patients
Deuxième personne, présent, une plage habituelle et la ligne « la plupart des gens ». Jamais de résultats.
Proches
Encore plus court : l'étape, une attente et des prénoms. Jamais le nom des examens ni de détails cliniques.
Personnel
Opérationnel et dense. Les chiffres d'abord, les abréviations usuelles, des verbes pour les actions.
Administration
Assuré et fondé sur les données : les résultats d'abord, puis le fonctionnement, la confidentialité dite simplement.

Moments délicats

Le texte de référence pour les moments délicats, tiré du catalogue partagé, dans les deux langues.

  • 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

Iconographie

Une seule carte d'icônes pour toutes les plateformes : Lucide sur le Web, SF Symbols sur iOS et Material Symbols sur Android. Une icône ne porte jamais le sens à elle seule.

  • 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
Voir toutes les icônes dans le langage visuel

09

Images et illustration

Rien pour l'instant : un chemin sans point.

Hors ligne : le point est estompé.

  • Le flux est le motif : une ligne qui passe par quelques étapes, avec un seul point Ambre signal pour vous.
  • Aplats de couleur sur Papier ou Nuit, avec au plus une lueur douce derrière le point. Pas de 3D, pas de formes brillantes, pas de dégradés violets.
  • Les personnes, quand on en montre, sont diverses, calmes et dignes : des mains, des visages, la salle d'attente. Jamais d'interventions, de sang, d'aiguilles ou de détresse.
  • Jamais de vrais patients, de vrais intérieurs d'hôpital ni rien qui ressemble à de vrais renseignements de santé.

10

Mouvement

Le mouvement explique un changement, il ne décore jamais. Des ressorts sans rebond, un seul point qui respire, et tout s'arrête quand les animations sont réduites.

The live-dot breath (2.4 s, ambient easing). Static under reduced motion.
The stage-advance spring (standard, default spatial). Instant under reduced motion.
The toast arrives on the enter easing and leaves after 4 s.

11

Téléchargements

Chaque fichier est généré à partir de la configuration de la marque, donc la trousse correspond toujours au produit.

Télécharger toute la trousse (ZIP)

Chaque version du logo en SVG et PNG, les polices avec leurs licences et un fichier README.

Les polices sont Bricolage Grotesque, Figtree et Geist Mono, toutes sous licence SIL Open Font License 1.1; les textes de licence sont dans la trousse.