The colour palette used on your website is a key component of ensuring your brand identity is consistent and successful online.
Your default colour scheme will be set up for you during the launch process, but you can easily adjust or refresh it yourself at any time via the CMS.
⚙️ How to Update Your Colours
STEP 1 – Access Colour Settings
Once logged into the CMS, go to:
Settings > Design & Appearance
You’ll be presented with the “Colours” tab, which contains several colour input fields that control various visual elements across your site.
🧩 Understanding Each Colour Option
| Colour Option | Description |
|---|---|
| Main | Your primary brand colour. Used throughout the site for “Primary” article and section styles. |
| Accent | The secondary brand colour, used for “Secondary” article and section styles. |
| Muted | A more neutral colour, often a light or mid grey – great for softer design elements. |
| Dark | The darkest colour in your palette – often black (#000) or your deepest brand tone. |
| Text | Controls the default body text colour. Choose a dark colour for contrast on light backgrounds. |
| Links | Defines the colour of hyperlinks across your site. |
💡 TIP: You can enter your colour values in two ways:
- Paste your HEX value directly into the field (recommended).
- Or use the built-in colour picker to manually select your desired shade.
Once you’re done, hit “Save” at the bottom to apply your changes.
🧱 Additional Design Options
Beyond your core colour palette, the Design & Appearance section also includes tabs for more specific styling elements:
🎯 Elements Tab
Fine-tune the look of buttons and forms:
- Button One & Two: Set background and text colours for your site’s two CTA styles.
- Back to Top Scroller: Adjust both the background colour and arrow icon.
- Form Field Border: Control the colour of form outlines (a light grey is usually best).
🧭 Sections Tab
Control the visual appearance of navigation and structural areas:
- Header Background: Sets the colour of your site’s header (used with the Halved layout).
- Sticky Background: Controls the colour of the fixed/sticky navigation bar as you scroll.
- Menu Text Colour: Adjusts the colour of menu items — white is often best on darker headers.
- Sub Menu Background / Text Colour: Ensure strong contrast for accessibility.
- Active Menu Colour: Highlights the currently active page in your navigation.
🌅 Overlays Tab
- Homepage Hero & Subpage Hero Overlays: Controls the overlay colour and opacity for hero images to ensure text readability. Typically set to black (#000) with partial transparency.
🧾 Panel Backgrounds
You can also adjust the background colours for various panels across your site, including:
- Sector
- Countdown
- Testimonials
- Advertising 1 & 2
- Pop-Up Backgrounds
- Footer Background
Just enter your HEX value and make the panel active in the CMS to see your changes live.
💡 Final Tips for Success
- Stick to your brand guidelines for colour accuracy and consistency.
- Use high-contrast combinations for readability and accessibility.
- Preview your updates across multiple devices before publishing.
Comments
0 comments
Please sign in to leave a comment.