Verdant
See where a site’s energy goes.
Verdant makes renewable energy easier to understand through the relationships that make a system useful. A cool white energy canvas connects generation, conversion, site demand and storage through original isometric hardware illustrations. Rounded source controls switch solar, wind and storage scenarios, while clear readout plates show balanced example flows. Selecting a component brings its role into a dark context bar. Graphite text, slate surfaces and solar yellow accents keep the technical information clear. Field photography carries the story into the landscape, and the horizon symbol connects natural potential with ordered infrastructure. A compact site planner provides a practical starting point for a future connection.
- Role
- Brand identity and frontend design
- Year
- 2026
- Platform
- Responsive website
- Status
- live
The problem
Energy totals need the relationships between source, storage and demand to be useful. The workspace should keep connected hardware, balanced values and operating explanations visible together.
What I built
A renewable systems website with balanced example flows, interactive isometric nodes, field project studies and a local project-outline form.
Inside the product.
Screens from the working product, with demonstration data.
Desktop website
Original isometric hardware sits on a cool white canvas with slate readout plates and a graphite context bar. Sora headings, Manrope annotations and solar yellow controls separate the operating roles.
Scroll sideways to inspect the interface.
The choices behind it.
Brand identity and frontend design
Give the flow a clear surface
Original isometric hardware sits on a cool white canvas with slate readout plates and a graphite context bar. Sora headings, Manrope annotations and solar yellow controls separate the operating roles.
Balance the examples across every source
Solar, wind and storage choices update the complete balanced flow in kilowatts. Selecting a component shows its role beside the diagram, keeping generation, reserve and demand connected.
Field lines beneath a rising sun
A rising sun sits over three field lines, connecting natural energy to a considered, ordered landscape.
From start to finish.
- Choose an energy source
- Inspect the connected flow
- Read a node’s operating context
Build details Stack, scope, and implementation
Built with
- React 19
- TypeScript
- Vite
- CSS
Areas
- Web design
- Brand identity
- Renewable energy
- Sustainability
- Architecture
- Landing page