Skip to main content
The Theme & Typography tools within the Butternut AI editor allow you to define the visual soul of your website. By managing colours and fonts through a centralized design system, you ensure that every page remains cohesive and professional.

​
Browsing and applying pre-built colour palettes

You can access Theme settings via the colour palette icon in the website editor’s sidebar.

​
Theme categories

To simplify selection, palettes are grouped into categories such as:
  • Modern (vibrant)
  • Classic (timeless)
  • Bold (high-contrast)
  • Minimal (neutral)
  • Dark/Light modes

​
Real-time preview

Clicking any theme card instantly applies those colours across your entire website, so you can see changes in real time as you browse.

​
Comprehensive application

A single palette updates multiple design variables at once, including:
  • Primary and secondary brand colours
  • Accents
  • Backgrounds
  • Surface areas (like cards)
  • Text
  • Button states

​
Generating custom themes with AI

If the pre-built options don’t match your vision, you can use AI Theme Generation to create a bespoke palette from a text description.

​
Descriptive prompts

Enter a specific mood or industry-related instruction, for example:
  • “Professional blue for a law firm”
  • “Warm and welcoming for a bakery”
  • “Tech startup with purple accents”

​
Iterative refinement

You can click Generate multiple times to see different variations based on your prompt until you find the right match.

​
Saving your selection

Once satisfied:
  • Click Save Theme to permanently store the palette in your website configuration.
  • Or click Clear Theme to revert to your previous settings.

​
Selecting typography combinations

Font settings, located under the Ff icon in the sidebar, let you manage the three pillars of website typography.

​
Font categories

  • Primary font (Body): Used for paragraphs and general descriptions (e.g., Inter, Open Sans).
  • Secondary font (Headings): Applied to all titles from H1 to H6 (e.g., Montserrat, Playfair Display).
  • Special font (Accents): Reserved for buttons, labels, and highlight elements (e.g., Oswald, Bebas Neue).

​
Pre-paired combinations

For a guaranteed professional look, you can select from font pairings designed for visual harmony. Notable combinations include:
  • Modern (Inter + Montserrat)
  • Elegant (Playfair Display + Lato)
  • Tech (Space Grotesk + Inter)

​
Live font preview

As with colours, font changes apply instantly to headlines, buttons, and forms so you can test readability across sections before saving.

​
Analogy for theme & typography (Interior design)

Setting your website’s theme and typography is like interior designing a new office:
  • Choosing a pre-built palette is like picking a pre-coordinated furniture set from a catalogue.
  • AI generation is like telling a designer you want the room to feel “industrial and sleek” and having them pick the exact paint codes for you.
  • Typography acts as the furniture itself—headings are the large statement pieces (like a boardroom table), while the body font is the comfortable, reliable seating used throughout the building.
Consistent themes ensure that no matter which room (page) a visitor enters, they know they are still in your office.