Source · ecosia.org + blog.ecosia.org · light-mode adaptation

A real design system, a homepage, three landing pages — inverted to light mode.

Real CSS-extracted color tokens from Ecosia, real Ecosia logos from Wikimedia Commons, real Ecosia photography lifted from their Ghost CDN, free-font substitutes for Surt + Founders Grotesk. The chassis is white & cream; the green stays signature.

The system

Tokens, type, and components — extracted, not invented.

Twelve color swatches with real hex values, a complete type ramp on Bricolage Grotesque + Inter + Manrope, the pill-button language, the photo treatment, the do/don’t list, and the photo library that ties it all together.

Open the design system →

Real work,
real trees.

The homepage

Everything the system ships at full strength.

Hero, impact dashboard, featured project split, three pathways, deep-forest quote band, how-it-works strip, story cards, and a closing planting CTA. Same tokens, full beat, every signature gesture used at least once.

Open the homepage →

Three landing pages on the same system.

Click to open

Landing 01

First-time visitors

Get involved

A walk-through for first Sundays, first Saturdays, and first weeks — what to expect, four real volunteer roles, weekly schedule strip, and an honest FAQ.

Open landing →

Landing 02

Featured project

Queen Creek oak corridor

A program/project landing with project sticky-bar, six field-update cards, a deep-forest pull quote, four-cell number band, six partner cards, and a planting sign-up CTA.

Open landing →

Landing 03

Generosity

Give

Working donate widget with frequency toggle & impact math, four-cell quarterly breakdown, three giving methods, three trust commitments, two donor stories, and a closing $25-monthly CTA.

Open landing →