How design tokens empower better collaboration between designers and developers.

I remember auditing a company’s product once, a decently sized web and mobile application, only to learn that a certain “expand” button was not only using multiple shades of the primary color, but also had a changing border radius across the two platforms. Documenting that, I was unaware that changing the button to be correct and unified everywhere could take days to implements, as a poor developer would have to sift through each application, find every variant of the button and correct each of them, one-by-one. Long story short, they decided that these errors were just small imperfections, which in turn, were never fixed.

Thankfully, we don’t have to live with those small imperfections anymore.

Design tokens are here to save us all perfectionist developers and designers alike, allowing us to manage all properties, colors, and components from a single source of truth.

What is a Design Token?

Design Tokens are the name and value of any design decision paired together. They are design elements you use over and over in the product they were created for, across all platforms.

Almost anything can be a design token, a color, font style, button, or spacing. These are then given a name that corresponds to the design decision and defined value. For example, instead of choosing a color for an icon every time, we can apply a design token that is consistent with the same…