Design system
Tutto quello che vedi qui è generato dai token del prodotto. Non è una copia del design system: è il design system. Se un valore cambia nel codice, questa pagina cambia con lui.
src/tokens.js — l’unico file del progetto che contiene un valore di marca. Nessun colore, dimensione o ombra di questa pagina è scritto a mano.
01
SuturaLab è un allenatore di decisione clinica per infermieri: non è un corso con un test alla fine.
Tra il manuale che si consulta e il laboratorio in presenza a cui non si arriva. Un manuale non obbliga a decidere e un laboratorio non entra in un turno. Qui il caso viene prima, scegli, e la correzione arriva con tutto il ragionamento.
Infermieri assistenziali di Spagna e America Latina — cure primarie, pronto soccorso, ambulatorio lesioni, RSA e domicilio — e studenti dell’ultimo anno che arrivano in tirocinio senza aver mai deciso da soli.
Alleni la decisione, non la memoria.
Non siamo un accreditamento, né una consulenza clinica, né un catalogo di prodotti. Non promettiamo risultati: offriamo criterio con la linea guida in mano e la fonte in vista.
Ogni pezzo — una lezione, un post, un’email — finisce con una decisione presa e il suo perché. Se un pezzo non obbliga a decidere nulla, non è nostro.
Da collega a collega, mai dalla cattedra. Diamo per scontato quello che un infermiere sa e non diamo per scontato quello che la linea guida precisa.
02
L’arco di un ago curvo il cui filo scende e si risolve in due punti finiti sulla linea della ferita: decisione, esecuzione e risultato in un solo segno.
La firma email ha la sua versione e non si riusa in caroselli, sito, documenti o campagne. Nemmeno al contrario: il logotipo del sito non si incolla dentro un’email.
Gli otto qui sotto sono resi apposta, barrati, perché si riconoscano al primo sguardo. Nessuno viene pubblicato.
Ridisegnato
Deformato
Con ombra
Sfondo a basso contrasto
Ricolorato
Con sfumatura
Ruotato
Con effetti
03
Una sola tinta di proprietà — teal chirurgico — su inchiostro e carta, con filetti da 1 px. Ogni campione porta il suo contrasto reale, calcolato contro gli sfondi con cui può combinarsi.
Ember è esclusivo della call to action principale e degli avvisi. Mai sfondo di sezione, mai decorazione, mai testo lungo, mai un secondo pulsante nella stessa schermata. Se il calore appare due volte, smette di significare «agisci qui».
--ember #C25333
Sessanta di carta, trenta di inchiostro, otto di teal e due di ember. È la proporzione che lascia chiamare una cosa sola.
04
Schibsted Grotesk per i titoli, Inter per interfaccia e testo. Entrambe ospitate sul nostro dominio: nessuna richiesta a un CDN di font e nessun problema di consenso.
Un margine introflesso non chiude
Un margine introflesso non chiude
Un margine introflesso non chiude
Un margine introflesso non chiude
Un margine introflesso non chiude
Un margine introflesso non chiude
Un margine introflesso non chiude
Un margine introflesso non chiude
Un margine introflesso non chiude
--w-reg 400--w-med 500--w-semi 600--w-bold 700--w-display 620Quattro pesi e uno display. Niente corsivo nei titoli, niente grassetto dentro un titolo.
--tr-tight -0.022em--tr-snug -0.012em--tr-wide 0.14emI titoli grandi e condensati hanno crenatura negativa; le etichette maiuscole, positiva. Il testo corrente non si tocca mai.
Tra cinquantaquattro e sessantacinque caratteri per riga: la larghezza alla quale l’occhio ritrova la riga successiva senza perdersi, e quella che usiamo per tutto il testo lungo del prodotto.
Più lunga si perde la riga; più corta si rompe il ritmo. --measure 65ch · --measure-narrow 54ch
Un h1 per pagina. Titolo in display, sottotitolo in Inter, etichetta in maiuscolo teal. Mai due livelli consecutivi della stessa dimensione.
Servite dal nostro dominio. Mai da un CDN di font.
05
Una sola gronda, un solo ritmo verticale e una sola scala di spaziatura per tutto il sito. Tutto quello che segue è disegnato con il valore del token, non con uno screenshot.
--r-xs4px
--r-sm6px
--r-md10px
--r-lg14px
--r-xl22px
--r-pill999px
--e1A riposo: pulsante, scheda appoggiata
--e2Sollevato: scheda attiva, test
--e3Fluttuante: menu, pannello
--e4Sopra tutto: modale, avviso
--t-fast150ms--t-base200ms--t-slow250ms--easecubic-bezier(.2,.7,.3,1)Una sola curva di accelerazione. Con «riduci movimento» attivo, tutte le durate scendono a 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
Renderizzati dal vivo dallo stesso codice che serve il prodotto. Quello che vedi qui è esattamente quello che vede uno studente.
Predefinito
Caso di esempio
Selezionata
Caso di esempio
Corretta: giusta
Caso di esempio
Un margine introflesso mette l’epidermide contro il derma: non c’è affrontamento e la cicatrice resta depressa e più larga. Si corregge rifacendo il punto con ingresso a 90° e più tessuto profondo che superficiale, o con un punto a materasso verticale. Stringere di più non everte: rende ischemico il margine.
Corretta: sbagliata
Caso di esempio
Un margine introflesso mette l’epidermide contro il derma: non c’è affrontamento e la cicatrice resta depressa e più larga. Si corregge rifacendo il punto con ingresso a 90° e più tessuto profondo che superficiale, o con un punto a materasso verticale. Stringere di più non everte: rende ischemico il margine.
Disabilitata
Caso di esempio
Regola di stato
Nessuno stato è affidato al solo colore: l’opzione corretta riceve anche la lettera, un simbolo e la parola scritta, così si legge in scala di grigi, in stampa e con daltonismo.
Al massimo un pulsante ember per schermata. Tutte le altre azioni sono teal, contorno o testo.
Serve a salvare i tuoi progressi. Nient’altro.
Minimo dieci caratteri.
Il badge dice lo stato con la parola, non solo con il colore: così si legge in scala di grigi e in stampa.
Non indicato in: ferita secca, essudato scarso o escara secca stabile.
La scelta si fa in base al livello di essudato, al tessuto del letto e allo stato della cute perilesionale (EPUAP/NPIAP/PPPIA 2019).
| Livello | lezioni | Prezzo |
|---|---|---|
| Esencial | 10 | Gratuito |
| Intermedio | 11 | 39 € |
| Avanzado | 8 | 79 € |
07
Clinico, sicuro, diretto, da collega a collega. Frasi brevi, il verbo davanti e nessuna parola che non regga un turno di notte.
| Si dice | Non si dice | Perché |
|---|---|---|
| Lesione correlata alla dipendenza (GNEAUPP, LRD) | Piaga da letto | «LRD» è il termine ombrello del GNEAUPP; «piaga da letto» non dice quale forza ha prodotto la lesione. |
| Lesione da pressione (LdP) | Escara | L’escara è un tessuto del letto, non l’entità: descrive quello che si vede, non quello che è. |
| Categoria da I a IV | Grado da I a IV | GNEAUPP ed EPUAP/NPIAP usano «categoria» per evitare l’idea di una scala che si sale e si scende. |
| Non stadiabile | Categoria V | La categoria V non esiste: è una lesione a tutto spessore il cui letto è coperto da fibrina o escara. |
| Lesione dei tessuti profondi | Lesione viola | Discolorazione persistente e non sbiancabile rosso scuro, marrone o viola, con cute integra o no. |
| Lesione cutanea associata all’umidità (MASD) | Ulcera da umidità | Non è una lesione da pressione: la causa è l’umidità, la valutazione è un’altra e anche la gestione. |
| Lesione da frizione | Ferita da sfregamento | La frizione è una forza tangenziale di superficie; il taglio agisce nei piani profondi e non è la stessa cosa. |
| Eritema non sbiancabile | Rossore che non va via | È il criterio che definisce la categoria I e si verifica con pressione digitale o disco trasparente. |
Usiamo il linguaggio prudente delle linee guida: «si raccomanda», «considerare», «non ci sono prove sufficienti». Dove la linea guida dubita, dubitiamo per iscritto.
Le fonti sono sempre citate nel pezzo, con documento e anno.
08
Un’immagine esiste solo se illustra esattamente il contenuto che ha accanto.
Se non esiste la fotografia clinica corretta, disegniamo un nostro diagramma e lo etichettiamo «Diagramma». Mai una foto stock decorativa, mai un’immagine di ferita sensazionalistica o senza contesto clinico. Un’immagine che non corrisponde è peggio di nessuna immagine.
Corretto
Un diagramma nostro, etichettato come diagramma, con descrizione scritta, accanto al testo che spiega esattamente quello.
Scorretto
Una foto stock di una sala operatoria generica accanto a un testo sulla categorizzazione delle lesioni da pressione: decora, non insegna, e suggerisce un contesto che non è quello del contenuto.
09
Template social
Quattro griglie madri per Instagram, 1080 × 1350 px (4:5), disegnate con questi stessi token. Ogni pezzo futuro si compone scegliendone una, senza inventare nulla.
CASO 01
I margini si introflettono all’accostamento. Cosa fai?
A — Caso
Fondo inchiostro. Etichetta «CASO 0X» in teal in alto, la domanda in un titolo condensato grande che occupa quasi tutta l’altezza, quattro opzioni in righe minime in basso e il simbolo piccolo in un angolo. Senza foto.
Alginato
Idrocolloide
Essudato abbondante, letto fibrinoso.
B — Decisione A/B
Fondo carta. Diviso in verticale, due opzioni contrapposte in tipografia grande, un filetto da 1 px al centro e una riga di contesto clinico sotto.
Non è una «ulcera da umidità».
È una MASD.
GNEAUPP · Documento Tecnico n. II
C — Vocabolario
Fondo carta con accento teal. «Non è X. È Y.» a dimensione display, con la fonte in piccolo a piè di pagina.
TRE LIVELLI
- Essenziale · 0 €
- Intermedio · 39 €
- Avanzato · 79 €
Inizia gratisD — Prodotto
Fondo inchiostro e l’unico posto dove appare ember: la scala dei tre livelli e una sola call to action.
Regole di composizione
Misure