The Anatomy of a Design Token

Jonas Duri
4 min readDec 3, 2021

Design-Tokens is a hot topic in the Design and Development community. What is a Design Token? Here’s a brief introduction into the topic

In this article, you will learn about the anatomy of a Design-Token and how to structure them.

Design-Tokens are a hot topic in Design and Development. Designers and developers use Design-Tokens to share design specifications, but the concept of Design-Token is not new. Designers have been using them for decades to communicate their ideas more effectively.

Apple has a color for their line of products, Space Gray. It’s an aluminum color that is very stylish and it pairs nicely with most desk- or office designs. You’ve seen this color before if you’ve seen a MacBook Pro. It is a grayish tint that stands out but doesn’t overpower your eye when looking at it.

You may notice that Apple doesn’t just refer to the color as “grayish tint, slightly darker than silver”. They chose a unique, rememberable name for it — Space Gray.

The color and the properties attached to it can be distinguished from all other gray/metallic colors just by referencing the name. In Apple’s unique language, Space Gray is a Design-Token.

Apple has modified Space Gray since its debut with the iPad mini 2 in 2013 countless times, but they didn’t change the unique name. They loosely coupled the name to the actual color, which made the evolution possible.

Anatomy of a Design Token

Name

The name of a design token should immediately tell your audience what they can expect from it. In the case of Apple, they use a suggestive and unique name for their color token. This makes it easy for people to remember and distinguish it from other colors.

Type

The type of a design token gives the user a clear hint, how it can be used. For example, a “color-token” may be used to paint things, but it can’t be used as a duration for an animation. Each token…

--

--

Jonas Duri

Platform Architect working on frontend & UI solutions for distributed e-commerce systems | https://jduri.com/