# Theme colors & typography

> Edit your site's color palette and fonts in one place — changes apply everywhere the theme is used.

Source: https://support.estage.com/workspace-theme-colors
Part of the ESTAGE Support help center (https://support.estage.com). Full knowledge base: https://support.estage.com/llms-full.txt

---

The **Theme Colors** button in the toolbar opens your site's design system: the palette and
typography that every section draws from. Change a theme color once and it updates everywhere
it's used.

## Colors

- Your site's **palette** is listed as named colors with swatches.
- Click any swatch to open a **color picker** (or type a hex value).
- **Add** custom colors for the AI and style panel to use; delete ones you added.

Because sections reference theme colors rather than hard-coded values, retuning your palette
here restyles the whole site coherently — no hunting through pages.

## Typography

- **Font family** — pick from Google Fonts.
- **Heading styles** (H1–H6) — size, weight, line height, letter spacing per level.
- **Body text** — size, weight, line height.

## Theme + AI

The theme is also what keeps AI generations consistent: new sections the AI builds use your
theme tokens, so they match automatically. Two more places that feed it:

- **[Visual style guide](https://support.estage.com/project-settings-genesis-ai)** (Settings → Brand & AI) — your written
  design notes get baked into the theme on save.
- **Chat** — *"make the whole site feel warmer, cream background with forest green accents"*
  updates the theme too. Use the Theme Colors panel when you want precise control, chat when
  you want direction.

> **Tip**
>
> Theme changes are global by design. To recolor just **one** element, select it and use the
> [style panel](https://support.estage.com/visual-editor-styling) instead.