Publishing APIs at scale

The challenge

Kong had launched a bold, highly visible new brand across its company website, but customers who signed into Konnect still encountered a product that looked and behaved like the old brand. The disconnect was impossible to miss.

The gap was more than an aesthetic problem. We had to make the new brand real across a living enterprise platform without slowing the teams responsible for shipping it.

This was the kind of redesign that could easily become a cosmetic layer over structural debt. I pushed the work toward the harder question: could we use the rebrand to create a system that was more coherent, more accessible, easier to theme, and faster for the team to evolve?

Background

Triad

TravisManager and designer

KatrinaVP of Design (acting PM)

JilsonEngineering manager

My role

I was responsible for the design system rebranding initiative. I defined how the new brand would translate into the product experience, redesigned aspects of the visual language, created new design tokens, rebuilt the Figma library, and partnered directly with Engineering to bring the system into production.

That made my role broad: I was setting high level design direction, doing the detailed design work, resolving system-level decisions, and creating the tools that allowed the team to see those decisions in the real product before committing to them. From the beginning, I recognized an opportunity to rethink how we designed the design system itself, which led to an AI-powered workflow that changed how we iterated and collaborated.

The product

Kong’s design system powers the Konnect platform and serves as the foundation for every customer-facing product. It provides the design language, components, and design tokens that designers and engineers use to build consistent experiences across the platform.

Changing it meant changing the surface area of every product. A decision made in one component could affect navigation, forms, messages, dashboards, and customer workflows across the platform. The visible problem was inconsistency; the deeper problem was that the system made consistency difficult to achieve.

Customer problems

1

Kong had introduced a bold new brand, but the Konnect application still reflected the company’s previous visual identity.

2

Customers experienced a noticeable disconnect between Kong’s new marketing presence and the product they used every day.

3

The existing coded design system made it difficult to translate the new brand into a cohesive, scalable product experience.

Goals

1

Implement the new brand

Align Konnect with Kong’s new visual identity while creating a design language that felt appropriate for enterprise software.

2

Introduce thoughtful theming

Support dark mode without compromising the quality, clarity, or usability of the existing light theme.

3

Modernize the design system architecture

Create a scalable design token architecture that could support theming and evolve with the platform over time.

4

Accelerate the design workflow

Connect Figma, design tokens, and production code to reduce friction and dramatically shorten the feedback loop between design and implementation.

Designing a system, not just a theme

The first decision was to refuse the easy version of the work. We were not going to slap a coat of paint on the old system and call the brand integration finished.

Translating Kong’s new brand into the product required more than a visual refresh. The coded system had never been built for theming, and its semantic token model lacked the granularity we needed. Even subtle visual changes could cascade unpredictably across dozens of components, so every decision had to account for the broader product.

The work forced us to confront hidden debt in public. If a token was ambiguous, a component was out of sync, or a theme decision only worked in a Figma frame, the new workflow exposed it immediately. That pressure was useful: it turned abstract system problems into concrete product decisions the team could resolve.

Building an AI-native design workflow

The old loop turned a single design decision into a ten-minute relay: update design tokens in Figma, publish the token library, pull the changes into the coded component library, and only then see whether the decision held up. One change took about ten minutes to evaluate, so iteration stalled before it started.

To accelerate theme exploration, I built an AI-powered workflow using Claude and the Figma MCP server. It allowed me to modify design tokens locally and quickly preview those changes in pixel-perfect, coded recreations of real product screens, reducing the feedback loop from minutes to seconds.

Design token sync

I created a skill that reliably synced design tokens from Figma to my local instance of the coded design system. It bridged differences in structure and resolved subtle naming inconsistencies between the two systems, creating a predictable connection between design and code.

Direct experimentation in code and the browser

The real test was not whether the system looked coherent in a library. It was whether it survived contact with the product.

Design system component disconnects

While redesigning the system, I uncovered a deeper challenge: Figma and production code had gradually drifted apart. Components, tokens, and real application experiences were no longer aligned, making it difficult to translate decisions from Figma to code. In some cases, production components were using different tokens than our Figma library.

That disconnect created a trust problem. Designers could not be certain a polished Figma decision would survive implementation, and Engineers could not be certain which source was authoritative. I used the browser as the place where we could settle those disagreements with evidence.

Design system component preview

I created an AI-powered component preview to see how every component responded across themes. It surfaced system inconsistencies and informed production token improvements, strengthening accessibility and bringing coded components closer to Figma.

A theme switcher let me move instantly between Classic, Day, and Night, plus high-contrast themes designed to meet WCAG AAA accessibility standards.

Previewing on coded components

Using our internal AI prototyping toolkit built on production components, I combined designs from across the team with my own to create realistic product screens. This let us pressure-test new themes beyond individual components and see in real time how they felt across the production experience.

Live design token experimentation

I built a theme creation tool with Claude to extend experimentation beyond our Figma-to-code workflow. It generated color ramps from a base color, supported models like OKLCH, and let me fine-tune problematic tokens while seeing their impact in real time. Once a change worked, I could bring it back into the Figma design system.

Visual changes

With the system capable of change, we still had to make the visual language feel intentional. The new brand could not simply be applied everywhere; it had to earn its place in the interface. One of the biggest challenges was introducing the new brand color into the product. Because it had very low contrast against white, it couldn’t be used broadly across components. Instead, we treated it as a deliberate accent, finding targeted ways to bring the brand into the experience without compromising usability or accessibility.

Logo

The new green logo introduced an accessibility challenge because it no longer had sufficient contrast on light backgrounds. To solve this consistently across themes, I placed the logo on a dark background that preserved contrast and brand visibility in both light and dark modes.

Buttons

We wanted primary buttons to become one of the most prominent expressions of the new brand color. In dark mode, the green already provided sufficient contrast. In light mode, we inverted the treatment, using a dark button background with green text to maintain a strong brand presence while meeting accessibility requirements.

Badges and messages

Our existing palette used highly saturated colors, particularly in badges and messaging. While they worked well in light mode, they felt overly bright and intense on dark surfaces. Rather than compromise both themes, I introduced a separate set of color-aliased tokens for dark mode, allowing each experience to feel intentional while preserving a consistent visual language across the system.

Kong message colors across light and dark themes

Other changes

In addition to these changes, there were many refinements applied system-wide, to specific components, and to our navigation.

Impact

We closed the gap between the Kong customers saw in the market and the Kong product they trusted with their APIs and LLMs. The result was a more credible experience for more than 900 customer organizations, plus a new way of working for the team that built it.

This was not a reskin. The redesign brought Konnect into alignment with Kong’s new brand, creating a more cohesive progression from the marketing experience into the product itself. The new visual language launched across Kong products in late July and is now generally available, including redesigned light and dark themes, modernized components, and a stronger accessibility foundation with optional AAA high-contrast themes that users can select.

0+Customer organizations onboarded

0X fasterDesign system iteration

~0%Reduced design debt

Beyond the visual refresh, we rebuilt the underlying token architecture to better support theming, accessibility, and future product evolution. This gave the design system a more scalable foundation while making it easier to extend the brand consistently across an increasingly broad product portfolio. Customers no longer had to reconcile two versions of Kong: the confident company they encountered before signing in and the disconnected product they encountered afterward. The new system made the promise and the experience feel like the same company.

Select customers

AI and a new way of working

The lasting impact was not only what shipped. It was the new feedback loop the team could keep using after the rebrand was over.

The work changed how we designed our design system. I introduced an AI-native workflow that connected design tokens, coded components, and rapid prototyping, dramatically shortening the feedback loop between design decisions and working interfaces. The structure made it easy for other designers to branch the Git repository and collaborate with me directly within their own product areas, enabling faster iteration and more consistent alignment across teams.

AI-native design system rebrand