Breathe ESG’s Webflow website. Eight solutions, one CMS.

Breathe ESG’s own team designed the new website. Rango built it in Webflow. Divyesh Vasani handled the build and ran the project, working directly with their team.

Breathe ESG builds sustainability infrastructure for AI: carbon accounting, compliance reporting and ESG data management, with an AI layer called INARA on top. The company was founded in 2022, is based in Bengaluru, and says more than 40 enterprises use its platform.

The new website went live in September 2026.

At a glance

• Client: Breathe ESG, sustainability software for carbon accounting, ESG reporting and ESG data, based in Bengaluru, India (founded 2022)

• Who the website is for: sustainability and ESG teams at enterprises, and the leaders who sign off on the software

• What we did: built Breathe ESG’s new website in Webflow, from their team’s design

• Design: Breathe ESG’s in-house team

• Webflow: Divyesh Vasani, who also ran the project

• Built with: Webflow and its CMS, GSAP with ScrollTrigger, Swiper and Cal.com

• Live: since September 2026, at breatheesg.com

Note: Breathe ESG’s team designed this website. Everything shown on this page is their design, built by Rango in Webflow.

The brief

Their design, built in Webflow.

Breathe ESG came with a new position and a finished design. The old website sold AI-powered ESG reporting and Scope 3 solutions. The new one says the company builds sustainability infrastructure, and its design leans on a pixel motif, live product views and motion.

The build had to cover:

• A new homepage, with an AI prompt typing into a field of pixels, a product dashboard that steps through the platform, and a diagram of the platform as a stack

• Eight solution pages, from carbon accounting and Scope 3 emissions to materiality assessment

• A resource library of guides, articles, comparisons, whitepapers and press pieces

• Pricing, webinars, about, careers and contact pages, plus four legal pages

We built it as a new Webflow project, not a rework of the old one.

One template, eight solutions

A new solution is a new CMS item.

Every solution page tells the same story: a promise, a product view, a customer quote, the problems, how the platform solves them step by step, what changes for the team, and a call to book a demo. So the solution pages are one CMS collection with one template. Carbon accounting, decarbonisation, ESG data management, materiality assessment, product carbon footprint, reporting, Scope 3 emissions and value chain all run from it.

Adding a ninth solution that follows the same story takes a CMS item. A different layout still needs design and build.

Eight solution pages, one CMS template. Each opens with its own promise and product view.

A resource library that kept its addresses

The resource library, still under /resources/.

Breathe ESG publishes a lot: guides to frameworks like BRSR, CSRD and TCFD, comparisons with other ESG platforms, industry whitepapers and press coverage.

The old website already served them at /resources/ addresses, and the new one keeps them there, with category pages for guides, articles, whitepapers, press and comparisons. Old resource URLs we checked from the Internet Archive still load on the new website.

The hub itself has a search box, topic filters, a featured article and a row for each type of resource.

The resource hub: search, topic filters, a featured article and a row for each type.

Motion that explains

Pixels, prompts and a platform stack.

Much of the design moves. The hero opens on a field of colored pixels, with an AI prompt typing into it under tabs for data, carbon, reporting, suppliers and insights. Further down, a product dashboard sits inside streaks of pixels and steps through the platform’s screens.

Sustainability should run on connected data: the dashboard steps through the platform’s screens.

A dark section then draws the platform as a stack: raw data sources at the bottom, from spreadsheets and utility bills to ERP systems and IoT meters, then the Breathe ESG infrastructure, a sustainability knowledge base, and INARA, the AI layer, on top.

The platform as a stack: data sources, the Breathe ESG infrastructure, a knowledge base and INARA on top.

The scroll animations run on GSAP with ScrollTrigger, and the carousels on Swiper.

Small things that help the team

For sales, partners and the press.

• Brand assets on right-click. Right-click the logo and a menu offers it as a PNG or an SVG, along with the company one-pager and a link to Breathe ESG on LinkedIn.

• Demos booked from the button. Book a Demo opens a Cal.com page for a 30-minute call.

• Pricing in the open. A free AI tier with 100 credits, the full platform and a custom enterprise plan, followed by a full comparison table.

• Analytics built in. Google Tag Manager and Microsoft Clarity run through Webflow apps.

Right-click the logo: logo files, the one-pager and LinkedIn.

Pricing: a free AI tier, the full platform and a custom enterprise plan.

On every screen

Seven breakpoints, from phones to 1920 pixels.

The website has layouts for phones, tablets, laptops and wide screens, with breakpoints from 479 to 1920 pixels, so the pixel grids and product views hold their shape at every size.

At phone width: the hero, the platform stack and the closing call to action.

Timeline

From a new Webflow project in late July to launch in September.

The new Webflow project was set up at the end of July 2026, and the website went live in September. Divyesh ran the project directly with Breathe ESG’s team.

What B2B SaaS teams can take from this

• Build repeating pages as CMS templates. With eight solution pages on one template, a ninth that follows the same story is a CMS item. A different layout is still a design and build project.

• Keep your URLs when you rebuild. A resource library is years of publishing. A new website is no reason to move it.

• Make motion explain the product. The pixel hero, the dashboard and the platform stack each show part of what Breathe ESG does.

• Put brand files where people look. Journalists and partners right-click logos. Give them the files there.

• Decide early what the team edits. Solutions and resources are CMS items; page layouts are not. New content goes in without touching the design.

Questions about this project

What did Rango do for Breathe ESG? Rango built Breathe ESG’s new website in Webflow from a design by Breathe ESG’s own team. Divyesh Vasani handled the build and ran the project, working directly with their team.

What is Breathe ESG? Sustainability software from Bengaluru, founded in 2022. It covers carbon accounting, Scope 3 emissions, ESG data management and compliance reporting, with an AI layer called INARA.

What is the website built with? Webflow and its CMS, with GSAP and ScrollTrigger for the animations, Swiper for the carousels and Cal.com for demo booking.

How are the solution pages built? As one CMS collection with one template. All eight solution pages run from it, so a new solution is a new CMS item.

What happened to the resource library? It stayed under /resources/, with category pages for guides, articles, whitepapers, press and comparisons, and the old resource URLs we checked still load.

Can Rango build a Webflow website from our design? Yes. Breathe ESG’s team designed this website and Rango built it in Webflow. We also design websites when a team needs both.

Have a design ready and need it built in Webflow? See how we work in Webflow, or how we design B2B websites.