Skip to main content
Browse the guide

Website management

Theme

Set your colours, fonts and overall look — with optional AI help.


The Theme page is where you choose the look of your public website — the colours, fonts, buttons and corner styling that visitors see on every page. You'll find it in the admin sidebar under Theme.

Who can use this

Editing the theme is limited to administrators. Every action — activating, cloning, saving and restoring — checks the admin role, so moderators and members can't make changes here.

What's on the page

At the top you'll see your Active theme (this shows "Platform default" until you activate one of your own). Below that are Your custom themes, an expandable Default library of ready-to-use themes, and — once you're editing a theme — the colour and font editor plus a Version history of every saved change.

A Helix Assistant hint also sits near the top. Describe a change in plain English (for example, "Switch the primary colour to navy blue and the accent to gold") and the assistant makes it for you.

Step by step

Start from a ready-made theme

  1. Expand the Default library to browse the bundled themes, each shown with a colour swatch preview.
  2. Click Use as-is to make that theme your active site theme straight away.
  3. Or click Clone & customise to copy it into Your custom themes and open it for editing.

Create a theme from scratch

  1. In Your custom themes, click + New custom theme.
  2. Give it a name (for example, "Junior squad") and click Create & edit.

Customise colours, fonts and buttons

  1. Open a custom theme with the Edit link.
  2. Use the tabs to move between Colours, Typography, Buttons and Shape.
  3. Pick colours with the swatch picker or paste a hex value; choose fonts from the searchable list; set heading sizes, weights and corner radii.
  4. Watch the live preview on the right update as you go.
  5. Click Save new version when you're happy. Identical saves are skipped, so a version is only recorded when something changed.

Activate your theme

  1. Next to any theme, click Activate (or Use as-is in the library).
  2. The button reads Active once it's live on your site.

Undo a change

  • In Version history, click Restore on an earlier version to bring it back.
  • For a cloned theme, Reset to source default returns it to the library theme it came from.

Field reference

Field / controlWhat it does
Use as-isActivates a library theme without copying it
Clone & customiseCopies a library theme so you can edit it
+ New custom themeCreates a blank custom theme
Edit nameRename the theme and set an optional description
Colours tabBrand, surface, typography and status colours, plus your own custom colours
Typography tabSans, serif, display and mono fonts, and heading sizes/weights
Buttons tabBuilt-in button styles plus custom button variants
Shape tabCorner radii (Small, Medium, Large, Pill)
Save new versionSaves your edits as a new version
Export / Import JSONDownload the theme as a file, or paste one in
RestoreBrings back a previous version

Tips & FAQ

  • Why won't my colours save? To keep text readable, body text must reach at least 4.5:1 contrast against the page background (WCAG AA). If it's too low, you'll see a message asking you to adjust the Body text or Page background colour.
  • Nothing changed? Saving an identical theme is skipped on purpose, so version numbers only reflect real edits.
  • Move faster with Helix. Click Open the assistant and describe your colours and fonts in plain English.
  • Theme controls the site's overall styling; for your logo and club identity see Branding. To build out the site itself, see Pages and Navigation.