Energy Stack — design iteration Latest site →

Design iteration log

Ten rounds of iteration with Codex

Energy Stack went through ten rounds of design critique and implementation in collaboration with the Codex agent (gpt-5.5, xhigh reasoning). Each round is preserved as its own deployment so you can scrub through the progression and see what changed where. Snapshots oldest to newest, top to bottom.

Pre-Codex starting state

v6-spectrum

es-v6-spectrum.pages.dev

Navy chrome `#1E3A8A`. Nunito 800 uppercase gradient wordmark. Four topic accents (solar gold, battery cyan, EV purple, heat coral). Card-grid Topics section. The baseline you and I had already iterated to before the Codex loop began.

Rounds 1-4 · structural pass

v7-r4

es-v7-r4.pages.dev

Functional hero replaces the generic blurred blobs (Codex called them "Stripe or Vercel-adjacent decoration"). Hero stack becomes clickable. Mobile coverage row replaced with a 2×2 linked topic matrix. Four-segment topic-coloured stripe added across the top of each dark section as taxonomy scaffolding. Calculator accessibility hardened (inputmode, aria-describedby, aria-live output, mobile field stack). Reference fact-strip. Article "Best answer" callout. Index pages (About, KB, Tools, Reference) lightened to light heroes; topic pages and homepage kept dark hero anchors.

Round 5 · brand system opened up

v7-r5

es-v7-r5.pages.dev

Chrome moves from navy `#1E3A8A` to near-black `#0B1220`. Wordmark drops the spectrum gradient and Nunito uppercase, becomes solid Inter 800 Title Case "Energy Stack". Hero card colour shifts to deeper `#172554`/`#0F172A` for visual depth without the whole site being framed in blue. Codex's argument: the icon already carries the spectrum; the wordmark should provide authority and calm.

Round 6 · adversarial pass and partial walkback

v7-r6

es-v7-r6.pages.dev

Codex argued against its own Round 5 changes. Adversarial conclusion: near-black overcorrected and Inter wordmark lost too much identity. Walked back to blue-black `#0F2A4F` chrome (borders `#06152A`) and Nunito Sans 900 Title Case wordmark. References cited: GOV.UK colour guidance, DfE design system, NN/g logo recall research, Octopus and OVO comparators.

Round 7 · tool honesty and CTA specificity

v7-r7

es-v7-r7.pages.dev

Battery sizing, EV running cost and Heat loss check (the three calculators that don't actually exist yet) now visibly tagged as "Planned" and styled as non-clickable. Solar payback remains the only live calculator. Hero CTAs change from generic "Guides / Calculators / Articles" pills to action labels: "Start with solar →", "Run a calculator", "Read the decision guides". Tools section heading tightened from vague to concrete. Freshness signal added.

Round 8 · publication-led homepage

v7-r8

es-v7-r8.pages.dev

The card-grid Topics section is replaced with a three-column editorial layout: Latest updates, Most read, Jump in by topic. The article gains a reusable Evidence-and-method aside containing last reviewed date, primary sources and applies-to scope. The intent: shift from "directory of sections" to "publication that maintains its content".

Latest

Rounds 9-10 · final clean-up

v7-r9

es-v7-r9.pages.dev

Second adversarial pass surfaced the remaining issues: "Most read" was borrowed magazine furniture (renamed to "Start here / Useful first reads"); 404 risks in Latest-updates links (rerouted to existing topic pages); mobile column order put Topics last instead of first (corrected via Tailwind order utilities); article provenance had two competing trust modules (consolidated into one Evidence-and-method aside). Final pass.

Verdict at Round 10

Design loop closed

Ten rounds of critique and implementation between Claude and Codex, with two explicit adversarial passes (Rounds 6 and 9) where Codex argued against its own previous recommendations. The chrome travelled navy → near-black → blue-black. The wordmark travelled gradient Nunito uppercase → solid Inter Title Case → Nunito Sans 900 Title Case. The homepage travelled card-grid Topics → editorial three-column with Latest updates + Start here + Topics, in that desktop order, reordered on mobile. The article gained a single consolidated Evidence-and-method module replacing a duplicated trust block.

Outstanding for the SvelteKit rebuild: real search across knowledge base and articles, an original home-energy-system diagram in the hero (Codex flagged the current stack matrix as still slightly SaaS), individual KB sub-pages for the seven topic guides per pillar (currently only Solar > Inverters exists), and the three unbuilt calculators. These are content/feature work, not visual design work.

Full iteration log lives in the Energy Stack Collective on nc.scarrott.uk under "Codex design iteration".