---
title: "Customize branding"
version: "next"
canonical: "https://docs.obot.ai/next/functionality/branding"
unreleased: true
---

<a id="obot-doc-branding"></a>

# Customize branding

Branding allows administrators to customize the visual appearance of the Obot platform. Access this page from **Platform > Branding**.

<a id="obot-doc-theme"></a>

## Theme

Select **Theme** in the configuration sidebar to customize colors and typography.

<a id="obot-doc-mode-light--dark"></a>

### Mode (Light / Dark)

Use **Mode** to choose which color scheme you are editing. The preview updates immediately so you can tune light and dark appearances separately.

<a id="obot-doc-surfaces-custom--tinted"></a>

### Surfaces (Custom / Tinted)

Under **Surfaces**, choose how page and panel backgrounds are set:

<a id="obot-doc-custom"></a>

#### Custom

- **Background**: Page background
- **Surface 1, 2, 3**: Layered UI surfaces (cards, panels, nested regions)

Use the color swatch or enter a value in the text field. Supported formats include hex (`#rrggbb`), `hsl()` / `hsla()`, and `oklch()`.

<a id="obot-doc-tinted"></a>

#### Tinted

Derive surfaces from Obot’s built-in default surface ramp using three sliders for the active mode:

- **Hue**: Shifts the overall surface hue
- **Tint**: Adds color tint (0–100%)
- **Shade**: Lightens or darkens the ramp; the center position is neutral

<a id="obot-doc-per-theme-colors"></a>

### Per-Theme Colors

The **Per-Theme Colors** toggle controls whether accent, button/indicator, and text colors are editable separately. This is beneficial if you need to make individual adjustments to the colors below per theme.

<a id="obot-doc-accent-color"></a>

### Accent Color

The primary brand color used for primary buttons, links, highlights, and similar emphasis.

<a id="obot-doc-buttons--indicators"></a>

### Buttons & Indicators

Colors for non-primary actions and status styling in the active mode:

- **Secondary**: Secondary buttons (for example **Cancel**)
- **Success**: Success states and success buttons
- **Warning**: Warning states and warning buttons
- **Error**: Error states and error buttons

<a id="obot-doc-text"></a>

### Text

Typography and text-on-color settings for the active mode:

- **Base Font Color**: Default body and UI text
- **On-Accent Button Text**: Text on primary (accent) buttons
- **Success Button Text**: Text on success buttons
- **Warning Button Text**: Text on warning buttons
- **Error Button Text**: Text on error buttons
- **Font Family**: UI font stack—**Poppins** (default), **Helvetica Neue**, or **System Default**

<a id="obot-doc-logos"></a>

## Logos

Select **Logos** in the configuration sidebar to replace icons and full logos.

<a id="obot-doc-icons"></a>

### Icons

These apply across light and dark mode:

- **Default Icon**: The standard icon shown in the UI
- **Error Icon**: Icon displayed for error states
- **Warning Icon**: Icon displayed for warning states

<a id="obot-doc-full-logos"></a>

### Full Logos

Full logos depend on the selected **Mode** (light or dark):

- **Full Logo**: The main logo shown in the navbar (separate versions for light and dark schemes)
- **Full Enterprise Logo**: Logo used when running enterprise version of Obot

Changes preview live in the main area; they are not stored until you click **Save**.

<a id="obot-doc-restoring-defaults"></a>

## Restoring Defaults

Click **Restore Default** to reset all preferences to the original Obot theme.