> For the complete documentation index, see [llms.txt](https://www.wonderly.com/help/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://www.wonderly.com/help/marketing-hub/website-overview/style-your-site/edit-your-site-colors-and-fonts.md).

# Edit your site colors and fonts

How to customize your website's color palette, section spacing, and fonts.

You can control the look of your Wonderly website by adjusting colors, spacing, and fonts. These settings apply site-wide, so a single change updates every page automatically.

### How to open your design settings

1. Under **My business**, click **Website** from the main sidebar.
2. Click **Site navigation bar** from the secondary sidebar.
3. Click the **Design** tab.
4. At the bottom, click **Edit site colors and fonts**.

From here, you'll see two tabs: **Theme** and **Settings**. The sections below walk through the **Theme** tab.

***

### Customize your color palette

{% hint style="info" %}
**When to use:** You want to change the colors used across your website.
{% endhint %}

1. In your **Edit site colors & fonts** settings, click the **Theme** tab.
2. Click the **Try a present palette** dropdown to browse AI-generated color palettes based on your brand colors.
3. To customize individual colors, click the colored circle next to any element in the list and select a new color.

#### Color reference

* **Primary buttons** — The color of the main buttons on your site.
* **Titles** — The color of headings.
* **Text** — The color of paragraph text.
* **Links** — The color of hyperlinked text.
* **Background** — The default background color for text sections.
* **Borders** — The default color for borders.

***

### Adjust section spacing

{% hint style="info" %}
**When to use:** You want to increase or reduce the vertical space between sections on your website.
{% endhint %}

Click and drag the slider to adjust the vertical padding between each section on your page. Drag right for more padding, or drag left for less.

***

### Change your fonts

{% hint style="info" %}
**When to use:** You want to change the default fonts used for text across your website.
{% endhint %}

1. Click the text sample next to the font type you want to change.
2. Use the **Search font** bar to find a font, or select one from the **Available Fonts** list.
3. Preview your selection in the field below the list.
4. Click **Apply** to save your changes.

Repeat these steps for each font type you want to update.

#### Font types

* **Header** — A section on your page (like the hero section at the top of your website).
* **Heading** — The largest text on your site, used for main headings.
* **Subheading** — Secondary headings beneath your main headings.
* **Titles** — Smaller headings used within sections.
* **Text** — Paragraph and body text.

{% embed url="<https://app.supademo.com/demo/cmo1olgjs2a3xru182txvcd28>" %}