Case Study · 2023
Design System
A reusable component library with accessibility built-in
StorybookRadix UICSS VariablesTypeScript
Overview
A shared component library and design token system used across five product teams to ship consistent, accessible UI faster.
The Challenge
Each product team had its own one-off button, modal, and form components. Visual drift was constant, and accessibility regressed with every release.
The Solution
I designed a layered system: primitive tokens → semantic tokens → composable headless components built on Radix UI, documented in Storybook with usage guidelines and copy/paste examples.
Key Features
- Token system covering color, spacing, motion, and type
- 40+ accessible, headless primitives
- Theming via CSS variables, dark mode out of the box
- Storybook docs with live examples and a11y checks
- Automated visual regression testing in CI
Results
- Feature delivery for shared UI 2.5× faster
- Zero critical a11y bugs reported post-adoption
- Adopted by all 5 product teams within 4 months