# Configure branding

## What branding controls

Branding controls the published documentation appearance for the project you select.
You use it to set the site's identity, media, colors, menu, typography, reader theme, and
white-label presentation. White-label presentation controls Atloria attribution, footer text,
and custom CSS on published pages.

Branding applies per project, so each published site carries its own choices. The settings
affect what readers see on the published documentation rather than the administration
workspace itself.

| If you need to… | Go to |
|---|---|
| Set the site's identity, media, colors, menu, typography, or white-label presentation | Review the branding options |
| Save or discard a branding change | Change and save branding |
| Resolve an unavailable preview, plan-gated option, or failed upload | Handle unavailable or plan-gated options |
| Change broader workspace choices | Personalizing your workspace |
| Manage a custom domain | Manage custom domains |
| Configure connected services | Configure integrations |
| Change subscription settings | Configure billing |

## Before you start

**Prerequisites**

| Have or know this first | Why it matters |
|---|---|
| The project you want to change | The form loads branding for the selected project. |
| Whether the project is published | **Open live preview** is available only when the project has both publication identifiers. |
| The branding choices you want to apply | The page loads the current branding values before you edit them. |
| The subscription access for white-label settings | Some Typography and White-label options are marked **PRO** or **BUSINESS** and can be rejected during save. |

If no project is selected, the page shows **Pick a project to brand** and asks you to choose a
project from the header dropdown before customizing the published documentation.

## Open the branding settings

Open Branding from the project settings to choose the appearance and reader-facing presentation
of published documentation.

**Prerequisites**

You have selected the project whose published documentation you want to change.

**Steps**

1. In the application settings navigation, select **Branding**.
2. Choose the tab that matches the change you need.

   | If you need to… | Select |
   |---|---|
   | Change the site name or tagline | **Site info** |
   | Upload a logo or favicon | **Media** |
   | Choose a page theme, preset, or colors | **Colors** |
   | Choose and customize the header | **Top menu** |
   | Choose a font, color mode, reader theme access, or dark-mode logo | **Typography** |
   | Control powered-by text, footer text, or custom CSS | **White-label** |
   | Manage the project's domain | **Domain** |
   | Configure access | **Access** |
   | Configure segmentation | **Segmentation** |
   | Configure developer settings | **Developers** |

**Result:** The selected branding settings tab is open for the chosen project.

## Review the branding options

Review the options before changing anything. The page groups settings by the part of the
published documentation you want readers to recognize.

| Area | Fields and choices |
|---|---|
| Site identity | **Site name**; **Tagline** |
| Media | **Logo**; **Favicon** |
| Colors | **Page theme**; **Quick presets**; **Primary color**; **Accent color** |
| Header | **Header layout**; **Background**; **Text color**; **Height**; **Border color**; **Border style** |
| Typography and reader theme | **Font**; **Color mode**; **Allow readers to switch theme**; **Dark-mode logo** |
| White-label | **Hide "Generated by Atloria"**; **Custom footer**; **Custom CSS** |

The media area provides upload surfaces for **Logo** and **Favicon**. When an asset is already
present, use **Change** to replace it or **Remove** to clear it. The logo accepts PNG or SVG;
the favicon accepts a 32×32 PNG or ICO and falls back to the logo.

The Colors area provides the following choices. The primary and accent values also have a
color picker and a text input.

| Choice group | Options |
|---|---|
| Page themes | **Atloria**, **Ocean**, **Forest**, **Sunset**, **Slate**, **Midnight**, **Carbon** |
| Quick presets | **Atloria**, **Stripe**, **Linear**, **Vercel**, **Notion**, **Emerald**, **Coral**, **Amber** |

The Top menu area offers **Minimal**, **Classic**, **Sidebar**, and **Developer** layouts.
After choosing a layout, you can adjust **Background**, **Text color**, **Height**, **Border
color**, and **Border style**, then select **Reset to defaults**.

Typography includes a font selector, **Light**, **Dark**, and **Auto** color modes, the
**Allow readers to switch theme** switch, and a **Dark-mode logo** field. White-label settings
include switches or fields for **Hide "Generated by Atloria"**, **Custom footer**, and
**Custom CSS**.

The page also includes a **Live preview** with desktop and mobile preview choices. It shows how
readers see the published documentation.

No field is marked required on this surface. The page uses settings fields and preview areas
rather than a data grid, and the color text inputs have no separate field-level validation
message declared here.

## Change and save branding

Change one or more branding values for the selected project.

**Prerequisites**

You have opened the tab containing the setting you want to change and know the value you want
to use.

The save bar appears when the form differs from its loaded values and contains **Discard** and
**Save changes**. It stays hidden while there are no unsaved changes.

**Steps**

1. Select **Site name**, **Tagline**, or another setting shown on the open tab.
2. Choose the edit that matches the field.

   | Edit type | Action |
   |---|---|
   | Text | Enter the new text. |
   | Choice | Select the option you want. |
   | Color | Adjust the color picker or enter the color value. |
   | Switch | Change the switch setting. |

3. To upload an asset, select **Click or drop to upload**.
4. Choose the image file to upload.
5. If an asset is already present, choose one action.

   | Your choice | Action |
   |---|---|
   | Replace the asset | Select **Change**. |
   | Remove the asset | Select **Remove**. |

6. Review the **Live preview** to see the effect of the current values.
7. Choose how to finish the change.

   | Your choice | Action |
   |---|---|
   | Save with the mouse | Select **Save changes** in the sticky save bar. |
   | Save with the keyboard | Press `Cmd+S` on macOS or `Ctrl+S` on other systems while the form has unsaved changes. |
   | Discard the edits | Select **Discard**. |

**Result:** The page shows `Branding saved` after a successful save. After an upload, it shows
`Logo uploaded` or `Favicon uploaded`; after discarding edits, it shows `Changes discarded`.

## Handle unavailable or plan-gated options

Use the message on screen to choose the next action when publication, subscription access, CSS,
or an upload prevents the requested change.

| What you see | What to do |
|---|---|
| `Project is not published yet` | Publish the project before using **Open live preview**. |
| Some fields require the **PRO** or **BUSINESS** plan | Use a plan that includes the selected white-label option, then save again. |
| `Custom CSS was rejected — see the White-label tab` | Review the CSS on the **White-label** tab and correct it. |
| `err.message` displayed under **Custom CSS** | Read the returned message, correct the CSS it identifies, and save again. |
| The page reports `Save failed:` followed by the returned error, or `unknown error` when no error text is available | Correct the reported save problem and retry **Save changes**. |
| The page reports `Upload failed:` followed by the returned error, or `unknown error` when no error text is available | Check the file and retry the upload. |

When a save returns a plan-required response, the page displays an upgrade hint and the plan
message. When the API rejects custom CSS, the page activates the **White-label** tab and shows
the returned `err.message` below the editor.

## Check the result and continue

Check the published appearance after saving so the project presents the intended identity and
visual style to readers.

**Prerequisites**

The project has been published and the branding values have been saved.

**Steps**

1. Select **Open live preview**.
2. In the preview, review the published documentation appearance.
3. Return to Branding.
4. Choose another settings tab when you need to continue configuring the project.

**Result:** The published documentation preview opens in a new browser tab, and the project
branding remains available from its Branding settings.