Design system visual refresh

Context

Alchemy (AFT-XD's design system) is owned and maintained by the AFT-XD team, supporting 50+ product teams. Its visual language was inherited from an earlier iteration (AFT Human Interface Guidelines), created in 2019 as a stylesheet without coded components.

I joined the Alchemy team in 2022 as the lead UX Designer responsible for component creation, Figma libraries, system design support, and adoption/evangelism.

Problem

During our Q1 2023 planning offsite, we aligned on several strategic needs: enhanced themeability, a revised color system, improved token architecture, performance upgrades, and a more scalable foundation to support component and pattern delivery.

To reach the component roadmap responsibly, our lead Front-End Engineer and I agreed the foundations had to be rebuilt first—simplifying underlying primitives, aligning design + code, and moving toward industry-leading token architecture.

Approach

Color system proposal

I studied current best-practice color system guidance and proposed a more flexible palette model: core system colors (neutral ramps + alert palettes) paired with a set of accent families. Each palette included light and dark equivalents—capability we didn’t have at the time.

Token architecture re-architecture

Our largest lift was rebuilding the token taxonomy. The intent was to treat the design system as a set of primitives (color, sizing ramps, multipliers, etc.), where themes define defaults and the system derives the necessary tokens from those defaults.

We introduced a “durable vs adaptable” concept: durable tokens express familiarity across themes, while adaptable tokens allow contextual shifts to better match audience needs. This supported a layered model (foundation → platform → local systems) that could scale beyond colors.

This work intentionally treated the design system less as a UI kit and more as infrastructure—a shared set of primitives that could support multiple audiences, themes, and future systems without fragmenting over time.

Visual refresh workshop + library build

I facilitated a design sprint with cross-org Designers to evaluate the existing UI kit from an atomic lens and how it was being applied across the portfolio. Using the new palette and early token model, we identified improvements for both Operator and Associate contexts.

After the sprint, I built the updated library in Figma using Variables, including distinct Operator and Associate themes, and presented the refreshed direction to AFT-XD in Q3 2023.

Shipping + validation

The team implemented the new foundations across design and code, iterating and stress testing until stable. In Q4 2023, I shipped the first iteration of the refreshed Associate theme (built from the Operator direction), including updated type ramps, stronger borders, and spacing tuned for associate-facing use.

In 2024, we continued toward an official release: documentation updates, a revised Alchemy site, Figma + code library enhancements, and beta pilots—along with follow-on theme work for accessibility and personalization settings.

This foundation later became critical to enabling Common Experience work across AFT, where consistency and accessibility requirements needed to scale across products that didn’t all share the same front-end stack.

Outcomes

• Refreshed UI foundation supporting Operator and Associate themes in both Figma and code
• Scalable token architecture enabling contextual themeability beyond color
• Stronger alignment between design and engineering primitives
• 3 pilot customers testing beta libraries
• Overhauled documentation site with clearer guidance for adoption
• Performance and maintainability improvements through simplification

What’s next

• Due to organizational churn, the final stages of the refresh were deprioritized in Q4 2024
• Alchemy continued supporting prior versions while focusing on data visualization and complex table needs
• In Q3 2025, Alchemy ownership moved to another AFT team and dedicated design support is no longer assigned