Theme & Colours
Customise the look of your website to match your brand. Your theme settings control colours, fonts, and overall visual style across your entire site.
What You Can Customise
Primary Colour
Your main brand colour used for:
- Buttons
- Links
- Highlighted text
- Accents
Choose a colour that represents your brand and has good contrast.
Secondary Colour
A complementary colour for:
- Secondary buttons
- Backgrounds
- Subtle accents
Background Colours
- Page Background - The main page colour (usually white or light grey)
- Section Backgrounds - Alternating colours for visual interest
Text Colours
- Heading Colour - Colour for titles and headings
- Body Text - Colour for regular paragraph text
- Muted Text - Colour for secondary text (captions, footnotes)
How to Edit
- Go to Site Content → Theme or Settings → Branding
- Click on any colour field to open the colour picker
- Enter a hex code or select from the palette
- Preview your changes
- Publish when happy
Choosing Brand Colours
Tip: If you have an existing logo, pull colours from that to create a cohesive look.
Colour Psychology for Fitness
| Colour | Feeling | Good For |
|---|---|---|
| Blue | Trust, calm | Wellness, yoga, rehab |
| Green | Health, nature | Nutrition, holistic fitness |
| Orange | Energy, enthusiasm | High-energy training |
| Red | Power, intensity | Strength training, bootcamps |
| Purple | Premium, luxury | High-end personal training |
| Black | Sophistication | Premium brands |
Creating a Palette
- Primary Colour - Your main brand colour
- Secondary Colour - A complementary shade
- Accent Colour - For special highlights
- Neutral Colours - Greys for backgrounds and text
Tools for Choosing Colours
Free tools to create palettes:
- Coolors.co - Generate colour schemes
- Adobe Color - Create from images
- Paletton - See colour relationships
Font Settings
Heading Font
Used for all titles and section headers. Choose a font that’s:
- Bold and impactful
- Easy to read
- Matches your brand personality
Body Font
Used for paragraphs and regular text. Should be:
- Highly readable
- Clean and professional
- Not too decorative
Font Recommendations
| Brand Style | Heading Font | Body Font |
|---|---|---|
| Modern | Montserrat | Open Sans |
| Classic | Playfair Display | Lato |
| Bold | Bebas Neue | Roboto |
| Friendly | Poppins | Source Sans Pro |
Accessibility Considerations
Important: Your colour choices affect accessibility. Make sure text is readable for all visitors.
Contrast Requirements
- Text must have sufficient contrast against backgrounds
- Buttons need to be clearly visible
- Links should stand out from regular text
Testing Contrast
Use these free tools:
- WebAIM Contrast Checker
- Browser DevTools accessibility panel
Minimum Ratios
- Normal text: 4.5:1 contrast ratio
- Large text: 3:1 contrast ratio
- UI elements: 3:1 contrast ratio
Common Mistakes
| Mistake | Problem | Solution |
|---|---|---|
| Low contrast text | Hard to read | Use darker text on light backgrounds |
| Too many colours | Looks chaotic | Stick to 3-4 colours max |
| Clashing colours | Unprofessional | Use a colour palette generator |
| Ignoring mobile | Looks different on phones | Test on multiple devices |
Previewing Changes
Always preview your theme changes:
- Make your colour changes
- Click Preview
- Check multiple pages
- Test on mobile view
- Check that text is readable everywhere
- Only publish when satisfied
Resetting to Default
If you’ve made changes you’re not happy with:
- Go to Theme settings
- Click Reset to Default
- Confirm the reset
- Start fresh with the default colours
Last updated on