Crafted. Naturally.

This website serves as a practical demonstration of sustainable web design principles and methods. Below, we outline the key strategies employed in its development, ensuring a balance between functionality, efficiency, and environmental impact.

A Digital Colophon

Clean Hosting

Our site runs entirely on renewable energy. To help conserve power, we prompt you to close the site when switching tabs.

Page Weight Budget

Our webpages produce up to ten times less equivelent emissions than the A+ threshold set by Beacon. We achieve this with a static site, semantic HTML, and a single CSS and JavaScript file under 10KB.

Low-Impact Mode

When local energy grid intensity is high, our site disables images and adjusts the layout, inspired by The Green Web Foundation's Grid-Aware Websites project.

Nature-Reactive Visuals

Our website's appearance changes based on air pollution data, shifting the background colour to a deeper red as air quality declines.

Optimised Images

Images are dithered and compressed to under 30KB. Hovering over an image displays its file size in the website navigation. CSS blend modes are used to replace extra colour data, keeping files smaller.

Minimal Design

We use system fonts instead of web fonts, and replace SVG artwork with ASCII symbols.

Resources That Shaped Our Process

Explore the research, tools, and websites that guided our approach to developing our website.

A Responsible Framework

Every service and API was selected not only for its functionality but also for its alignment with our values of sustainability and efficiency. Each service was evaluated using Beacon or by reviewing each company's sustainability reporting, while each API was assessed using Are My Third Parties Green?.

Overbrowsing on GitHub

Transparency is key to what we do. Explore the project's code on GitHub.