Design System APIs and the Developer Experience
summary
Team grows from two to seven and rebuilds Primer into a public React component library that is open source and used by multiple internal teams. They start by mapping existing Primer CSS classes into React via the classnames library, then add theming with JSON tokens and style-system + emotion to expose reusable system props and scheme props. CI, linters, Atom plugins, bots and per-PR CSS review enforce consistency; progress-over-correctness guides incremental rollouts.
AI-written summary · about
chapters (10)
- 0:00Introduction to GitHub design
- 1:50Primer and CSS architecture
- 3:50The importance of API design
- 6:18Tooling and workflow
- 8:56Challenges in CSS scaling
- 11:51Moving to React components
- 14:12Brand and system flexibility
- 18:19Implementing system props
- 22:52Principles and best practices
- 27:25Contribution and future outlook
related talks
19mHarnessing React to Build Consistently Designed Applications
16mCSS, Design Systems & Developer Experience
41mBuilding a design system with React in 2025, what's new?
21mDesign Systems 101: The Developer Approach to Better Frontends
35mDesign system - From a Developer Point-of-View
30mDesigning with React
29mCreating a Design System that People Actually Use
38mEmpathetic Design Systems