Design system
Everything here is rendered from the product tokens. This is not a copy of the design system: it is the design system. Change a value in the code and this page changes with it.
src/tokens.js — the only file in the project that holds a brand value. Not one colour, size or shadow on this page is typed by hand.
01
SuturaLab is a clinical decision trainer for nurses: not a course with a test at the end.
Between the manual you look things up in and the hands-on workshop you never get to. A manual never makes you decide and a workshop does not fit into a shift. Here the case comes first, you choose, and the correction arrives with the whole reasoning.
Nurses in direct care in Spain and Latin America — primary care, emergency, wound clinics, care homes and home visits — and final-year students arriving on placement having never decided on their own.
You train the decision, not the memory.
We are not an accreditation, not a clinical consultation and not a product catalogue. We promise no outcomes: we offer judgement with the guideline in hand and the source in sight.
Every piece — a lesson, a post, an e-mail — ends in a decision taken and the reason for it. If a piece forces no decision, it is not ours.
Colleague to colleague, never from a lectern. We take as read what a nurse knows, and we never take as read what the guideline qualifies.
02
A medical cross crossed by a curved suture needle whose thread closes two finished stitches over it: care, decision and outcome in one mark. It is the original file exactly as delivered — never redrawn, never simplified, never recoloured.
The e-mail signature has its own version and is never reused in carousels, on the web, in documents or in campaigns. Nor the other way round: the site logotype is not pasted into an e-mail.
The eight below are rendered on purpose, struck through, so they are recognised at a glance. None of them is ever published.
Redrawn by hand
Stretched
With a shadow
Low-contrast background
Recoloured
With a gradient
Rotated
With effects
03
One owned hue — surgical teal — on ink and paper, with 1 px rules. Every swatch carries its real contrast, computed against the backgrounds it may be combined with.
Ember belongs to the primary call to action and to alerts, and nowhere else. Never a section background, never decoration, never long text, never a second button on the same screen. If the warmth appears twice, it stops meaning “act here”.
--ember #C25333
Sixty parts paper, thirty ink, eight teal and two ember. That is the proportion that lets one single thing call.
04
Schibsted Grotesk for headlines, Inter for interface and text. Both bundled on our own domain: no request to a font CDN and no consent problem.
An inverted edge will not close
An inverted edge will not close
An inverted edge will not close
An inverted edge will not close
An inverted edge will not close
An inverted edge will not close
An inverted edge will not close
An inverted edge will not close
An inverted edge will not close
An inverted edge will not close
An inverted edge will not close
An inverted edge will not close
--w-reg 400--w-med 500--w-semi 600--w-bold 700--w-display 620Four weights and one display weight. No italics in headlines, no bold inside a headline.
--tr-tight -0.022em--tr-snug -0.012em--tr-wide 0.14emLarge condensed headlines take negative tracking; uppercase labels take positive tracking. Running text is never touched.
Between fifty-four and sixty-five characters per line: the width at which the eye finds the next line without getting lost, and the one we use for all long text in the product.
Longer and the line is lost; shorter and the rhythm breaks. --measure 65ch · --measure-narrow 54ch
One h1 per page. Headline in display, subheading in Inter, label in teal uppercase. Never two consecutive levels at the same size.
Served from our own domain. Never from a font CDN.
05
One gutter, one vertical rhythm and one spacing scale for the whole site. Everything below is drawn with the token’s value, not with a screenshot.
--r-xs4px
--r-sm6px
--r-md10px
--r-lg14px
--r-xl22px
--r-2xl28px
--r-pill999px
--e1At rest: button, resting card
--e2Raised: active card, test
--e3Floating: menu, panel
--e4Above everything: modal, notice
--t-fast150ms--t-base200ms--t-slow250ms--easecubic-bezier(.2,.7,.3,1)One easing curve. With “reduce motion” on, every duration drops to 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)--section-y-lgclamp(3.75rem,8.5vw,7.5rem)--hero-y-topclamp(1.5rem,4.2vw,4rem)--measure65ch--measure-narrow54ch06
Rendered live from the same code that serves the product. What you see here is exactly what a student sees.
Default
Example case
Selected
Example case
Marked: correct
Example case
An inverted edge puts epidermis against dermis: there is no apposition and the scar ends up depressed and wider. It is corrected by redoing the stitch with a 90° entry and more deep than superficial tissue, or with a vertical mattress stitch. Tightening does not evert: it makes the edge ischaemic.
Marked: wrong
Example case
An inverted edge puts epidermis against dermis: there is no apposition and the scar ends up depressed and wider. It is corrected by redoing the stitch with a 90° entry and more deep than superficial tissue, or with a vertical mattress stitch. Tightening does not evert: it makes the edge ischaemic.
Disabled
Example case
State rule
No state is carried by colour alone: a marked option also gains its key letter, a glyph and the written word, so it reads in greyscale, in print and with colour blindness.
One ember button per screen at most. Every other action is teal, outlined or plain text.
It is used to save your progress. Nothing else.
Ten characters minimum.
A badge states the status in words, not only in colour: that is what makes it readable in greyscale and in print.
Not indicated in: dry wounds, scant exudate or stable dry eschar.
The choice is made on exudate level, wound-bed tissue and the state of the periwound skin (EPUAP/NPIAP/PPPIA 2019).
| Level | lessons | Price |
|---|---|---|
| Esencial | 13 | Free |
| Intermedio | 18 | €39 |
| Avanzado | 10 | €79 |
07
Clinical, confident, direct, colleague to colleague. Short sentences, the verb up front, and no word that would not survive a night shift.
| We say | We do not say | Why |
|---|---|---|
| Dependence-related skin lesion (GNEAUPP, LRD) | Bedsore | LRD is the GNEAUPP umbrella term; “bedsore” says nothing about the force that produced the lesion. |
| Pressure ulcer / pressure injury | Eschar | Eschar is tissue in the wound bed, not the condition: it describes what you see, not what it is. |
| Category I to IV | Grade I to IV | GNEAUPP and EPUAP/NPIAP use “category” to avoid the idea of a ladder you climb up and down. |
| Unstageable | Category V | There is no category V: it is a full-thickness lesion whose bed is obscured by slough or eschar. |
| Deep tissue injury | Purple pressure ulcer | Persistent non-blanchable deep red, maroon or purple discolouration, with the skin intact or not. |
| Moisture-associated skin damage (MASD) | Moisture ulcer | It is not a pressure ulcer: the cause is moisture, the assessment is different and so is the management. |
| Friction injury | Rub wound | Friction is a tangential surface force; shear acts in the deeper planes and is not the same thing. |
| Non-blanchable erythema | Redness that will not go | It is the criterion that defines category I, and it is checked with finger pressure or a transparent disc. |
We use the cautious language of the guidelines: “it is recommended”, “consider”, “there is not enough evidence”. Where the guideline hesitates, we hesitate in writing.
Sources are always cited in the piece itself, with document and year.
08
An image exists only if it illustrates exactly the content beside it.
Real clinical photography of the finding the text explains, and nothing else. Never a decorative stock photo, never a wound image without clinical context, and never a drawing or generated schematic standing in for tissue: a drawn schematic has no clinical value and reads as amateurish. If the correct photograph does not exist yet, the content is published with no image.
Correct
A real clinical photograph, or no image at all.
Every missing photograph has a numbered slot, described in IMAGENES-NECESARIAS.md. Until the file arrives the content is published with no figure: no substitute drawing, no filler photo and no empty frame. When the photograph arrives it is placed with written alternative text and its credit.
Incorrect
A stock photo of a generic operating theatre next to a text about pressure-ulcer categorisation: it decorates, it does not teach, and it suggests a setting that is not the one in the content.
09
Social templates
Four master grids for Instagram, 1080 × 1350 px (4:5), drawn with these same tokens. Any future piece is composed by picking one, inventing nothing.
CASE 01
Edges invert on approximation. What do you do?
A — Case
Ink background. “CASE 0X” label in teal at the top, the question in a large condensed headline filling most of the height, four options in minimal rows at the bottom and a small symbol in one corner. No photograph.
Alginate
Hydrocolloid
Heavy exudate, sloughy wound bed.
B — A/B decision
Paper background. Split vertically, two options facing each other in large type, a 1 px hairline in the centre and one line of clinical context underneath.
It is not a “moisture ulcer”.
It is MASD.
GNEAUPP · Technical Document no. II
C — Vocabulary
Paper background with a teal accent. “It is not X. It is Y.” at display size, with the source in small type at the foot.
THREE LEVELS
- Essential · €0
- Intermediate · €39
- Advanced · €79
Start freeD — Product
Ink background and the only place ember appears: the three-level ladder and a single call to action.
Composition rules
Measurements