Select Page

Bringing ThousandEyes into the Cisco Design Language

Role    Design Systems Lead
Timeline    Q3 2024 – Q2 2026
Team    UX Engineering, Design Systems (me), frontend engineers, 20+ product teams
Key Outcome    Enabled ThousandEyes to achieve visual alignment with Cisco’s product ecosystem — without rewriting the frontend framework — through a 3-theme token architecture (4,000+ tokens) designed and owned end-to-end by a single designer

The Challenge

After Cisco acquired ThousandEyes, all Networking products needed a unified look and feel. The problem: ThousandEyes was built on Vue with its own design system (Iris). Cisco’s shared design system, Magnetic, was built on React. The two stacks were incompatible — we couldn’t just import Magnetic’s components. The engineering team evaluated the technical options and determined that the most viable path was to restyle Iris using Magnetic’s design tokens — aligning the visual language without replacing the frontend framework. That decision defined my work for the next 18+ months: build the token system that would make it possible. 

Three Themes, One Strategy

I defined three themes, each with a distinct role in the migration. The legacy theme was a critical strategic decision — because it matched existing styles exactly, themed and un-themed pages could coexist. Once a critical mass of pages was migrated, the organization could switch the default to Cisco Light. No big-bang migration required. 

Token Architecture

I established a 3-tier token system and authored the naming conventions used by both designers and engineers. Tier 1 holds the raw color palette, Tier 2 assigns semantic meaning, and Tier 3 scopes tokens to individual components. I also identified a core set of Tier 2 tokens for custom elements outside the design system — typography, backgrounds, and custom data visualizations — giving product teams a sanctioned way to theme bespoke UI.

How I Built It

Normally, engineers build token systems and designers consume them. I flipped that. Because this work required visual judgment — deciding which Magnetic color values corresponded to which Iris values — the designer needed to own the source of truth. I created 4,000+ tokens across all three themes, managed through 9 coordinated Token Studio files in Figma. Every Iris token needed to resolve to a valid value in each theme — a manual mapping exercise across the entire system. When Cisco updated Magnetic’s tokens, I owned the sync pipeline: importing updates, reconciling changes, adding Legacy equivalents, and distributing to both designers (via Figma library) and engineers (via JSON exports).

Seamless Theme Switching

Because I built the tokens into the synced Iris Figma library, every designer’s file could switch between all three themes with a single click. Engineers could do the same — applying a CSS class swapped the entire UI. Every component went through Chromatic visual regression testing across all three themes, which I reviewed and approved.

Impact

  • Dark mode unlocked — a long-standing user and business request
  • Incremental adoption — legacy theme let teams migrate at their own pace
  • Repeatable process — Magnetic sync pipeline works for future Cisco updates
  • Designer-owned tokens at scale — proved the model works

Reflection

Token architecture is design work — the decisions about naming, tiering, and mapping tokens require understanding both the visual system and the technical constraints. Owning the source of truth as a designer eliminated the feedback loop and let me move faster. This work led directly to a token cleanup audit and an AI-powered design audit tool that verifies Figma files are using the correct tokens.