Volt Design System — Rift Labs

David Energy’s two product teams, Small Commercial and Residential, shared one engineering team but had developed their interfaces independently. As the company scaled, the inconsistencies became a real problem: slowing development, confusing users who touched both products, and diluting brand trust. Volt became the single source of truth.

We built Volt to unify two diverging product teams under one visual language, enabling faster shipping and consistent brand expression across David Energy’s platform.

Context

Two products, one fragmented experience

An audit of both product interfaces revealed the extent of divergence: different button styles, inconsistent spacing, competing color palettes, and duplicated components built slightly differently. The engineering team was reconciling differences instead of shipping features.

We also audited for accessibility compliance and found gaps: inconsistent color contrast, missing ARIA labels, and non-standard focus states. Volt fixed all of it at the system level.

Foundations

Tokens, typography & iconography

Everything in Volt starts at the token level. Colors, spacing, and type are defined as primitives that both products reference, meaning a brand update cascades automatically instead of requiring a manual sweep across every component.

Volt iconography — 12 energy-domain icons and two illustration sets for residential and commercial contexts

Volt custom illustration set — four scenes covering EV charging, home energy monitoring, home-to-vehicle connection, and energy analytics

Component Library

Six principles that guided every component

Design principles guiding every Volt component

Accessible: WCAG-compliant color contrasts, readable typography, comprehensive ARIA labels
Atomic: UI broken into atoms, molecules, and organisms for maximum reuse
Soft 8-pt grid: Scalable layout structure ensuring visual balance across devices
Extensive: Broad component coverage with thorough documentation
Flexible: Customizable for different contexts while maintaining consistency
Cross-functional: Serving product, marketing, and engineering with specialized variants

Data visualization components — mobile summary card and full-width energy usage bar chart for August 2023

UI components in context — filter bar, address cards, tooltip, and data table overlaid on a restaurant environment

Date picker component — daily single-select and weekly range-select variants side by side

In Production

The system at work

Volt shipped across both product lines simultaneously. The shared component library meant engineers built each pattern once, and the design team could focus on complex flows instead of re-solving basic UI.

David Energy platform in production — MacBook showing Energy Spending dashboard with demand and consumption chart

Outcome

Eliminated interface inconsistencies across product teams. Engineering velocity increased as the shared component library reduced redundant design-to-dev cycles.

Volt eliminated the visual inconsistencies that had accumulated across both products. The shared component library meant engineers built each pattern once, and the design team could focus on complex flows instead of re-solving basic UI.

We eliminated inconsistencies in simple designs, allowing us to focus on innovation.