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
Use the color gradient suggested by FTAPI as a guide for your color customization. This means: select a main color from which different brightness levels are derived.
| Default | ✔︎ Correct customization | ❌ Incorrect customization | |
|---|---|---|---|
| Rows | #EEF4E7 | #EDEDFD | #EDEDFD |
| Row hover | #DDE8CF | #DBDBFF | #DBDBFF |
| Main theme | #19853F | #4058E0 | #BF1D1D |
| Main hover | #0B7530 | #2D40BD | #2D40BD |
| 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 theme and main 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 | |
|---|---|---|---|
| Rows | #EEF4E7 | #EDEDFD | #EDEDFD |
| Row hover | #DDE8CF | #DBDBFF | #DBDBFF |
| Main theme | #19853F | #4058E0 | #7575FF |
| Main hover | #0B7530 | #2D40BD | #2D40BD |
| 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 orientation to users during their first interactions and to strengthen trust in the platform (e.g., emails, login, downloading deliveries).
Landscape or square logos are recommended for this purpose. 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)
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.