> ## Documentation Index
> Fetch the complete documentation index at: https://docs.butternut.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Theme & Typography

> Apply palettes, generate themes with AI, and choose fonts.

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.