01 / Define
Find the shared decisions.
Audit recurring choices across teams and turn product gaps into system priorities.
One design language. Every surface.
Lucid Air /
HMI Design System
A shared system for the vehicle, the app, and the teams behind them.
System strategy · Visual foundations
Components · Governance
Case study / Zhen Li
01
The experience is connected. The design system should be, too.
Overview
Lucid teams were designing across vehicle controls, mobile surfaces, and product workflows. I turned repeated, local decisions into shared foundations, components, and guidance—giving teams a consistent language to build with.
- My role
- Design system product owner. I defined the system direction and worked across design, engineering, product, and brand.
- Scope
- Vehicle HMI and mobile surfaces.
Foundations, component specifications, documentation, and adoption. - Team enablement
- Usage guidance, critique and implementation reviews, release notes, and feedback loops.
Shared experiences. Fragmented decisions.
The challenge
Feature teams created styles and components independently. Development was ticket-driven, and even simple behaviors required frequent alignment. The opportunity was to make those decisions reusable, explicit, and easier to trust.
02
Build the language. Build the way it works.
System strategy
I treated the system as a product. That meant defining its foundations and the day-to-day practices that would help teams adopt, review, and maintain them.
02 / Design
Make them reusable.
Define foundations, components, and interaction patterns around real product needs.
03 / Align
Create a review rhythm.
Bring design, implementation, and stakeholder reviews into the delivery process.
04 / Maintain
Keep the system moving.
Use documentation, versioning, and feedback to support adoption over time.
03
A premium brand. A precise product language.
Foundations
I translated Lucid’s visual language into reusable styles, tokens, and usage guidance. Each foundation connected the look of the interface to how teams applied it across displays and contexts.
01 / Color
Defined reusable color themes with documented values and usage rules for menus, drawers, cards, and modals.
02 / Iconography
Optimized a library of 397 icons in Figma, converting them into developer-ready assets to streamline the engineering handoff.
03 / Grid
Defined display-specific grids for the instrument cluster, center display, pilot panel, and rear console.
04
The details are part of the system.
Components
A reusable component needs more than a visual. I documented states, measurements, directionality, validation, and overflow so design and engineering could work from the same decisions.
04 / Specification
Documented component states, measurements, tokens, validation, spacing, directionality, and overflow to guide implementation.
05 / Localization
Defined English and Arabic variants with shared interaction logic and explicit left-to-right (LTR) and right-to-left (RTL) behavior.
05
A system teams could keep building on.
Governance
I made maintenance visible through changelogs, toolkit updates, and review rituals. Teams could understand what changed, why it changed, and how to adopt it.
06 / Changelog
Maintained a changelog of color-token updates and naming changes so teams could track each release.
07 / Release communication
Communicated toolkit updates covering new components, bug fixes, deprecated patterns, and adoption guidance.
Design review
Core team alignment on quality, patterns, and technical decisions.
Development review
Implementation evaluation with feature developers.
Stakeholder review
Cross-functional alignment on direction and strategy.
06
More coverage. More shared confidence.
Impact
Shared foundations, clearer ownership, and regular feedback helped the system become part of everyday product work.
25%–70%
Air system coverage
Increased coverage by turning repeated product decisions into reusable foundations and components.
80%
Feedback response rate
Clearer ownership and review rhythms made system decisions easier to evaluate.
$2M
Estimated annual savings
Reduced repeated design and implementation effort across product surfaces.
*Estimated efficiency savings, rather than a verified financial result.
A design system scales when people can trust it.
What I took forward
The Lucid work laid the foundation for Empathie, where I’m building AI products and developing a new design system for AI experiences.