From nothing to state of the art
summary
Built a design system from scratch for a company spanning eight countries, ten languages and 100+ product teams, moving from one giant stylesheet to a mono-repo with HTML/CSS examples, Lerna, Stylus/LESS/Sass outputs, a TypeScript React library, web components and Storybook docs. Team grows from one to seven and the library has 72 components shrinking to 30 core via a branching strategy. Accessibility, iterative real-user testing and automated token builds drive consistency with design tokens via Style Dictionary + Figma Tokens and Gatsby docs, and the stack is moving toward open source.
AI-written summary · about
chapters (13)
- 0:00Introduction
- 3:44Design systems purpose
- 7:59Legacy system start
- 13:58Framework-agnostic design system
- 19:45JavaScript libraries & web components
- 21:11Design tokens for consistency
- 26:50Accessibility & legal
- 31:27Documentation as truth
- 36:48Future plans & open source
- 41:14Q&A: CSS duplication & variants
- 46:30Q&A: Team growth & feedback
- 51:49Q&A: Testing & breaking changes
- 56:30Q&A: Knowledge transfer
related talks
41mBuilding a design system with React in 2025, what's new?
20mDesign Systems for the Rest of Us
29mCreating a Design System that People Actually Use
26mCrafting Cohesion A Design System Journey Without a Dedicated Team
28mA design system. A year in review
21mDesign Systems 101: The Developer Approach to Better Frontends
38mEmpathetic Design Systems
32mYour Guide to Making Scalable Design Systems