Creating a Design System that People Actually Use
summary
Company with ~100 people and nine front-end devs and four designers creates Style Avella: a Sketch file, a CSS style guide (KSS node), and a React component library that apps import via npm (ngReact for legacy Angular). Teams migrate component by component, enforce linting, automated accessibility checks, and use semantic-release for versioning. Work model is federated with three core contributors. Result: broad adoption across internal tools and new features and noticeably improved UI consistency.
AI-written summary · about
chapters (24)
- 0:00Introduction
- 1:45Open Source Design Systems
- 2:37Why Design Systems Fail
- 3:30StyleAvella
- 4:13Context
- 5:01Products
- 6:24Why We Started
- 7:08Web Feedback Form
- 7:42Goals
- 9:06CSS
- 9:52Web Flow
- 11:31Duplicated Markup
- 12:39Workload
- 13:36Team Composition
- 14:09CSS Style Guide
- 15:50KSS Node
- 16:11Buttons
- 16:37Variations
- 16:53Documentation
- 17:12React Starter
- 20:17What Worked
- 21:45Focus on Quality
- 25:15Design Consistency
- 26:48Visual Regression Testing
related talks
50mCreating a design system that people actually use
32mYour Guide to Making Scalable Design Systems
20mDesign Systems for the Rest of Us
38mEmpathetic Design Systems
35mDesign system - From a Developer Point-of-View
58mFrom nothing to state of the art
28mA design system. A year in review
41mBuilding a design system with React in 2025, what's new?