# Theme colors & typography

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

Source: https://knowledge.estage.com/workspace/theme-colors/
Part of the ESTAGE knowledge base (https://knowledge.estage.com). Full corpus: https://knowledge.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](/project-settings/genesis-ai/)** (Settings → Genesis) — 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](/visual-editor/styling/) instead.
:::