Designsystem
Alles hier wird aus den Produkt-Tokens gerendert. Das ist keine Kopie des Designsystems: es ist das Designsystem. Ändert sich ein Wert im Code, ändert sich diese Seite mit.
src/tokens.js — die einzige Datei im Projekt, die einen Markenwert enthält. Keine Farbe, keine Größe und kein Schatten auf dieser Seite ist von Hand eingetragen.
01
SuturaLab ist ein Trainer für klinische Entscheidungen in der Pflege: kein Kurs mit einem Test am Ende.
Zwischen dem Handbuch zum Nachschlagen und dem Präsenzworkshop, zu dem man nie kommt. Ein Handbuch zwingt zu keiner Entscheidung, ein Workshop passt in keine Schicht. Hier steht der Fall zuerst, Sie entscheiden, und die Korrektur kommt mit der vollständigen Begründung.
Pflegefachpersonen in der direkten Versorgung in Spanien und Lateinamerika — Primärversorgung, Notaufnahme, Wundsprechstunde, Pflegeheim und Hausbesuch — und Studierende im letzten Jahr, die ins Praktikum kommen, ohne je allein entschieden zu haben.
Du trainierst die Entscheidung, nicht das Auswendiglernen.
Wir sind keine Akkreditierung, keine klinische Beratung und kein Produktkatalog. Wir versprechen keine Ergebnisse: wir bieten Urteilsvermögen mit der Leitlinie in der Hand und der Quelle im Blick.
Jedes Stück — eine Lektion, ein Post, eine E-Mail — endet mit einer getroffenen Entscheidung und ihrer Begründung. Erzwingt ein Stück keine Entscheidung, ist es nicht unseres.
Von Kollegin zu Kollegin, nie vom Katheder. Wir setzen voraus, was eine Pflegefachperson weiß — und nie das, was die Leitlinie einschränkt.
02
Der Bogen einer gebogenen Nadel, deren Faden herabläuft und in zwei fertigen Stichen über der Wundlinie endet: Entscheidung, Ausführung und Ergebnis in einem Zeichen.
Die E-Mail-Signatur hat ihre eigene Version und wird nie in Karussells, auf der Website, in Dokumenten oder Kampagnen wiederverwendet. Umgekehrt ebenso wenig: die Wortbildmarke der Website wird nicht in eine E-Mail geklebt.
Die acht unten sind absichtlich gerendert und durchgestrichen, damit man sie sofort erkennt. Keine davon wird veröffentlicht.
Neu gezeichnet
Verzerrt
Mit Schatten
Kontrastarmer Hintergrund
Umgefärbt
Mit Verlauf
Gedreht
Mit Effekten
03
Ein eigener Farbton — chirurgisches Teal — auf Tinte und Papier, mit 1-px-Linien. Jedes Farbfeld trägt seinen tatsächlichen Kontrast, berechnet gegen die Hintergründe, mit denen es kombiniert werden darf.
Ember gehört ausschließlich der primären Handlungsaufforderung und den Warnhinweisen. Nie Abschnittshintergrund, nie Dekoration, nie Fließtext, nie ein zweiter Button auf demselben Bildschirm. Erscheint die Wärme zweimal, bedeutet sie nicht mehr „hier handeln“.
--ember #C25333
Sechzig Teile Papier, dreißig Tinte, acht Teal und zwei Ember. Dieses Verhältnis lässt genau eine Sache rufen.
04
Schibsted Grotesk für Überschriften, Inter für Interface und Text. Beide auf der eigenen Domain gebündelt: keine Anfrage an ein Font-CDN und kein Einwilligungsproblem.
Ein eingerollter Wundrand schließt nicht
Ein eingerollter Wundrand schließt nicht
Ein eingerollter Wundrand schließt nicht
Ein eingerollter Wundrand schließt nicht
Ein eingerollter Wundrand schließt nicht
Ein eingerollter Wundrand schließt nicht
Ein eingerollter Wundrand schließt nicht
Ein eingerollter Wundrand schließt nicht
Ein eingerollter Wundrand schließt nicht
--w-reg 400--w-med 500--w-semi 600--w-bold 700--w-display 620Vier Schnitte und ein Display-Schnitt. Keine Kursive in Überschriften, kein Fettdruck innerhalb einer Überschrift.
--tr-tight -0.022em--tr-snug -0.012em--tr-wide 0.14emGroße, schmale Überschriften bekommen negative Laufweite, Versal-Labels positive. Fließtext wird nie angefasst.
Zwischen vierundfünfzig und fünfundsechzig Zeichen pro Zeile: die Breite, bei der das Auge die nächste Zeile findet, ohne sich zu verlieren — und die wir für allen längeren Text im Produkt verwenden.
Länger verliert man die Zeile, kürzer bricht der Rhythmus. --measure 65ch · --measure-narrow 54ch
Ein h1 pro Seite. Überschrift im Display-Schnitt, Unterzeile in Inter, Label in Teal-Versalien. Nie zwei aufeinanderfolgende Ebenen in derselben Größe.
Von der eigenen Domain ausgeliefert. Nie von einem Font-CDN.
05
Ein Seitenabstand, ein vertikaler Rhythmus und eine Abstandsskala für die ganze Website. Alles unten ist mit dem Token-Wert gezeichnet, nicht mit einem Screenshot.
--r-xs4px
--r-sm6px
--r-md10px
--r-lg14px
--r-xl22px
--r-pill999px
--e1In Ruhe: Button, liegende Karte
--e2Angehoben: aktive Karte, Test
--e3Schwebend: Menü, Panel
--e4Über allem: Modal, Hinweis
--t-fast150ms--t-base200ms--t-slow250ms--easecubic-bezier(.2,.7,.3,1)Eine einzige Beschleunigungskurve. Bei aktivem „Bewegung reduzieren“ fallen alle Dauern auf 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
Live aus demselben Code gerendert, der das Produkt ausliefert. Was Sie hier sehen, sieht die Lernende genauso.
Standard
Beispielfall
Ausgewählt
Beispielfall
Bewertet: richtig
Beispielfall
Ein eingerollter Rand legt Epidermis auf Dermis: es gibt keine Adaptation, die Narbe wird eingesunken und breiter. Korrektur: den Stich mit 90°-Einstich neu setzen und in der Tiefe mehr Gewebe fassen als oberflächlich, oder eine vertikale Rückstichnaht. Fester ziehen evertiert nicht — es macht den Rand ischämisch.
Bewertet: falsch
Beispielfall
Ein eingerollter Rand legt Epidermis auf Dermis: es gibt keine Adaptation, die Narbe wird eingesunken und breiter. Korrektur: den Stich mit 90°-Einstich neu setzen und in der Tiefe mehr Gewebe fassen als oberflächlich, oder eine vertikale Rückstichnaht. Fester ziehen evertiert nicht — es macht den Rand ischämisch.
Deaktiviert
Beispielfall
Zustandsregel
Kein Zustand wird allein über Farbe transportiert: eine bewertete Option erhält zusätzlich ihren Buchstaben, ein Zeichen und das geschriebene Wort — lesbar in Graustufen, im Druck und bei Farbenblindheit.
Höchstens ein Ember-Button pro Bildschirm. Alle anderen Aktionen sind Teal, Kontur oder Text.
Sie dient dazu, Ihren Fortschritt zu speichern. Sonst nichts.
Mindestens zehn Zeichen.
Ein Badge nennt den Status als Wort, nicht nur als Farbe: so bleibt er in Graustufen und im Druck lesbar.
Nicht indiziert bei: trockener Wunde, geringer Exsudation oder stabilem trockenem Schorf.
Die Auswahl richtet sich nach Exsudatmenge, Gewebe im Wundgrund und Zustand der Wundumgebung (EPUAP/NPIAP/PPPIA 2019).
| Stufe | Lektionen | Preis |
|---|---|---|
| Esencial | 10 | Kostenlos |
| Intermedio | 11 | 39 € |
| Avanzado | 8 | 79 € |
07
Klinisch, sicher, direkt, von Kollegin zu Kollegin. Kurze Sätze, das Verb vorn, und kein Wort, das eine Nachtschicht nicht überstehen würde.
| Wir sagen | Wir sagen nicht | Warum |
|---|---|---|
| Abhängigkeitsbedingte Hautläsion (GNEAUPP, LRD) | Wundliegen | „LRD“ ist der Oberbegriff des GNEAUPP; „Wundliegen“ sagt nichts darüber, welche Kraft die Läsion erzeugt hat. |
| Dekubitus (Druckschädigung) | Schorf | Schorf ist Gewebe im Wundgrund, nicht die Entität: er beschreibt, was man sieht, nicht was es ist. |
| Kategorie I bis IV | Grad I bis IV | GNEAUPP und EPUAP/NPIAP verwenden „Kategorie“, um die Vorstellung einer Leiter zu vermeiden, die man hinauf- und hinuntersteigt. |
| Nicht klassifizierbar | Kategorie V | Eine Kategorie V gibt es nicht: es ist eine Läsion über die gesamte Hautdicke, deren Grund von Belägen oder Schorf verdeckt ist. |
| Tiefe Gewebeschädigung | Violetter Dekubitus | Anhaltende, nicht wegdrückbare dunkelrote, braune oder violette Verfärbung, bei intakter oder nicht intakter Haut. |
| Feuchtigkeitsbedingte Hautschädigung (MASD/IAD) | Feuchtigkeitsgeschwür | Es ist kein Dekubitus: Ursache ist die Feuchtigkeit, die Beurteilung ist eine andere und die Versorgung ebenfalls. |
| Reibungsläsion | Scheuerwunde | Reibung ist eine tangentiale Kraft an der Oberfläche; Scherkraft wirkt in den tiefen Schichten und ist nicht dasselbe. |
| Nicht wegdrückbare Rötung | Rötung, die nicht weggeht | Es ist das Kriterium der Kategorie I und wird per Fingerdruck oder mit einer durchsichtigen Scheibe geprüft. |
Wir verwenden die vorsichtige Sprache der Leitlinien: „wird empfohlen“, „erwägen“, „die Evidenz reicht nicht aus“. Wo die Leitlinie zögert, zögern wir schriftlich.
Quellen stehen immer im Motiv selbst, mit Dokument und Jahr.
08
Ein Bild existiert nur, wenn es genau den Inhalt daneben illustriert.
Wo es keine korrekte klinische Fotografie gibt, zeichnen wir ein eigenes Diagramm und kennzeichnen es als „Diagramm“. Nie ein dekoratives Stockfoto, nie ein reißerisches Wundbild oder eines ohne klinischen Kontext. Ein Bild, das nicht passt, ist schlechter als gar kein Bild.
Richtig
Ein eigenes Diagramm, als Diagramm gekennzeichnet, mit geschriebener Beschreibung, neben dem Text, der genau das erklärt.
Falsch
Ein Stockfoto eines beliebigen OP-Saals neben einem Text zur Dekubitus-Kategorisierung: es dekoriert, lehrt nichts und suggeriert ein Umfeld, das nicht zum Inhalt gehört.
09
Social-Vorlagen
Vier Grundraster für Instagram, 1080 × 1350 px (4:5), mit denselben Tokens gezeichnet. Jedes künftige Motiv entsteht, indem man eines auswählt — nichts wird erfunden.
FALL 01
Die Wundränder rollen sich beim Adaptieren ein. Was tun Sie?
A — Fall
Tintenhintergrund. Label „FALL 0X“ oben in Teal, die Frage als große, schmale Überschrift über den Großteil der Höhe, vier Optionen als minimale Zeilen unten und eine kleine Bildmarke in einer Ecke. Kein Foto.
Alginat
Hydrokolloid
Starke Exsudation, belegter Wundgrund.
B — A/B-Entscheidung
Papierhintergrund. Vertikal geteilt, zwei Optionen groß gegenübergestellt, eine 1-px-Linie in der Mitte und darunter eine Zeile klinischer Kontext.
Es ist kein „Feuchtigkeitsgeschwür“.
Es ist eine MASD.
GNEAUPP · Technisches Dokument Nr. II
C — Vokabular
Papierhintergrund mit Teal-Akzent. „Das ist nicht X. Das ist Y.“ in Display-Größe, die Quelle klein am Fuß.
DREI STUFEN
- Basis · 0 €
- Mittelstufe · 39 €
- Fortgeschritten · 79 €
Kostenlos startenD — Produkt
Tintenhintergrund und der einzige Ort, an dem Ember erscheint: die dreistufige Leiter und ein einziger Handlungsaufruf.
Gestaltungsregeln
Maße