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

# Theme

Customize your website's appearance with coordinated fonts, colors, and animations. Start with a theme, then make it your own.

Open the designer from your [Website page](https://convella.com/site), then select **Theme**.

![Theme panel with icon, logo, theme, font pack, and color palette controls](https://mintcdn.com/convella/pBat-kSuSzw_lXD9/images/website/theme-sprouts.jpg?fit=max\&auto=format\&n=pBat-kSuSzw_lXD9\&q=85\&s=99e4fbf06da481309a4b9de0ff43ac12)

## Choose a theme

Open the **Theme** selector to browse the available designs. Choose a starting point, then customize its fonts and colors to match your brand.

> [!TIP]
>
> Choose your theme before fine-tuning fonts and colors. Selecting a different theme applies its coordinated style settings.

## Logo and icon

Add your branding with **Add icon** and **Add logo**:

* **Icon** — Use a square image, at least **256 × 256 pixels**.
* **Logo** — Use a horizontal image, at least **1344 × 256 pixels**.

Click an existing image to replace or remove it.

## Fonts

Choose a **Font pack** to apply a coordinated pair of fonts. To choose fonts individually, open the font pack menu and select **Customize**:

* **Title font** — Used for headings and titles.
* **Body font** — Used for paragraphs and body text.

## Colors

Your website uses a five-color palette. Under **Color palette**, choose a preset or edit individual colors to match your brand.

### Section color themes

Each palette provides five section color themes: **Lightest**, **Light**, **Bright**, **Dark**, and **Darkest**. These combine background, text, and accent colors for different parts of your website.

Choose a **Default section theme** for sections that use your website's default styling. You can also give individual sections their own color theme in the website designer.

## Animations

Open **Miscellaneous → Animations** to add motion as elements appear on the page.

Choose **Fade**, **Scale**, or **Slide**, then set the speed to **Slow**, **Medium**, or **Fast**. Select **None** to turn animations off.

## Preview and save

Switch between the **desktop** and **mobile** previews to check your design on different screen sizes. When you're happy with it, click **Save**.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.