One domain, two design systems.
THEHUB is a live, ad-funded directory of free and open-source software, hand-built over 180 static pages. A hundred and forty-six of them were cyan. Thirty-one were violet, on a different ground, at a different width, behind a different navigation. Nobody had ever seen the two halves next to each other, because no visitor arrives at a site twice.
The brief
Not ours. THEHUB belongs to its editor, who writes every review on it and publishes the repository openly. The engagement was the design system and nothing else — changes proposed against a clone, handed back to be merged by the person who owns the site.
Nothing a reader could name, and everything an editor could feel. Every page carried its own copy of its own stylesheet, so the site had drifted into two palettes, two grounds, two container widths and two navigations — each internally consistent, and neither aware of the other.
The words. It is an editorial property that earns from its traffic, so the copy, the rankings and the ad placements were fixed points. A design system that requires the content to be rewritten is not a design system, it is a relaunch.
Every page had its own stylesheet, so every page was its own brand.
The palette was not the problem here; the structure was. The hero states what the site is, then hands over to a live count of what is actually in it — 38 AI & automation, 54 online utilities, 32 apps, 18 open-source CLI, 138 reviews published — read from the index rather than typed into the page. Behind it, an ambient field that was not there before.
See the live oneA before-and-after comparison of three pages of qutaifan.com: the home page, a category pillar and an alternatives page, each shown in the design that was live and the design that replaced it.
The home page states what the site is and then hands over to a count of what is in it, read from the index rather than typed into the page. Underneath it, an ambient field and a constellation that were not there before.
Try it yourselfScreen captures of the live qutaifan.com inside a window you scroll: the home page, a category pillar, an alternatives page and a review — with the home page beside it at phone width.
What shipped
Hand-maintained static HTML, no build step and no framework — 138 reviews, 31 pillar and alternatives pages, and the rest.
All 180 shipped a duplicated inline <style> block on arrival. Twenty-three still do, and each of those is a page with something genuinely local to say.
146 pages on one accent, 31 on another, on different grounds at different widths. One palette now, in one stylesheet, read by every page.
Counted, not asserted: tags stripped from both versions of all 180 pages and the rendered words compared. The one that moved is the home page, whose hero was in scope.
40,610 down to 35,441. Nothing was deleted from the site — that is the duplicated styling leaving, replaced by three shared files.
The reviews, the rankings and the ad placements are the editor’s. We were there for the surface they arrive on.
How it was handed over
Six scripts, and every one of them refuses to run by default.
A hundred and eighty pages cannot be edited by hand and should not be edited by a script you have to trust. Each of the six that did this work is a dry run unless it is passed --apply, is safe to run twice, and ends in a check that can fail — so the person merging it can see exactly what it intends to do to their live site before it does any of it.
That is the same argument as the readiness index, made on somebody else’s repository: a change nobody can inspect is a change nobody can own. The site is theirs, the content is theirs, and the system is now something they can apply without asking us.
The website line The brand kit line