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.
Round 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.
Round 16 · Energy Ledger grid on editorial block
v7-r16
Codex's move #2 applied to the editorial homepage block (Matt's flagged weakness). Heavy 4px chrome rule above the block, mono section code ("Section 01 · Now"), display-face section title at clamp(1.75rem,4vw,3rem). Each column has a thin top rule and mono kicker. Newspaper/manual aesthetic rather than card-grid SaaS.
Round 17 · Topic field-plates
v7-r17
Codex's move #4. Each topic page hero gets a distinct CSS pattern background that hints at the physics: Solar = angled ray rules, Battery = cell-grid, EV = radial purple, Heat = thermal radials. Plus an oversized section number (01-04) floating in the corner at clamp(10rem,22vw,18rem) text size. Topic pages now feel authored rather than recoloured.
Round 18 · Brutalist KB catalogue
v7-r18
Codex's move #5. Soft rounded cards on the Knowledge base index replaced with flat catalogue rows. Each row has a mono reference code (S-01, S-02, B-01, B-02 etc), topic-coloured, border-t between rows, hover fill. Reference content now scans like a standards document or library catalogue rather than a soft tile grid.
Round 19 · Article furniture
v7-r19
Codex's move #6. Article gains a topic-coloured side rail with a small rotated "Sect. Battery" mono label running down the page edge. Lede paragraph lifted from sans to Fraunces italic for editorial weight. Carries identity into the reading experience rather than only on the page header.
Round 20 · Four-colour register
v7-r20
Codex's move #7. The four-colour stripe gets a smaller recurring expression: a four-pip register mark (tiny solar/battery/EV/heat squares) sitting next to section kickers like "Calculators" and "Articles". Makes the brand asset behave like a publication device rather than just a header decoration.
Round 21 · Schematic hero
v7-r21
Codex's move #3, the risky one. Replaced the SaaS feature-matrix on the homepage hero with a real home-energy-system SVG schematic: roof plane in gold, inverter rectangle, branches in cyan to a battery cell-stack, in purple to an EV charging icon, in coral to a heat pump unit, then a dashed grid line at the bottom for import/export and tariff. Codex called this the most important visual move and the most memorable.
Round 22 · Taxonomy (Advice rename)
v7-r22
Matt's question: how do we differentiate articles, guides, news and knowledge base across only two sections. Codex's recommendation: 3 top-level nav (Knowledge base / Advice / Tools), 4 conceptual content types underneath, Updates lives at /updates/ but not in main nav. Renamed top nav "Articles" → "Advice". Added Update chips on homepage Latest Updates cards. Sentence-case the topic labels.
LatestRound 23 · Advice index consistency
v7-r23
Carries the Advice rename and the new content-type chips into the /articles/ index. New H1: "Articles, guides and updates" in Fraunces. Filter chips added: All / Article / Guide / Update, then topic filters. Type-filtering is wired as a visual pattern; the actual JS filter will land in the SvelteKit rebuild.
Where the second loop got to
Twenty-three rounds in, design loop closed
Two phases of critique and implementation between Claude and Codex. Rounds 1-13 hardened the underlying system: blue-black chrome, four-colour topic stripe pinned to the header, Nunito Sans 900 wordmark, publication-led editorial homepage, consolidated article provenance, thin mastheads on index pages, and three explicit adversarial walkbacks. Rounds 15-23 then went after first-class visual ambition: Fraunces serif display type, an Energy Ledger treatment on the editorial block, distinct field-plate patterns per topic page, a brutalist catalogue at the Knowledge base index, topic-coloured article side rails, a four-pip register mark, an original home-energy-system schematic replacing the SaaS-style feature matrix in the hero, and a clarified content taxonomy (Knowledge base / Advice / Tools) with type chips on cards.
Codex's closing verdict (Round 24) was "still needs work" but acknowledged a substantial visual lift between r14 and r23. The three moves it singled out as carrying their weight: the schematic hero (r21), the Technical Broadsheet typography (r15) and the Brutalist KB index (r18). What remains for the SvelteKit production rebuild: real search across KB and articles, the seven outstanding KB sub-pages per topic, the three calculators currently marked Planned, exact source links inside the Evidence-and-method block, OG/SEO metadata, replacement of the Tailwind CDN with a built bundle, and a final tightening pass on a few rounded-card SaaS regressions that survived the visual lift. These belong with the framework rebuild, not with another design iteration.
Full iteration log lives in the Energy Stack Collective on nc.scarrott.uk under "Codex design iteration".