Healthcare
Design System
Building a design system for Foster Health
I created a design system from the ground up, starting with the essentials and evolving it into a foundation. This made my team faster and our product more consistent.
Role
Product Designer
Company
Foster Health
Platform
WebApp
Status
Live
Year
2026
The Challenge
The product was growing. The system wasn't.
As Foster Health evolved, new screens and workflows were being added across the product. Over time, patterns started to become inconsistent, with similar components being designed and used in different ways.
This made it harder to maintain consistency and meant designers often had to recreate or rethink the same patterns.
The challenge was to create a shared foundation that could support the product as it continued to grow.
Finding the Foundation
Before building components, I had to understand the patterns.
I went through the existing product to identify repeated patterns, inconsistencies, and the decisions that were being made over and over again.
From there, I established the foundations that would support the rest of the system.
Typography- A consistent type hierarchy and set of text styles.
Colour- A structured colour system for the interface and different states.
Spacing- A shared spacing scale to make layouts more predictable.
Radius and shadows- Consistent rules for surfaces, containers, and elevation.
Icons- Standardised sizing and usage across the product.
These foundations became the rules that everything else could build on.
Building the System
From isolated patterns to reusable decisions.
With the foundations established, I translated the recurring patterns into a flexible component system.
Components were designed around real product requirements, with variants and interaction states that allowed the same pattern to work across different workflows.
Instead of creating a component for every visual variation, I focused on identifying the underlying pattern and defining the flexibility it actually needed.
This helped shift the system from a collection of UI elements into a set of reusable design decisions.
Bringing It Into the Product
From the library to the real product.
I applied the system to existing Foster Health workflows to test how the components behaved in real product contexts.
This exposed gaps that weren't obvious when designing components in isolation. Some components needed additional flexibility, while others could be simplified.
The product became part of the design-system process itself.
Each implementation helped refine the system, and each refinement made the next experience easier to design consistently.
What changed
From individual decisions to shared rules.
Before
Repeated decisions across screens
Patterns evolved independently
Components were recreated when needed
Visual consistency depended heavily on individual decisions
After
Shared foundations and reusable components
More predictable interaction patterns
Less repetitive design work
A system that could evolve alongside the product
What I learned
The biggest lesson was that a design system isn't really a collection of components. It's a framework for making better decisions consistently.
The goal wasn't to make every screen look the same. It was to give the team enough structure to move faster without losing the product's visual and interaction language.
Let’s talk
over a cup of chai.
Hakesh Sundramoorthy