Building a Design System for Clinical Hardware
Architecting a design system from the ground up for a health-tech product spanning physical wall controllers, embedded touchscreens, and clinical software — where visual consistency isn't just aesthetic, it's a patient safety concern.
- Role
- Lead Product Experience Engineer
- Year
- 2019–2026
- Organisation
- Chromaviso A/S
Outcome
A unified design language across all Chromaviso product touchpoints, reducing design-to-development friction and enabling faster, more consistent iteration across hardware and software surfaces.
When I joined Chromaviso, the product had grown organically — interfaces designed surface by surface, feature by feature, without a shared foundation. My task was to build one.
A design system for a clinical hardware-software product is a different problem than one for a web app. The surfaces are heterogeneous: wall-mounted physical controllers, embedded touchscreens, mobile interfaces, and desktop configuration tools. The users are nurses, clinicians, and biomedical engineers. The context is a hospital room — often at night, often under pressure.
What I built
Visual language — colour tokens, typography scales, spacing systems, and iconography designed to work across physical print materials, low-resolution embedded displays, and high-resolution touchscreens simultaneously.
Icon system — a custom icon library built from scratch for the clinical domain. Consumer icon libraries don’t address clinical requirements: icons need to be legible at very small sizes on embedded displays, distinguishable under both bright operating theatre lighting and dim night-time ward conditions, and immediately interpretable by first-time users under stress.
Component library — interactive components portable across the product’s Vue-based front-ends, with accessibility and legibility as first-order constraints rather than afterthoughts.
Documentation — design decisions captured not just as specs but as rationale, so future engineers and designers could make consistent decisions without requiring tribal knowledge.
The hard parts
The biggest challenge wasn’t the design — it was the constraint space. An embedded touchscreen on low-powered hardware has different rendering characteristics than a browser. Physical buttons and printed materials need to share a visual language with digital surfaces. A label readable on a 27” monitor may be illegible on a 7” wall panel at arm’s length in a dim room.
Working across these surfaces forced a rigour around design tokens and component architecture that most purely digital projects never demand.
Why it matters
Design systems are infrastructure. They don’t ship as features and they rarely get celebrated. But the Chromaviso design system is what made it possible to expand the product surface — new devices, new markets, new clinical contexts — without losing coherence. In a clinical setting, that coherence is directly tied to usability and safety.