Making a template yours: rebrand in 20 minutes
Every template on this site is built around three ideas: CSS variables for everything visual, plain HTML for all content, and zero build step. That combination means rebranding is mostly editing — no design tools required. Here's the exact 20-minute recipe.
1 · Colors (5 minutes)
Open the template and find the :root block at the top of the <style> tag — it looks like this:
:root {
--ink: #16181d; /* main text */
--accent: #4f46e5; /* primary color */
--bg: #ffffff; /* page background */
...
}Change the values, save, refresh. That's it — every button, link and heading follows the variables. If you have brand colors, this is the only place you need them.
2 · Fonts (3 minutes)
Each template loads fonts from Google Fonts in the <head>:
<link href="https://fonts.googleapis.com/css2?family=Inter:..." rel="stylesheet">Swap Inter for your font (e.g. Plus+Jakarta+Sans or Space+Grotesk), then update the --font variable to match. Keep it to two families max — one display, one body — and the template keeps its rhythm.
3 · Content (10 minutes)
With your editor's search & replace running, work top to bottom through the page:
- Brand: the
<title>, logo text, footer name, social links. - Hero: headline, sub-copy, button labels — keep the structure, replace the words.
- Cards/sections: swap each block's text and any image
srcURLs. - Footer: address, email, legal links.
A pro tip: replace in this order — title before body, since editors show title first — and save a copy of the original template before you start, in case a replace goes sideways.
4 · The 5-minute design pass
Once content is in, tighten the look with three tiny nudges:
- Reduce the accent. If you used your brand color everywhere, cut it back to CTAs and links — instant upgrade.
- Check the contrast. Gray-on-white body text should be
--ink-2or darker. If it looks washed out, darken the variable. - Deploy and look at it on a phone. Static templates are responsive by default, but the phone check catches anything weird before your client does.