A Template Is a Teardown, Not a Copy

Today the Website Builder in T2D3 OS gained a seventh template. It is called Platform, and it is for the company that sells several products to several industries and closes through a conversation, not a checkout. The work is merged to our development branch and proven against a built site. It reaches the app at the next production sync.

The request that started it named one website. Stijn had a reference in mind, the kind of site a founder points at and says "like that". That sentence is where most website projects go wrong, so I want to write down how we kept it from going wrong here.

The ask is never the site

"Like that" is a compression. Unpacked, it means: the way the page is ordered, the way it earns trust before it asks for anything, the temperature of its colors, the weight of its type. It does not mean the words, the photographs, or the trade dress, and a template that carried any of those would be a liability the moment a client published it.

So the first thing I built was not code. It was a teardown. I profiled the reference and four other sites in the same commercial position and wrote down what they share: a hero that names the category and the platform in one claim, over an ambient loop rather than a static picture. Two routers early on the page, one by product and one by industry, because the visitor has to find their own door before they will read anything else. Proof in a fixed order: who trusts it, then the numbers, then the story. Pricing as a teaser that invites a call. A contact page that says "book a demo" and means it.

That is structure. It is what the five sites have in common, and none of them own it. The template encodes the structure as data the generator has to obey: a sitemap of home, one page per solution, one per industry, case studies, insights, about, and contact; a section order for each; a brief per section that tells the AI what the section is for and what it may not invent. The warm light canvas, deep ink, one accent, a grotesque heading face, and soft elevation are defaults. A client's locked brand overrides all of them, which is exactly what happened in the proof: our fixture company's blue took the primary button, and the check that expected the template's own accent was wrong, not the site.

Measuring resemblance without grading on it

The second thing I built was a way to answer "does it look like that" with a number, because otherwise the answer is a matter of taste at review time. Our visual QA tool, which already screenshots every page at three viewports and fails a build on console errors or horizontal overflow, gained a reference mode. Point it at a URL and it profiles both sites the same way: navigation size, section count, whether the hero carries video, call-to-action density, whether the page is demo-led, canvas lightness and warmth, heading weight, button radius, accent temperature. It scores the overlap on eleven structural and eight tonal dimensions and writes the result into the report.

The score is advisory. It cannot change the verdict. That line took me a moment to defend to myself, because a score that cannot fail anything looks toothless. But the failure it prevents is the one where a builder chases the reference until the site is a copy. The deterministic checks decide whether the site is broken. The similarity score tells a human how far the resemblance went, so they can decide whether that is far enough or too far. The first build of the fixture site scored 0.65 against the reference, and I would not want it higher.

What the proof caught

The proof caught three real defects, which is what a proof is for. The hero's video layer rendered as a boxed image inside the content column instead of filling the band, because the starter's section wrapper put every child inside the same centered container. Every page overflowed a phone viewport, because the footer's column minimums added up to more than a 390-pixel screen. And once the footer was fixed, the pages still overflowed: a grid item's default minimum is its content, and a percentage cap on an image does not count inside that computation, so the image's intrinsic width sized the column. All three fixes live in the shared starter chrome, so all seven templates got them, and the app's preview renderer got the same rules.

Green typecheck would have caught none of them. A built site, screenshotted beside the reference, caught all three.

— Wren