Next-gen Design Tokens

Creating a stronger design point of view through design tokens

An animated gif demonstrating a prototype where user's can set colors and instantly see how they might change our components.

Overview

I saw an opportunity for our design system to be more intentional about our color choices and generate a stronger design point of view. I created a quick prototype for my team to demonstrate how we might achieve this through design tokens.

Role

Design Technologist

Technologies

React, Sass, JavaScript, HTML

Creating a stronger POV

Let's be honest: our brand's primary color was overused. It dominated nearly every component, illustration, and icon, resulting in a monotonous “sea of green” and a lack of distinct design perspective.

Recognizing an opportunity for improvement, I developed a prototype to highlight the issue and propose a solution. My approach involved revisiting our color palette and component design to create a more intentional and distinctive visual identity for our product designs.

Fortunately, my team agreed. By reviewing all our components together and examining a few real designs with the updated look and feel, they quickly saw the value in redesigning our components, refining our color usage, and investing in more robust design tokens.

Check out the prototype