WLTH Design System
One system. Five products. A change ships everywhere or nowhere.
Designed a shared design and navigation system for WLTH's product ecosystem, enabling multiple apps to inherit consistent tokens, components, and layout patterns from a single foundation.
WLTH runs five products. Without a shared system, each one independently maintained its own components, tokens, and navigation. A header change meant touching five codebases. A colour update meant coordinating across teams. The products looked related but weren't structurally connected.
The system needed to be adopted, not just available. Building it as a Nuxt layer — a shared module that merges directly into each product at build time — made inheritance structural rather than manual. A product installs the layer and gets tokens, components, and navigation automatically. It doesn't have to remember to stay in sync.
Colour, type, and semantic tokens defined once and inherited everywhere. Components pre-configured to the WLTH design language. A shared navigation layer that every product gets from a single source of truth — product switching, entity selection, notification patterns, all consistent without coordination overhead.
All 5 WLTH products now run from the same layer. A token change propagates everywhere. A navigation update ships once. A new product starts with a working interface on day one, not a blank Figma file and a conversation about which button radius to use.
The less visible outcome is what teams stopped doing: rebuilding the same component five ways, re-implementing navigation from memory, arguing about whether a product should match the others. The system removed those decisions by making them upstream.