📋 Appearance
Colors
To reflect your organization's color scheme in FTAPI, you can customize four color values. You can choose these freely. However, we recommend following these two rules when selecting colors.
Color Gradient
Base your color customization on the color gradient suggested by FTAPI. This means: select a main color (= default) from which different brightness levels are derived.
| Default | ✔︎ Correct customization | ❌ Incorrect customization | |
|---|---|---|---|
| Dark | #0B7530 | #2D40BD | #2D40BD |
| Default | #19853F | #4058E0 | #BF1D1D |
| Light | #DDE8CF | #DBDBFF | #DBDBFF |
| Very light | #EEF4E7 | #EDEDFD | #EDEDFD |
| Colors reflect the suggested gradient. | Colors deviate from the suggested gradient. |
Color Contrast
The color contrast should be strong enough to ensure the readability of white text on the main color and the hover color.
Both should meet the requirements of level AA of the Web Content Accessibility Guidelines (WCAG) 2.2. This can be checked with any standard color contrast tool (e.g., WEB AIM Contrast Checker).
| Default | ✔︎ Correct customization | ❌ Incorrect customization | |
|---|---|---|---|
| Dark | #0B7530 | #2D40BD | #2D40BD |
| Default | #19853F | #4058E0 | #7575FF |
| Light | #DDE8CF | #DBDBFF | #DBDBFF |
| Very light | #EEF4E7 | #EDEDFD | #EDEDFD |
| Contrast is high enough for white text to be readable. | Contrast is too low. |
Company Logo
Recommended size: 260px x 100px SVG, PNG or JPEG
The company logo is placed in central locations to provide users with orientation during their first interactions and to strengthen trust in the platform (e.g., emails, login, download delivery).
For this, landscape or square logos are recommended. Portrait-oriented company logos are generally not suitable for web applications, but can still be uploaded. A company logo larger than 260px x 100px will be automatically resized. Smaller company logos will not be automatically enlarged.
Icon
Recommended size: 64px x 64px SVG or PNG (GIF and ICO formats are also possible)
Recommended color: Logo on a white background
The icon is a square logo that is displayed in the browser tab and in the in-app navigation. Smaller or larger icons are automatically adjusted to 32px x 32px.