A group-wide design system built for the specific demands of healthcare communications.
Healthcare communications has a problem most design systems weren’t built to solve. The content is dense, the regulatory stakes are high, the formats are constrained — and the same structural challenges repeat across every project: audience gating, interactive presentations, leave pieces, congress materials. Each one carrying clinical or scientific complexity that has to land clearly inside a small viewport, for an audience with no patience for friction.
Cherry’s digital design studio had scaled quickly after the pandemic, without the structural foundations to match. Bought-in systems didn’t fit. Teams solved the same problems repeatedly from scratch, with no shared language to connect any of it. Output was inconsistent, prototyping varied by who built it, and creative energy kept going to places it had already been.
What was actually broken
Workshops with the design team, and a competitive audit of the systems already on the market, told the same story: the pain wasn’t talent or effort, it was the absence of shared foundations — colour tokens too complex to navigate, no shared type baseline, components that varied depending on who last touched them. Fluent, Material UI, Base UI: each either too generic for healthcare or too large to adapt without a team we didn’t have. The answer was one built around the work itself.
Built from the ground up
Morello is a Figma component library structured on atomic design principles, grounded early by Dan Mall’s Design that Scales — the argument that a system earns its value through component discipline, not visual polish.
Atoms: buttons, icons, form fields, navigation — the smallest functional units, each with documented states. Molecules: atoms combined into working patterns — labelled fields, validation states, tab groups. Organisms: complete, deployable patterns — a gating screen ready to skin for a client, an e-detailer layout built to carry dense clinical content without losing clarity, a landing page structure a team can work from rather than build to.
Colour you can hand over
Colour governance was a particular focus: primitive values held separately from semantic tokens that define what a colour means and where it’s used. A client’s brand palette slots into the primitives; the semantic layer handles the rest automatically, in light and dark mode, from day one.
Documentation as a deliverable
Documentation was treated as a deliverable, not an afterthought. The onboarding flow walks a new user through setup step by step — type, colour, components, accessibility, handover — with video guidance at each stage. The standard: someone who wasn’t in the room when the system was built should still be able to use it with confidence.
Handover was designed in from the start. Component naming mirrors CSS conventions, token syntax maps to code variables, and developers shaped the structural decisions during the build — so when work moves from design to development, nothing needs re-explaining. The system also ships production-ready templates: email layouts, sales aids, landing pages at desktop and mobile — deployable frames a team can work from directly, not starting points.
What it changed
Before Morello, the cost of a project included the cost of every decision that should already have been made — which button, which form pattern, which spacing system, how to handle the gating screen. Those decisions ate hours before any creative thinking could begin, and they’d already been made, multiple times, by different people on different projects, with nothing to show for it.
After Morello, they were already made. Teams arrived at the creative problem, not the structural one. Prototyping became consistent regardless of who built it, and with the overhead gone, there was room to experiment.
Production that took weeks now takes days.
Built for where the work is going
Morello was built with AI-augmented workflows in mind. A rigorous component system and documented tokens are what make AI output meaningful rather than generic — without a system, AI produces average; with Morello underneath it, AI becomes a genuine accelerant, generating variants and stress-testing layouts at a speed that changes what’s possible within a project timeline. The fundamentals had to come first. They did.
Adoption
Morello has been adopted across five agencies in the Avenir Global network, and taken up as best practice by a client’s own internal team, folded into their master design system. It’s changed what Cherry can sell, too — proof, in front of every prospective client, that the studio can hold a system together at scale. A design system built to fix one studio’s mess became a new line of business in its own right.
