A synthesis of the six references into one direction: an aqueous, low-pressure environment holding crisp, near-white working surfaces. Colour carries almost no decoration — it is spent on state, on trend, and on the single action that matters. The result reads as clinical without reading as cold.
This is a creative foundation for evolving the existing system's surface language. Information architecture, component structure, contrast behaviour and accessibility commitments carry over untouched — what changes is temperature, softness, and where emphasis is allowed to land.
Eleven characteristics appear in every reference. They are listed with the mechanism that produces the effect, because the mechanism is what transfers — not the specific colour or corner value.
{{ r.body }}
Each characteristic removes visual pressure from a different layer, and they compound rather than compete. The cool environment lowers the ambient temperature so a white card reads as lit rather than merely bright. Because the card is already separated by tone, the shadow no longer has to do that work — so it can stay soft, and softness is what keeps a screen of forty cards from vibrating. Because depth is carried by tone and shadow, the border can stay hairline or disappear. Because nothing is outlined loudly, a single saturated teal button or one filled bar in a chart becomes unmissable without being large. And because emphasis is that cheap, the type can stay quiet and regular-weight almost everywhere, which is what makes dense clinical data legible for a full shift. It is a system where restraint at every layer funds one moment of contrast per view.
One cool hue family runs the entire product — teal through aqua to mint. Everything else is either ink, near-white, or a state. Note the relationship, not the values: the brand hue never appears at full strength on a working surface except as an action or a data mark.
{{ g.note }}
Every pairing here is a hue-and-temperature proposal only. The existing system's measured contrast behaviour is the constraint that outranks it: label text at 4.5:1 on any surface it can land on including hover, control boundaries at 3:1, status foregrounds tested against both their own tint and the plain surface.
The references are light-theme only. A cool-neutral dark counterpart already exists and should keep its separately-authored shadows and inverted accent foreground — nothing in this direction changes that.
The references run two voices. A geometric, tightly-tracked grotesk for display and numbers — round bowls, near-circular o, heavy at the top of the scale. And a neutral humanist grotesk for everything operational. This is worth adopting deliberately rather than by accident.
Reserved for page titles, KPI figures and marketing surfaces. Its geometry makes large numerals feel engineered rather than shouty — which is why the references can set a metric at 40px without the screen tipping into a billboard.
Every label, control, table cell and identifier stays exactly as it is. Two families is the ceiling — the display voice is a third only if the mono is retired, and it should not be.
{{ t.body }}
Three nested planes, each one step softer and one step lighter than the one holding it. Radius decreases with depth; shadow decreases faster.
Detail rows, nested record blocks and chart bodies sit here. No shadow at this depth — a tint step is enough, and shadow inside a card is what makes an interface look upholstered.
Softer than the current system across the board, and proportional to the element: the app shell is the roundest thing on screen, the smallest control the sharpest. Chips and avatars go fully round, which reads as friendly precisely because nothing else does.
Wide, faint, and tinted toward the environment hue rather than neutral grey — a cool shadow on a cool canvas reads as light falling, a grey one reads as dirt. Blur is large relative to offset (roughly 3:1), so the edge is never traceable. Elevation is a hint; separation is done by tone.
Specimens, not components — these show the treatment the existing component set would inherit. Structure, semantics and behaviour are unchanged; only surface, radius, weight and colour placement move.
Label in regular weight and a muted icon; the figure carries all the emphasis. The delta is the only coloured element and it is small — direction matters more than magnitude at a glance.
Fully-round, tint-filled, no border, no dot. Weight 600 at 12px keeps them legible at the small size the density demands. The dot returns only where a pill must sit inline in running text.
The colon-aligned icon · label · value row is the single most repeated pattern in the references. It scans faster than a two-line stacked field and survives being nested two cards deep.
Active nav is a soft tinted block with no left rail and no bold weight — the tint alone carries it. Inputs use a hairline inset ring rather than a border, so a form does not become a grid of boxes.
Monoline outline, light optical weight, rounded terminals, no fill, no duotone. Icons are consistently one shade lighter than the text they accompany — present, never leading.
The references contain no illustration at all — only photography of clinicians at work, always cool-toned, always cropped into a rounded surface, and only on marketing pages. Inside the product, imagery is limited to circular staff and patient avatars. Adopt this literally: no spot illustration, no mascot, no abstract 3D. Empty states use a single muted outline icon.
The most distinctive layer in the collection, and the most transferable. Thin stroke, gradient fill decaying to nothing, no chart border, no vertical gridlines, and a floating tooltip card that looks like it came from the same family as the KPI tile.
The references are generous between containers and disciplined inside them. That combination is what lets a screen hold four KPIs, a chart, a queue and an alert panel without feeling packed — the eye rests in the gutters, not in the cards.
{{ d.body }}
Six references, one product family — but they are not internally consistent. Five conflicts matter enough to decide now, because each one would otherwise get decided accidentally, differently, on every screen.
{{ c.tension }}
{{ c.cost }}
{{ c.rec }}
A moodboard that cannot be adopted incrementally is decoration. This one is deliberately scoped to the surface layer, so it lands as a re-skin of the existing token values rather than a rebuild of anything above them.
This direction lowers contrast almost everywhere: fainter borders, softer shadows, tinted rather than filled states, lighter icon strokes. Every one of those moves is toward the accessibility floor, not away from it. Adopt it token by token with the contrast checks re-run after each move — particularly the 11px label tier on tinted and hovered surfaces, and control boundaries where the hairline ring is the only thing defining a hit area. Where a reference falls below the floor, the floor wins.