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

# Design Settings

> Set the colors, logos, buttons, and fonts used across your whole website

Design Settings control the look of your whole site. To open them, go to **Design & Web › Design Settings** in the admin menu. You need the **Content Management** permission.

Settings here apply everywhere. To change one element on one page, edit that element in [Edit Mode](/website/edit-mode) instead.

## Colors

The **Colors** tab sets your site's color scheme, with a preview as you choose:

* **Accent Color**
* **Header Navigation Menu Links Color**
* **Page Background Color**
* **Button Colors**
* **Text Colors**
* **Primary Card**

Elements on your pages use these colors by default. When an element's color setting is **Default**, it uses the matching color from here. [Overlays](/website/elements#overlay) also use these colors.

## Images

The **Images** tab holds your logos and other site images. Each one lists its requirements, such as file format and shape.

* **Header Logo** — Shown in the header of your website. Use a wide SVG or PNG with a transparent background and no margin.
* **Footer Logo** — Shown in the footer of your website.
* **Admin Logo**
* **Favicon** — The small icon in the browser tab
* **Email Logo** — Used in emails your group sends
* **Mobile App Banner** and **Mobile App Icon**
* **Background Image**

## Buttons

The **Buttons** tab sets the shape of the buttons on your site. Under **Button Corners**, choose **Square**, **Rounded**, or **Pill**.

## Fonts

The **Fonts** tab sets the fonts on your site.

<Steps>
  <Step title="Choose up to four fonts">
    Under **Available Fonts**, press **Add** next to each font you want. They appear under **Selected Fonts**. Your site can use up to four fonts.
  </Step>

  <Step title="Assign fonts to text">
    Under **Element Fonts**, choose a font from your selected fonts for each kind of text: **Body text**, **Heading 1**, **Heading 2**, **Heading 3**, **Links**, **Nav items**, and **Buttons**.
  </Step>
</Steps>

Any kind of text left on **Default** uses these fonts:

| Text | Default font |
| - | - |
| Body text | Montserrat |
| Heading 1 | Bebas Neue |
| Heading 2, Heading 3, Nav items, Buttons | The body text font |
| Links | The font of the surrounding text |


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