NUBE Design System

Gevo needed a way to scale a consistent, accessible brand system across product dashboards and public marketing sites while supporting product-level theming (e.g., Production Analytics, Customer Portal). I designed a multi-tier token system enabling consistent color, spacing, and typography across web and mobile.

Role:

Lead Product Designer

Company:

Gevo

Industry:

Climate Tech

Problem

Multiple teams used inconsistent color palettes and spacing scales, causing visual drift.
No semantic tokens — designers/engineers referenced raw hexes; engineers reimplemented styles inconsistently.
Brand updates required tedious multi-repo changes and coordination.
Need to support theme variants for B2B customers and accessibility (contrast) requirements.

Roles

Lead Product Designer (Design Systems owner) — token architecture, naming conventions, rollout strategy.
Partnered with 2 frontend engineers and 2 product managers.

Solution

Built a 3-tier token taxonomy: Core (raw values), Semantic (tokens used by components), Component (overrides/variants).
Design ↔ Engineering Token Synchronization Pipeline: Implemented an end-to-end token sync workflow to guarantee parity:
Component Library Modernization: Rebuilt or refactored the top 20 highest-traffic components using semantic tokens
Accessibility Foundations Baked Into Tokens: Accessibility no longer lived in documentation—it was coded into the system

Process

Audit of product UI tokens and CSS variables.
Defined taxonomy and naming guidelines (documented).
Implemented Figma token libraries.
Pilot: applied tokens to top 20 components, validated in staging, shipped with QA checks.

Impact

Reduced visual inconsistencies by ~45% (tracked via weekly visual audits).
Time-to-brand-update reduced from weeks to ~1 day for global token changes (estimate).
Enabled 2 teams to ship theme variants

Lessons

Governance needed early — token changes require a lightweight approval flow.
Next Steps: Create a token deprecation policy and automation for token repo.