Earthly: Sustainability and Eco-Tech Website Design

Earthly is a multi-layout website template for green energy companies, ESG consultancies and environmental service firms. I designed it in Figma and built it in Webflow. It includes four complete homepage layouts, twelve CMS-powered solution pages, a projects system with environmental impact data and 40+ pages in total.

A sustainability website serves more audiences than most sites. Corporate clients, institutional investors, regulators, environmental partners and prospective hires all arrive expecting something specific. Sustainability groups also tend to run several distinct service lines, such as renewable energy, ESG consulting and environmental services, which rarely fit a single generic homepage.

The other challenge is credibility. Sustainability claims are easy to make and hard to prove, so vague service descriptions quickly read as greenwashing.

I built four complete, standalone homepage layouts, each aimed at one clear audience:

All Solutions: for groups presenting multiple verticals under one brand

Energy Solutions: solar, wind, battery storage and EV charging providers

ESG Consulting: strategy, carbon accounting and reporting firms

Environmental Solutions: net zero planning, climate risk, compliance and waste management

Each layout comes with its own about and contact pages, and all four share one variable-powered design system. A company can use one layout alone or combine all four without redesign work.

For credibility, I built the projects section around measurable outcomes rather than adjectives. Every project links to a full case study page with detailed impact reporting.

Four homepage layouts: audience-specific, on a unified design system.

Twelve solution pages: CMS-powered, across energy, sustainability and environmental services, each with methodology, metrics and related case studies.

Impact-driven projects: real environmental outcome data on every project.

CMS blog with categories: Carbon Markets, ESG, Renewable Energy and Climate Action.

Video hero and earthy palette: light, calm and on-brand for the sector.

Earthly ships 40+ pages, including 4 homepage layouts, 12 solution pages, 4 about pages, 4 contact pages, projects, team, pricing, careers, blog and full utility pages.

Adding a solution or project is a single CMS entry, not a page rebuild. The variable system keeps all four layouts visually consistent, and the build is fully responsive across desktop, tablet and mobile.

Webflow live preview: earthly-tnc.webflow.io

Get the template on Contra: Earthly on Contra