Closer Look · About 5 min · 5 chapters
Putting the Live Products on One Page
ieso’s web products had outgrown the existing component library. Common patterns and states were missing, the same accessibility problems kept recurring and there was little guidance on when to use each component. Designers worked around the gaps; engineers rebuilt similar solutions.
I recorded every component in production and brought them together on one page. Seeing everything together made duplication, inconsistent styling and missing states easy to discuss. Design and Engineering could agree what to keep, combine or rebuild.
The production audit made duplication, inconsistent styling and missing states visible in one place
Connecting Principles to Real User Needs
A component library could standardise the interface, but it could not tell a team why one choice was better than another. I ran a cross-disciplinary workshop to agree principles that could guide decisions across patient, clinician and operational products.
A cross-disciplinary workshop connected design principles to symptoms and real product decisions
Mapping How the System Fit Together
Once the principles were agreed, I mapped how the different parts of the system would fit together. Research and feedback informed the principles. Those principles shaped shared foundations such as colour, typography, spacing and core components. Product libraries then combined those foundations into patterns, layouts and templates for mobile, web and marketing.
This gave Design and Engineering a shared way to decide what belonged in the common foundations, what needed to remain product-specific and where guidance and accessibility documentation should live.
A shared architecture connecting research and principles to foundations and product-specific libraries
Making Contrast Predictable
The old palette used steps that looked equally light on paper but not on screen. Contrast was unpredictable, so every colour pairing had to be checked separately.
I rebuilt the palette using a perceptually uniform colour model, then defined accessible pairings and semantic names. The accessible choice became the easy one to make, while light and dark themes remained part of the same system.
A perceptually uniform palette made contrast more predictable across different hues
Built-in contrast checks helped designers choose colour combinations that met accessibility requirements as they worked
Giving Tokens a Clear Job
I structured tokens in layers: raw values, named primitives, semantic intent and component use. Changing what ‘brand primary’ meant became one edit rather than a search across products.
The same approach covered spacing, corner radius, typography, shadows and opacity—the small choices that drift when everyone makes them independently. Dark mode later arrived as token variants rather than a second system.
A layered token structure linked raw values to shared styles and individual components, making changes easier to apply consistently
The same semantic tokens switched to appropriate colour values in light and dark modes, without maintaining two separate systems
Designing Components That Behaved Like the Product
I built component properties, variants and states to mirror how they worked in the product. Usage and accessibility notes sat alongside each component, including focus order and screen-reader behaviour.
Design components used the same properties and states as their production counterparts
Component documentation explained what each component was for, when to use it and how it should behave
Maintaining One Shared System
Engineering built the production components around the same properties and states. We kept design and implementation aligned through regular design-system sessions, typography audits and shared naming.
The value became especially clear when Velora moved towards white-labelling. Rather than rebuilding every component for each partner, the same semantic foundations could map one supplied brand colour to a set of accessible states.
An early production component library documented in Storybook
