Skip to main content
Shop Talk Show

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

68 min episode · 2 min read
·
Brad Frost,Ian Frost

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.

Know someone who'd find this useful?

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.

Browse all Shop Talk Show transcripts →

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 — Free

Keep Reading

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

More from Shop Talk Show

We summarize every new episode. Want them in your inbox?

Similar Episodes

Related episodes from other podcasts

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 Digest

No credit card · Unsubscribe anytime