Design Systems Showcase: Designing Performance Friendly & Accessible Foundations
summary
Design system foundations include palettes, type scales, grids, spacing and icons and they shape real performance and accessibility outcomes not just guidelines. The team builds a Home Field system that enables caching of reused components, reduced font files by nearly 80% through 30 key type styles, and performance-aware grids and templates. Accessibility rules are concrete: visible focus state, do not rely on color alone plus persistent labels, clear error messaging, semantic headings and good alt text so components are usable across devices.
AI-written summary · about
chapters (19)
- 0:00Introduction
- 0:32Performance Friendly Digital Foundations
- 0:58Importance of Brand
- 1:45Color Usage
- 2:11Length of Time
- 2:44Rich Content
- 3:20Home Field Foundations
- 4:27Fonts
- 4:39Key Type Styles
- 4:51Responsive Layouts
- 5:10Accessibility Inclusion
- 6:06Touch Screens
- 6:52Visible Focus Dates
- 7:02Contrast
- 7:21Distinguish
- 7:38Accessible Forms
- 8:18Title Hierarchy
- 8:38Alternative Text
- 9:05Conclusion
related talks
13mDesign systems and how to use it
30mDesign Systems are a Carnival! One Accessible Component, Many Pretty Masks
27mFoundations of Design Systems
49mMaking Pinterest More Inclusive Through Design Systems
22mDesign Systems, when and how much? — Diana Mounter
52mLeaning Into Design Systems
47mFrom Parts to Whole – Beyond Design System
21mDesign Systems 101: The Developer Approach to Better Frontends