Design System & Component Library.
One source of truth for four teams.
A production-grade React component library with 60+ components, design tokens for theming, Storybook documentation, and WCAG 2.1 AA compliance baked into every component. Adopted across four product teams, cutting feature delivery time by 40%.
The challenge
Four product teams were building UI independently, resulting in 14 different button styles, inconsistent spacing, and accessibility violations across the platform. Design reviews consumed 30% of sprint time. New developers spent their first two weeks learning tribal knowledge about "which component to use where." The company needed a shared design language — not just a Figma file, but a living, tested, documented code library.
The approach
I audited the existing UI across all four products, identifying 200+ unique component variations that could be consolidated into 60 canonical components. I worked closely with the design team to define a token-based theming system and built the library with composability as the primary design principle.
Key architectural decisions:
- Token-first theming — CSS custom properties for colors, spacing, typography, and radii, enabling white-label support with a single JSON config file
- Compound component pattern — components like Tabs, Menu, and Dialog use the compound pattern for maximum flexibility without prop bloat
- Automated accessibility testing — axe-core integrated into CI/CD, blocking merges on WCAG 2.1 AA violations
- Chromatic visual regression — snapshot testing catches unintended visual changes across 400+ component states
- Semantic versioning with changelogs — automated releases via changesets, ensuring teams know exactly what changed and why
The outcome
- 60+ production components with 100% TypeScript coverage
- 40% faster feature delivery across all four product teams
- Zero WCAG 2.1 AA violations (enforced via CI)
- Design review time reduced from 30% to 8% of sprint capacity
- New developer onboarding cut from 2 weeks to 3 days
- 92% component adoption rate within 3 months of launch
Technical highlights
The library ships as tree-shakeable ESM modules — teams only bundle the components they use. The total size for a typical page (10-15 components) is 28KB gzipped. Storybook documentation includes interactive examples, prop tables auto-generated from TypeScript types, and accessibility annotations for every component.
The token system supports runtime theme switching (light/dark/custom) without page reload. A Figma plugin syncs design tokens bidirectionally, ensuring designers and developers always reference the same source of truth.