Color system
Rebuilding Alchemy’s color foundation into a predictable palette + token model—so light and dark themes scale without breaking hierarchy, contrast, or design-to-engineering parity.
Where we started
Alchemy’s visual language originated from earlier AFT Human Interface Guidelines. The component library matured into a maintained platform used by dozens of teams, but the underlying color foundation wasn’t built for the variability of a large, decentralized product ecosystem.
Color usage drifted across products, light/dark parity required manual fixes, and design-to-code handoff often depended on interpretation instead of an explicit, shared model.
Problem
Color is one of the fastest ways a system fragments. Without a clear palette and usage model, teams keep re-deciding basics—what surfaces mean, which colors indicate interaction, how states behave, and whether compositions stay accessible across modes.
- 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
So what
Teams could ship UI, but the system wasn’t doing enough of the work. Color decisions accumulated as design debt—slowing delivery and eroding cohesion over time.
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 depends on—starting with color.
The goal wasn’t a new aesthetic. It was a model that encodes intent: predictable relationships, clear semantics, and durable behavior across themes and modes.
Key system decisions
We defined two palette types—each with a distinct job—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 remain stable across themes to preserve familiarity and predictable behavior.
- Accent colors. Curated hue ramps used to communicate interactivity, reinforce hierarchy, and enable theme or audience differentiation.
- Audience-specific accents. Blue was retained for Operator experiences to preserve continuity; purple was introduced for Associate themes to clearly differentiate the experience while keeping the overall UI calm and usable.
- 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 with contrast-based tooling (Leonardo Color) to establish accessible relationships across light and dark mode. Values were then tuned against real 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 grouped 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 tokens were intentionally durable. Keeping surface relationships consistent across themes preserves elevation clarity—especially in dark mode, where shadows are unreliable—and keeps depth and hierarchy legible.
Contrast as a system constraint
Contrast was treated as a system constraint, not 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, but the system now does most of the work up front.
What changed
With a 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 ad-hoc fixes or tribal knowledge.
Just as importantly, Alchemy gained a durable foundation for contextual theming—so the system can evolve for new audiences and use cases without losing cohesion.