Design Tokens: Scale Your Systems, Protect Your Value

Overview

As our team grew, informal naming conventions in our design system made style inconsistencies inevitable. Time-intensive alignment efforts and surprise rework stalled projects, drained morale and added risk to release schedules.

The Challenge

Attempts to automate consistency with design tokens stalled due to low commitment, first because they were conceptually ambiguous, then because decision-makers prioritized growth initiatives over all else. That meant weak support for an abstract operational enhancement that few understood to begin with.

What I Did

I drove design token awareness through small pilots designed to onboard and educate teammates while simultaneously addressing workflow challenges. Deeper understanding along with less friction transformed skepticism into grassroots support for a scalable tokenized style system.

Where We Landed

1. Shorter review cycles increased design capacity and reduced friction.
2. Design tokens cleared design debt and prevented new debt from accumulating.
3. They also unlocked new growth opportunities and de-risked our rebrand deployment.

Grassroots Onboarding

Typography Pilot

I introduced design tokens with a pilot aimed at addressing workflow pain points through typographic alignment.

Goals

1. Grow practical knowledge of design tokens through hands-on learning.
2. Encourage concept development through experimentation in a low-risk setting.
3. Demonstrate value and grow support through typographic alignment.

Process

I coached a Junior UX Designer through a structured design journey. We progressed from an exhaustive survey of product type styles to the development of a naming system that enabled strong alignment across UX practices.

Where We Landed

A clear naming convention that resulted in consistent use of type across design deliverables. Deeper understanding backed by practical experience turned my UX team into strong design token advocates.

Color Pilot

I initiated a second pilot aimed at tokenizing our color styles.

Goals

1. Validate a repeatable tokenization process.
2. Reduce color inconsistencies through improved naming systems.
3. Expand practical design token knowledge across the team.

Process

I coached another UX Designer through activities that explored naming conventions with design workflows in mind. Informative naming added purpose and intention to each color style and improved consistency across design deliverables.

Where We Landed

A more consistent and intentional approach to color across UX. Two systems governing styles gave us the beginnings of a recognizable product language that functioned as a powerful alignment tool.

Themed Prototype

For a hackathon event, I partnered with an Engineer to develop a multi-themed Mercari prototype enabled by design tokens.

Goals

1. Clarify the scope of technical adoption through hands-on learning.
2. Investigate joint ownership of token libraries between UX and Engineering.
3. Showcase product capabilities like theming and personalization to capture executive attention.

Process

Working asynchronously over two days, we developed a Mercari prototype featuring day, evening, and high-contrast themes built on a single token system.

Where We Landed

Our hackathon prototype was a compelling proof-of-concept for a formal design token initiative and support for adoption increased company-wide.

The Tipping Point

Company Rebrand

When our CEO kicked off a rebrand initiative, I pitched design tokens as prerequisite infrastructure to accelerate future product implementation.

Validation Through Dark Mode

I proposed dark mode as an alternative path to design token implementation. This let us validate coverage in a low-risk setting rather than the high-stakes environment of a rebrand. Once established, token values could be updated to reflect our new brand in sprints rather than quarters.

Where We Landed

In just six weeks, I delivered dark mode with a small team of two UX Designers and two Engineers. Backed by pilot and prototype learnings, we architected JSON libraries, developed comprehensive design system documentation, and created a custom Figma plugin for long-term reliability.

The Outcome

Design Tokens Operationalized Alignment

Once established, design tokens operationalized style alignment across UX and Engineering by connecting style decisions directly into our product’s source code.

Takeaways