Mark Learst - Senior Frontend & Design Engineer

The Challenge

General Motors had 4 distinct automotive brands--Chevrolet, Buick, GMC, and Cadillac--each with separate design and development teams building their own digital experiences. This fragmentation created:

Duplicated effort across teams building similar components
Inconsistent user experiences across GM's digital ecosystem
No centralized accessibility strategy or component compliance
Slow release velocity due to repeated work
Knowledge silos preventing cross-team collaboration

The goal was ambitious: create a unified design system that could serve all 4 brands while respecting their unique brand identities, embedding accessibility from the ground up, and dramatically increasing development velocity.

The Solution

I led the design and implementation of Aurora --GM's first cross-brand design system--serving as the single source of truth for React components across web and native platforms.

Cross-Brand Component Architecture

Built a theming system using design tokens that allowed 60% of components to be shared across all 4 brands, while the remaining 40% could be customized per-brand through token overrides. This meant teams could:

Import core Aurora components that worked out-of-the-box
Apply brand-specific themes via token swaps (colors, typography, spacing)
Extend components only when brand-specific behavior was needed

Token Pipeline Automation

Designed and built automated token workflows that synced design tokens from Figma Variables through Style Dictionary into React and React Native codebases. This removed manual handoff steps and ensured design-code consistency across all 4 brand teams.

WCAG 2.1 AA Compliance

Embedded accessibility into every component from day one. All Aurora components shipped with:

Proper 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

Storybook-Driven Development

Built comprehensive Storybook documentation for every component, showcasing all variants, states, and accessibility features. This became the central hub for designers, developers, and QA to reference Aurora's capabilities.

Technical Implementation

Multi-Platform Library Strategy

Unified React and React Native component library strategy that increased release velocity by 30%. Components were architected to share core logic while platform-specific rendering was handled through adapters.

Token Governance Rollout

Opened Rosen Studio and established naming conventions, modes, and approval rules to keep tokens consistent at scale. Implemented semantic token structure (primitive -> semantic -> component tokens) that gave teams flexibility while maintaining brand consistency.

Team Enablement

Trained and onboarded 50+ engineers and designers on Aurora adoption, reducing onboarding time by approximately 40%. Created workshops, documentation, and office hours to ensure smooth adoption across all brand teams.

Impact & Outcomes

Aurora transformed how GM builds digital experiences:

60% component reuse across Chevrolet, Buick, GMC, and Cadillac--eliminating duplicated work and accelerating feature delivery
30% faster release velocity as teams stopped rebuilding components and started composing from Aurora
WCAG 2.1 AA compliance embedded into design-to-code workflows, expanding user reach by making all digital experiences accessible
Shared design token governance reduced brand divergence and eliminated inconsistent theming
Cross-team enablement for 50+ engineers and designers building with Aurora

Aurora established GM's design systems foundation, giving teams a shared language for components, tokens, and accessibility across brands.

Aurora Design System

Impact