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
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
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
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
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
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
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".
Rounds 9-10 · adversarial cleanup
v7-r9
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).
Round 11 · stripe moves into the chrome
v7-r11
Stripe placement consistency fixed. The 4-segment topic-coloured stripe now lives permanently in the chrome, immediately below the navy header, on every page. Previously it was attached to whichever first section came after the header, which made the surface below the stripe shift between dark and light as you navigated. Guide counts removed from homepage and topic shortcuts since the underlying pages don't yet exist. "Updated this week" replaced with "Reviewed May 2026" — a real dated review rather than a soft claim. Footer Reference column de-linked for the three placeholder pages.
Round 12 · thin masthead on index pages
v7-r12
Codex ranked five hero-treatment alternatives and recommended option d: heroes only on the homepage and topic pages, index pages get a thin masthead row, articles and KB sub-pages stay tight. Applied to About, Knowledge base index, Tools index and Reference index. Title scale tightened, lede shrunk, kicker removed, vertical padding halved.
Round 13 · launch-hardening
v7-r13
Codex's final verification pass (with live HTML provided inline so the sandbox issue from r10 was resolved) confirmed the design is coherent and surfaced the remaining issues as launch-hardening rather than design: article meta still said "Updated this week" (fixed to "Reviewed 22 May 2026"), the article promised a changelog that didn't exist (claim removed), homepage footer "Single vs three-phase" pointed to /reference/ index instead of the actual sub-page (fixed), and the homepage had no canonical or Open Graph metadata (added).
Round 14 · stripe properly in sticky chrome
v7-r14
Matt flagged the r11 stripe implementation had the worst of both worlds: it moved away on scroll because it sat below the sticky header, and it was full-width when content was column-width. Moved inside the sticky header element with the max-w-1240 content container, so it travels with the header on scroll AND aligns to content width.
LatestRound 15 · Technical Broadsheet typography
v7-r15
Matt's visual-ambition feedback: previous rounds slipped into UX hygiene. New brief from Codex: lift from "competent" to "first-class". Codex's seven-move visual diagnosis; first move implemented: replace the all-Inter type system with Fraunces 700 serif display for hero and article H1s, Inter for nav and body. Hero H1s sized with clamp(2.5rem, 6.5vw, 5.5rem), leading 0.95. Prose H2s in articles also moved to Fraunces. Typography is the largest single lever for editorial authority.
Where the loop got to
Thirteen rounds in, design loop closed
Thirteen rounds of critique and implementation between Claude and Codex, with three explicit adversarial passes (Rounds 6, 9 and 11) 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 four-colour stripe travelled top of hero card → top of light section → permanently pinned to the chrome. The homepage travelled card-grid Topics → editorial three-column with Latest updates + Start here + Topics. Index pages travelled dark hero → light hero → thin masthead. The article gained a single consolidated Evidence-and-method module replacing a duplicated trust block.
Codex's final verdict (Round 13): the design itself is now coherent. What remains is production-hardening, not design: real search across KB 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), the three unbuilt calculators (Battery sizing, EV running cost, Heat loss check — currently marked Planned), exact source links inside the Evidence-and-method block, full OG/SEO metadata across all pages, and replacement of the Tailwind CDN with a built CSS bundle. These belong with the SvelteKit production rebuild, not with another design iteration.
Full iteration log lives in the Energy Stack Collective on nc.scarrott.uk under "Codex design iteration".