Empathetic Design Systems
summary
Company replaces brittle KSS style guide with a React-based design system built by a 22-person front-end foundry, using plop.js to generate components, ESLint a11y checks and Storybook for UI development. Early iteration misses full-flow accessibility, trips on naming and deprecation (text input → input field), and breaks features via inline-block vs flex conflicts. Solutions include an icon library hackweek export, improved search and docs, and a release bot that doubles cadence; exploring tailwind CSS to unify scattered CSS.
AI-written summary · about
chapters (16)
- 0:00Start
- 1:52Pattern Library
- 2:07Style Guide
- 5:27UXPin: Enterprise UX Industry Report
- 10:49Brittle
- 12:32Component Generator
- 13:02Documentation
- 13:53Accessibility
- 20:00Unknown Effects
- 20:44Release Process
- 26:57Who's gonna use it?
- 31:18Another Company's Design Team
- 31:36Building ahead of needs
- 33:55Icons: Past Workflow
- 34:29Icons: Naming Things
- 35:29Empathy for Whom?
related talks
32mEmpathetic Design Systems
21mDesign Systems 101: The Developer Approach to Better Frontends
20mDesign Systems for the Rest of Us
29mCreating a Design System that People Actually Use
32mYour Guide to Making Scalable Design Systems
41mBuilding a design system with React in 2025, what's new?
35mDesign system - From a Developer Point-of-View
22mDesign Systems, when and how much? — Diana Mounter