> 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/get-started.md).

# Get started

First steps for applying an organisation overlay to a Fortified ID application

This page takes you from a standard installation to a visibly changed application in four steps. It uses Fortified ID Access as the example, where an overlay directory is configured out of the box.

## Where the files go

An overlay directory contains an `assets` folder, and the files inside it replace files of the same name in the application.

```
<overlay directory>/
└── assets/
    ├── css_overrides.css
    ├── ui_config_overrides.json
    └── logo.svg
```

In Fortified ID Access the overlay directory defaults to `${system.customer_home}/overlay`, so no configuration change is needed to get started. Other products set `overlay_dir` or `overlay_dirs` explicitly. See [Overlay](/common/overlay.md).

## Change a colour

1. Create `<overlay directory>/assets/css_overrides.css`.
2. Add the variables you want to change. Only the variables you list are affected.

   ```css
   :root {
     --color-primary: #6b2d5c;
     --color-button-background: #6b2d5c;
   }
   ```
3. Reload the authentication page. The change applies immediately; no restart is required.

If nothing changes, check that the file is reachable at `<application url>/assets/css_overrides.css` in the browser. A 404 means the overlay directory is not configured or the file is in the wrong folder.

The full list of variables is in [CSS](/common/css.md).

## Change the logo and title

1. Place your logo in `<overlay directory>/assets/`.
2. Create `<overlay directory>/assets/ui_config_overrides.json`.

   ```json
   {
     "logos": {
       "access_header": {
         "src": "assets/logo.svg",
         "size": "80px"
       }
     },
     "title": "Acme"
   }
   ```
3. Reload the page.

Which logo slots an application uses by default differs per application, so check [UI Configuration Overrides](/common/ui-configuration-overrides.md) before assuming a slot is in use.

## Next steps

* [Overlay](/common/overlay.md) — which files an overlay can contain and how they take effect
* [UI Configuration Overrides](/common/ui-configuration-overrides.md) — the full property reference, scoping, and resolution order
* [Language translations](/common/language-translations.md) — changing and adding texts
* [Brand assets](/common/brand-assets.md) — guidelines for sourcing logos and background images