# Customize Brand Colors

Bookit comes with **two distinct sets of colors**, each serving a different purpose:

***

#### 1. **Backoffice Colors (Software Branding)**

These define the **visual identity of the backoffice**, used by admins and staff.

They reflect the **Bookit design system** – clean, functional, and optimized for daily operations.

<figure><img src="/files/9EE5zNljKN2AFhbJoQRt" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
These colors apply only to the internal interface. We recommend keeping them as-is to maintain a consistent experience across all installations of the software.
{% endhint %}

***

#### 2. **Establishment Colors (Front-End Branding)**

These control the **public-facing experience**: the landing page, the online menu, the reservation form, etc.

They are fully customizable to match the **branding of the restaurant, café, or bar** using the template.

<figure><img src="/files/5EPsUG6tdRqgKfebpSUE" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
The goal is to let the owner express the identity of their venue directly on the customer interface.
{% endhint %}

***

### 🛠️ How to Edit the Colors

All colors are defined using **Bubble’s style variables**.

To update them:

1. Open the **Bubble Editor**.
2. Go to the **Styles** tab.
3. Look for variables named "Establishment..."
4. Adjust variables.

Changes will **automatically apply across the app**, ensuring a consistent look without editing each element manually.

{% hint style="danger" %}
We advise you to check the changes carefully to maintain a comfortable UX/UI for users.
{% endhint %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://bookit-2.gitbook.io/bookit-template-bubble/getting-started/quickstart/customize-brand-colors.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.