We call it design tokenization. Here's what it is, why we did it, and what it means for teams building on Pendo.

The problem with "good enough" styling

Design systems accrue debt the same way codebases do — quietly, gradually, and then all at once.

Over time, styling decisions get made in isolation. A hardcoded hex value here. A one-off border radius there. Typography that drifts slightly between surfaces. None of it feels catastrophic in the moment. But compounded across a product with hundreds of components and thousands of decisions, it adds up to something real: inconsistency that's expensive to fix, and a codebase where every future design change requires an archaeology project.

We saw this in our own product. When we wanted to update a color, we had to touch dozens of files. When a designer handed off a spec, engineers had to interpret it rather than implement it directly. And as we've accelerated our AI-forward product development, we knew the gap would only widen.

So we fixed the foundation.

What we built: a semantic layer between design and code

The core of this work is a centralized token system. Every visual decision in the product — colors, typography, border radius, spacing — is now defined as a semantically named token sourced directly from Figma and parsed through our design system library.

"Semantically named" is the key phrase. Instead of #1A1A1A scattered across dozens of component files, we now have tokens like color.action.primary. Instead of hardcoded pixel values, we have a spacing scale. Instead of ambiguous one-offs, we have a shared vocabulary that design and engineering both understand.

It sounds simple. The implementation was not. The team went through the entire Pendo codebase — component by component, surface by surface — replacing hardcoded values with tokens. Jake Minor and Darshana Saravanan led the charge on this, and the whole Flux team put in the tedious, unglamorous work that makes foundations actually hold.
Courtney Kyle, who leads the front-end platform team, explains how a new semantic token system encodes design intent directly into the product infrastructure.


What changed in the product

For users, the most visible changes are:

A refined neutral palette. Light, warm neutrals throughout — lighter grays for borders and lines, white page backgrounds. The goal was better contrast and readability across all surfaces.

Updated primary and interactive colors. Primary actions now use near-black instead of a dominant brand hue. This keeps color free for meaningful use — data, states, AI surfaces — rather than as a constant presence throughout the UI.

A new data visualization palette. Shifting from dark, muddy tones to soft-bright colors. Brand-aligned pinks and oranges, with contrast accents where the data demands it. Much cleaner, much clearer.

None of these changes affect functionality. Your workflows are the same. But the experience of using Pendo now reflects the sophistication of the product underneath it.

Why this matters beyond aesthetics

Here's the part I want product teams to pay attention to — because it's directly relevant to how you build, not just what you're building in.

Design changes that used to take weeks now take hours. When the entire visual layer is tokenized, updating a color system is a single change in one place. We can ship visual iterations faster, respond to feedback faster, and keep the product visually consistent as we add new surfaces (and we're adding a lot of new surfaces).

AI-assisted development gets dramatically better. This is real. Tools like Cursor, Lovable, and Claude generate better UI when there's a clear token system to follow. Instead of producing one-off styles that look slightly off, they generate components that stay on-brand by default. If you're using AI coding tools in your own product development, a well-structured design system is one of the highest-leverage investments you can make.

Design and engineering handoffs actually work. Semantic naming creates shared context. When a designer says color.feedback.error and an engineer implements color.feedback.error, they're working from the same source of truth. No interpretation required, no surprises in review.

The quiet work that makes everything else possible

Design systems work is invisible when it's done right. You don't notice a good token system. You notice a product that looks sharp, responds quickly, and doesn't surprise you with visual inconsistency.

That's the goal. And it's a goal that scales — not just for Pendo, but for any product team thinking seriously about how to build faster without sacrificing quality.

The foundation is there now. Everything we build on top of it will be better for it.