UI/UX·Renewable Energy Firm·Production Deployed

Helios Clean Energy Dashboard

A design-forward, high-density data dashboard designed to visualize power generation, inverter status, and scheduled maintenance across distributed arrays.

DeliverablesUX Research, Design System, Responsive Web UI

RoleArchitecture & Engineering

StatusLive in Production

StackFigma, Design Systems, React

Moonutech Atomic Design Tokens

https://design-system.moonutech.studio

LIVE

Design Tokens & Component SpecsWCAG 2.1 AAA Compliant

Type Scale Hierarchy

Display Bold 36px

Body Sans 16px / 1.6 Line Height

font-mono tabular-nums

60-30-10 Palette Math

Zero arbitrary color scatter

Micro-Interactions

<150ms bezier settling

The Operational Problem

The Challenge

Operators were overwhelmed by disparate telemetry feeds and poorly structured tables that obscured critical inverter fault alerts.

Moonu Tech Solution Engineering

Our Technical Solution

We established an atomic design system with strict color hierarchy, intuitive alert cards, and tabular typography to present critical telemetry at a glance.

Technical Implementation

Key Engineering Features

High-contrast telemetry cards with clear status hierarchy

Tabular numerals for instant metric scanning

Custom SVG state indicators without generic icon scatter

Comprehensive light/dark accessibility compliance

Project outcome

Adopted across operations team; reduced time-to-detect inverter anomalies.

Build Similar Platform

Technology Stack Deployed

FigmaDesign SystemsReactTailwind CSSData Vis