What is a Design Token? A TL;DR from a product design intern.
6 min read

What is a Design Token? A TL;DR from a product design intern.

What is a Design Token? A TL;DR from a product design intern.

Answering few questions before we begin ~a lighthearted disclaimer~

Why should I be listening to a Product Design Intern, of ALL people who could be talking to me about design tokens *cough*Brad Frost, Dan Mall, Josh Clark  *cough*?

Well to be frank, it's because I had no idea about what design tokens were before going into my internship, presently have to help design a product that creates, edits, and manages them, and essentially go through the overwhelming amount of research anyway. So why not give you a TL;DR (Too long, didn't research) while I'm at it?

That being said, there are tons of resources and references that I will be linking to the bottom of this article created by much more credible and experienced human beings.

🤓 Now let's get down to business & back to basics

Whenever I learn something new and try to explain it to somebody else, I always go back to the basics of elementary narrative storytelling and answer the questions: who? what? where? when? why? and how?

👥 The Who's

Who invented the design token?

While she didn't invent it, but Jina Anne from Salesforce is a name that has constantly popped up in my research. She is a design systems advocate and has "clarified" (pun very much intended) in the Clarity Conference (which she runs) the importance of Design Tokens and Design Systems. She is one of the biggest (if not the biggest) names that have popularized the Design Token workflow state-of-mind.

Who needs design tokens?

Directly: Designers and developers to optimize product workflow, regardless of team size

Indirectly: Company founders that want to make sure their design systems/products are cohesive across all platforms, and therefore maintaining a consistent brand to their users

Team work, work colleagues, working together
Photo by Annie Spratt / Unsplash

💭 The What's

What the heck is a design token?

Before getting to that, you should probably understand what a design system is.

Now that you've read that, here's my clumsy definition:
A design token is essentially a UI design decision that is visualized in code (css, scss, json, whatever you name it) as a labeled magic number in any given written code.

A magic number is a random value (for example, a hex code for the color value of white #ffffff, renamed in code as --white-100: #FFFFFF).

Image by Adobe, https://spectrum.adobe.com/page/design-tokens/#Introduction

A visual designer's analogy

In the same way that designers like myself are used to maintaining a Creative Cloud Library for every project I create (which houses things like colors, graphics, etc.), I am able to use these defined values across different file formats (whether it's implementing a brand's colors on a photoshop image or an illustrator logo), as a single source of truth for my work. In case I need to edit/replace a color, I can do that in the library and edit the singular value that I want changed and trust that it will be implemented across all my files that share that value.

Example of CC Library Usage

A more universal analogy

Design tokens are kind of like a Rosetta Stone for different code syntaxes. Different code applications call for different syntaxing, in the example from Jina Anne's feature in the Smashing podcast,  she provides an example of how these can be implemented.

...colors, for example, like transparent colors, you do that differently in Android, like eight-digit hex, instead of RGBA like you would with web...rather than saying RGBA 50 comma, 40 comma, whatever the color, you can just say color background card or something like that. It’s really more of a named entity now and then you can all be speaking the same language, even though it might render a different syntax.
—Jina Anne
The Rosetta Stone, The British Museum Blog

🧭 The Where

Does a design token have to be a part of a design system?

Nope, while design tokens are usually contextualized within a design system to show how they work, design tokens can simply exist in any given text editor. While I've got an opinion that design systems come in many shapes and sizes, someone can just create design tokens that are mapped internally in their code.

Are design tokens just found in code?

Also nope! While design tokens are implemented/come into life in text editors, design tokens can very much be defined in design-developer handoff (Figma, Sketch, XD) files, in developer documentation, as well as token managers like Arcade 😉, more on this soon.

Arcade
The fun way to create, edit, and manage design tokens for enterprise teams.
Stay updated on Arcade

⏰ The When

When should I start using design tokens?

Right now...I'm not kidding. If you're a developer or a designer, it's good to start implementing the way of design token thinking through things avoid redlining, avoid tedious speccing, and take advantage of how code cascades (work smarter, not harder, folks). Imagine only having to define a value once, regardless of how many times it has to pop up in your code.

If you plan to grow your product, just do it.

Why? Keep reading.

✨ The Why

“a person’s gut feeling about a product, service, or organization” (and I would include their feeling about a person, since every one of us have a personal brand). In other words, your brand is “not what you say it is; it’s what they say it is.” — Marty Neumeier, The Brand Gap

Maintainability and consistency in branding

Successful branding is consistent branding. In order for someone to establish a gut feeling for a brand, that given brand should consistently be visualizing their presence in a manner that is predictable, and therefore something that others can define in their own words.

Consistent branding has to be maintained. If you're a huge enterprise company that has a lot of products out there, and somebody decides to change your brand color, you bet your bottom dollar that people are going to find it weird if it only changed on the desktop app and not the rest of your products. Can you imagine Coca-Cola suddenly changing their iconic red to an electric blue?

Communication Workflow

Creating design tokens and developing a design system equates to producing a source of truth for a given company. This source of truth is a safety pad for breakdowns in communication, lack of documentation, and other human errors that are bound to happen.

With developing a system of design tokens, you are able to keep track of design decisions that are made by designers, ensure that developers are crystal clear on how to implement this design, and ensure that the cycle doesn't ever break-down/end.

👩🏻‍💻 Intern Takeaways

  • Design tokens are important for a successful, efficient, and clear designer-developer workflow
  • Design tokens are labeled magic numbers that are implemented to maintain consistent cross-platform UI
  • Design tokens are NOT used enough, and the current workflows of even the biggest companies are broken (more on that later)

Thanks for reading!

References, as promised

https://uxdesign.cc/design-tokens-for-dummies-8acebf010d71

Design Tokens | Duet Design System
Duet provides a set of organized tools, patterns, and practices that work as the foundation for LocalTapiola and Turva digital products.
Spectrum, Adobe’s design system
Spectrum provides interface components, resources, and tools to help teams work more efficiently and to make applications more consistent.
Smashing Podcast Episode 3 With Jina Anne: What Are Design Tokens? — Smashing Magazine
What are Design Tokens and how are they used? In this episode of the Smashing Podcast, Drew McLellan talks to Design Systems expert Jina Anne.

Enjoying these posts? Subscribe for more