Building (And Re-Building) the Airbnb Design System
summary
Concrete story of building Airbnb’s design system, the trade-offs and fixes: adoption of CSS-in-JS with lazy loading and tree shaking to stop global stylesheet bloat, the emergence of friction/factions and forks as constraints bite, a monstrous button that grows to 3333 KB of minified code, and the move to a base + variant pattern so variants import only what’s needed and typical buttons shrink to ~32 KB. Includes code-level examples and measurable before/after results using React.
AI-written summary · about
chapters (12)
- 0:00Intro
- 2:10What is a design system
- 4:43Backstory
- 7:52Building a Design System
- 10:32Design Language System
- 14:48Product Engineering
- 18:30The Future
- 18:59Design Refresh
- 19:23Modular Architecture
- 21:02Base Variant Pattern
- 25:51Code
- 30:42Constraint vs Flexible
related talks
29mImplementing a Design System
41mBuilding a design system with React in 2025, what's new?
21mDesign Systems 101: The Developer Approach to Better Frontends
29mSystems Thinking Unlocked
26mCreative Collaboration: Building a Universal Design System
45mDesign systems adventures with React and TypeScript
31mWhat goes into building a design system
46mBuilding & Managing Design Systems