Building a living design language system to unify 15+ product teams, supporting 4+ products with 20+ modules through continuous evolution and collaboration
15 product teams were building features independently, resulting in 47 different button styles and 23 color variations across the platform.
Engineers spent 40% of their time recreating common UI components instead of building new features.
Users reported confusion navigating between different product modules due to inconsistent patterns and terminology.
Rapid company growth meant new designers were spending weeks learning undocumented patterns.
We conducted a comprehensive audit and research phase to understand the full scope of the inconsistency problem:
Catalogued all existing UI patterns across 15 products, identifying 200+ unique components with overlapping functionality.
Interviewed 25+ designers, engineers, and product managers to understand pain points and needs.
Studied design systems from companies like Atlassian, Shopify, and IBM to understand best practices.
Evaluated existing tech stack and determined Angular + TypeScript with Node.js backend as the foundation for our component library.
Based on our research, we developed a three-pillar strategy to create a living design language that could scale across multiple products:
Structured components from atoms (buttons, inputs) to organisms (forms, cards) to templates, ensuring consistency and reusability.
Built-in dark mode support and color vision deficiency considerations ensure components work for all users across different viewing preferences and visual needs.
Treated documentation with the same rigor as product features, including usage guidelines, code examples, and do's/don'ts.
We implemented a three-tier token system with built-in dark mode and color vision deficiency support:
// Tier 1: Core tokens (brand colors, theme-aware)
--color-primary-light: #0066FF;
--color-primary-dark: #66B2FF;
// Tier 2: Semantic tokens (purpose-driven)
--color-action-primary: var(--color-primary-light);
[data-theme="dark"] { --color-action-primary: var(--color-primary-dark); }
// Tier 3: Component tokens (context-specific)
--button-background-primary: var(--color-action-primary);This approach enabled seamless theme switching between light and dark modes while ensuring all color combinations meet visibility standards for users with color vision deficiency.
After testing with teams, we chose to use variants over separate components for related UI elements:
One button component with variant props: size, type, state
PrimaryButton, SecondaryButton, GhostButton, etc.
We established a design-to-code workflow where Sketch is the source of truth:
Here are some examples of key components we built:
3 types × 3 sizes × 5 states = 45 variants, all built from one component
Accessible inputs with built-in validation, error states, and help text
Flexible container with header, content, and footer slots
4 severity levels with icons, dismissible variants, and actions
We established clear processes to ensure long-term success:
Created an RFC (Request for Comments) process for new components. Teams could propose new components with use cases, which the design system team would evaluate and prioritize.
Held weekly office hours where teams could get help implementing components, ask questions, and provide feedback on pain points.
Implemented semantic versioning with clear deprecation warnings, giving teams time to migrate before breaking changes.
Built analytics to track component adoption, bundle size, and performance metrics across all products.
The design system continues to evolve based on team needs and product requirements: