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.

--

--

Jonas Duri

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