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.

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.