Member-only story

Design tokens 101

Mae Capozzi
UX Collective
Published in
5 min readDec 20, 2020

Web developers used to hard-code all of their style data. If a button needed a background color of blue, they’d assign the background color right at the source:

.button {
background-color: blue;
}

That worked for smaller systems that didn’t need a theming layer and weren’t undergoing frequent redesign. But if you needed a large-scale redesign, this was a painful approach.

Invented by Jina Anne for the Salesforce Lightning Design System, design tokens are an approach to storing style attributes like color, typography, and spacing in a pre-determined structure. They are an alternative to directly hard-coding style data that allow designers and developers to build consistent, pleasing layouts, quickly accomplish redesigns, and add a theming layer to their applications.

If a designer uses Figma, their design tokens might be represented like this:

They have specific, generic names. If you changed the value assigned to `primary1`, it still makes sense!

In code, those tokens might look like this:

const theme = {
colors: {
primary1: "#07005B",
primary2: "#1D35AF",
secondary1: "#E34F30",
secondary2: "#3CA6E0",
secondary3: "#C17259",
secondary4: "#0E78B2",
secondary5: "#00875E",
},
};

Create an account to read the full story.

The author made this story available to Medium members only.
If you’re new to Medium, create a new account to read this story on us.

Or, continue in mobile web

Already have an account? Sign in

Published in UX Collective

We believe designers are thinkers as much as they are makers. Curated stories on UX, Visual & Product Design. https://linktr.ee/uxc

Responses (3)

What are your thoughts?