# Edit your site colors 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>" %}