Subatomic Design Tokens Course: Chapter 3 now live!

Do you love having to name things? Of course you don’t! That’s why we’re so excited to announce that Chapter 3 of our Subatomic Design Tokens Course is now live!

We have a FULL HOUR AND A HALF of video diving deep into the gory details of naming, including:

  • Why naming matters so much
  • Why naming is so freaking hard
  • Naming principles
  • Why token naming must be co-created by design AND development
  • The importance and trickiness of naming parity between design and code
  • The design token naming algorithm
  • Detailed, step-by-step token naming conventions for color, type, spacing, border, shadow, animation, and z-index

In addition to these SIXTY VIDEOS, we also provide a Figjam template that will help your team create and document your own design token naming algorithm and conventions.

We’ve been through the naming process with so many teams, so we know how incredibly hard and frustrating it can be to establish design token system naming conventions that are clear, consistent, maintainable, and extensible. I knew this chapter would be a doozy, and it felt SO INCREDIBLY GOOD to spill our guts out about what matters (and what doesn’t!) regarding naming design tokens.

We discuss why names and language are so important for creating shared understanding and that language serves as the API — the contract! — between people, tools, and systems.

We also discuss the invented, subjective nature of this language, pedantry, the difficult pursuit of consistency, differences between Figma and code, and how the relationship gap between designers and developers make it challenging to arrive at sturdy names.

Examples of "error" button variants, showing different naming conventions for the same concept from 4 separate design systems


We share important naming principles and a helpful blueprint to create & codify names in a structured way. And from there, we dive ALL THE WAY into the deep end, meticulously detailing token naming conventions per tier per category.


We stress again and again that the specific names don’t matter as much as having a shared understanding of whatever language your team decides on. Having naming structure in place is far more important than specific names you choose.

We’re nearly halfway through creating this course, and we now have over 5 hours of video content available, shared dozens of resources, and are creating a vibrant community of design token enthusiasts.

Our next chapter will detail building a design token system in Figma and code, and WE ARE PUMPED. With the help of our friend and Figma wizard Molly Hellmuth, we’ve created an incredibly sturdy design token architecture in Figma and in code, and demonstrate that through a really fun demo project. We’ll be providing this end-to-end token architecture to you. Based on our experience, we’re sure this will save your team so much agony and save you days, weeks, or even months of time.

Only two weeks left to preorder at $650!

When we release our design token architecture for Figma and code within the next two weeks, the preorder price of the course will increase by $100USD.

Preorder price: $650 crossed out with $750

So now’s your chance to get in before the price increases! And you can save more if you buy 2 licenses (one for you and your designer/developer counterpart!) or more (for teams/enterprises). You can preorder the course here.

And if you or your boss need convincing, we continue to get great feedback and enthusiasm from our preorder users:

The depth and effort you seem to have put into this course are impressive. I’m not sure anyone else has taken such a deep dive into this topic yet.Edgar Lechaudel

We’re so incredibly excited with how the course is shaping up, and hope you’ll join us! You can sign up for the newsletter to receive preorder info, stay in the loop, and receive plenty of design tokens best practices and resources.

More soon, and thanks again!