Rolling out design tokens to a branded house with 18+ products
summary
A concrete rollout: Atlassian’s color design tokens standardize color semantics across 18+ products, add magenta and orange, and introduce dark neutrals so dark mode is feasible; tooling includes a Figma plugin for 500+ designers that applies tokens contextually (about 50% faster) and a code mod that auto-replaces colors outputting CSS variables for engineers; migration tools convert thousands of components (≈14,000 Figma components) and claim saves of ~200 design hours and over 200 full‑time hours in engineering, and adoption is already underway.
AI-written summary · about
chapters (11)
- 0:00Design tokens at Atlassian
- 2:52Color system problems
- 5:19Design tokens as solution
- 7:50New color palettes and tokens
- 10:20Rolling out to products
- 13:34Tooling for adoption
- 15:42Application and discovery tools
- 17:47Automating migration
- 19:13Figma parity
- 20:39Education and documentation support
- 21:21Summary and team acknowledgments
related talks
23mDesign Tokens on Asana's Design Systems Team
51mDesign system and tokens
20mOne design system for multiple brands
35mThe Evolution of Design Tokens
28mScalable CSS Architecture with Design Tokens
11mDesign Tokens: Getting Agents to Follow Brand Guidelines
27mDesign Tokens and You
01h 00mDesign Token Architecture