Aurora Design System
Led design and implementation of GM's cross-brand React design system, with shared components, brand-specific token themes, and a WCAG 2.1 AA accessibility target.
Shared components for four GM brands
Aurora is GM's cross-brand design system for Chevrolet, Buick, GMC, and Cadillac. I led its design and implementation across React and React Native, authored the Design Token Governance Document, and supported adoption through documentation, workshops, and office hours.
Each brand had separate design and development teams rebuilding similar components. The system gave them shared components and token workflows while keeping brand-specific themes and behavior. The linked Aurora documentation provides a reference for the system.
In this case study
Keep brand differences in the token layer
I built a token-based theming system that allowed 60% of components to be shared across all 4 brands, while the remaining 40% could be customized per brand through token overrides. Teams could:
- Import shared Aurora components
- Apply brand-specific themes via token swaps (colors, typography, spacing)
- Extend components only when brand-specific behavior was needed
React and React Native components shared core logic, with adapters handling platform-specific rendering.
From governance to generated code
I designed and built automated workflows that synced design tokens from Figma Variables through Style Dictionary into React and React Native codebases, removing manual handoff steps between design and development. Naming conventions, modes, and approval rules defined how teams organized and changed tokens. A semantic token structure (primitive -> semantic -> component tokens) supported brand-specific themes.
Accessibility in component review
WCAG 2.1 AA was the accessibility target. Component work included:
- ARIA patterns and semantic HTML
- Keyboard navigation and focus management
- Screen reader testing with NVDA and JAWS
- Color contrast validation (4.5:1 minimum for text)
- Automated accessibility testing in CI/CD pipeline
I built Storybook documentation for component variants, states, and accessibility features so designers, developers, and QA could review the same implementations.
The governance behind a token change
Aurora's published token governance guide, marked WIP, makes the naming and review process available to inspect:
- Names carry structure. Namespace, category, property, variant, scale, and state describe a token's role.
- Changes have shared ownership. Design and development approve naming changes before implementation.
- Review precedes publication. Proposals include values, scope, inheritance, and usage examples. Approved changes enter the central repository with a record.
Helping four teams adopt one system
I trained and onboarded 50+ engineers and designers through workshops, documentation, and office hours. Onboarding time fell by approximately 40%, and release velocity across web and native platforms increased by 30%.
Project notes
60%
Component reuse across 4 GM brands (Chevy, Buick, GMC, Cadillac)
30%
Increase in release velocity across web and native platforms
50+
Engineers and designers trained on Aurora adoption