Ada Design System
Jun 1, 2026
The Ada Design System is an (always in progress) organization-wide collection of design patterns and rules that govern Peopled's application styles at a global level, represented in a Storybook document with the "source of truth" in Figma.
Technically, this design system is composed of two different things:
- The literal style documentation in Figma (closed access, sorry I can't share!)
- The Storybook representation of the React implementation of shared components
My ownership over the React implementation is 100% hands-on coding setting up this system, while helping guide and prioritize components for upcoming features as our designer and PM manage the Figma process. I am also responsible for the documentation of components to make sure they're easily consumable by our internal applications.
The Stack
- Storybook project written in Typescript + React to display all available components
- React + Typescript component project that is consumed by our web applications
- Release Please to manage versioning and triggering of CI actions
- Github Actions deploys based on RP versioning to github packages (so we can privately manage our packages as opposed to NPM)
These components are currently consumed and used by three web applications, with more coming.