Scalable Rebranding Through a Tokenized Design System
Overview
As part of a company-wide rebranding initiative, our centralized design systems team was responsible for rolling out updated styles across dozens of product teams. Rather than distribute static files or guidelines, we delivered the refresh through our fully tokenized design system—built as a themed kit on top of MUI (Material UI).
This foundation gave us the flexibility to rapidly ship visual updates across teams, while ensuring long-term scalability and consistency at the component level.
Why MUI + React?
Originally, our system had been exploring Web Components as a potential framework for cross-platform consistency. However, after multiple conversations with our internal developer community, it became clear that React was the dominant paradigm—and the developer experience of Web Components wasn't meeting teams where they were.
We pivoted to MUI as our foundation in direct response to that feedback, enabling us to:
Align with how most product teams were already building interfaces
Leverage MUI’s mature component architecture and accessibility coverage
This shift helped foster buy-in from engineering, which later proved critical for rapid adoption of the rebranded theme tokens.
Challenge
The rebrand introduced:
A refreshed color palette and updated typographic scale
Adjusted spacing and motion language
A need for consistent implementation across all product teams and surfaces
Previous rebranding efforts had been labor-intensive and fragmented. We needed a centralized way to ship visual updates that product teams could integrate without extra overhead.
Solution
From a design perspective, the task we had to take on was how to properly expand what had existed within Horizon to account for the gaps that MUI also provided that we didn’t already have.
This meant a bit of tailoring the token set; expanding where things weren’t sufficient and cutting stuff we didn’t need.
Systemic Advantages
By layering Horizon on MUI and centering it on design tokens:
Rebrand changes could be made centrally and cascade automatically
Alternate themes (e.g., dark mode, Memphis Theme) were easy to implement
Dev teams stayed in their preferred React stack without custom wrappers or one-off overrides
We avoided major rework by extending MUI instead of replacing it
Results & Metrics
We tracked the impact of the update rollout using both qualitative and quantitative data:
87% of product teams adopted the updated tokens within the first 4 weeks
90% reduction in implementation time compared to the previous brand rollout
Low friction rollout: minimal QA or regression issues reported
The system team was flooded with support requests—not because of problems, but because people wanted in
Takeaway
By building Horizon as a tokenized, themed extension of MUI—and listening closely to what our dev community needed—we were able to ship a massive visual change with minimal disruption. The rebrand rollout became a testament to how systems can make change easy, not scary.