Project Overview
This organization operates several distinct consumer brands under one umbrella, each with its own design language, product teams and history. Over time, these teams had developed separate design systems, resulting in duplicated effort, inconsistent components and a lack of shared standards across web, mobile and in-vehicle platforms.
My role was to help lead the consolidation of these disparate systems into a single, unified foundation, one that could flex across brands without forcing every product to look identical, while giving design and engineering teams a shared source of truth to build from more efficiently.
Multi-Brand Token Architecture
The core challenge was building a system flexible enough to support multiple brand identities and platforms without duplicating work for every brand. We approached this by establishing a scalable design token architecture built on clear semantic aliases and modes. Brand specificity was handled directly through the token structure itself. Token themes and mode switching controlled the visual expression for each brand and platform state, allowing a single component to dynamically adapt its styling, color and spacing on the fly. This significantly reduced design and development debt while preserving the distinct visual identity of each brand.
Prototyping, Micro-Animations & Dev Handoff
Beyond static components, I built out interactive prototypes and micro-animations to define motion behavior and interaction states across the system, giving teams a clear reference for how components should feel, not just how they should look. I worked closely with developers throughout, using Figma's Dev Mode to hand off specs and interaction details directly, reducing ambiguity between design and engineering and helping ensure components were implemented consistently across platforms.
Accessibility as a Foundation
Rather than treating accessibility as a final QA pass, we've built it into the system from the ground up. This meant defining accessible color contrast ratios directly into the token system, establishing consistent focus states and interaction patterns across components and documenting accessibility requirements alongside each component's usage guidelines.Baking accessibility into the foundation, rather than layering it on afterward, meant every team building on top of the system inherited accessible patterns by default.
Documentation and Governance at Scale
Given the size of the organization, with many designers across multiple brands and product teams touching the system, governance was a critical part of the work. We've developed structured documentation templates covering component usage, do's and don'ts, accessibility notes and token usage guidelines, along with governance rules to help maintain consistency as the system scaled. These standards were designed to make it easier for new contributors to understand how and when to use components correctly, without needing direct guidance for every decision.
Built for What's Next
Beyond solving for current needs, we've also focused on making the system forward-compatible with emerging AI-assisted design workflows. This meant structuring components, naming conventions and token sets in a way that could be clearly parsed and understood by AI tools, not just human designers, laying the groundwork for more intelligent, automated workflows as those tools continue to mature.
