Design Tokens on Asana's Design Systems Team
summary
Asana builds a token system that turns messy hex palettes into semantic tokens so designers and engineers share one source of truth: Figma color styles feed a JSON token file which Style Dictionary exports to Sass and CSS variables plus Swift and XML. A literal inversion of the original seven-value grayscale shows it needs added two values and separate light/dark palettes. The team ships dark mode and a colorblind theme, and a quick 30 minutes maroon experiment proves swapping palettes propagates everywhere.
AI-written summary · about
chapters (4)
- 0:00Asana design team overview
- 2:35Design tokens introduction
- 11:23Implementing the token system
- 21:50Final reflections
related talks
27mDesign Tokens and You
22mRolling out design tokens to a branded house with 18+ products
35mThe Evolution of Design Tokens
49mExploring the Anatomy of Design Systems
35mDesign Tokens for Cross-platform Design Systems
22mDon't Make Design Systems Just for Developers
28mScalable CSS Architecture with Design Tokens
01h 00mDesign Token Architecture