Consistent branding is the difference between a site that looks professional and one that looks homemade. Sitejet gives you four mechanisms — colour palette, Google Fonts library, AI suggestions and brand variables — to apply your identity once and have it propagate across every page. This guide walks through each, plus the small practical habits that keep a site visually tight as it grows.
Why consistent branding matters · Changing colours in the editor · Brand variables in the Config tab · Choosing fonts from Google Fonts · AI font and colour suggestions · Styling individual elements · Tips for a consistent brand identity · FAQ
A visitor in the UK decides whether to trust a business in the first five seconds of landing on the site. Inconsistent branding — three different shades of green, four font families, hero images in different styles — undermines that trust, even when the content is good.
Sitejet’s brand-variable approach solves this by making your primary colour, accent colour, heading font and body font into site-wide tokens. Change the token and every element using it updates. You apply your brand once, not a hundred times.
Two ways to set colours:
Start with brand variables. Override at element level only for exceptions.
The Config tab is where site-wide brand settings live. Typical variables for a UK SME:
Define two to three core colours, not ten. A tight palette looks professional; a wide palette looks chaotic.
Sitejet integrates the full Google Fonts library (1000+ fonts). Set primary (headings) and secondary (body) in the Config tab.
UK-friendly pairings that work for most SMEs:
Keep body font size at 16 px minimum for mobile readability. Line-height around 1.5 reads comfortably.
If you are unsure where to start, Sitejet’s AI can suggest a brand palette and font pairing from your business description. Config tab → AI Suggest. Describe your business in a sentence or two (sector, vibe, target customer) and the AI proposes a palette and fonts. Accept, tweak or dismiss.
For UK businesses, specify British English in the prompt and mention your sector explicitly (“local plumbing firm in Bristol”, “boutique florist in Oxford”) for best results.
For element-level overrides, select the element and use the Style tab. Override colour, font-size, padding, border as needed. These overrides do not affect the global brand variables.
Use local overrides sparingly — typically for emphasis (a single highlighted button, a decorative heading) rather than as a pattern.
Q: Can I use my existing brand colours?
A: Yes — enter hex codes directly in the Config tab. You can paste any colour code.
Q: Does Sitejet support dark mode?
A: You can build a dark-mode site by choosing dark background and light text in brand variables. Native toggle between light and dark modes is not built in, but can be implemented with custom JS.
Q: Can I upload custom fonts?
A: The standard library is Google Fonts. Self-hosted custom fonts can be added via custom CSS (Config > Custom Code > CSS with @font-face).
Q: How do I match the colours from my existing logo?
A: Use a colour picker tool (like Adobe Color, Coolors, or macOS Digital Colour Meter) on your logo to extract exact hex codes. Paste those into the Config tab.
Q: Will changing a brand variable break my site?
A: No — it updates every element using that variable safely. If a particular element had a local override, it keeps the override.
Q: Is WCAG contrast checking built in?
A: Partial — the Website Check tool flags some contrast issues. For a comprehensive audit, use an external tool like WebAIM Contrast Checker.