HealthOS — Healthcare SaaS Design System

The Challenge

HealthOS’s product team had grown from 2 to 12 engineers in 18 months. What once was consistent had become fragmented — 4 different button styles, 3 modal patterns, inconsistent spacing, and zero accessibility compliance. Healthcare software has zero margin for UX confusion.

Our Approach

We embedded with the team for two weeks before writing a single line of design. Understanding their component architecture, their React setup, and their git workflow was as important as the design itself.

Audit and Inventory

We catalogued every UI pattern across the product — 847 unique elements reduced to 67 core components. This gave us the foundation for the system.

Design Tokens

We built a token architecture covering color, typography, spacing, elevation, and motion. Tokens were implemented in Figma and mapped directly to CSS custom properties in the codebase.

Component Library

340 components across 12 categories, each with multiple states, sizes, and variants. Every component includes usage guidelines, accessibility notes, and “what not to do” examples.

Documentation

A Storybook-powered documentation site that engineers and designers use as a shared reference.

The Outcome

• 3× faster feature development within 3 months of adoption
• 100% WCAG 2.1 AA compliance achieved
• Engineering team autonomy — designers spend 40% less time in review cycles
• Used as reference for 2 new product verticals launched post-engagement