All applications providing UI implement the same pattern regarding styling.

Configure the overlay folders

In order to make the application read the custom files instead of the default files the configuration parameter overlay_dirs must be used.

Add parameter "overlay_dirs":<path_to_custom_directories>.

Simple example from a Forms config.

In the custom directory create a folder, "assets".

Favicon

in the assets folder of your overlay_dir, place the favicon.ico.

css_overrides.css

Configure the css_overrides.css file in the assets/ folder of your overlay_dir

The file is empty by default. To override the css variables used in the applications see all the default values below. Note, if you wish to only override for example the button background color you do not need to include the rest of the variables.

Default values/available variables

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  src: url('fonts/font-inter/inter-regular.woff2') format('woff2'),
    url('fonts/font-inter/inter-regular.woff') format('woff');
}
@font-face {
  font-family: 'Inter var';
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
  font-named-instance: 'Regular';
  src: url('fonts/font-inter/inter-roman.var.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter var';
  font-weight: 100 900;
  font-display: swap;
  font-style: italic;
  font-named-instance: 'Italic';
  src: url('fonts/font-inter/inter-italic.var.woff2') format('woff2');
}

:root {
  --color-primary: #024550;
  --color-accent: #00cc7e;
  --color-background: #181830;
  --color-surface: #ffffff;
  --color-backface: #f5f5f5;
  --color-on-primary: #ffffff;
  --color-on-surface: var(--color-primary);
  
  --color-button-background: #181830;
  --color-button-background-hover: #c7f3aa;
  --color-button-background-disabled: #d4d4d4;
  --color-button-text: #ffffff;
  --color-button-text-hover: #181830;
  --color-button-text-disabled: #181830;
  --color-link: #045e6c;
  --color-link-hover: #058194;
  --color-link-text-disabled: #bcbcbc;
  --button-radius: 0rem;
  
  --background-image: url('bg_login.svg') no-repeat center center/cover fixed;
  --background-fallback-color: var(--color-background);
  --color-header-background: var(--color-primary);
  --color-header-text: var(--color-on-primary);
  --color-progress-filled: #024550;
  --color-progress-background: #e2e8e9;
  --color-loader-indicator-bottom: #00ca7b;
  --color-loader-indicator-middle: #02444e;
  --color-loader-indicator-top: rgba(200, 200, 200, 0.7);
}

html {
  color: var(--color-on-surface);
  background-color: var(--background-fallback-color);
  background: var(--background-image), var(--background-fallback-color);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
    'Segoe UI Symbol';
}
@supports (font-variation-settings: normal) {
  html {
    font-family: 'Inter var', -apple-system, BlinkMacSystemFont, 'Segoe UI',
      Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji',
      'Segoe UI Emoji', 'Segoe UI Symbol';
  }
}
@media (min-width: 521px) and (max-height: 915px) {
  :root {
    font-size: 95%;
  }
}
@media (min-width: 521px) and (max-height: 880px) {
  :root {
    font-size: 90%;
  }
}
@media (min-width: 521px) and (max-height: 830px) {
  :root {
    font-size: 85%;
  }
}
@media (min-width: 521px) and (max-height: 760px) {
  :root {
    font-size: 82%;
  }
}
.loader {
  position: relative;
  width: 77px;
  height: 48px;
  background: #00ca7b;
  background: var(--color-loader-indicator-bottom);
  transform: rotateX(65deg) rotate(45deg);
  color: #02444e;
  color: var(--color-loader-indicator-middle);
  animation: layers1 1s linear infinite alternate;
}
.loader:after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(200, 200, 200, 0.7);
  background: var(--color-loader-indicator-top);
  animation: layerTr 1s linear infinite alternate;
}
@keyframes layers1 {
  0% {
    box-shadow: 0px 0px 0 0px;
  }
  90%,
  100% {
    box-shadow: 20px 20px 0 -4px;
  }
}
@keyframes layerTr {
  0% {
    transform: translate(0, 0) scale(1);
  }
  100% {
    transform: translate(-25px, -25px) scale(1);
  }
}

Examples

Example: To update the button backgrounds define in your css_overrides.css:

:root {
  --color-button-background: #ffe4c4;
  --color-button-background-hover: rgb(143 188 143);
  --color-button-text: #32cd32;
  --color-button-text-hover: #00fa9a;
}

Example: To change background image

Make sure image is available in the assets folder (using the overlay method preferably) and define in your css_overrides.css

:root {
  --background-image: url('new_background_image.png') no-repeat center center fixed;
}

Customizing translations

All text that is displayed can be customized. The default locale file contains standard translations and can be changed and extended by future updates. Use the overlay method to override the default locale file with a custom file. The default file will be merged with the custom file, with the keys in the custom file taking precedence.

Add more languages

Default provided languages are English and Swedish. Language files must be present in <overlay_dir>/assets/locales/ E.g. assets/locales/en.json

To add more languages add to the array in supportedLanguages and place file (using overlay method) in locales folder. E.g. add the following to the supportedLanguages array {code: 'de', name: 'Deutsch'} and add a file called assets/locales/de.json

Custom translation keys

To customise translations use localesMergePath to extend and merge with the provided default files.

Example of a custom extension/merge:

Default language file contains the translations keys

{
    "selector.header": "Choose authentication method",
    "selector.error": "An error occured",
    "change_language": ""
}

The overlay_dir contains a ui_config_overrides.json with localesMergePath: "assets/custom_locales/" (See Overlay)

A file is placed in <overlay_dir>/assets/custom_locales/en.json containing the following:

{
    "selector.header": "A different header"
}

The resulting merged language file used in the application will contain the following:

{
    "selector.header": "A different header",
    "selector.error": "An error occured",
    "change_language": ""
}

For each language that will be customised, add language files <overlay_dir>/assets/custom_locales/<lang>.json

Fortified ID aims to make applications that are usable for all.

Fortified ID uses the guidelines of WCAG 2.1 to make content more accessible to a wider range of people with disabilities.

WCAG defines four principles that provides the foundation of making a website/application accessible: that it is Perceivable, Operable, Understandable, Robust.

Examples of how Fortified user interfaces are designed according with accessibility/a11y in mind:

1. Perceivable – Information and user interface components must be presented in ways that users can perceive. For example, providing alternative text for images and ensuring clear color contrasts.

2. Operable – The user interface and navigation must be usable by all, regardless of physical or cognitive ability. This includes keyboard navigation support and avoiding content that may trigger seizures or other health issues.

3. Understandable – Content and interface must be understandable for users, which means clear language, predictable navigation, and explanations where necessary.

4. Robust – Content must be robust enough to work with a variety of assistive technologies and future user agents.

This is how overrides of ui_config should be done in all frontend apps/auth.

Configure the ui_config_overrides.json

Use overlay to provide the custom file and place the file in <overlay_dir>/assets/ui_config_overrides.json.

The data in ui_config_overrides.json will be merged with the default values.

Logo Configuration

All logos are configured as follows:

All logos can be made into links.

For example, BankID has the following default configuration, where it has BankID's logo at the top (with some negative margins because it has so much whitespace in it and we have our own margins otherwise):

Advanced Configuration

If you want or need to have the same overrides file for several apps, you can also configure more advanced for all apps (password_reset, forms, portal, enrollment), all access (bidomd selector etc) and all infoendpoint by scoping as below. You can also make configuration for a specific app/auth/infoendpoint.

Variables in Config

If variables are defined in the variables object, all instances of the variable will be replaced in the output to the browser. Note: since search and replace are used for variables, use caution when naming the variables. Use for example __VARIABLE_NAME__ as naming convention to avoid unexpected bugs.