Color system

Where we started

Alchemy’s visual language was inherited from earlier AFT Human Interface Guidelines. While the design system had matured into a maintained component platform used by dozens of teams, the underlying color foundations were not designed to scale with the size or variability of the product ecosystem.

Color usage was inconsistent across products, light and dark mode support was incomplete, and design-to-code handoff often required interpretation rather than a shared, explicit model.

Problem

Color is one of the fastest ways a system fragments. Without a clear, intentional palette and usage model, teams repeatedly re-decide basic questions—what background to use, which colors represent interaction, how hover and focus should behave, and whether designs meet contrast requirements in every mode.

• Limited ability to balance shared experience foundations with local audience needs
• Light and dark mode parity required manual fixes instead of predictable mapping
• Overuse of color reduced hierarchy and clarity
• Accessibility requirements became harder to maintain as products diverged

The turning point

During 2023 planning, the Alchemy team aligned on a broader visual refresh and foundational cleanup. Before accelerating component and pattern delivery, we needed to rebuild the primitives everything depended on— starting with color.

The goal wasn’t to create a new aesthetic. It was to establish a color system that encoded intent: predictable relationships, clear semantics, and durable behavior across themes and modes.

Key system decisions

We defined two palette types—each serving a distinct role—and mapped them into semantic tokens designed to scale across themes and modes.

• System colors. A neutral palette (white, gray, black) plus alert colors (success, warning, error) that persist across themes to maintain familiarity and predictable UI behavior.
• Accent colors. Curated hue palettes used to communicate interactivity, establish hierarchy, and reinforce theme or brand identity.
• Audience-specific accents. Blue was retained for Operator experiences to preserve continuity, while purple was introduced for Associate themes to clearly differentiate the experience and introduce something fresh in a space dominated by grays and blues.
• Light and dark parity. Every palette was built with equivalent light and dark values so visual relationships remain intact when modes switch.

Palette ramps were initially generated using contrast-based tooling (Leonardo Color) to establish accessible relationships across light and dark mode. From there, values were manually adjusted to better align with Alchemy’s visual language and real-world component pairings—balancing mathematical correctness with practical usability.

Durable vs adaptable color

To avoid a one-size-fits-all system—or a fully local free-for-all—we categorized semantic color tokens into durable and adaptable sets.

• Durable tokens preserve familiarity across themes: shared surfaces, default text, baseline borders, and predictable states.
• Adaptable tokens allow controlled variance for audience needs, such as brand expression, navigation emphasis, and primary actions.

Surface values were intentionally defined as durable. Keeping surface relationships consistent across themes preserved elevation clarity— especially in dark mode, where shadows are unreliable—and ensured depth and hierarchy remained legible.

Contrast as a system constraint

Contrast was treated as a foundational constraint rather than a last-mile check. Palettes were designed to meet AFT contrast expectations when used as intended, especially across common component pairings.

• Normal text and interactive components target a minimum contrast ratio of 7:1
• Graphical objects and non-text indicators target at least 3:1
• Disabled states intentionally meet a 4.5:1 minimum so content remains understandable even without interaction

Teams still validate custom compositions with contrast checkers, but the system now does the majority of the work up front.

What changed

With clear palette structure and semantic mapping, theming became less about redesigning UI and more about configuring a system. Teams could reason about hierarchy, states, and surfaces with confidence—without relying on ad-hoc fixes or tribal knowledge.

Just as importantly, Alchemy gained a durable foundation for contextual themeability—allowing the system to evolve with new audiences and use cases without losing cohesion.