> For the complete documentation index, see [llms.txt](https://docs.fortifiedid.se/common/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.fortifiedid.se/common/overview.md).

# Overview

Overview of how the Fortified ID user interface can be adapted to match an organisation's visual identity.

All Fortified ID frontend applications support organisation-specific branding through an overlay mechanism. An overlay controls logos, favicon, background image, colors, titles, and logo behavior across different flows.

An overlay is a directory of files placed alongside the installation. Together they let you adapt the look and feel of authentication pages, Forms, Portal, Password Reset, and the other applications without modifying application code. New to this, start with [Get started](/common/get-started.md).

## Overlay files

Two files drive everything else. The remaining files are images you reference from them.

| File                       | Purpose                                                                                                     |
| -------------------------- | ----------------------------------------------------------------------------------------------------------- |
| `css_overrides.css`        | Colors, buttons, links, progress bar, header, loader, background.                                           |
| `ui_config_overrides.json` | Names, titles, logo files, logo sizes, footer link, per-application logo visibility.                        |
| `favicon.ico`              | Site icon shown in the browser tab.                                                                         |
| `logo.svg`                 | Primary logo. Replaces the built-in logo in the applications that use that slot.                            |
| Background image           | Shown behind authentication pages. Activated from `css_overrides.css`.                                      |
| Negative logo              | White or negative variant for Portal, Forms, and Password Reset. Activated from `ui_config_overrides.json`. |

{% hint style="info" %}
The last two entries are conventions rather than fixed file names. They do nothing until something points at them. See [Overlay](/common/overlay.md) for the distinction.
{% endhint %}

To go further than restyling and replace the user interface of an authenticator entirely, see [Custom frontend](https://docs.fortifiedid.se/access/authenticators/custom-frontend) in the Access documentation.

## Examples

### Authentication selector

The default selector page with annotated overlay areas, and an organisation-specific override.

<figure><img src="https://4287938875-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fl1cVaB6ws1gyKbLT4kzN%2Fuploads%2Fgit-blob-65262e041d103f195f7c2ff65ff38df5cf2579b0%2Fexample-1.jpg?alt=media" alt="Default authentication selector with overlay areas annotated"><figcaption><p>Default authentication selector</p></figcaption></figure>

<figure><img src="https://4287938875-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fl1cVaB6ws1gyKbLT4kzN%2Fuploads%2Fgit-blob-cd541cbfd6aff0331278cbc980184adbee1e8717%2Fexample-1-overrided.jpg?alt=media" alt="Organisation-specific authentication selector override"><figcaption><p>Organisation-specific override</p></figcaption></figure>

### Portal

The default portal page with annotated overlay areas, and an organisation-specific override.

<figure><img src="https://4287938875-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fl1cVaB6ws1gyKbLT4kzN%2Fuploads%2Fgit-blob-eea07b91baa67b40aec2d723e6517e04fe7617c0%2Fexample-2.jpg?alt=media" alt="Default portal with overlay areas annotated"><figcaption><p>Default portal</p></figcaption></figure>

<figure><img src="https://4287938875-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fl1cVaB6ws1gyKbLT4kzN%2Fuploads%2Fgit-blob-16c76036ccdba06ca45060b934a6041b0720d633%2Fexample-2-overrided.jpg?alt=media" alt="Organisation-specific portal override"><figcaption><p>Organisation-specific override</p></figcaption></figure>