Updating Your Website Colour Palette in Classic Composer (Tempo)

The colour palette used on your website is a key component of ensuring your brand is successful online! While your colours are initially set during launch, you can adjust them anytime via the CMS to maintain brand consistency and improve user experience.

🔹 How to Update Your Colours

1. Log into the CMS and navigate to Settings > Design & Appearance.

2. Select the Colours tab. Here, you’ll see several input fields that control elements across your website.

Colour Fields Explained

• One – Primary brand colour. Controls "Primary" article and section styles throughout Tempo.

• Two – Secondary brand colour. Controls "Secondary" article and section styles.

• Three – Tertiary brand colour. Controls "Tertiary" article and section styles.

• Muted – Generally used for subtle backgrounds or text; a grey shade is recommended.

• Dark – Used for dark accents or text. Alternative black (#000) is a common fallback.

• Text – Controls body text colour. Choose a dark shade for readability on light backgrounds.

• Links – Adjusts standard hyperlink colours across the site.

🔹 How to Apply Colours

You can input your colours in two ways:

1. HEX Value – Paste your brand HEX code directly into the field. This is usually provided in your brand guidelines.

2. Colour Picker – Select a shade manually to complement your branding.

Click Save at the bottom to apply your changes.

🔹 Additional Colour Settings

Within the Design & Appearance section, you’ll find more tabs to customize other elements:

Elements Tab

• Button One & Button Two – Control the background and text colour for your primary CTAs.

• Back to Top Scroller – Adjust background and arrow colour for the scroll-to-top button.

• Form Field Border – Set the outline colour around form fields; subtle grey is recommended.

Sections Tab

• Header Background (Nav) – Adjust the background of your navigation bar (for Sidebar or Sidebar Minimal headers).

• Sticky Background – Colour for the fixed navigation as users scroll.

• Menu Text Colour – Choose text colour for readability against your header/hero layout.

• Sub Menu Background & Text Colour – Ensure contrast for clear navigation.

• Active Menu Colour – Indicates the current page in the menu.

• Sticky Menu Styles – Four options for customizing menu items in the sticky header.

• Overlays – Adjust homepage or subpage hero image overlays for text readability.

• Header Background – Large block colour in hero sections for contrast with imagery.

Panel & Footer Colours

• Sector, Tabs, Testimonials, Newsletter, Twitter, Advertising 1 & 2, Pop-Up – Set background colours for each panel. Activate panels in CMS to see changes.

• Footer Background – Adjust the background colour behind all footer panels.

🔹 Why Colour Consistency Matters for SEO & UX

• Brand Recognition – Consistent colours reinforce your brand identity across pages.

• User Experience – Clear contrasts improve readability and navigation.

• Engagement Signals – Visually appealing, readable pages can reduce bounce rates and increase time on site, positively influencing search rankings.

• Accessibility – Proper contrast ratios ensure your site is accessible to all users, which is increasingly important for SEO.

Maintaining a well-structured, branded colour palette not only enhances the visual appeal of your website but also contributes to better engagement, accessibility, and SEO performance.