Sistema de diseño
Todo lo que ves aquí está renderizado desde los tokens del producto. No es una copia del sistema de diseño: es el sistema de diseño. Si un valor cambia en el código, esta página cambia con él.
src/tokens.js — único fichero del proyecto que contiene un valor de marca. Ni un color, ni un tamaño, ni una sombra de esta página está escrito a mano.
01
SuturaLab es un entrenador de decisión clínica para enfermería: no es un curso con un test al final.
Entre el manual que se consulta y el taller presencial al que no se llega. Un manual no obliga a decidir y un taller no cabe en un turno. Aquí el caso aparece primero, eliges, y la corrección llega con el razonamiento entero.
Enfermería asistencial de España y Latinoamérica —primaria, urgencias, consulta de heridas, residencias y domicilio— y estudiantes de último curso que llegan a prácticas sin haber decidido nunca solos.
Entrenas la decisión, no la memoria.
No somos una acreditación, ni una consulta clínica, ni un catálogo de productos. No prometemos resultados: ofrecemos criterio con la guía en la mano y la fuente a la vista.
Cada pieza —una lección, un post, un correo— termina en una decisión tomada y su porqué. Si una pieza no obliga a decidir nada, no es nuestra.
De colega a colega, nunca de cátedra. Damos por sabido lo que una enfermera sabe y no damos por sabido lo que la guía matiza.
02
El arco de una aguja curva cuyo hilo desciende y se resuelve en dos puntos terminados sobre la línea de la herida: decisión, ejecución y resultado en una sola marca.
La firma de correo tiene su propia versión y no se reutiliza en carruseles, web, documentos ni campañas. Al revés tampoco: el logotipo del sitio no se pega dentro de un correo.
Los ocho de abajo están renderizados a propósito, tachados, para que se reconozcan a la primera. Ninguno se publica.
Redibujado
Deformado
Con sombra
Fondo de bajo contraste
Recoloreado
Con degradado
Girado
Con efectos
03
Un solo tono propio —teal quirúrgico— sobre tinta y papel, con reglas de 1 px. Cada muestra lleva su contraste real calculado contra los fondos con los que puede combinarse.
Ember es exclusivo de la llamada a la acción principal y de las alertas. Nunca fondo de sección, nunca decoración, nunca texto largo, nunca un segundo botón en la misma pantalla. Si el calor aparece dos veces, deja de significar «actúa aquí».
--ember #C25333
Sesenta de papel, treinta de tinta, ocho de teal y dos de ember. Es la proporción que deja que una sola cosa llame.
04
Schibsted Grotesk para titulares, Inter para interfaz y texto. Las dos empaquetadas en el propio dominio: ninguna petición a un CDN de fuentes y ningún problema de consentimiento.
El borde invertido no cierra
El borde invertido no cierra
El borde invertido no cierra
El borde invertido no cierra
El borde invertido no cierra
El borde invertido no cierra
El borde invertido no cierra
El borde invertido no cierra
El borde invertido no cierra
--w-reg 400--w-med 500--w-semi 600--w-bold 700--w-display 620Cuatro pesos y uno de display. Ni cursivas en titulares, ni negrita dentro de un titular.
--tr-tight -0.022em--tr-snug -0.012em--tr-wide 0.14emLos titulares grandes y condensados llevan tracking negativo; las etiquetas en mayúsculas, tracking positivo. El texto corrido no se toca nunca.
Entre cincuenta y cuatro y sesenta y cinco caracteres por línea: es la anchura a la que el ojo vuelve al renglón siguiente sin perderse, y la que usamos en todo el texto largo del producto.
Más larga se pierde el renglón; más corta se rompe el ritmo. --measure 65ch · --measure-narrow 54ch
Un h1 por página. Titular en display, subtítulo en Inter, etiqueta en mayúsculas teal. Nunca dos niveles seguidos del mismo tamaño.
Servidas desde el propio dominio. Nunca desde un CDN de fuentes.
05
Una sola gotera, un solo ritmo vertical y una escala de espaciado para todo el sitio. Todo lo de abajo está dibujado con el valor del token, no con una captura.
--r-xs4px
--r-sm6px
--r-md10px
--r-lg14px
--r-xl22px
--r-pill999px
--e1Reposo: botón, tarjeta apoyada
--e2Elevado: tarjeta activa, test
--e3Flotante: menú, panel
--e4Encima de todo: modal, aviso
--t-fast150ms--t-base200ms--t-slow250ms--easecubic-bezier(.2,.7,.3,1)Una sola curva de aceleración. Con «reducir movimiento» activado, todas las duraciones caen 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
Renderizados en vivo desde el mismo código que sirve el producto. Lo que se ve aquí es exactamente lo que ve un alumno.
Defecto
Caso de ejemplo
Seleccionada
Caso de ejemplo
Corregida: acierto
Caso de ejemplo
Un borde invertido enfrenta epidermis con dermis: no hay afrontamiento y la cicatriz queda deprimida y más ancha. Se corrige rehaciendo el punto con entrada a 90° y más tejido profundo que superficial, o con un punto colchonero vertical. Apretar más no evierte: isquemia el borde.
Corregida: fallo
Caso de ejemplo
Un borde invertido enfrenta epidermis con dermis: no hay afrontamiento y la cicatriz queda deprimida y más ancha. Se corrige rehaciendo el punto con entrada a 90° y más tejido profundo que superficial, o con un punto colchonero vertical. Apretar más no evierte: isquemia el borde.
Deshabilitada
Caso de ejemplo
Regla de estado
Ningún estado se comunica sólo con color: la opción corregida gana además su letra, un símbolo y la palabra escrita, de modo que se lee en escala de grises, impresa y con daltonismo.
Un botón ember por pantalla como máximo. El resto de acciones son teal, contorno o texto.
Sirve para guardar tu progreso. Nada más.
Mínimo diez caracteres.
El distintivo dice el estado con palabra, no sólo con color: así se lee en escala de grises y en impresión.
No indicado en: herida seca, escasa exudación o escara seca estable.
La elección se hace por nivel de exudado, tejido del lecho y estado de la piel perilesional (EPUAP/NPIAP/PPPIA 2019).
| Nivel | lecciones | Precio |
|---|---|---|
| Esencial | 10 | Gratis |
| Clínico | 11 | 39 € |
| Experto | 8 | 79 € |
07
Clínico, seguro, directo, de colega a colega. Frases cortas, el verbo delante y ninguna palabra que no aguante una guardia.
| Se dice | No se dice | Por qué |
|---|---|---|
| Lesión relacionada con la dependencia (LRD) | Úlcera por encamamiento | LRD es el término paraguas de GNEAUPP; «encamamiento» no dice qué fuerza produjo la lesión. |
| Úlcera por presión (UPP) | Escara | La escara es un tejido del lecho, no la entidad: describe lo que se ve, no lo que es. |
| Categoría I a IV | Grado I a IV | GNEAUPP y EPUAP/NPIAP usan «categoría» para evitar la idea de una escalera que se sube y se baja. |
| No clasificable | Categoría V | No existe la categoría V: es una lesión de espesor total cuyo lecho está oculto por esfacelo o escara. |
| Lesión de tejidos profundos | UPP morada | Decoloración persistente y no blanqueable rojo oscuro, marrón o púrpura, con la piel íntegra o no. |
| LESCAH (lesión cutánea asociada a la humedad) | Úlcera por humedad | No es una úlcera por presión: la causa es la humedad, la valoración es otra y el manejo también. |
| Lesión por fricción | Herida por roce | La fricción es una fuerza tangencial de superficie; la cizalla actúa en planos profundos y no es lo mismo. |
| Eritema no blanqueable | Rojez que no se va | Es el criterio que define la categoría I y se comprueba con presión digital o con disco transparente. |
Usamos el lenguaje prudente de las guías: «se recomienda», «considerar», «no hay evidencia suficiente». Donde la guía duda, dudamos por escrito.
Fuentes citadas siempre en la pieza, con documento y año.
08
Una imagen sólo existe si ilustra exactamente el contenido que tiene al lado.
Si no hay fotografía clínica correcta, se dibuja un diagrama propio y se etiqueta «Diagrama». Nunca una foto de banco decorativa, nunca una imagen de herida sensacionalista o sin contexto clínico. Una imagen que no corresponde es peor que ninguna imagen.
Correcto
Diagrama propio, etiquetado como diagrama, con descripción escrita, junto al texto que explica exactamente eso.
Incorrecto
Foto de banco de un quirófano genérico junto a un texto sobre categorización de UPP: decora, no enseña, y sugiere un contexto que no es el del contenido.
09
Plantillas sociales
Cuatro rejillas maestras para Instagram, 1080 × 1350 px (4:5), dibujadas con estos mismos tokens. Cualquier pieza futura se compone eligiendo una, sin inventar nada.
CASO 01
Bordes invertidos al aproximar. ¿Qué haces?
A — Caso
Fondo tinta. Etiqueta «CASO 0X» en teal arriba, la pregunta en titular condensado ocupando la mayor parte del alto, cuatro opciones en filas mínimas abajo e isotipo pequeño en una esquina. Sin foto.
Alginato
Hidrocoloide
Exudado abundante, lecho esfacelado.
B — Decisión A/B
Fondo papel. Partido vertical, dos opciones enfrentadas en tipografía grande, regla fina de 1 px en el centro y una línea de contexto clínico debajo.
No es «úlcera por humedad».
Es LESCAH.
GNEAUPP · Documento Técnico n.º II
C — Vocabulario
Fondo papel con acento teal. «No es X. Es Y.» a tamaño display y la fuente en letra pequeña al pie.
TRES NIVELES
- Esencial · 0 €
- Intermedio · 39 €
- Avanzado · 79 €
Empieza gratisD — Producto
Fondo tinta y el único sitio donde aparece ember: la escalera de tres niveles y una sola llamada a la acción.
Reglas de composición
Medidas