Demand Climate Justice

Demand Climate Justice is a coalition of 200+ grassroots organisations across the Global South. The platform carries their campaigns: actions, petitions, and briefings that have to load on a shared phone over 2G in Manila as reliably as on fibre in Berlin. I designed and built the site — static-first Astro, motion used as punctuation, and a content model that translators run without engineers.

Campaign sites usually optimise for the newsroom demo: heavy hero video, parallax everything, a cookie wall, and a 9MB payload that excludes exactly the people the campaign claims to represent. The coalition's brief inverted that — the primary audience is an organiser on an entry-level Android with intermittent connectivity, and the secondary audience is a journalist on deadline. Both need the same page to work in under three seconds.

The second constraint was voice. Eleven languages at launch, several right-to-left, translated by volunteers on their own schedule. The design could not depend on line counts, text direction, or any one language's rhythm — and it had to feel urgent in all of them.

The performance budget is the brief

Every page holds a hard budget: 150KB total transfer, zero client-side JavaScript by default, interactive in one round trip. Astro's static output does most of the work — JS is opt-in per island, and only two islands exist site-wide (the petition form and the language switcher). Images ship as AVIF with aggressive art-direction crops; the largest asset on the median page is a headline, which is how it should read.

The budget is enforced, not aspirational: CI fails any PR that pushes a page over it, with the size diff printed in the check. Volunteers adding content cannot accidentally break the audience the site exists for.

Urgency without decoration

A justice campaign earns attention with what it says, so motion works as punctuation, never as furniture. Reveals are scroll-driven and CSS-only where the browser allows; the single GSAP timeline on the homepage animates one thing — the campaign's counter of signatures — because a number climbing is the argument. Everything honours prefers-reduced-motion by replacing movement with opacity, not by removing information.

The visual temperature does the emotional work instead: a warm ember palette on near-black, sampled from protest photography at dusk, that survives both AMOLED phones and newsprint reproduction.

Eleven languages, one layout

The grid is direction-agnostic: logical properties everywhere (no left/right, only start/end), type scales defined per-script so Arabic and Devanagari sit on the same visual rhythm as Latin, and every component tested against the longest German compound and the shortest Tagalog verb the translators could find. RTL is not a mirrored afterthought — it is the same stylesheet.

Translators work in Decap CMS against a locked content model: fields, not freeform pages. A missing translation falls back to English with a visible marker rather than a broken layout, so partial launches are shippable — which is how eleven languages went live in six months on volunteer time.

The toolkit is the product

The pages exist to move people to act, so the action surfaces got the engineering attention: petition forms that submit over flaky connections (queued retry, optimistic confirmation), share cards generated per-campaign and per-language at build time, and a press kit that downloads as one file. Organisers embed any campaign block on their own org's site with a copy-paste snippet — the coalition's reach is its member sites, not its domain.

Dummy numbers, real shape: the platform carried three coordinated global actions in its first year without an engineer on call — the CI budget, the locked content model, and the static architecture held. The site loads where its audience lives, which was the entire brief.

11

languages at launch

incl. RTL — one stylesheet, no forks

148KB

median page transfer

budget enforced in CI

100

Lighthouse performance

on throttled Moto G4 profile

40+

countries of traffic

majority on mobile connections