Six audiences, one design system, and a qualified-lead funnel for a £55,000 programme.

Every page draws from a single tokens.css file, roughly 143 custom properties. A data-mode attribute flips the skin: investor pages (parents, coaches, gap year) run cream, claret and gold; the player page runs near-black with electric lime. Same components, one attribute.

The system carries hard rules: at most three colours visible in any fold, AAA text contrast, 44px minimum tap targets, and all motion gated behind prefers-reduced-motion. Mobile is the master, because most of the paid traffic arrives on a phone.

Six pages run on the academy’s WordPress site, each at the slug the campaign plan locked, so every market’s ads point at the same URL: Academy Year, the flagship for parents; Women’s Academy Year; the player pathway, written for 14 to 18 year olds; the gap year programme; youth development; and the page for coaches and partner academies. The application takes the fee by card.

The production host runs a web application firewall that blocks saving page HTML through any WordPress editor. Our first answer was an Elementor JSON compiler. It worked, until we discovered the firewall rejected the editor save itself.

So we threw the compiler away and shipped a plugin that renders each page from its slug. The client only ever saves an empty page, a save the firewall ignores. Less clever, more durable.