Système visuel — Sahty Médecin
Extrait du prototype HTML fonctionnel. Toutes les valeurs de ce document sont relevées
dans le code du prototype, pas reconstituées de mémoire.
Une colonne Portabilité indique ce qui se transpose tel quel en React Native et ce qui doit
être adapté. Le prototype exploite des capacités du navigateur qui n’ont pas d’équivalent
gratuit sur mobile.
1. Fondations
Couleurs
Le vert et le rouge sont échantillonnés au pixel sur le logo Sahty. Ce sont les seules
valeurs de marque ; tout le reste en dérive.
Jeton Valeur Usage
green #077946 Primaire, actions, ma spécialité, confirmé
green-d #05583A État pressé du bouton primaire
green-l #E4F1EA Fond teinté, avatar masculin, case cochée
red #D91B27 Alerte, allergie, annulation, enregistrement
red-l #FBE9EA Fond d’avertissement, avatar féminin
amber #9A6A0E Texte : en attente, brouillon
blue #1E5B8F Information, document déposé
ink #0E1F17 Texte principal
ink-2 #31453B Texte secondaire, icônes
muted #67796F Texte tertiaire, libellés
line rgba(14,31,23,.09) Bordures
hair rgba(14,31,23,.06) Séparateurs internes
Teintes de pastille, plus soutenues pour tenir en blanc sur fond : p-amber #B07E14 , p-grey
#7C8C83 .
Le vert et l’encre partagent la même racine. L’encre #0E1F17 est un vert très désaturé,
pas un gris neutre. C’est ce qui donne au tout sa cohérence : aucun gris froid n’apparaît
nulle part.
Couleurs de spécialité (bloc opératoire)
Treize teintes, une par spécialité, choisies pour rester distinguables côte à côte et lisibles en
blanc dessus :
#077946 viscérale · #1E5B8F orthopédie · #6B3FA0 neurochirurgie · #B3261E cardiaque ·
#A2521C vasculaire · #0F7C8A urologie · #B0367F gynécologie · #2E7D32 pédiatrique ·
#5B6B21 ORL · #7A5C10 ophtalmologie · #8E4585 plastique · #25566E thoracique ·
#C1121F urgences.
Typographie
Police système native. Aucune police chargée : la vitesse d’affichage prime sur la
personnalité typographique dans un outil de travail.
Rôle Taille Graisse Interlignage
Héros (nom du patient) 1.32 rem 800 1.2
Titre de section modale 1.06 rem 700 —
Compteur 1.05 rem 700 —
Corps 1 rem (15 px) 400 / 700 1.45
Secondaire 0.79–0.85 rem 400 / 700 1.4
Tertiaire 0.66–0.75 rem 600 / 700 1.3
Suivi de caractères : les grands titres sont resserrés ( -0.02em ), les libellés en capitales
très espacés ( +0.10 à +0.14em ). Ce contraste d’espacement remplace une seconde
police.
Espacements et rayons
Marge d’écran 16. Espacement interne des cartes 14–15. Écart entre cartes 10–11. Écart
entre boutons 9.
Rayons : carte 18, bouton 14, bouton compact 12, avatar 13, pastille 999 (capsule), panneau
modal 26 en haut uniquement.
Ombres
Deux niveaux seulement.
--sh: 0 10px 30px rgba(6,42,26,.09), 0 2px 6px rgba(6,42,26,.05)
--sh-s: 0 4px 14px rgba(6,42,26,.07)
L’ombre est teintée en vert sombre, pas en noir. Sur un fond légèrement vert, une ombre
noire apparaît sale ; une ombre teintée disparaît dans le fond.
2. Effet de verre
C’est la signature visuelle du prototype, et la partie la moins portable.
Trois couches superposées :
Le fond. Un dégradé radial clair, plus trois halos flous — vert, rouge, vert — qui dérivent
lentement sur 26 à 36 secondes en boucle alternée. Ils sont en position: fixed , donc le
contenu défile devant un fond immobile.
Les surfaces. background: rgba(255,255,255,.60) avec backdrop-filter: blur(16px)
saturate(160%) . La saturation renforcée est essentielle : sans elle, le flou délave les halos
et le verre devient gris.
Les arêtes. border: 1px solid rgba(255,255,255,.75) . Un liseré blanc translucide simule
la réfraction sur le bord d’une plaque de verre.
Trois niveaux d’opacité selon la hiérarchie : .60 pour les cartes, .78 pour les cartes
secondaires (plus opaques donc plus en arrière), .55 pour la barre supérieure et .62 pour
la barre d’onglets.
Un repli est prévu :
@supports not (backdrop-filter: blur(1px)) {
.card, #nav, #topbar { background: rgba(255,255,255,.94) }
}
Boutons
Le primaire est un dégradé à 150° sur trois arrêts, avec un reflet interne :
background: linear-gradient(150deg, #0B9459, #077946 60%, #05583A);
box-shadow: 0 6px 18px rgba(7,121,70,.28),
inset 0 1px 0 rgba(255,255,255,.28);
Le inset en haut est ce qui fait lire le bouton comme un volume éclairé par le haut. Sans
lui, le dégradé paraît plat.
Le bouton secondaire est du verre : blanc à 78 %, arête claire, ombre légère.
3. Composants
Composant Caractéristiques
Verre, rayon 18, ombre longue. Variante flat : plus opaque, ombre
Carte
courte, pour l’intérieur d’une carte
Bouton 4 variantes — primaire, verre, danger, désactivé (opacité 0.45) ; 2 tailles
Capsule, 0.66 rem, graisse 700, blanc sur fond plein ; variante sourde pour
Pastille
l’information neutre
Avatar 42×42, rayon 13, initiales en 800, dégradé teinté selon le sexe
Titre de
Capitales, 0.68 rem, 800, suivi +0.12em, gris moyen
section
Sélecteur
Fond translucide, pastille blanche mobile portant une ombre
segmenté
Capsules défilantes horizontalement, actif en vert plein avec ombre
Onglets
colorée
Ligne clé-
Clé en gris à gauche, valeur en 600 à droite, filet fin entre
valeur
Frise Filet vertical, pastille verte de 8 px avec halo de 3 px
Case à cocher 22×22, rayon 8. Coche dessinée par animation de tracé
Barre de
progression 5 px, dégradé vert, transition 0.5 s
Panneau bas Rayon 26 en haut, verre à 86 %, poignée de 38×4, ressort à l’ouverture
Message
Encre à 92 %, remonte de 10 px en apparaissant, disparaît après 2.3 s
éphémère
États vides
Texte centré, gris, 0.85 rem, marge verticale de 38. Toujours une phrase complète et neutre
— « Journée libre. », « Aucune consigne pour aujourd’hui. » — jamais un simple tiret.
4. Animations
Toutes utilisent la même courbe : cubic-bezier(.22, .9, .28, 1) . Départ rapide, arrivée
amortie — le mouvement paraît décidé plutôt que mou.
Animation Durée Où
Entrée d’écran 340 ms Fondu + montée de 10 px
420 ms, décalage 45
Cascade de liste Chaque carte monte de 12 px à son tour
ms
scale(.975) bouton, .985 carte, .90
Pression 160–200 ms
icône
Panneau bas 380 ms Translation depuis le bas
300 ms + 50 ms de
Coche Tracé du trait par stroke-dashoffset
retard
Halo
1.9 s en boucle Anneau qui grandit et s’efface
d’enregistrement
Lueur du micro 1.8 s en boucle Ombre rouge qui respire
Pastille de
350 ms Apparition avec dépassement à 1.25
notification
Dérive du fond 26–36 s Halos, alternée
Le décalage de 45 ms sur les listes est le détail qui fait le plus d’effet pour le moins d’effort :
au-delà de 60 ms l’attente devient perceptible, en dessous de 30 ms l’effet disparaît.
prefers-reduced-motion désactive tout par une règle unique.
5. Grammaire des couleurs
Une couleur signifie toujours la même chose, partout.
Couleur Sens
Vert Confirmé, réalisé, ma spécialité, action principale
En attente d’une décision : brouillon, demande non arbitrée, RDV à
Ambre
confirmer
Attention immédiate : allergie, annulation, enregistrement en cours,
Rouge
brouillon non validé
Bleu Information sans action : document déposé, demande reçue
Gris Terminé, sans enjeu
Hachures ambre Créneau gelé par une demande — le motif rayé dit « réservé mais pas
à 45° acquis »
6. Décisions d’ergonomie
Une seule salle à l’écran dans l’agenda du bloc. La première version empilait des cartes
pour les 24 salles — illisible sur téléphone. Remplacé par un menu déroulant, salle par salle,
ouvert par défaut sur la première salle de la spécialité du praticien. Contrepartie assumée :
un coordonnateur de bloc a besoin d’une vue d’ensemble, qui devra exister sur écran large.
Accueil réduit à l’essentiel. Un prochain patient, trois raccourcis, trois compteurs. Aucune
liste. Toute information supplémentaire est à un appui de distance.
Le micro au centre de la barre d’onglets. C’est la fonction qui justifie l’application. Disque
de 48 px remontant de 18 px au-dessus de la barre, il devient rouge et pulse pendant
l’enregistrement.
Frise verticale plutôt qu’horizontale pour le programme opératoire. Le défilement
vertical est naturel au pouce, et la durée d’une intervention se lit comme une hauteur — plus
intuitif qu’une largeur sur un écran étroit.
Trois échelles de temps. Jour pour agir, mois pour planifier, année pour juger la charge.
Chaque niveau se creuse d’un appui vers le suivant.
Le brouillon est visuellement dégradé. Bandeau rouge, pastille ambre. Un document non
validé ne doit jamais ressembler à un document valide — c’est une protection, pas une
décoration.
La zone dangereuse est en dernier. Dans une rangée de boutons, l’action destructrice est
à droite et en rouge, jamais sous le pouce au repos.
7. Portabilité vers React Native
Élément Statut
Palette, typographie,
Transposable tel quel
espacements, rayons
Grammaire des couleurs,
Transposable
états vides, hiérarchie
Transposable, mais elevation sur Android rend
Ombres
différemment de shadow* sur iOS — vérifier sur les deux
Dégradés Nécessite expo-linear-gradient
expo-blur . Coûteux. À tester sur un Android d’entrée de
Effet de verre
gamme avant de le retenir
Trois vues floutées animées en continu : coût GPU permanent.
Halos animés du fond
Déconseillé
Animations d’entrée et de
react-native-reanimated , mêmes durées et même courbe
pression
Possible, mais coûteuse sur liste longue — la limiter aux
Cascade de liste
éléments visibles
Tracé de la coche react-native-svg avec strokeDashoffset animé
Hachures à 45° Pas de dégradé répété : utiliser un motif SVG
Barre d’onglets translucide Approximation acceptable avec un fond opaque clair
Recommandation. Conserver la palette, la typographie, les rayons, la grammaire des
couleurs et les animations d’interaction — c’est ce qui fait l’identité. Abandonner le verre et
les halos de fond au profit de surfaces opaques sur un fond très légèrement teinté.
L’application restera reconnaissable et tiendra 60 images par seconde sur le parc réel.
Si le verre est retenu malgré tout, le décider après un test de défilement de la liste de visite
sur le téléphone le plus faible disponible à l’hôpital — pas avant.