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

# Create a brand kit

> Keep your branding consistent by using the same colors, fonts, icons, and logo across your Zite apps.

## Overview

Building multiple apps and landing pages for the same company or brand requires staying within brand guidelines to ensure a consistent look and feel across everything you create. Without a shared system, it can be difficult to keep colors, fonts, and styling aligned across different projects.

A **brand kit** helps solve this by keeping your key brand elements in one place so you can easily apply them across all apps and pages.

## What is a brand kit?

It's a centralized hub containing the visual styling elements that represent your brand. It contains the following:

* **Logo:** The primary visual symbol used in app headers and nav bars
* **Icon:** A small square logo used as favicon and app icon
* **Font:** The main text style
* **Color Palette:** Primary and secondary colors, including accents if any
* **Guidelines:** A set of rules that define how a brand should look and be presented

## Build your brand kit

<Steps>
  <Step title="Choose how to set up">
    From the dashboard, click the `swatch icon` <Icon icon="swatchbook" /> followed by `Create brand kit`. Alternatively, you can open the [Branding kit settings](https://build.fillout.com/home/settings/branding-kit).

    <Frame>
      <img src="https://mintcdn.com/zite/KQ8qGBqeQVB6pPOl/help/images/Screenshot-2026-04-10-at-5.17.30-PM.png?fit=max&auto=format&n=KQ8qGBqeQVB6pPOl&q=85&s=b58782791c2c497eee6d14da86dcc0c8" alt="Screenshot 2026 04 10 At 5 17 30 PM" title="Screenshot 2026 04 10 At 5 17 30 PM" style={{ width:"67%" }} width="1311" height="599" data-path="help/images/Screenshot-2026-04-10-at-5.17.30-PM.png" />
    </Frame>

    In the popup, you can either `Import your website` or `Create manually`. For our example, let's use Zite's website.

    <Frame>
      <img src="https://mintcdn.com/zite/ze1_MxNeUcJBYC8z/images/Screenshot-2026-06-02-at-2.52.21-PM.png?fit=max&auto=format&n=ze1_MxNeUcJBYC8z&q=85&s=c261fc5e377ebb19b864d57a18cf8194" alt="Screenshot 2026 06 02 At 2 52 21 PM" width="2022" height="1070" data-path="images/Screenshot-2026-06-02-at-2.52.21-PM.png" />
    </Frame>

    You can change the logo or icon by clicking **x** and uploading or dropping a file.
  </Step>

  <Step title="Add or edit your brand assets">
    Importing will automatically capture a website's brand information and styling.

    <Frame>
      <img src="https://mintcdn.com/zite/ze1_MxNeUcJBYC8z/images/Screenshot-2026-06-01-at-5.10.32-PM.png?fit=max&auto=format&n=ze1_MxNeUcJBYC8z&q=85&s=aeafb0bd45c3a249a3a7822acbb8a767" alt="Screenshot 2026 06 01 At 5 10 32 PM" width="2018" height="1066" data-path="images/Screenshot-2026-06-01-at-5.10.32-PM.png" />
    </Frame>

    This is includes the logos, color palette, font,  button, and card styles. You are free to edit these however you see fit.
  </Step>

  <Step title="Add or edit your brand assets">
    Importing will automatically capture a website's brand information and styling.

    <Frame>
      <img src="https://mintcdn.com/zite/ze1_MxNeUcJBYC8z/images/Screenshot-2026-06-01-at-5.10.32-PM.png?fit=max&auto=format&n=ze1_MxNeUcJBYC8z&q=85&s=aeafb0bd45c3a249a3a7822acbb8a767" alt="Screenshot 2026 06 01 At 5 10 32 PM" width="2018" height="1066" data-path="images/Screenshot-2026-06-01-at-5.10.32-PM.png" />
    </Frame>

    This is includes the logos, color palette, font,  button, and card styles. You are free to edit these however you see fit.
  </Step>

  <Step title="Review guidelines">
    Importing also captures brand guidelines, specifically **Visual Style**, **Tone of Voice**, and **Business Context**. You can add more to this or edit them as needed.

    <Frame>
      <img src="https://mintcdn.com/zite/ze1_MxNeUcJBYC8z/images/Screenshot-2026-06-02-at-2.56.24-PM.png?fit=max&auto=format&n=ze1_MxNeUcJBYC8z&q=85&s=9ee263b6010c4e9030b918fa9ddc6146" alt="Screenshot 2026 06 02 At 2 56 24 PM" width="2022" height="1070" data-path="images/Screenshot-2026-06-02-at-2.56.24-PM.png" />
    </Frame>

    Click `Create Brand Kit` once you've reviewed all the details.

    That's it! You’ll now see your brand kit when creating an app.
  </Step>

  <Step title="Review guidelines">
    Importing also captures brand guidelines, specifically **Visual Style**, **Tone of Voice**, and **Business Context**. You can add more to this or edit them as needed.

    <Frame>
      <img src="https://mintcdn.com/zite/ze1_MxNeUcJBYC8z/images/Screenshot-2026-06-02-at-2.56.24-PM.png?fit=max&auto=format&n=ze1_MxNeUcJBYC8z&q=85&s=9ee263b6010c4e9030b918fa9ddc6146" alt="Screenshot 2026 06 02 At 2 56 24 PM" width="2022" height="1070" data-path="images/Screenshot-2026-06-02-at-2.56.24-PM.png" />
    </Frame>

    Click `Create Brand Kit` once you've reviewed all the details.

    That's it! You’ll now see your brand kit when creating an app.
  </Step>

  <Step title="Review guidelines">
    Importing also captures brand guidelines, specifically **Visual Style**, **Tone of Voice**, and **Business Context**. You can add more to this or edit them as needed.

    <Frame>
      <img src="https://mintcdn.com/zite/ze1_MxNeUcJBYC8z/images/Screenshot-2026-06-02-at-2.56.24-PM.png?fit=max&auto=format&n=ze1_MxNeUcJBYC8z&q=85&s=9ee263b6010c4e9030b918fa9ddc6146" alt="Screenshot 2026 06 02 At 2 56 24 PM" width="2022" height="1070" data-path="images/Screenshot-2026-06-02-at-2.56.24-PM.png" />
    </Frame>

    Click `Create Brand Kit` once you've reviewed all the details.

    That's it! You’ll now see your brand kit when creating an app.
  </Step>
</Steps>

## Edit an existing brand kit

On the dashboard, click your `Account name` followed by `Settings`.

Navigate to `Branding kit` and click your **brand** to edit it.

<Frame>
  <img src="https://mintcdn.com/zite/ze1_MxNeUcJBYC8z/images/Screenshot-2026-06-02-at-3.00.01-PM.png?fit=max&auto=format&n=ze1_MxNeUcJBYC8z&q=85&s=5d191c9b950e026079b49c03592cd6da" alt="Screenshot 2026 06 02 At 3 00 01 PM" width="1900" height="836" data-path="images/Screenshot-2026-06-02-at-3.00.01-PM.png" />
</Frame>

Click the `ellipsis` <Icon icon="ellipsis" /> to `Delete` a brand kit.

## Apply brand kit to an existing app

If you already have an existing app and want to quickly match it to your brand, you can choose your brand kit as its theme.

<Steps>
  <Step title="Open your app">
    Click your Zite app from the dashboard.
  </Step>

  <Step title="Edit theme">
    Click the `swatch icon` <Icon icon="swatchbook" /> on the bottom left. Then, open the `Theme` dropdown menu to choose your brand kit.

    <Frame>
      <img src="https://mintcdn.com/zite/qfuP0XRgCrNqqL1D/images/Screenshot-2026-06-02-at-3.12.24-PM.png?fit=max&auto=format&n=qfuP0XRgCrNqqL1D&q=85&s=e6032b3e87819aa808ffcc34a9c128fa" alt="Screenshot 2026 06 02 At 3 12 24 PM" title="Screenshot 2026 06 02 At 3 12 24 PM" style={{ width:"54%" }} width="856" height="1061" data-path="images/Screenshot-2026-06-02-at-3.12.24-PM.png" />
    </Frame>
  </Step>

  <Step title="Save changes">
    After choosing your brand kit, click `Save all`. Then, click exit design by clicking `x`.

    <Frame>
      <img src="https://mintcdn.com/zite/ffykQlv6rOjVSlEq/images/Screenshot-2026-06-26-at-7.16.38-PM.png?fit=max&auto=format&n=ffykQlv6rOjVSlEq&q=85&s=691172813020792d0c756b76bcd4945c" alt="Screenshot 2026 06 26 At 7 16 38 PM" title="Screenshot 2026 06 26 At 7 16 38 PM" style={{ width:"55%" }} width="726" height="1056" data-path="images/Screenshot-2026-06-26-at-7.16.38-PM.png" />
    </Frame>
  </Step>

  <Step title="Deploy and share">
    Click `Publish` in the upper right corner to [**share**](/help/platform/access/share-to-web) or [**embed**](/help/platform/basics/embedding) your app.
  </Step>
</Steps>
