The Argo design system was great, but only represented one site. We wanted one universal design system that could support multiple brands—each with its own visual identity—without fragmenting the product experience or the codebase.
That’s where design tokens became foundational.
We used design tokens to separate structure and behavior from visual expression. The components, patterns, accessibility standards, and interactions were shared across every product. What changed from brand to brand was the skin—colors, typography, spacing nuances, and motion—driven entirely by tokens.
In practice, this meant the same button, input, or layout component could be used everywhere. The component didn’t “know” what brand it was in. It simply consumed tokens. Switching brands was as simple as swapping a token set, not rebuilding UI.
We organized tokens into layers, starting with base values and moving up to semantic meaning. Components referenced tokens like “primary action” or “surface background,” rather than raw values. Each brand then mapped those semantic tokens to its own visual identity.
This approach gave us a lot of flexibility. We could support very different-looking brands while keeping the system consistent under the hood. It also made brand updates far less risky—visual changes could be made at the token level without touching components or interaction logic.
For teams, this reduced both design and engineering overhead. Designers didn’t need to reinvent patterns for each brand, and engineers didn’t need to maintain multiple versions of the same component. Everyone worked from the same system, with brand expression handled cleanly and predictably.
In the end, design tokens allowed Argo to act as a true umbrella system. We maintained consistency, scalability, and accessibility across products, while still giving each brand the space to look and feel like itself.