Modernizing the Foundation of Design
Replacing a costly custom system with a scalable foundation that connects design, engineering, and brand.
Role
UX Director
Timeline
2025–2026
Outcome
One themeable foundation serving product, brand, and internal tools — with maintenance cost moved off the team.
The starting point
The existing design system had become part of the problem it was meant to solve.
Custom-built components had drifted from the product, design and code no longer reliably matched, and maintaining the system required time the team couldn't justify. Designers recreated patterns manually while engineers reached for whatever implementation was closest.
The issue wasn't simply outdated components.
We had built a system the organization had to maintain instead of a system that helped maintain consistency for us.
Stop owning the plumbing
The most important decision wasn't which components to redesign. It was deciding what was actually worth owning.
Instead of rebuilding another proprietary component library, we moved to an off-the-shelf web-component foundation and focused our investment on the layer that creates differentiated value: brand, experience patterns, tokens, guidance, and governance.
Designing for change
We built the new system as a themeable foundation rather than a single product skin.
Tokens separate brand expression from component structure, allowing color, typography, spacing, elevation, and other foundations to evolve without rebuilding the underlying system.
That means the same component architecture can support different products and surfaces while maintaining a shared interaction and accessibility foundation.
Consistency doesn't require everything to look the same. It requires everything to come from the same system.
The system became a product
A component library alone wouldn't solve adoption.
We created a shared destination where designers and engineers can understand the foundations, browse components and patterns, access tokens, and move directly into the resources they need to design or build.
Closing the gap between design and code
The new foundation was designed around parity: designers work from the same component logic engineers implement, while tokens carry brand decisions through the system.
This reduces translation between design and development and makes the preferred implementation the easiest implementation.
The goal wasn't documentation people could reference. It was a system teams could actually work from.
Connecting brand and product
The system also became infrastructure for carrying a refreshed brand beyond marketing surfaces and into the product experience.
Rather than translating brand into product independently every time, foundations and tokens give Communication Design, Product Design, and Engineering a shared mechanism for expressing it consistently.
Built to extend, not rebuild
The architecture was intentionally designed beyond the first product.
Additional products can inherit the same component foundation while applying their own themes. The same system can extend into corporate web properties and internal tools without creating another independent library.
Next use case
Unifying the Digital Experience of a Commercial Insurer