What goes into building a design system

on YouTube ↗31m

" summary

Live-coding a React component library in CodeSandbox, the talk shows building input components with emotion and style-system, extracting a central theme object of colors, font sizes and borders into reusable tokens, and generating plain CSS for non‑React projects so marketing pages share the same styles. Specifics include using object styles over strings, putting component styles inside the theme, and the claim that tokens alone deliver most value; the demo mostly works despite network hiccups.

AI-written summary · about

" chapters (9)

1. 0:00Start
2. 4:17What Is a Design System
3. 5:14Design Systems
4. 7:34Component Libraries
5. 8:32Create an Input Component
6. 14:39Extra Variables
7. 17:00Style System
8. 25:10Adding Styles
9. 30:09Design System Is for People

" related talks

• 21mDesign Systems 101: The Developer Approach to Better FrontendsKaleb Garner · Commit Your Code 2026
• 19mHarnessing React to Build Consistently Designed ApplicationsEmily Plummer · React Rally 2019
• 16mCSS, Design Systems & Developer ExperienceEmily Plummer · dotCSS 2019
• 22mStyling Components for React UI KitsJavi Velasco · ReactJS Day 2017
• 30mDesigning with ReactMark Dalgleish · React Amsterdam 2019
• 30mDynamic Styling Systems with ReactKhachatur Virabyan | ReactConfAM19 · React Conf Armenia 2019
• 29mStyling React For ReuseJen Luker · UtahJS Conf 2017
• 35mWe need to talk about our frontend workflowSiddharth Kshetrapal · ReactFoo Hyderabad 2018