Everyone's still eating: building Notion's design system
summary
Notion establishes a design system team (est. 2025) and refactors a tangled codebase by standardizing colors, type, icons and components, replacing thousands of icons and collapsing duplicate libraries; migration uses Claude code, Notion MCP, coding agents plus Meticulous for visual checks, and a ratcheting lint bot named Doug to enforce adoption. The effort includes 529 one-use icons identified for automated replacement, a 56-part run to migrate assets, automated Meticulous visual diffs, and a full CSS variables migration that succeeds.
AI-written summary · about
chapters (19)
- 0:00Notion's design system journey
- 1:22Why Notion needed a design system
- 2:45Tangled codebase limitations
- 4:31Design systems as shared decisions
- 5:13Color system foundation
- 6:58Unique icon set and factory
- 8:02Automating design system integration
- 9:06Mass migrations and coding agents
- 10:52Meticulous for visual regression
- 12:17Colors to CSS variables
- 12:37AI-assisted migration lessons
- 13:39Team growth and design system
- 14:19Enforcing patterns without slowing
- 15:42Ratcheting and bots for rules
- 16:45AI agents bypassing design system
- 17:48Heart and soul behind design system
- 18:52Adapting shared decisions
- 19:58One-pixel border radius debate
- 20:40Conclusion and future
related talks
19mYou've Built a Design System - Now What?
20mDesign Systems for the Rest of Us
14mRethinking Designer-Developer Collaboration
36mConsistency is Key - Working with a Design System
58mFrom nothing to state of the art
22mRebranding, or the subtle art of juggling new and legacy design systems
20mPlanting the seed for a “systems state of mind”
22mRolling out design tokens to a branded house with 18+ products