> **Can't find what you're looking for?** Use `search_docs` on the docs MCP server at `https://docs.prividium.com/api/mcp` to find what you need.
>
> **Have feedback?** Use `submit_feedback` on the same MCP server.

You can replace the default **Prividium™ branding with your own brand name, logo, favicon, and color palette**. All
branding settings are optional. If you skip them, the standard Prividium™ look and feel is used.

This document describes how to customize the branding for the **Admin Panel** and **User Panel**. The **Block Explorer**
uses a separate configuration file -- see [Block Explorer Branding](#4-block-explorer-branding).

:::note[Custom branding is applied at build time. Please contact Prividium™ partner support to apply custom branding.]
:::

## 1. Brand Name and Logo

To customize the brand name and logo, set the following variables in your `.env` file:

| Variable          | Description                                        | Default               |
| ----------------- | -------------------------------------------------- | --------------------- |
| `VITE_BRAND_NAME` | Display name shown in the page title and UI header | `Prividium™`         |
| `VITE_LOGO_URL`   | URL or path to the logo image (SVG recommended)    | `/prividium_logo.svg` |

```bash
VITE_BRAND_NAME=Custom Chain
VITE_LOGO_URL=/custom-chain-logo.svg
```

* **`VITE_BRAND_NAME`** appears in the browser tab title (e.g. *Your Chain Name Admin Panel*) and in the application
  header. The name is used to personalize the UI for your chain.
* **`VITE_LOGO_URL`** is displayed in the top-left corner of the UI. SVG format is recommended. You can use a path to a
  file in the container (place it in `public/`) or a full URL to an externally hosted image.

### Where a logo can be hosted

This applies to every logo the panels load, including per-organization logos set in the Admin Panel.

The panels send a `Content-Security-Policy` that restricts images to `img-src 'self' data: blob:`, the origin of
`STATIC_ASSETS_URL` when CDN delivery is enabled, and a fixed set of wallet-ecosystem image hosts (WalletConnect, 1inch, IPFS, Zerion, CoinGecko, ZKsync assets).
A logo is reliably loadable when it is:

* A path on the panel's own origin, such as `/custom-chain-logo.svg` (place the file in `public/`), or
* An `https://` URL whose origin matches `STATIC_ASSETS_URL` while `STATIC_ASSETS_MODE` is `verified` or `trusted`.

An `https://` URL on any other origin saves successfully but the browser blocks the request, so the panel shows no logo and reports a CSP violation in the console. Serve the image from the panel itself, use an already allowed image host, or add its origin to `img-src` through the deployment's `CSP_OVERRIDE`. Do not enable trusted JavaScript delivery just to load a logo. `http://` URLs, protocol-relative URLs and paths containing `..` are rejected outright.

`CSP_OVERRIDE` replaces the panel's entire Content-Security-Policy. Preserve the existing security directives and the origins required by your deployment.

The Admin Panel also sends `Cross-Origin-Embedder-Policy: credentialless`, so externally hosted images are fetched without credentials. The image host must be publicly readable; a host that requires cookies or auth headers will not load.

## 2. Favicon

The favicon is the small icon displayed in browser tabs. Two favicon slots are available: a primary icon (typically SVG)
and an alternate icon (typically PNG for broader browser compatibility).

To customize the favicon, set the following variables in your `.env` file:

| Variable                      | Default                 | Notes                                                       |
| ----------------------------- | ----------------------- | ----------------------------------------------------------- |
| `VITE_FAVICON_IMAGE_URL`      | Same as `VITE_LOGO_URL` | Falls back to your logo when not set                        |
| `VITE_FAVICON_IMAGE_TYPE`     | `image/svg+xml`         | MIME type of the primary favicon                            |
| `VITE_ALT_FAVICON_IMAGE_URL`  | `/prividium_logo.png`   | Alternate icon for browsers that don't support SVG favicons |
| `VITE_ALT_FAVICON_IMAGE_TYPE` | `image/png`             | MIME type of the alternate favicon                          |

Example:

```bash
VITE_FAVICON_IMAGE_URL=/your-logo.svg
VITE_FAVICON_IMAGE_TYPE=image/svg+xml
VITE_ALT_FAVICON_IMAGE_URL=/your-logo.png
VITE_ALT_FAVICON_IMAGE_TYPE=image/png
```

## 3. Color Theme

You can override the application's color palette to match your brand. Six color roles are available:

| Color       | Where it appears                                 |
| ----------- | ------------------------------------------------ |
| `primary`   | Buttons, links, focus rings, and primary actions |
| `secondary` | Accent elements                                  |
| `neutral`   | Text, borders, and backgrounds                   |
| `success`   | Success messages and indicators                  |
| `error`     | Error messages and destructive actions           |
| `warning`   | Warning messages and caution indicators          |

All color roles are optional. Only the ones you set are overridden; the rest keep their defaults.

### How to provide colors

Each color accepts one of three formats:

| Format              | Example                                  | What happens                                                                        |
| ------------------- | ---------------------------------------- | ----------------------------------------------------------------------------------- |
| Hex color           | `"#7c3aed"`                              | A full shade palette (50 through 900) is generated automatically                    |
| Tailwind color name | `"violet"`                               | Uses the built-in [Tailwind CSS color palette](https://tailwindcss.com/docs/colors) |
| Full shade object   | `{"50":"#faf5ff", "100":"#f3e8ff", ...}` | Each shade is used exactly as provided                                              |

For most use cases, passing a single hex value for `primary` is recommended. A full set of lighter and darker shades is
generated automatically.

#### Full shade example

If you need precise control over every shade, provide a full shade object (this works with both Option A and Option B
below):

```json
{
  "primary": {
    "50": "#F3F5FF",
    "100": "#D9D9F9",
    "200": "#CBCBFF",
    "300": "#8C8DFC",
    "400": "#5D65B9",
    "500": "#53579f",
    "600": "#4E529A",
    "700": "#32325D",
    "800": "#27274E",
    "900": "#11142B"
  },
  "secondary": "amber"
}
```

#### Option A: Inline JSON (environment variable)

Pass the theme as a JSON string in `VITE_THEME_CONFIG`:

```bash
# Simple: just override the primary color
VITE_THEME_CONFIG='{"primary":"#7c3aed"}'
```

```bash
# Override multiple colors
VITE_THEME_CONFIG='{"primary":"#7c3aed","neutral":"slate"}'
```

#### Option B: Theme file

If you prefer not to embed JSON in an environment variable, create a JSON file and mount it into your container. Point
`VITE_THEME_CONFIG_FILE` to the file path:

```bash
VITE_THEME_CONFIG_FILE=/config/theme.json
```

The file should contain the same JSON object:

```json
{
  "primary": "#7c3aed",
  "neutral": "slate"
}
```

:::info[If `VITE_THEME_CONFIG_FILE` points to a file that does not exist, the application will fail to start.]
Make sure the file is mounted and readable.
:::

:::note
If both `VITE_THEME_CONFIG` and `VITE_THEME_CONFIG_FILE` are set,
the environment variable takes priority and the file is ignored.
:::

## 4. Block Explorer Branding

The Block Explorer is configured separately through its `config.js` runtime configuration file (not through `VITE_*`
environment variables).

To apply your branding, update the `config.js` file that is mounted into the Block Explorer container:

```javascript
window['##runtimeConfig'] = {
  // ... your existing network config ...
  brandName: 'Your Chain Name',
  theme: {
    colors: {
      primary: '#7c3aed',
      neutral: 'slate'
    }
  }
};
```

The `theme.colors` object accepts the same formats described above (hex string, Tailwind color name, or full shade
object).

### Contact Us Link

By default, Prividium deployments of the Block Explorer hide the "Contact us" link (shown in the footer and on the "not
found" page), so your users are never sent to the public ZKsync support form.

To show the link with your own support contact, add `links.contactUsUrl` to the same `config.js` file:

```javascript
window['##runtimeConfig'] = {
  // ... your existing network config ...
  links: {
    contactUsUrl: 'https://your-company.example/support'
  }
};
```

| Key                  | Required | Default | Description                                                            |
| -------------------- | -------- | ------- | ---------------------------------------------------------------------- |
| `links.contactUsUrl` | No       | --      | Support URL for the "Contact us" link. When unset, the link is hidden. |

## 5. Per-Organization Branding

Zone admins can assign a distinct brand identity to each organization from the Admin Panel. Members of the organization
see the organization's brand name, logo, and primary color instead of the zone brand.

To configure it, open **Admin Panel > Organizations**, select an organization, and go to the **Branding** tab.

| Field         | Description                                      | Constraints                                                                        |
| ------------- | ------------------------------------------------ | ---------------------------------------------------------------------------------- |
| Brand name    | Shown in panels and wallet-login prompts         | Up to 200 characters, no line breaks                                               |
| Logo URL      | Displayed in the top-left corner of the panels   | Must follow the rules in [Where a logo can be hosted](#where-a-logo-can-be-hosted) |
| Primary color | Overrides the primary action color in the panels | Hex value only: `#RGB` or `#RRGGBB`                                                |

All three fields must be set together. Partial branding is not stored to avoid a mixed appearance (for example, an organization's name beside the zone logo).

To revert an organization to the zone brand, click **Remove branding**. This clears all three fields at once.

## 6. Branding Variables Recap

| Variable                      | Required | Default                 | Description                                    |
| ----------------------------- | -------- | ----------------------- | ---------------------------------------------- |
| `VITE_BRAND_NAME`             | No       | `Prividium™`           | Brand name shown in the page title and header  |
| `VITE_LOGO_URL`               | No       | `/prividium_logo.svg`   | Path or URL to your logo image                 |
| `VITE_FAVICON_IMAGE_URL`      | No       | Same as `VITE_LOGO_URL` | Primary favicon path or URL                    |
| `VITE_FAVICON_IMAGE_TYPE`     | No       | `image/svg+xml`         | MIME type of the primary favicon               |
| `VITE_ALT_FAVICON_IMAGE_URL`  | No       | `/prividium_logo.png`   | Alternate favicon path or URL                  |
| `VITE_ALT_FAVICON_IMAGE_TYPE` | No       | `image/png`             | MIME type of the alternate favicon             |
| `VITE_THEME_CONFIG`           | No       | --                      | Color theme as a JSON string                   |
| `VITE_THEME_CONFIG_FILE`      | No       | --                      | Path to a JSON file containing the color theme |