Design systems and how to use it
summary
Defines a design system as fonts, colors, icons, a UI toolkit and component library that link design to code so changing one source updates every instance; recommends using AA contrast for WCAG 2.1 compliance, collecting reusable code snippets, and documenting patterns for primary/secondary actions. Claims this setup speeds work, enforces consistency across teams, eases onboarding, and makes accessibility fixes propagate automatically. Advises immediate maintenance: update components, write the rationale, and store snippets so changes take effect everywhere.
AI-written summary · about
chapters (13)
- 0:00Design systems
- 0:14Kitty Toft
- 0:35A design system
- 2:38Colors
- 4:01Design principles
- 4:32Brand assets
- 4:48Voice and tone
- 5:34UI Components
- 7:18Patterns
- 8:20Layout
- 8:49Code Snippets
- 9:29Documentation
- 10:33WCAG 2.1
related talks
23mDesign Systems 101
27mFoundations of Design Systems
41mHow to Maintain a Design System
22mDesign Systems, when and how much? — Diana Mounter
10mDesign Systems Showcase: Designing Performance Friendly & Accessible Foundations
35mDesign system - From a Developer Point-of-View
52mWhen Design Systems Lie
46mBuilding & Managing Design Systems