> ## Documentation Index
> Fetch the complete documentation index at: https://docs.neobank.proofof.tech/llms.txt
> Use this file to discover all available pages before exploring further.

# Branding & theming

> Configure the runtime product name and mark, then customize build-time colors and typography.

# Configure branding

Set the customer-visible name and text mark at runtime. One API and web image can serve multiple same-origin bank deployments without a rebuild.

## Configure the runtime identity

Set these variables for every deployment:

```dotenv theme={null}
NEOBANK_APP_NAME=Example Neobank
NEOBANK_APP_NAME_AR=
NEOBANK_APP_MARK=N
```

`NEOBANK_APP_NAME` also prefixes the FastAPI title, protected Swagger title, Perflo device identity, and Auth0 resource names. `NEOBANK_APP_NAME_AR` is optional. Localized Arabic surfaces use the English name when it is empty. `NEOBANK_APP_MARK` is a short text mark for the application shell.

The web app requests `GET /v1/public-config` before it renders the sign-in screen or authenticated shell. The response contains only `app_name`, `app_name_ar`, and `app_mark`. A failed request produces a neutral configuration-unavailable screen instead of a fallback brand.

The bootstrap updates the document title and description from the same response. Keep the frontend API base at `/v1`; runtime branding does not require a Vite build argument.

## Keep protocol identifiers separate

Set these stable deployment-owned identifiers independently of the visible name:

```dotenv theme={null}
NEOBANK_AUTH0_CLAIM_NAMESPACE=https://identity.neobank.example/claims
NEOBANK_PROBLEM_TYPE_BASE=https://api.neobank.example/problems
```

The API reads the role claim at `<claim namespace>/roles` and the actor claim at `<claim namespace>/actor_type`. Problem responses use `<problem type base>/<error code>`. Production rejects blank, reserved example, and malformed identifiers.

## Customize colors and typography

Colors and fonts remain build-time choices in `apps/web/src/styles.css`. Change the CSS custom properties on `:root`, then rebuild the web image:

```css apps/web/src/styles.css theme={null}
:root {
  color: #18312a;
  background: #f3f0e8;
  font-family: "Avenir Next", Avenir, "Trebuchet MS", sans-serif;
  --ink: #18312a;
  --muted: #66736d;
  --paper: #fffdf8;
  --line: #d9d8cf;
  --green: #145b47;
  --mint: #bfe0c9;
  --sand: #dcc79d;
  --danger: #a33c32;
}
```

The sidebar, account cards, and payment card also contain direct color literals. Search `apps/web/src/styles.css` for hex values when applying a complete color theme.

The `Powered by Perflo` attribution identifies the upstream provider. It is not the launching bank's runtime identity.

## Related configuration

* [Environment variables](reference/environment-variables) lists every runtime field
* [Configure Auth0](deploy/auth0) derives identity resources from the same values
* [Perflo hosted origins](customize/perflo-origins) explains why provider origins remain pinned