Design Systems · Zero Motorcycles
Live
From assets to a system: building Tuner's design foundation
I built a component library, color system, and token architecture from scratch, in parallel with the product, for Zero Motorcycles' B2B diagnostic tool.
Role
Product Designer
Company
Zero Motorcycles Inc.
Timeline
June 2025 — Present
Platform
Desktop B2B Application
dealerships live
fewer support tickets raised
75+
components across 6 pattern groups
The problem
No system, just assets
Tuner had visual assets but no shared system. As the product scaled, every new screen required rebuilding patterns from scratch, creating inconsistency, slowing handoffs, and leaving no single source of truth for how the product should look and behave.
Starting point
Assets without architecture
Basic colors and early components existed but nothing was documented or connected. The foundation was there, it just was not a system yet.
What existed
Basic color values, no naming
Some early components, no states documented
Built screen by screen, no reuse
What I introduced
Two-layer token architecture
Semantic naming conventions
6 pattern groups for consistent reuse
The system
Four layers, one source of truth
Foundation: Color
12-step orange ramp, neutral scale, and documented usage roles for every color in the system.
Token architecture
Primitives and Semantic variable collections in Figma, separating raw values from meaning to enable scalable updates across the entire library.
Component library
Components with documented states, bound to semantic tokens across all diagnostic workflows.
Patterns
Pattern groups covering every recurring UI problem in Tuner, from list items with 10+ states to ECU navigation trees.
Key decisions
Why, not just what
One action color, not many
Orange was chosen as the single action color to reduce cognitive load. In a diagnostic environment where technicians read status at a glance, multiple colors would create ambiguity.
Two-layer token architecture
Primitives store raw values. Semantics assign meaning. Separating the two means a brand update touches one layer without breaking the other.
Components named by role, not appearance
Naming components by what they do — not what they look like — made the library easier to extend and reduced decisions when adding new screens.
Outcome
A system that shipped
The design system was the infrastructure that made Guided Diagnostics possible at scale. Built in parallel with the product, it enabled consistent, fast execution from first flow to launch.
dealerships live
fewer support tickets raised
75+
components across 6 pattern groups
What’s next
This was v1
A more mature version would include all components bound to semantic tokens, MD files living alongside engineering’s codebase, and theming support built into the token layer for future Zero product lines.
v2 would include
Full component-token binding across the library
Engineering-side MD documentation per component
Theming layer for multi-product support