Internet Brands - Design Tokens

The Challenge

At Internet Brands, our design team and developers lacked a shared, single source of truth for design styles. This disconnect meant that the same colors, fonts, and spacing often existed in different versions across our design files and website code. We needed a better system that gave both teams access to the same style information without requiring constant manual coordination and handoffs.

Our Approach

We solved our design consistency challenges by implementing design tokens—a single source of truth for all our visual elements. I (1) created tokens with the Token Studio Plugin, (2) synced changes to Github, (3) converted tokens into code using Visual Studio Code, and lastly, (4) applied CSS variables to ensure easy updates without modifying code directly. This approach keeps styles consistent and reduces unnecessary developer work.

Process

We implemented design tokens and created a central repository of design decisions that both designers and developers could access. This provided a more consistent user experience and significantly reduced handoff friction.

Creating Tokens

I used the existing color and type styles at Internet Brands to create design tokens using the Token Studio plugin. Below is an example of what the text style for ‘Body Text Small’ looks like using the plugin in Figma. It stored the font family, weight, and size among other information.

‘Body Text Default’ Characteristics in Token Studio

I organized our color and typography styles and put them in Token Studio and we had the beginning foundation for our Global tokens.

Token Studio - Color Tokens

Pushing Tokens into a Repository

Now that I had the information for the tokens and I wanted to put it in a json file to convert it into CSS, the format we’re using at Internet Brands.

Token Studio connects to Github along with other version control services. I connected it to a Github repository and created a new tokens.json file that stored the token information. Then I was able to pull and update the json file in VS Code. Below is a screenshot of the tokens.json file opened in VS Code with the ‘Body Text Default’ style information.

Tokens.json file with ‘body text default’ style highlighted

Transforming tokens into CSS

In VS Code, I used a combination of the Token Transformer package, which converted tokens into raw values, and Style Dictionary, which transforms tokens into a usable format for developers—in our case, CSS variables. In the end, I got a nice set of CSS variables as shown below.

CSS Variables - Typography

CSS Variables - Color

Using CSS Variables in code

After the CSS variables were created, we were able to utilize them in code. This is an example of the values are adopted by the tokens.

Hex Value

#3da1ff

Global Token

--color-blue-400

Component Token

--button-default-background

The developer can use the ‘--button-default-background’ variable for the background-color attribute.

background-color: var(--button-default-background);

Let’s say our brand color changes and I want to change the button background color to Purple-400. I can assign the Component Token a different Global Token value. This allows me to keep the Component Token the same and now the token assignment looks like this.

Hex Value

#9767e5

Global Token

--color-purple-400

Component Token

--button-default-background

CONCLUSION

Design tokens transformed our workflow by creating a unified language between design and development teams.

Improvements

Our design tokens implementation delivered two critical improvements. We created a shared source of truth by storing all design styles in a central file. The Component Tokens system now allows designers to make widespread style changes without requiring constant developer intervention.

This shift required collaboration and a willingness to adapt, but it has streamlined our workflow and improved our design system. Below are some resources that helped me throughout this process and guided conversations with my team.