Système de design
Tout ce que vous voyez ici est rendu depuis les tokens du produit. Ce n’est pas une copie du système de design : c’est le système de design. Si une valeur change dans le code, cette page change avec elle.
src/tokens.js — le seul fichier du projet qui contient une valeur de marque. Aucune couleur, taille ni ombre de cette page n’est écrite à la main.
01
SuturaLab est un entraîneur à la décision clinique pour les infirmières : pas un cours avec un test à la fin.
Entre le manuel que l’on consulte et l’atelier présentiel auquel on n’assiste jamais. Un manuel n’oblige pas à décider et un atelier ne tient pas dans une garde. Ici le cas vient d’abord, vous choisissez, et la correction arrive avec tout le raisonnement.
Les infirmières de soins directs en Espagne et en Amérique latine — soins primaires, urgences, consultation plaies, EHPAD et domicile — et les étudiantes de dernière année qui arrivent en stage sans avoir jamais décidé seules.
Vous entraînez la décision, pas la mémoire.
Nous ne sommes ni une accréditation, ni une consultation clinique, ni un catalogue de produits. Nous ne promettons pas de résultats : nous proposons du jugement, guide en main et source visible.
Chaque pièce — une leçon, un post, un courriel — se termine par une décision prise et son pourquoi. Si une pièce n’oblige à décider de rien, elle n’est pas de nous.
De collègue à collègue, jamais du haut d’une chaire. Nous tenons pour acquis ce qu’une infirmière sait, et jamais ce que le guide nuance.
02
L’arc d’une aiguille courbe dont le fil descend et se résout en deux points terminés sur la ligne de la plaie : décision, exécution et résultat en une seule marque.
La signature d’e-mail a sa propre version et n’est jamais réutilisée dans les carrousels, sur le web, dans les documents ni les campagnes. L’inverse non plus : le logotype du site ne se colle pas dans un e-mail.
Les huit ci-dessous sont rendus exprès, barrés, pour être reconnus du premier coup d’œil. Aucun n’est publié.
Redessiné
Déformé
Avec ombre
Fond à faible contraste
Recoloré
Avec dégradé
Pivoté
Avec effets
03
Une seule teinte propre — teal chirurgical — sur encre et papier, avec des filets de 1 px. Chaque échantillon porte son contraste réel, calculé contre les fonds avec lesquels il peut se combiner.
Ember appartient à l’appel à l’action principal et aux alertes, et à rien d’autre. Jamais un fond de section, jamais de la décoration, jamais du texte long, jamais un second bouton sur le même écran. Si la chaleur apparaît deux fois, elle cesse de dire « agissez ici ».
--ember #C25333
Soixante de papier, trente d’encre, huit de teal et deux d’ember. C’est la proportion qui laisse une seule chose appeler.
04
Schibsted Grotesk pour les titres, Inter pour l’interface et le texte. Les deux embarquées sur notre domaine : aucune requête vers un CDN de polices et aucun problème de consentement.
Une berge inversée ne ferme pas
Une berge inversée ne ferme pas
Une berge inversée ne ferme pas
Une berge inversée ne ferme pas
Une berge inversée ne ferme pas
Une berge inversée ne ferme pas
Une berge inversée ne ferme pas
Une berge inversée ne ferme pas
Une berge inversée ne ferme pas
--w-reg 400--w-med 500--w-semi 600--w-bold 700--w-display 620Quatre graisses et une graisse display. Pas d’italique dans les titres, pas de gras à l’intérieur d’un titre.
--tr-tight -0.022em--tr-snug -0.012em--tr-wide 0.14emLes grands titres condensés prennent une approche négative ; les étiquettes en capitales, une approche positive. Le texte courant n’y touche jamais.
Entre cinquante-quatre et soixante-cinq caractères par ligne : la largeur à laquelle l’œil retrouve la ligne suivante sans se perdre, et celle que nous utilisons pour tout le texte long du produit.
Plus longue, on perd la ligne ; plus courte, on casse le rythme. --measure 65ch · --measure-narrow 54ch
Un seul h1 par page. Titre en display, sous-titre en Inter, étiquette en capitales teal. Jamais deux niveaux consécutifs à la même taille.
Servies depuis notre propre domaine. Jamais depuis un CDN de polices.
05
Une seule gouttière, un seul rythme vertical et une seule échelle d’espacement pour tout le site. Tout ce qui suit est dessiné avec la valeur du token, pas avec une capture.
--r-xs4px
--r-sm6px
--r-md10px
--r-lg14px
--r-xl22px
--r-pill999px
--e1Au repos : bouton, carte posée
--e2Surélevé : carte active, test
--e3Flottant : menu, panneau
--e4Au-dessus de tout : modale, avis
--t-fast150ms--t-base200ms--t-slow250ms--easecubic-bezier(.2,.7,.3,1)Une seule courbe d’accélération. Avec « réduire les animations », toutes les durées tombent à 1 ms.
--maxw1200px--maxw-narrow760px--toc-w290px--header-h64px--tap44px--gutterclamp(1.15rem,4.2vw,2rem)--section-yclamp(2.75rem,6vw,5rem)--section-y-tightclamp(2rem,4.5vw,3.5rem)--measure65ch--measure-narrow54ch06
Rendus en direct depuis le code même qui sert le produit. Ce que vous voyez ici est exactement ce que voit un élève.
Par défaut
Cas d’exemple
Sélectionnée
Cas d’exemple
Corrigée : juste
Cas d’exemple
Une berge inversée met l’épiderme face au derme : il n’y a pas d’affrontement et la cicatrice devient déprimée et plus large. On corrige en refaisant le point avec une entrée à 90° et plus de tissu profond que superficiel, ou avec un point matelassé vertical. Serrer davantage n’éverse pas : cela rend la berge ischémique.
Corrigée : fausse
Cas d’exemple
Une berge inversée met l’épiderme face au derme : il n’y a pas d’affrontement et la cicatrice devient déprimée et plus large. On corrige en refaisant le point avec une entrée à 90° et plus de tissu profond que superficiel, ou avec un point matelassé vertical. Serrer davantage n’éverse pas : cela rend la berge ischémique.
Désactivée
Cas d’exemple
Règle d’état
Aucun état ne repose sur la couleur seule : une option corrigée reçoit aussi sa lettre, un glyphe et le mot écrit, pour rester lisible en niveaux de gris, à l’impression et avec un daltonisme.
Un bouton ember par écran au maximum. Toutes les autres actions sont teal, contour ou texte.
Elle sert à enregistrer votre progression. Rien d’autre.
Dix caractères minimum.
Un badge dit l’état avec un mot, pas seulement avec une couleur : c’est ce qui le rend lisible en niveaux de gris et à l’impression.
Non indiqué en cas de : plaie sèche, exsudat faible ou nécrose sèche stable.
Le choix se fait sur le niveau d’exsudat, le tissu du lit de la plaie et l’état de la peau périlésionnelle (EPUAP/NPIAP/PPPIA 2019).
| Niveau | leçons | Prix |
|---|---|---|
| Esencial | 10 | Gratuit |
| Clínico | 11 | 39 € |
| Experto | 8 | 79 € |
07
Clinique, sûr, direct, de collègue à collègue. Des phrases courtes, le verbe devant, et aucun mot qui ne tiendrait pas une garde.
| On dit | On ne dit pas | Pourquoi |
|---|---|---|
| Lésion liée à la dépendance (GNEAUPP, LRD) | Plaie de lit | « LRD » est le terme parapluie du GNEAUPP ; « plaie de lit » ne dit pas quelle force a produit la lésion. |
| Escarre (lésion de pression) | Nécrose | La nécrose est un tissu du lit de la plaie, pas l’entité : elle décrit ce qu’on voit, pas ce que c’est. |
| Catégorie I à IV | Grade I à IV | Le GNEAUPP et l’EPUAP/NPIAP emploient « catégorie » pour éviter l’idée d’une échelle que l’on monte et descend. |
| Non stadifiable | Catégorie V | La catégorie V n’existe pas : c’est une lésion de pleine épaisseur dont le lit est masqué par la fibrine ou la nécrose. |
| Lésion des tissus profonds | Escarre violacée | Décoloration persistante et non blanchissable rouge foncé, marron ou violette, peau intacte ou non. |
| Lésion cutanée associée à l’humidité (LCAH) | Ulcère d’humidité | Ce n’est pas une escarre : la cause est l’humidité, l’évaluation est autre et la prise en charge aussi. |
| Lésion de friction | Plaie de frottement | La friction est une force tangentielle de surface ; le cisaillement agit dans les plans profonds et n’est pas la même chose. |
| Érythème non blanchissable | Rougeur qui ne part pas | C’est le critère qui définit la catégorie I, vérifié par pression digitale ou avec un disque transparent. |
Nous employons le langage prudent des guides : « il est recommandé », « envisager », « les données sont insuffisantes ». Là où le guide hésite, nous hésitons par écrit.
Les sources sont toujours citées dans la pièce, avec document et année.
08
Une image n’existe que si elle illustre exactement le contenu qui la jouxte.
Quand il n’existe pas de photographie clinique correcte, nous dessinons notre propre schéma et l’étiquetons « Schéma ». Jamais de photo de banque décorative, jamais d’image de plaie sensationnaliste ou hors contexte clinique. Une image qui ne correspond pas est pire que pas d’image.
Correct
Notre propre schéma, étiqueté comme tel, avec une description écrite, à côté du texte qui explique exactement cela.
Incorrect
Une photo de banque d’un bloc opératoire générique à côté d’un texte sur la catégorisation des escarres : elle décore, elle n’enseigne pas, et elle suggère un contexte qui n’est pas celui du contenu.
09
Gabarits sociaux
Quatre grilles maîtresses pour Instagram, 1080 × 1350 px (4:5), dessinées avec ces mêmes tokens. Toute pièce future se compose en en choisissant une, sans rien inventer.
CAS 01
Les berges s’inversent à l’affrontement. Que faites-vous ?
A — Cas
Fond encre. Étiquette « CAS 0X » en teal en haut, la question en grand titre condensé occupant la majeure partie de la hauteur, quatre options en lignes minimales en bas et un petit symbole dans un coin. Sans photo.
Alginate
Hydrocolloïde
Exsudat abondant, lit fibrineux.
B — Décision A/B
Fond papier. Partage vertical, deux options face à face en grande typographie, un filet de 1 px au centre et une ligne de contexte clinique en dessous.
Ce n’est pas un « ulcère d’humidité ».
C’est une LCAH.
GNEAUPP · Document technique nº II
C — Vocabulaire
Fond papier avec accent teal. « Ce n’est pas X. C’est Y. » en taille display, avec la source en petits caractères au pied.
TROIS NIVEAUX
- Essentiel · 0 €
- Intermédiaire · 39 €
- Avancé · 79 €
Commencer gratuitementD — Produit
Fond encre et le seul endroit où ember apparaît : l’échelle des trois niveaux et un unique appel à l’action.
Règles de composition
Mesures