Skip to content

Set your website's brand colours

Your whole website is themed by just two colours: an accent colour and a dark colour. Set them once and they flow through every block — links, buttons, highlights, and every dark band on the site. This keeps your site looking consistent without you having to colour each section by hand.

The two colours that theme your site

  • Primary (accent) — your highlight colour. It paints links, buttons, highlights, and the background of any section set to the "Brand" surface.
  • Dark / secondary — the colour of every dark band on the site: the hero, calls-to-action, the footer, and any section set to the "Dark" surface. Leave it empty and it falls back to a near-black default.

That's the whole system. There is intentionally no per-element or per-section custom colour — you pick two colours and the site stays coherent everywhere. For how sections choose between the Brand, Dark, and light surfaces, see Section backgrounds.

Set your brand colours

  1. Open your website in the full-screen editor.
  2. In the left icon rail, click Nav & footer.
  3. Expand the Brand colours section. It sits at the top of the panel, above the Navbar and Footer sub-tabs, because these colours apply to the whole site — not just the nav or footer.
  4. Set Primary (accent) — click the swatch to pick a colour, or type a hex value directly.
  5. Set Dark / secondary the same way. Leave it empty to use the near-black default.
  6. Click Save nav & footer.
The Brand colours section at the top of the Nav & footer tab
Brand colours sit at the top of the Nav & footer tab: a Primary (accent) and a Dark/secondary colour theme the whole site.

To undo a colour, use Clear on that field — it reverts to the theme's default colour.

These colours save live

This is the one thing to keep in mind: Brand colours save straight to the public site the moment you click Save nav & footer. There is no separate publish step for them. If you're experimenting, know that visitors see the change right away.

Text contrast is handled for you

You don't set text colours. Whatever accent or dark colour you choose, the text on top of it is adjusted automatically so it stays readable. That's why there's no per-element colour control — the system guarantees contrast for you.

One consequence worth knowing: if you pick a dark accent colour, it won't tint a dark band. On a dark section a dark accent shows as plain white instead. The site deliberately avoids muddy dark-on-dark tints, so it falls back to clean white.

Brand colours vs. your community branding

The colours here are your website's own accent and dark colour. Your community's overall branding — the palette used across the member portal and everywhere else in CommunitySync — is set separately. Changing one does not change the other.

Troubleshooting

My accent turned white on a dark section

Your accent colour is itself dark, so it can't stand out against a dark band. Rather than show an unreadable dark-on-dark tint, the site paints it plain white. Pick a brighter, higher-contrast accent if you want it to show as a colour on dark sections.

My colour change isn't showing

Make sure you clicked Save nav & footer — the Brand colours section shares that save button with the rest of the Nav & footer tab. Once saved, the change is live; if you still don't see it, refresh the public page.

I want to recolour just one section

That isn't available by design — the whole site is themed from these two colours so it stays consistent. What you can change per section is which surface it uses (Brand, Dark, or light). See Section backgrounds.