Edward Jones Universal Color Program
I led the Edward Jones design system (AXIOM) for 6 years. This case study examines how we expanded a constrained pragmatic color system into a brand-aligned, robust, tokenized color program—and delivered it across the enterprise.
By my third year at Edward Jones, the design system had evolved from an idea into a platform adopted across the majority of our 300-product portfolio. By enforcing a highly constrained color system, we achieved strong visual uniformity across experiences. Yet, new concerns were emerging.
The constrained color system
The color system emphasized a flat, light-mode context and focused on common interface needs such as actions and alerts. It was derived from what was already in practice—but never standardized.
Beyond "Edward Jones Gold", and a supporting cerulean blue, the broader system lacked a cohesive brand story. Many values felt arbitrary—functional, but not expressive.
Token naming reflected percieved colors like Cardinal (red), Cerulean (blue), and Jade (teal). The names described what the swatch looked like—not what it meant—which made consistent semantic usage harder to scale.
Although this constraint helped drive consistency, it proved unfit for the diversity of needs that scale demands.
When teams asked how color should work in dark mode, across financial asset classes, or in complex data visualizations, the system had no answer.
As a design systems team, we found ourselves collaborating with product designers to select one-off color values that conflicted least with the system while attempting to preserve semantic meaning. At one point, the marketing department hired an external contractor to define a separate palette specifically for data visualization.
This ad hoc approach was like patching leaks in faulty plumbing. We weren't building a scalable system—we were improvising.
In several products, our action.color began appearing as decoration—used for navigation backgrounds, illustrations, and charts. This decorative usage eroded its semantic signal. Users could no longer distinguish what was interactive or important at a glance.
We also received feedback about "too much white space." Further investigation revealed two underlying issues:
- A subset of users preferred higher information density
- Our interfaces lacked visual depth and tonal layering
Finally, designers increasingly introduced entirely new decorative colors, threatening the visual cohesion we had worked to establish.
By treating the semantic system as complete—optimized only for known needs—we left product teams without guardrails for emerging ones.
At scale, those cracks compound. Left unaddressed, they risk eroding usability, accessibility, and ultimately brand trust.
The universal color program
We needed a universal color system, inspired by our identity and diverse design needs.
Benefits
Increased flexibility
With nine hue palettes and both semantic and primitive tokens, you have a wider range of colors to choose from, allowing for more creative and precise design solutions tailored to specific user needs and contexts.
Improved consistency
By using semantic tokens that abstract color names to their functional use, the system ensures more consistent implementation across different platforms and products.
Theme adaptation
The system's structure facilitates the creation of themes, such as light or dark modes, by offering a wide suite of color values enabling us to meet contrast requirements while maintaining brand and functional integrity.
Brand alignment
The refined color system better reflects the Edward Jones brand identity, particularly through the strategic use of brand-defining Gold. This enhances brand recognition and coherence across different experiences.
The Edward Jones brand color story
Edward Jones' essential brand color is a yellow-orange hue known internally as Edward Jones Gold.
In the physical world, gold shifts under light: highlights warm and brighten, mid-tones desaturate, and shadows deepen. Additionally, warm colors subtly shift toward yellow as they lighten (Bezold–Brücke phenomenon).
To maintain perceptual authenticity, our warm palettes needed to behave like physical gold—shifting naturally across lightness values.
Related Article: Color wasn't the only missing foundation. Our lack of clear surface, elevation, and shadow guidance also made hierarchy difficult to express. I explore this further in my Surfaces & Elevation article (later).
Expanding without breaking what was there
New mechanics (simplified)
The new system would be built on mathematical relationships—not arbitrary selections. Each palette is generated using HSL (Hue, Saturation, Lightness). From one hue value, we generate a 15-step scale ranging from near-black to near-white.
Saturation curve
Human perception of saturation is non-linear. Highly saturated mid-tones appear artificially luminous (Helmholtz–Kohlrausch effect). With this consideration, we would implement a parabolic curve, dipping in the mid-tones and rising toward the extremes. By reducing mid-tone saturation we maintain perceptual balance, so colors feel evenly vibrant across the scale. By having a predictable curve, any new palette can be generated from a single hue and harmonize with the rest of the system.
Token naming conventions
Expanding the palette was one challenge, but it doesn't mean much without operationalizing it. Rather than defaulting to a common "0 = white" convention, we aligned step values directly to lightness:
Step = Lightness × 10
10% lightness → Step 100
50% lightness → Step 500
90% lightness → Step 900
Example:
gold.100 = 10% lightness
blue.500 = 50% lightness
green.900 = 90% lightness
This linear relationship makes the system predictable. Designers and accessibility specialists don't need to memorize individual color combinations to predict how they are likely to work together.
- Step 500 is always mid-tone
- Step 900 is always light
- Step 100 is always dark
Moving away from perceived color names, and toward generic color scales allowed us to better map to a semantic token system (actions, surfaces, etc.) and component token system (button, input, etc) without constantly inventing novel color names, or changing our vocabulary across modes.
cerulean was now blue.500 and was assigned to action.color, better enabling mode semantics like theme.light.action.color or theme.dark.action.color
Above: “Meme of Ice Cube saying 'Bye, Cerulean', a reference to the quote 'Bye, Felicia' in the 1995 film, Friday.”
Managing an enterprise-wide color migration
We implemented the token architecture across:
- React & Angular component libraries
- Multiple Figma libraries
- Marketing digital and print materials
Knapsack became the canonical source of truth for tokens. It enabled:
- Automated export of token values
- Synchronization between design and engineering
- Export of Figma variables
- Transformation into platform-ready formats via Style Dictionary
Impact beyond AXIOM design system
The program did more than solve interface consistency in regards to our digital product ecosystem, it was adopted into the broader Edward Jones brand guidelines, and unified all art departments.