Habits for building a scalable UI
summary
Large apps accumulate three concrete failures: duplicated design tokens, copied components, and unintentional variance that makes buttons and grays diverge. Real numbers: GitHub’s codebase once contains 2449 hex values. Practical fixes shown: store tokens early with a functional layer, build a UI kit incrementally using Atomic design, implement components in React/TypeScript with strict props (color enums, typography component), and make components easy to use but hard to change—Canopy’s typography refactor reduces font/gray drift and speeds future changes.
AI-written summary · about
chapters (8)
- 0:00The monk and the cat story
- 2:50The UI maintenance problem
- 5:06Agile and long-term planning
- 8:16Symptoms of UI inconsistency
- 13:45Design systems as a solution
- 16:18Building UI kits iteratively
- 23:47Managing component flexibility
- 31:53Taking responsibility and closing
related talks
44mWriting good components
27m"Design Systems from 0 to 1"
24mDesigning Components for Fun, Profit and Sanity
34mSecrets of building robust UI components
38mMastering the art of crafting code-aligned UI kits
31mLessons from 5 years of UI architecture at GitHub
25mBuilding a Design System as a team
49mScalable Best Practices for Your Development Team