# Brand your portal

> Make the portal look like your site: logo, colors, fonts, cover image, links and custom CSS.

Your portal can carry your logo, colors and fonts, and link back to your website. It all lives in one section, with a live preview beside the fields.

## Open the branding settings

1. Open **Portals** and select your portal.
2. Go to the **Settings** tab and find **Branding**.
3. Change the fields below. The preview shows the result before you save.
4. Select **Save changes** at the bottom of the page.

Each picture has **Upload** (**Replace** once one is set) and **Remove**. Drop or paste an image on the picture to upload it, or select **Use a link** to use a picture hosted elsewhere, such as `https://cdn.example.com/logo.svg`. Uploaded pictures keep the same link for good, so they never expire.

## Logo, icon and colors

| Field | What it does |
| --- | --- |
| **Logo** | Your logo, top left of every page and on share images |
| **Browser tab icon** | A square image for the browser tab. help.ai's icon is used when it's empty. |
| **Accent color** | A hex color, such as `#2f5bea`, for buttons, links and focus rings. Pick it with the swatch or type it. Empty uses the default. |
| **Color scheme** | **Match the visitor's device**, **Always light** or **Always dark** |
| **Cover image** | A wide picture behind the home page heading and search, darkened so the text stays readable |

## Corners and fonts

| Field | What it does |
| --- | --- |
| **Corner radius** | The roundness of cards and buttons, such as `4px` or `0.75rem`. The default is `0.75rem`. |
| **Text font** | A font list for reading text that ends in a fallback, such as `"Inter", system-ui, sans-serif` |
| **Heading font** | A font list for titles. Georgia when it's empty. |

A font shows only when the visitor's device has it, such as Georgia, Helvetica or Segoe UI, or when **Custom CSS** loads it with `@import`. Otherwise the next font in the list is used.

## Header and footer links

Add up to 8 **Header links**, such as back to your website, and up to 8 **Footer links**, such as terms, privacy or contact. Each link has a label of up to 40 characters and a full address, such as `https://example.com/privacy`.

## Custom CSS

**Custom CSS** is added to every portal page after the theme. Use it for what the fields above don't cover.

- Up to 20,000 characters. The `<` character isn't allowed, because the field takes CSS only.
- Change the theme with the variables `--primary`, `--radius`, `--portal-font` and `--portal-heading-font`.
- Target a part of the page with `[data-portal-region="header"]`, `"hero"`, `"main"` or `"footer"`.
- Load a web font with `@import`, then name it in **Text font** or **Heading font**.

```css
@import url("https://fonts.googleapis.com/css2?family=Inter&display=swap");
[data-portal-region="hero"] { background: var(--muted); }
```

Leave the field empty to keep the defaults.

## Related

- [Search appearance and analytics for a portal](https://support.help.ai/portals/portal-search-appearance-and-analytics)
- [Connect a custom domain to a portal](https://support.help.ai/portals/connect-a-custom-domain)

<Tip>
Set the **Accent color** to your brand color first. Buttons, links and focus rings pick it up, which often does most of the work.
</Tip>