670: Brad and Ian Frost on Their New Design Tokens Course
Episode
68 min
Read time
2 min
Topics
Design & UX, Software Development, Philosophy & Wisdom
AI-Generated Summary
Key Takeaways
- ✓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.
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.
Notable Moment
The Frost brothers reveal that one Fortune 500 client had accumulated over 4,000 design tokens including absurdly specific values like alert-error-border-radius, creating toxic technical debt that made simple changes require massive coordination across teams and themes.
Episode Transcript
Hey there. Shop at Maniacs. You're listening to another episode of the Shop Talk Show. This week, Token Therapy with me, Dave Rupert, and Chris Coyer. Hey, Chris. Who Yeah. Out of the studio? Chris won't fix Coyer. That's cool. That's the new tagline. Yeah. My new tag in the middle. Yeah. Yeah. Little you can tell because I set a border radius around it in a different background color. That's the official design look of a tag. Yeah. Mhmm. Maybe a border. We have the frosts here today. Mister Brad Frost, how are you doing, Brad? Hey. Great. Thanks for having us. Brad's better looking brother as he introduces himself publicly on stage. Ian Frost. How are you doing, Ian? Hey. Good. How are you? Good. It's good to see you both in Amsterdam recently. We were both hanging out on the canals and, you know, doing doing life in Amsterdam. Very beautiful place. And I caught you at the end of a of a big trip. You had I think you you said you were been working together side by side, brothers in arms for ten years and took the opportunity to celebrate by hitting Europe. Yeah. Yeah. It's like part mini speaking tour. Sort of started off at, UX LX in Lisbon, Portugal and What's LX? There and yeah. LX What does LX mean? That's that's Lisbon. It's a Oh. Yeah. Lisbon experience. Oh my gosh. Okay. So Ian met me there, and and we, hiked up the the coast of, Portugal, which is awesome, and then continued hiking adventures in in Switzerland and saw some pretty epic mountains and then onto the flatlands of The Netherlands to meet up with you. Yeah. Right. So is it they literally are flat. There's so many bikes there. It's it's absolutely unbelievable. And it's like a it's like a bike culture without being a bike nerd culture. You know? Like, I'm sure there's plenty of bike nerds, but people are like, we'll ride any old rusty piece of crap because I don't think you need a lot of, like, bike horsepower when the steepest hill is, like, up over a little canal quick and then back down. You know? It's acting Amazing. Yeah. Yeah. Amazing. No. It's it's pretty amazing to see what it looks like when it's just yeah. This is normal. It doesn't need to be anything fancy. You're just literally trying to get from point a to point b. And You probably want it not fancy because, you know, the fancier it is, the higher chance of getting ripped off. I don't know what crime is like there. Maybe it's not a problem. But, yeah, still a nice one. Sometimes take Umbridge because I when I see a lot of videos about city planning and how, oh, The Netherlands, it's bikeable. Oh, Texas, that sucks. It can't walk it. It's also, like, a thousand degrees here. Hills, not fun to bike on. I I feel like …
Get the full transcript (11,851 words) + summary by email — free
One-time email with the complete transcript and AI summary of this episode. No account needed.
One email, no spam. We’ll also show you what SignalCast does.
You just read a 3-minute summary of a 65-minute episode.
Get Shop Talk Show summarized like this every Monday — plus up to 2 more podcasts, free.
Pick Your Podcasts — FreeKeep Reading
More from Shop Talk Show
731: Terminal UX, Running Multiple Services, Don’t Settle for an App
Sep 7 · 58 min
No Priors: Artificial Intelligence | Technology | Startups
Rivian’s Roadmap to AI Architecture and Autonomy with Founder and CEO RJ Scaringe
Feb 12
More from Shop Talk Show
730: A/B Testing with Charts, Music Recommendations, & Web Permissions
Aug 31 · 60 min
a16z Podcast
What It Takes to Build a Startup | Andrew Chen & Matt Perault
Sep 11
Books, tools, and gear mentioned in this episode
SignalCast may earn commission on purchases via these links.
Tools
by Figma
“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 DictionaryRecommended
“Author tokens once in JSON format, then use Style Dictionary to compile into CSS custom properties, Sass variables, Swift constants, or platform-specific formats.”
course
“Brad and Ian Frost on Their New Design Tokens Course”
More from Shop Talk Show
We summarize every new episode. Want them in your inbox?
731: Terminal UX, Running Multiple Services, Don’t Settle for an App
730: A/B Testing with Charts, Music Recommendations, & Web Permissions
729: After Dark Edition! Microlighter, Tri-state Drama, and Editing Video Quickly
728: BIMI, Good Favicon Practice, and CSS @Layer Exploration
727: Front-End Complexity, AI Co-Authorship, and New CSS Navigation Patterns
Similar Episodes
Related episodes from other podcasts
No Priors: Artificial Intelligence | Technology | Startups
Feb 12
Rivian’s Roadmap to AI Architecture and Autonomy with Founder and CEO RJ Scaringe
a16z Podcast
Sep 11
What It Takes to Build a Startup | Andrew Chen & Matt Perault
Eye on AI
Sep 8
86% of What Coding Agents Do Is Just Reading — Not Solving | Alexander Whedon of Subquadratic
The AI Breakdown
Sep 6
How to Build an AI-Native Company Today
Beyond Biotech
Aug 21
Beyond biology: Nanobiotix's physics-first approach to cancer
Explore Related Topics
This podcast is featured in Best Cybersecurity Podcasts (2026) — ranked and reviewed with AI summaries.
Read this week's Software Engineering Podcast Insights — cross-podcast analysis updated weekly.
You're clearly into Shop Talk Show.
Every Monday, we deliver AI summaries of the latest episodes from Shop Talk Show and 192+ other podcasts. Free for one show.
Start My Monday DigestNo credit card · Unsubscribe anytime