Cargill’s Trading & Analytics organisation runs 20+ business-critical apps, used daily by hundreds of people worldwide. Each was built in its own silo, over years, by different designers and developers.
In practice, that meant:
Separate code bases, separate UI, and libraries nobody owned.
BEFORE
Each app used similar colours, but its own components, hierarchy and UX. That led to inconsistency across products, for users and their workflows.
Tokens, then components, then patterns. Versioned, documented and shared.
We didn’t start again. With 20+ apps in production, a clean-slate release would have broken them, so we rebuilt Alpha in place and versioned it, from the foundations up: tokens first, then components, then patterns.
I started by auditing every component and colour. The old palette had 56 colours, picked by hand and tuned for dark mode. Hover and selected states broke in the light theme, form errors only worked on dark backgrounds, and placeholder text was barely visible. I helped rebuild the palette in the LCH colour space, so colours at the same step look equally light and equally saturated, and contrast is predictable in both themes.
The core decision was tokens. Palettes feed six semantic tones (neutral, primary, positive, negative, warning, info), and every tone has the same set of tokens. Designers apply them in Figma with Tokens Studio, they sync through GitHub, and developers use them in React with code completion and type safety. A change made in design or in code reaches both.
Using the LCH colour model, each core colour steps from 0 (lightest) to 130 (darkest) for consistent gradation.
The same semantic tokens in every tone, checked for accessible contrast and WCAG standards.
100’s of Figma components in the shared UI Library, rebuilt with tokens and aligned with React.
Every component built for dark and light themes. Controlled and managed by a centralised token system.
Token names were part of the original problem. They had no structure behind them, didn’t work with theming, and nobody could tell when or where to use them.
I set one naming pattern: tone, then role. primary.border, negative.accent, positive.foreground. Every tone has the same roles, so if you know one, you know them all. Each token points to a different palette step per theme, which is what makes switching between dark and light reliable.
Then people needed to know how to use it. I designed the documentation portal on ZeroHeight, linked to Figma and Storybook, as the single source of truth for designers and offshore developers alike.
App teams could contribute too, through a contribution model, so the system could grow without splitting again.
Alpha became the foundation for every Trading & Analytics app. Design-to-development time and effort dropped by 40%, UI became consistent across global teams, and all 20+ apps adopted it, new and legacy.
Design and engineering now work from the same tokens, the same components and the same source of truth.
