Scalable CSS Architecture with Design Tokens
summary
Argues that adopting design tokens and mapping them into CSS variables (or Tailwind’s new theming directive) produces pixel‑accurate UIs, automatic theming and accessibility fixes, and consistent cross‑team styling. Shows a three‑minute migration command that finds color instances, generates semantic tokens, and swaps values so dark mode and white‑labeling work out of the box with zero code changes. Demonstrates on a small notes demo and cites patterns used at IBM, Shopify, and monday.com.
AI-written summary · about
chapters (9)
- 0:00Introduction and background
- 10:17What are design tokens
- 11:21Primitives vs semantic tokens
- 13:27Best practices from design systems
- 15:57Semantic naming for components
- 17:01Attention grabbers vs supporting colors
- 21:45Mapping colors to design tokens
- 23:08Automating migration with Cloud Code
- 26:20Summary and key takeaways
related talks
28mTheming with Design Tokens
29mCreating universal design systems across web and mobile with Utility First Styling
01h 00mDesign Token Architecture
35mThe Evolution of Design Tokens
25mDesign systems for agencies
23mDesign Tokens on Asana's Design Systems Team
38mStyleguide-Driven Development
32mThe Future of Utility-First CSS: What Tailwind v4 Signals for Web Development