Design Token Architecture

on YouTube ↗01h 00m

" summary

Claim: design tokens give a single source of truth that lets many brands, platforms and frameworks share UI without forcing identical looks. The talk shows a three‑tier token architecture implemented as JSON, transformed with Style Dictionary into CSS custom properties, synced with Figma variables and used across web and React Native. Dozens of orgs over a decade use this; a 13.5‑hour course and real pilot projects prove rebrands and theme swaps work and cut repetitive, costly updates.

AI-written summary · about

" chapters (10)

1. 0:00Introduction and context
2. 3:36The multi-product challenge
3. 11:19The role of design tokens
4. 17:20Separation of concerns
5. 26:04Token architecture and implementation
6. 31:00Collaboration and team workflows
7. 33:56Applying the three-tier system
8. 44:22Starting with pilot projects
9. 46:18The vision for a global design system
10. 55:27Closing thoughts and resources

" related talks

• 35mThe Evolution of Design TokensNils Wiere · code.talks 2023
• 13mLightning Talk: Design Tokens – Searching for a Source of TruthLuke Murphy · Pixel Pioneers Bristol 2022
• 16mIntroduction to Design TokensFrançois Garrigues · BDX I/O 2022
• 51mDesign system and tokensJānis Cimbulis · DevClub.lv 114th Frontend focused event
• 36mToken Driven UI DevelopmentFiras Safa, Valeria Farina · #Pragma Conference 2023
• 27mDesign Tokens and YouMax Thorson · UtahJS Conf 2023
• 29mCreating universal design systems across web and mobile with Utility First StylingMo Khazali · Future Frontend 2023
• 11mDesign Tokens: Getting Agents to Follow Brand GuidelinesKaelig Deloumeau-Prigent · CascadiaJS 2026