One template, three renderers: building QRcado

QRcado wraps every dynamic QR code in a branded mobile page. That means the same design has to exist in three places at once: the live preview in the builder, the sample shown on the marketing site, and the page a phone actually opens after a scan.

We built them separately first, and they drifted — as separately-built things do. The preview said one width, the scanned page rendered another. A font loaded in the app and fell back to a system face on the hosted page. Nothing was broken enough to fail a test, and everything was wrong enough to notice.

Three implementations of one design is not redundancy. It is three places for the design to be wrong.

The fix was to make the template a document rather than a component: structure, tokens and sections as data, with one renderer reading it and the other two consuming the same package. A shared CSS reset went underneath all three, because the drift was as often the container as the content.

The payoff is editorial, not architectural. A template can now be edited in one place and change everywhere it appears, which is the only version of "consistent branding" that survives a second designer.

QRcado is finished software in private testing. It has not launched, and this post is about how it was built — not about who is using it.