Design Systems

SaaS Design System

Scalable component library unifying 12 product surfaces for B2B platform

Client

B2B SaaS Platform

Role

Design Systems Lead

Duration

5 months

Year

2023

Built a comprehensive design system from scratch for a B2B platform that had grown through acquisitions. The system needed to unify 12 distinct product surfaces — each with its own visual language — into a cohesive experience without disrupting active development.

The Challenge

What we were up against

Three years of rapid growth through acquisitions left the platform with 12 product surfaces, each built by different teams with different design conventions. There were 47 different button styles, 8 color palettes, and no shared component library. Engineering was spending 30% of sprint capacity on UI inconsistency bugs, and customers were confused by the fragmented experience when moving between features.

The Solution

How we solved it

I started with a visual audit across all 12 surfaces, cataloging every component variant and identifying patterns. From there, I designed a token-based design system with three tiers: primitives (colors, spacing, typography), components (buttons, inputs, cards), and patterns (forms, navigation, data tables). I built the Figma library in parallel with the React component library, ensuring 1:1 parity. The rollout was phased — starting with the highest-traffic surfaces — with migration guides and office hours for each engineering team.

The Results