SYS.01 Objective
The Centre for Economic Security had just delivered the Bush House Agreement, the outcome of its 2026 Future of Security conference at King's College London.
The website was built for the world before it: event-focused, present-tense, structured around the conference as a one-off. The Agreement establishes a six-pillar architecture and names CES itself as the sixth, the Operational Delivery Ecosystem. A site still reading as a listing for a single event was describing an organisation that had stopped existing.
The brief arrived as a seven-point email: reframe the strapline away from its current aggressive tone, make the Agreement the manifesto and archive what preceded it, rewrite Future of Security in the past tense as an annual process, streamline the research network and name a head of it, add Working Papers as a subset of Research, remove the strategic partners section, and carry the branding through to a matching presentation template.
SYS.02 Creative response
Repositioning, editorial design system, WordPress build and CMS handover, the whole site, from the seven-point brief to a client who can run it without a developer.
- The repositioning. Manifesto replaced by the Agreement, earlier papers archived; Future of Security rewritten as an annual process; research network streamlined with a named head; Working Papers added, seeded with a US Army War College monograph; a new strapline, Building the Preparedness Economy
- Five pages as flat HTML, home, Future of Security, team, research, news, linked to each other so the whole site could be walked in a browser with no CMS involved
- Eight pages built in WordPress on a local development install: the five above plus the Bush House Agreement, Membership and Monitor
- Structured content, not pages. Team Members and Research Papers as custom post types with real fields, role type, ecosystem, paper type, publication, year, abstract, and custom taxonomies for ecosystems and authors
- Dynamic pages over that structure. Loop Grids pulling team by role type, research grouped by author, news from categorised posts. Eighteen team members, the research papers and six news posts populated
- Full CMS handover. The client publishes news, adds team members and research papers and manages the menu without a developer, and the live endorsement form survives the move intact
Designing in HTML instead of in the CMS
The design was iterated as five standalone HTML files rather than inside the page builder. That reads as a technical preference and it is not, it changes what the client talks about.
A change became a text edit and a browser refresh instead of a five-click builder cycle: seconds rather than minutes, and across three rounds of iteration that compounds into the difference between a fortnight and an afternoon. Nothing touched anything live, so the design phase carried no risk to a running site at all.
And because a flat mockup is obviously not a working website, nobody asked why the buttons didn't do anything. The only feedback was about the work: the hero feels too London-centric, which was true, and Big Ben was replaced with NASA's Earth's City Lights: global rather than local.
Sign-off arrived in three rounds of email inside twenty-four hours. The previous build for another client, iterated the conventional way inside the builder, had taken weeks to reach the same point.
The anti-AI design system
Between rounds two and three the client said the thing the whole project turned on:
She was right, and the useful response was not to add some photographs. It was to work out precisely why a page reads as machine-made, and invert each reason on purpose.
The tells are consistent and there are about a dozen of them: one sans-serif doing every job; a blue-to-purple gradient palette; rounded corners on everything; a centred hero over a vague future-facing headline; three equal feature cards at identical spacing; plastic illustration or smiling stock; copy full of leverage, holistic and delve into; no bylines, dates or attributions anywhere; perfect balance with nothing anomalous; the same section rhythm six times down the page; emojis; and a sticky corporate nav bar.
Every one was inverted:
What replaced them
- Typography as a pairing, not a monoculture. Playfair Display for display, Source Serif Pro for body, DM Mono for meta labels, three voices doing three jobs
- A warm institutional palette: cream, navy and gold, taken from the Agreement document itself, which was already set in a Bretton-Woods register and made the natural anchor
- Sharp corners. Zero border radius by default
- Asymmetry. Full-bleed heroes with the title anchored left rather than centred; asymmetric grids; table layouts; split-panel year plates
- Real photography, hand-picked from known sources by direct URL: never a keyword-driven random image service. Where no real portrait existed: a monogram and the caption portrait to be added, which is honest rather than a stock face standing in for a person who exists
- Editorial signals: roman numerals on articles, dinkuses between sections, drop caps on opening paragraphs, numbered figure captions with attribution, gold section rules
- Texture. An SVG paper grain over the body background: one line of CSS, and the single biggest visual difference on the list
The verdict
The client's response to the rebuilt design, in full:
That exchange, a specific criticism, a systematic answer to it, and a specific approval, is the reason the design system exists as a written thing rather than as taste. It can be handed to somebody else and applied without the argument being rerun.
Built by two agents, on a machine that could not break anything
The build ran on a local WordPress install on a laptop: no staging server, no hosting account, nothing reachable from the internet. Only once the foundation was proven did any of it go near a real environment.
It was executed by two AI agents working to a split: one writing the specification for each stage, the other running the admin and the visual build inside a browser. Four stages, foundation, the static pages, the pages that pull from structured content, and the cutover, each closed out against a written verification checklist rather than a look at the screen.
Two decisions asked of the client, not twenty
The engagement was deliberately quiet. Four contacts in total, and only two of them asked the client for anything. The mockups: these pages define the design, and signing them off starts the build. The staging URL: confirm the built site matches what you signed off. Then handover, a document and the credentials, not another review.
Nothing in between. No moodboards, no colour swatches to choose from, no fortnightly check-in. Each of those asks a client to approve a fragment, and a fragment approved in isolation is a surprise waiting at the end.
The cutover carries the same principle: built on a separate subdomain, multiple backups taken, the domain repointed only once, and the previous site kept archived and reachable. Every step reversible in minutes, so the decision to go live is not a one-way door.
SYS.03 Creative response
- The repositioning. Manifesto replaced by the Agreement, earlier papers archived; Future of Security rewritten as an annual process; research network streamlined with a named head; Working Papers added, seeded with a US Army War College monograph; a new strapline, Building the Preparedness Economy
- Five pages as flat HTML, home, Future of Security, team, research, news, linked to each other so the whole site could be walked in a browser with no CMS involved
- Eight pages built in WordPress on a local development install: the five above plus the Bush House Agreement, Membership and Monitor
- Structured content, not pages. Team Members and Research Papers as custom post types with real fields, role type, ecosystem, paper type, publication, year, abstract, and custom taxonomies for ecosystems and authors
- Dynamic pages over that structure. Loop Grids pulling team by role type, research grouped by author, news from categorised posts. Eighteen team members, the research papers and six news posts populated
- Full CMS handover. The client publishes news, adds team members and research papers and manages the menu without a developer, and the live endorsement form survives the move intact
SYS.04 Designing in HTML instead of in the CMS
And because a flat mockup is obviously not a working website, nobody asked why the buttons didn't do anything. The only feedback was about the work, the hero feels too London-centric, which was true, and Big Ben was replaced with NASA's Earth's City Lights: global rather than local.
SYS.05 The anti-AI design system
It's good but the drawback of AI design is that there are zero images. Like where has the logo even gone? The layout is lovely, but it feels so artificial and one dimensional without real world images and textures. This is a huge gamechanger if you can integrate this (thoroughly).
Every one was inverted:
SYS.06 What replaced them
- Typography as a pairing, not a monoculture. Playfair Display for display, Source Serif Pro for body, DM Mono for meta labels, three voices doing three jobs
- A warm institutional palette: cream, navy and gold, taken from the Agreement document itself, which was already set in a Bretton-Woods register and made the natural anchor
- Sharp corners. Zero border radius by default
- Asymmetry. Full-bleed heroes with the title anchored left rather than centred; asymmetric grids; table layouts; split-panel year plates
- Real photography, hand-picked from known sources by direct URL: never a keyword-driven random image service. Where no real portrait existed: a monogram and the caption portrait to be added, which is honest rather than a stock face standing in for a person who exists
- Editorial signals: roman numerals on articles, dinkuses between sections, drop caps on opening paragraphs, numbered figure captions with attribution, gold section rules
- Texture. An SVG paper grain over the body background: one line of CSS, and the single biggest visual difference on the list
SYS.07 The verdict
This looks awesome. The colour scheme and branding is so smart. It looks terrific. Huge thanks.
SYS.08 Built by two agents, on a machine that could not break anything
One honest trade-off is on the record. Where the dynamic pages needed visual builder work the automated route could not do reliably, they use a small script rendering from the site's own API instead. Same live data, less click-to-edit for the client, and logged as the first thing to fix in the next version rather than quietly left.
SYS.09 Two decisions asked of the client, not twenty
SYS.10 Results
24hrs, from first mockup to signed-off design
Design signed off in three rounds of email inside twenty-four hours. Eight pages rebuilt and repositioned around the Agreement, with the research architecture, the team structure and the Working Papers strand all rebuilt to the brief.
The client ends the engagement able to publish news, add team members and add research papers without going through anybody, and the endorsement form that has been collecting real submissions since July survives the move untouched.
The cutover is specified with a rollback path held open at every step.
CES · CES membership · The Monitor · Economic warfare tooling · Future of Security
Design in the flattest thing that works
A client looking at a half-built CMS talks about the CMS. Give them a page and they talk about the page.
If this looks close to something you are dealing with, the quickest route is to say so in a sentence. You will get a real reply from a person, usually with a first read on the problem rather than a calendar link.