Rebranding a website template: where the colours, fonts and photos actually live

The short answer

A template’s look is stored in three kinds of place, and how long a rebrand takes depends almost entirely on the mix.

• Tokens. A handful of named values — usually CSS custom properties declared once at the top of the stylesheet — that the rest of the page refers to. Change a token and everything using it changes with it.

• Literals. The same colour typed out directly wherever it is used: in a stylesheet rule, or inside the script that draws a canvas or 3D scene. Each one has to be found and changed by hand.

• Assets. Typefaces, photographs, and in some templates video or pre-rendered frames. Their colours are inside the file, and no amount of code editing moves them.

A template that keeps its brand in tokens can take your palette in minutes. One whose most striking element is a scene with its colours written into the script is a small development job, however simple the page around it looks. Neither is better; they are different purchases, and the demo does not tell you which one you are looking at.

What we found in our own 60

We read the source of every single-file template in the catalogue — 60 of the 62; the other two are multi-file projects — and counted where each one keeps its colours. The two halves of the catalogue came out very differently.

Every one of the 60 declares its palette as tokens, and 57 declare at least three colours that way. On a classic template that is close to the whole story: we found no colour written into any of their scripts, so recolouring one is mostly a matter of editing the block of tokens at the top of the file.

The interactive half is where the tokens stop. In 37 of the 42, the scene that makes the template worth buying takes its colours from values typed into the script — a 3D tunnel’s surfaces set as fixed colours in the scene setup, a canvas street whose road and pavement bands each carry their own colour. Change every token on those pages and the text, buttons and backgrounds follow you. The scene does not.

In the remaining five, the moving part is not a scene drawn from colour values at all. It is a video, a sequence of pre-rendered frames — one studio template carries 181 of them — or a wall of photographs. There the colours are in the pictures, and rebranding that element means new footage or new renders, not new code.

Tokens do not always cover the stylesheet either. In 19 of the 60, more than ten colours are written out directly in CSS rules rather than referring to a token. Those are the colours a token-only rebrand misses, and each one missed is a stray tint of the old brand left behind — worth a search of the stylesheet for colour values once the tokens are done.

Fonts: one line to change, and a layout to recheck

36 of the 60 load their typefaces from Google Fonts, and in most the font stack is itself a token. Swapping the face is two edits: the stylesheet link that loads it, and the token that names it.

The edit is the easy part. Typefaces set at the same size occupy different widths, and several of these templates use condensed display faces for very large headlines — faces chosen precisely because they fit a lot of letters into a narrow line. Replace one with your brand’s wider sans-serif and a headline that sat on two lines may need three, pushing everything under it down. Check the largest headings at a phone width after any font change; that is where it shows first.

Photographs: inside the file, not beside it

All 18 classic templates carry their photography inside the HTML document as encoded data rather than as separate image files, which is why each arrives as a single file. It also means the images are most of the file: between 81 and 91 per cent of each classic template’s size is embedded photography.

Replacing a photo is therefore not dropping a new file into a folder. You either replace the encoded image in place, or change that image to point at a file of your own — the better choice once the site is hosted, because a browser can cache a separate image and cannot cache one inside the page.

Whichever you do, keep each replacement close to the original’s proportions, or update the width and height declared on it. Those two numbers are how the browser reserves space before the image arrives; a portrait photo placed into a slot declared as landscape is how a page that loaded cleanly starts to jump. That jump is the layout-shift problem our guide to animation and SEO covers in more detail.

A two-minute test you can run on any demo

This works on any template with a public demo, ours or anyone else’s, and needs only a desktop browser.

• Open the demo, right-click the page and choose Inspect. In the Elements panel select the html element at the very top.

• In the Styles panel, find the rule for :root. If it holds a list of names beginning with two dashes and colour values beside them, those are the tokens. If there is no such rule, every colour on the page is a literal, and the rebrand is a search-and-replace job.

• Click one of the colour values and change it to something loud — pure magenta works. Watch the page.

• Everything that turned magenta is controlled by that token. Anything that kept its old colour — very often the animated part — is a literal or an asset. That difference is the real size of the job.

• Search the page source for base64. Many matches means the images live inside the document, as described above.

Nothing you change in the inspector is saved, so the test is free to run on a template you have not bought. It will not catch everything — a colour set only on hover, or one applied by a script after you scroll — but it separates a token-driven template from a literal-driven one in about the time it takes to read this list.

If the scene’s colours are in the script

There are two reasonable ways to handle it, and which is right depends on whether the site will be rebranded again.

For a single rebrand, edit the values where they are. In the scenes we looked at closely, the colours were grouped — a set of named surface colours in the 3D scene’s setup, or a list of bands and shopfront colours at the top of a canvas drawing — rather than scattered through the drawing code. Finding that group and working through it with your palette beside you is most of the job; the rest is watching the result, because a colour chosen for a flat swatch can look quite different once it is lit and fogged in 3D.

If the brand will change again, or you want one place to control everything, a developer can have the script read its colours from the page’s tokens when it starts. A script can read a token’s current value directly, and a canvas accepts any valid CSS colour as a string, so the token becomes the single source for both the page and the scene. It is a modest change, but it is a code change, and worth pricing as one.

Either way, test the recoloured scene against the text sitting on top of it. A scene that was designed around a dark teal will carry white text; rebrand it to a pale sand and the same white headline may no longer be readable.

What this means for which template you choose

If your brand is fixed and specific — a colour a client has paid an agency to choose — weight the rebrand cost as heavily as the look. A token-driven template that is 80 per cent right is often a better buy than a scene-driven one that is 95 per cent right in someone else’s colours, because the last 20 per cent of the first is an afternoon and the last 5 per cent of the second may be a week.

If your brand is still flexible, the opposite can be true. Choosing a template whose scene already sits in a palette you can live with, and building the rest of the identity around it, is a legitimate way to arrive at a brand — it is how a lot of launch sites are actually made.

Every template in the catalogue has a public demo you can run the test above on before asking us anything. If you would rather not do the rebrand yourself, customisation is something we agree with you directly, template by template, before handover.