670: Brad and Ian Frost on Their New Design Tokens Course

What It Covers

Brad and Ian Frost explain their three-tiered design token architecture developed over ten years of Fortune 500 client work, demonstrating how to manage design systems across multiple brands without creating thousands of unmaintainable tokens.

Key Questions Answered

• •Three-Tier Token Architecture: Tier one contains private primitive values (colors, sizes) never directly consumed. Tier two provides semantic tokens like "color-background-brand" that do 90-95% of work. Tier three handles rare component-specific overrides like buttons and forms, keeping total tokens between 300-500 maximum.
• •Token Explosion Prevention: Teams managing 4,000+ tokens face maintenance nightmares when adding components requires backfilling values across every theme. Keeping tokens at 300-500 by using semantic tier-two mappings prevents this exponential growth while maintaining flexibility across multiple brands and platforms simultaneously.
• •Cross-Disciplinary Implementation: Design token systems must be built collaboratively between designers and developers from the start, not handed off sequentially. Developers have years more experience with structured naming conventions than designers using two-year-old Figma variables, making their involvement critical for durable architecture.
• •Style Dictionary Compilation: Author tokens once in JSON format, then use Style Dictionary to compile into CSS custom properties, Sass variables, Swift constants, or platform-specific formats. This tool-agnostic approach provides escape hatches when tools change and enables consistent theming across web and native applications.
• •Component System Separation: Split component structure (door frames, layouts, functionality) from aesthetic tokens (colors, fonts, brand elements). This separation allows teams to share component libraries while maintaining brand autonomy, preventing the common pattern of rebuilding entire systems just to change button colors.