//HEALTHCARE, DESIGN SYSTEM
SHIPPED
Building a Scalable Design System from scratch
I proposed and built a design system for an early-stage startup, with full ownership as the 1st and only designer. Working alongside PMs and engineering, I shipped the foundation (color system, typography, layout) and 55 reusable components in 3 months, cutting dev rework by 50%.
BEFORE
AFTER
BACKGROUND & CONTEXT
Smartshore Services is an IT consultancy working with clients across healthcare, banking, and manufacturing. When they took on a healthcare client to build an EMR dashboard for clinical teams, I joined as the only designer on the project.
There was no design infrastructure in place. No color system, no components, no documentation. As the only designer, I had full ownership but no guidelines to work from, so every screen was a fresh decision. It didn't take long to notice design and development drifting apart, with inconsistencies piling up faster than they could be fixed.
That’s when I proposed building a design system to fix it at the root.
DISCOVERY
The Problem? Too many variants!
During a preliminary audit, I identified significant inconsistencies across the product interface, including variations in button styles, typography, status indicators, and layout hierarchy. These discrepancies not only created a fragmented user experience but also posed challenges for scalability and efficient developer handoff.
PROBLEM AT HAND
How can I create a design system that is simple, scalable, and understandable by designers and developers?
RESEARCH
Starting with the Basics
Building a design system from scratch meant I had no reference point, just a cluttered product and a blank Figma file. Buttons, text styles, spacing, and icons were all over the place. I looked at design systems from Google, Apple, and Shopify but they felt too big for where we were. What actually helped was discovering Practical UI and Atomic Design. Breaking things down into atoms, molecules, and organisms gave me the structure I needed.
DESIGN
Laying the Foundation
We needed a system that scaled and stayed consistent across components and states. Using the HSB (Hue, Saturation, Brightness) color system made it easier to define and expand color variations from a single base, without starting from scratch each time.
Once the color system was locked, I applied the same thinking to other foundational elements. Each of these followed clear patterns, ensuring design and development could stay in sync.
Tokens
I introduced semantic tokens early on to keep things scalable and consistent. They acted as a shared language between design and engineering, and gave the system room to grow.
Accessibility Considerations
To ensure clarity and usability across the system, all foundational styles including colors, typography, and tokens were tested for WCAG 2.1 AA compliance.
Building reusable components with variants
Every component came with clearly defined states: default, hover, pressed, focus, and disabled. I built each one to be visually consistent and easily swappable in Figma using Variants.
I also documented usage guidelines to reduce ambiguity, ensuring anyone using the system knew when and where to use each variation.
Bringing it all Together
To put the design system into practice, I redesigned three key product screens using the new foundations and components. These were not final screens since the product data was still evolving, I worked with dummy content to demonstrate how the system could be applied. The goal was to create a reference for future designers and validate that the system was scalable, flexible, and easy to implement in real workflows.
🪄REFLECTION
Documentation is part of design
Creating clear docs and examples helped others understand how to use the system. I learned that explaining the “why” behind design choices is just as important as the design itself.
It's not just about components
Building a system means thinking about how even small decisions, like spacing can impact everything else. It’s less about perfection, more about creating consistency that scales.
You can’t do it all at once
With limited time, I had to focus on what mattered most. Instead of trying to design everything, I chose the highest-impact components and laid a foundation others could build on.