Customising Colours and Fonts
The visual identity of your website matters. The AI Site Builder allows you to customise the colour scheme and typography of your site to match your brand perfectly.
Changing Your Colour Scheme
- Open your site in the AI Site Builder editor.
- Click the Design Settings icon (palette icon) in the toolbar.
- Select Colours to view your current colour palette.
- Click on any colour swatch to change it using the colour picker or enter a specific hex code.
Colour Roles
Your site uses several colour roles that apply across all pages:
- Primary colour – Used for buttons, links, and key interactive elements.
- Secondary colour – Used for accents, hover states, and secondary buttons.
- Background colour – The main background of your pages.
- Text colour – The default colour for body text and headings.
- Accent colour – Used for highlights, badges, and decorative elements.
Using AI to Suggest Colours
Not sure which colours to use? Click AI Suggest and describe your brand or mood. For example, type professional blue and grey for a finance company and the AI will generate a matching palette. You can regenerate suggestions until you find a scheme you love.
Changing Fonts
- In Design Settings, select Fonts.
- Choose a heading font and a body font from the available Google Fonts library.
- Preview the changes in real time before applying them.
Font Pairing Tips
Good font pairings create visual harmony. Use a bold or decorative font for headings paired with a clean, readable font for body text. The AI can suggest pairings by clicking Suggest Font Pair in the fonts panel. Popular combinations include Montserrat with Open Sans, or Playfair Display with Lato.