Heliograin: community solar co-op web UI concept (Landing / Overview / Credits)
An original high-fidelity web UI concept for neighbourhood solar co-ops: a landing page, a live overview dashboard and a credit-split modal. Fictional brand, DEMO data, not a real product.
Image credit: Tink
Heliograin is an original high-fidelity web UI concept for neighbourhood solar co-ops: streets where several homes share rooftop panels and a battery, then split the monthly credits between them.
The three views
Landing. The headline "Shared rooftops. One fair ledger." sits beside a warm illustrated street of panel-covered roofs. Floating cards preview live output, the shared battery and a monthly credit split. Four short feature cards explain the product without jargon.
Overview. A calm dashboard for the co-op treasurer. A KPI row shows output, local use, battery level and the credit pool. A 24-hour chart compares rooftop output, street demand and battery charging. Next to it are an abstract map of the rooftops, a member credits table and a dark battery card that shows the evening reserve.
Credits. A focused modal on a dimmed page walks through distributing a month of credits. You pick a split method (equal, by roof share or by local use), check a per-household before-and-after preview, choose whether to hold 5% for maintenance and send plain-language statements, then confirm the amount.
Visual system
- Warm paper background, white cards and ink text
- Sun amber as the single accent, with green for "ready" and blue for the battery
- Bricolage Grotesque headlines, Plus Jakarta Sans for the interface and JetBrains Mono for numbers
- Internally consistent sample numbers, so the split math adds up across screens
Notes
Heliograin is a fictional brand. All names, figures and addresses are DEMO data for illustration. It is a static design study, not an energy, billing or financial product. All artwork, including the street illustration and charts, is drawn in code; no photos or third-party logos are used.