Harnessing React to Build Consistently Designed Applications
summary
Claims a design system that actually reduces CSS churn by shipping a React component library tied to a central theme and Primer React components. Describes concrete tooling: a theme object, styled-system props to map short props to theme CSS, and language-agnostic distribution across Rails and vanilla JS. Reports outcomes: about 25 components live, ongoing refactors (dozens of PRs), public repo and office hours, and a system that lets teams customize safely without breaking global styles.
AI-written summary · about
chapters (31)
- 0:00Introduction
- 0:49Follow Emily
- 1:07Native Land Acknowledgement
- 1:44Design Systems
- 2:16What is a Design System
- 3:05React Ecosystem
- 4:10Design vs Engineering
- 4:39Communication
- 5:12Moving faster
- 5:59CSS
- 6:31Accessibility
- 7:29Primer
- 8:05Improvements
- 9:04Solutions
- 9:39Primer Components
- 9:50UI Components
- 10:18Values
- 10:44Components
- 11:13Automate Abstract
- 12:04Avoid implementations that reduce the ability to contribute
- 12:38Provide safe ways to break rules
- 13:51Establish values early
- 14:03Technology decisions
- 14:33Theme
- 14:44Style
- 15:11Style System
- 16:08Style Component
- 16:37Work in the Open
- 17:00Office Hours
- 18:06Dont Get Defensive
- 18:30Outro
related talks
32mDesign System APIs and the Developer Experience
41mBuilding a design system with React in 2025, what's new?
22mStyling Components for React UI Kits
39mBuilding a theming system with React
31mWhat goes into building a design system
32mYour Guide to Making Scalable Design Systems
25mBuilding a Design System in React
35mDesign system - From a Developer Point-of-View