Inconsistent UI
The same "energy generated" figure used three fonts, two units (kWh vs MWh) and different colours for "up".
Who feels it: homeowners and operators comparing numbers
Overview
Project overview
HelioNova’s products had grown separately. The customer app, the installer portal and the operations console each had their own buttons, greens and chart styles, and the same "energy generated" number looked different in every one.
The goal was one system that feels warm and simple for homeowners, is precise enough for grid engineers, and is easy for any team to adopt without a framework migration.
The challenge
Problem statement and pain points
HelioNova had three products built by three teams over four years: the customer app (homeowners tracking rooftop solar and savings), the installer portal (surveys, quotes and installs) and the operations console (engineers monitoring wind and solar parks). Each grew its own UI. A UI audit of 140 screens found the same patterns rebuilt again and again, and the inconsistency was now costing time, trust and accessibility.
Problem statement
Designers and developers across HelioNova have no shared foundations or components. Every team recreates buttons, tables and metric cards in its own framework, so the same energy data looks and behaves differently in each product. This slows delivery, confuses customers who use more than one product, and leaves accessibility gaps that block public-sector and utility contracts.
140screens audited across 3 products
14different greens used as "primary"
9button styles, 6 table designs
38%of text failing contrast in dark mode
Slow, duplicated delivery
Each new feature rebuilt its own modal, table and metric card. Roughly a third of front-end effort went on UI that already existed elsewhere.
Who feels it: designers, developers, product managers
Accessibility gaps
Status shown by colour alone, missing focus states, and a dark mode that failed WCAG contrast. This blocked tenders that require AA.
Who feels it: users with low vision, sales and compliance
Mixed tech stacks
React, Angular and server-rendered pages meant a React-only library would leave two of three teams behind.
Who feels it: engineering leads planning migrations
No single source of truth
Design files, code and brand guidelines disagreed. Nobody could say which version of a component was "correct".
Who feels it: new joiners, QA, brand team
Weak trust in the data
Customers saw different savings figures in the app and in emails, which drove support calls and doubts about the product.
Who feels it: customers, support team
How might we
How might we give every HelioNova team one shared language for building energy products, one that works in any framework, meets WCAG 2.1 AA in light and dark, and makes energy numbers look the same everywhere?
Approach
My approach
- UI audit: screenshotted every screen across the three products and grouped duplicates by pattern.
- Foundations first: colour, type, spacing and icons, defined as tokens before any component was drawn.
- Component inventory: prioritised the 28 components that covered most of the audited screens.
- Plain HTML and CSS: every component ships as copy-paste markup, so it works with any stack.
- Documentation as product: a searchable site with live examples, code and accessibility notes for each component.
Design process
From audit to documentation
Audit
Inventory of every UI pattern
Define
Principles, tokens and naming
Design
Components, variants and states
Build
HTML and CSS with live docs
Govern
Contribution, versioning and adoption
Users
Who the system serves
Two groups use the design system directly, and two more benefit from it through the products built with it.
Primary · builds with it
Product designers
Needs
- Ready-made patterns for common screens
- Clear rules on when to use each component
- Light and dark versions of every component
- Tokens that match the code exactly
Pain points
- Redrawing the same table for every feature
- Guessing which green is "correct"
Goals
- Spend time on problems, not pixels
- Hand off with no surprises in build
Primary · builds with it
Front-end developers
Needs
- Copy-paste HTML that works in any stack
- Every state covered: hover, focus, disabled, error
- Accessibility handled in the markup
- Stable class names and tokens between versions
Pain points
- Rebuilding UI that exists in another repo
- Fixing contrast bugs late in QA
Goals
- Ship features faster
- Fewer UI bugs reported
End user · customer app
Homeowners
Needs
- Plain-language savings and generation figures
- Big, readable numbers on a phone
- Clear signs of what changed and why
- Reassurance that the system is working
Pain points
- Different figures in the app and emails
- Small text and low-contrast charts
Goals
- Know how much they saved this month
- Spot a problem with their panels early
End user · operations console
Grid & park operators
Needs
- Dense, scannable data tables
- Status that never relies on colour alone
- Consistent units (kW, MW, MWh) everywhere
- Dark mode for control rooms
Pain points
- Alerts styled differently in each tool
- Eye strain on bright screens at night
Goals
- Find a faulty turbine in seconds
- Trust the number on screen
Principles
Design principles
01
Naturally clear
Calm surfaces and a nature-inspired palette, so the data is what stands out.
02
Numbers you can trust
One way to show kWh, MW and savings, with units and change always labelled.
03
Accessible by default
AA contrast in both themes, visible focus, and never colour alone for status.
04
Works anywhere
Plain HTML and CSS with tokens, so any team can adopt it today.
Foundations
Colour: five scales from sunlight, canopy and sky
Each scale has ten steps. Components never use raw hex values; they use semantic tokens such as --hn-primary and --hn-danger, which switch automatically in dark mode.
CanopyPrimary brand, success, positive change
HelioSunlight accent, solar data, warnings
SkyInformation, wind data, focus rings
SlateText, borders and surfaces
EmberErrors and destructive actions
Foundations
Typography and spacing
Sora gives headings and numbers a confident, geometric voice; Public Sans keeps long reading comfortable. Spacing follows a 4-point scale with four corner radii.
12.4 MWh generated today
Your rooftop panels covered 82% of this month’s bill. Here is how that compares with last year.
4
8
12
16
24
32
48
64
sm · 6
md · 10
lg · 16
pill · 999
Components
28 components in six families
The audit showed these 28 components covered most of the screens across all three products, including one built only for HelioNova: the energy stat card.
Trigger and chooseActions
- Button
- Dropdown menu
- Chip
Collect inputForms
- Text input
- Select
- Checkbox
- Radio group
- Switch
- Slider
Report statusFeedback
- Alert
- Toast
- Progress
- Skeleton
- Empty state
- Tooltip
Move aroundNavigation
- Breadcrumb
- Tabs
- Pagination
- Stepper
Group contentContainers
- Card
- Accordion
- Drawer
- Modal
- Divider
Show numbersData
- Data table
- Energy stat
- Badge
- Avatar
Documentation
One template for every component page
Every component page follows the same structure, so once people learn one page they know them all.
01 · Purpose
One sentence on what it is for, in plain language.
02 · Live examples
Variants and states rendered as real, interactive HTML.
03 · Code
Copyable markup with a one-click copy button.
04 · Usage
When to use it, and when to reach for something else.
05 · Accessibility
Keyboard behaviour, ARIA roles and focus notes.
Accessibility
WCAG 2.1 AA in light and dark
Contrast
- Text ≥ 4.5:1 in both themes
- UI borders ≥ 3:1
- Dark theme tuned separately
Keyboard & focus
- Every control reachable by Tab
- Visible Sky-blue focus ring
- Modals and drawers trap focus
Meaning
- Status uses icon + text, not colour
- Tooltips work on focus, not just hover
- Reduced-motion respected
Low-fidelity wireframes
Greyscale wireframes of every key page, desktop and mobile
Each page was wireframed in greyscale first, with the same regions as the final site. On mobile the sidebar collapses behind a menu button, card grids stack into one column, colour scales wrap into two rows, and data tables turn into cards.
Desktop · 9 pages
01Overview
GET STARTEDOverviewInstallationFOUNDATIONSColoursTypographySpacing & shapeIconsCOMPONENTSAccordionAlertBadgeButtonCardData tableEnergy statModalTabsToast
☘ HelioNova EnergyHelioNova Design SystemPowering Tomorrow, Naturally.
Get startedBrowse components
28Components
4Foundation guides
AAContrast
Colours
Typography
Spacing
Icons
Accordion
Alert
Avatar
Badge
02Get started
GET STARTEDOverviewInstallationFOUNDATIONSColoursTypographySpacing & shapeIconsCOMPONENTSAccordionAlertBadgeButtonCardData tableEnergy statModalTabsToast
Home / Get startedGet started1. Add the stylesheet
2. Use the tokens
3. Copy a component
Button
Card
Alert
03Colours
GET STARTEDOverviewInstallationFOUNDATIONSColoursTypographySpacing & shapeIconsCOMPONENTSAccordionAlertBadgeButtonCardData tableEnergy statModalTabsToast
Home / Foundations / ColoursColours
Canopy
Helio
Sky
Slate
Ember
Semantic tokens04Typography
GET STARTEDOverviewInstallationFOUNDATIONSColoursTypographySpacing & shapeIconsCOMPONENTSAccordionAlertBadgeButtonCardData tableEnergy statModalTabsToast
Home / Foundations / TypographyTypographyType scale
DISPLAYAa
BODYAa
18pxSunlight to savings
15pxSunlight to savings
12.5pxSunlight to savings
10.5pxSunlight to savings
9pxSunlight to savings
05Components index
GET STARTEDOverviewInstallationFOUNDATIONSColoursTypographySpacing & shapeIconsCOMPONENTSAccordionAlertBadgeButtonCardData tableEnergy statModalTabsToast
Home / ComponentsComponents
Accordion
Alert
Avatar
Badge
Breadcrumb
Button
Card
Checkbox
Chip
Data table
Divider
Drawer
06Button
GET STARTEDOverviewInstallationFOUNDATIONSColoursTypographySpacing & shapeIconsCOMPONENTSAccordionAlertBadgeButtonCardData tableEnergy statModalTabsToast
Home / Components / ButtonButton
VariantsStatesSizesAccessibility
PrimarySecondaryGhostDisabled
Accessibility
07Data table
GET STARTEDOverviewInstallationFOUNDATIONSColoursTypographySpacing & shapeIconsCOMPONENTSAccordionAlertBadgeButtonCardData tableEnergy statModalTabsToast
Home / Components / Data tableData table
SiteTypeOutputStatus
● OK
● OK
● OK
● OK
● OK
‹ 1 2 3 ›
08Energy stat
GET STARTEDOverviewInstallationFOUNDATIONSColoursTypographySpacing & shapeIconsCOMPONENTSAccordionAlertBadgeButtonCardData tableEnergy statModalTabsToast
Home / Components / Energy statEnergy stat
Generated today12.4 MWh▲ 8% vs yesterday
Bill offset12.4 MWh▲ 8% vs yesterday
Battery12.4 MWh▲ 8% vs yesterday
VariantsStatesAccessibility
09Modal
GET STARTEDOverviewInstallationFOUNDATIONSColoursTypographySpacing & shapeIconsCOMPONENTSAccordionAlertBadgeButtonCardData tableEnergy statModalTabsToast
Home / Components / ModalModal
Switch off inverter?
CancelSwitch off
Accessibility
Mobile · 8 pages
M1Overview
☘ HelioNova EnergyHelioNova Design SystemPowering Tomorrow, Naturally.Get startedBrowse components
28Components
4Foundations
AAContrast
M2Get started
Home / Get startedGet started1. Add the stylesheet
2. Use the tokens
3. Copy a component
Button
M3Colours
Foundations / ColoursColours
Canopy
Helio
Sky
Slate
Ember
M4Typography
Foundations / TypographyTypography
DISPLAYAa
BODYAa
Sunlight to savingsSunlight to savingsSunlight to savingsSunlight to savingsM5Components
Home / ComponentsComponents
Accordion
Alert
Avatar
Badge
M6Button
Components / ButtonButton
VariantsStatesA11y
PrimarySecondaryGhost
Accessibility
M7Data table
Components / Data tableData tableRows become cards on mobile
Site name● OK
Site name● OK
Site name● OK
Site name● OK
M8Energy stat
Components / Energy statEnergy stat
Generated today12.4 MWh▲ 8% vs yesterday
Bill offset12.4 MWh▲ 8% vs yesterday
Battery12.4 MWh▲ 8% vs yesterday