BenefitHub Design System
Designing the system behind a growing product
No shared tooling, no reusable patterns
When I joined BenefitHub, there was no shared design tooling, no component library and no reusable patterns. The team worked in Adobe XD, and designers and engineers made UI decisions independently, so inconsistencies ran across every surface. Before I could build anything, I had to move the team onto a shared foundation, and get the organization to agree it was worth doing.
Two screenshots, and that was it
I was handed a typography reference and a color table. No Figma files, no tokens, no documentation: just a style guide that lived in a PNG. My job wasn't just a component library. It was the infrastructure for a product team to design and build consistently at scale, starting from zero.
First, move the organization to Figma
To build a design system, I had to move the product organization off Adobe XD, with executive approval. I wrote a phased, year-long migration proposal with success indicators for five stakeholders: Senior Product Manager, Director of Product, Development Manager, VP of Engineering and CIO. Getting the CIO in the room meant the migration had teeth; without it, it would have stalled at the team level.
Months 1 to 3
Stakeholder alignment, screen selection and securing Figma seats.
Months 4 to 6
Piloted Figma on projects and started the component library with the development manager.
Months 7 to 9
Expanded to core projects, built the full library and set foundations like tokens and accessibility.
Final phase
Completed the transition, optimized workflows and tested the system on live projects.
The foundation everything inherits
Color is semantic, not just a palette: every role, from primary blue and secondary plum to success, danger, cancel and text, has base, hover, active, border and tint states, named for intent so engineers could implement them predictably. Contrast was validated against WCAG AA at the token level. Montserrat carries headers and Open Sans body and UI copy, on grids for three breakpoints, so every component was responsive from the start.
35 components, every layer of the product
Form controls
Text inputs, checkboxes, radios, switches, sliders and file uploaders across sizes, states and colors, with error, disabled, hover and helper text patterns documented.
Navigation
App bar for desktop and mobile, bottom navigation, breadcrumbs, tabs, pagination and drawer.
Feedback and overlays
Alerts with semantic colors and countdowns, light and dark snackbars, dialogs in four sizes and tooltips with nine arrow variants.
Data display
Cards, sortable and selectable tables, nested lists, and chips with avatar, icon and removable variants.
Brand
The logo in full color and monochrome, a single source of truth for engineers.
Product-specific
A copy button for discount codes, with rest, hover, copied and disabled states, and a tooltip stepper for feature discovery and onboarding.
Button system
Scale and semantic structure across all variants
Alert component
Full color system applied to a real pattern
Chip component
Variant depth across semantic colors and configurations
Copy button
Component for discount code interaction
App bar
Responsive behavior across desktop and mobile
The system wasn't built in isolation
The migration and the library were built in parallel with active product work. While the system took shape, I was also redesigning the mobile app, building the browser extension, overhauling the insurance funnel and redesigning the giveaways campaign. Every component had to work immediately, not just in theory.
Shipped into a live product
App bar, cards, chips, pagination, breadcrumbs, alerts and bottom navigation run across the homepage, category and brand pages and the giveaways campaign. The countdown alert, built for BenefitHub's giveaway mechanic, appears exactly as designed in Figma. Every surface runs on the same shared foundation.
A system that moved the numbers
The system reduced developer handoff time by 25%.
Engineers stopped asking which button variant or color value to use; the documentation answered it. New screens were assembled from existing components instead of rebuilt, and token-level contrast kept accessibility easy to maintain. The migration finished within the year, with Figma fully adopted across design, product and development.
What I'd do differently
Building while shipping meant some components were documented after the fact. I'd advocate earlier for dedicated system time rather than threading it between sprints; a system built under pressure can accumulate the debt it's meant to prevent. I'd also set contribution guidelines sooner. The system grew through my own decisions, and a clear way for others to propose additions would have made it more durable.
