Design Systems 101: The Developer Approach to Better Frontends
summary
Builds a JavaScript design system around React, Storybook, CSS tokens, starting from primitives (box, stack, typography) up to layouts and composable components; claims value is baked into components so accessibility, behaviors, and spacing aren’t repeated. Demonstrates a token pipeline that changes one value to update brands, includes a forkable GitHub starter kit with accessible components (button, field), Storybook integration, add-ons for accessibility and testing, and guidelines for consistent patterns and error states.
AI-written summary · about
chapters (7)
- 0:00Welcome
- 1:57Core elements
- 2:19Component libraries
- 8:54Design tokens
- 13:05Shared patterns
- 16:55Why these three
- 19:43Starter kit
related talks
35mDesign system - From a Developer Point-of-View
20mDesign Systems for the Rest of Us
32mIntroduction to Design Systems
41mBuilding a design system with React in 2025, what's new?
38mEmpathetic Design Systems
31mWhat goes into building a design system
27mA Practical Guide to Building Your Design System Infrastructure
38mDesign Systems Mastery: From Patterns & Principles to Product Excellence