Updated: September 30, 2019

Colors

FUIColorStyle

Intro

Color plays a significant role in SAP Fiori for iOS apps. It communicates the importance of and associations between content and provides users direction to help them complete their tasks.

Color Palette

Color schemes have been chosen for SAP Fiori for iOS to bring on-screen content to the fore. Please review the light and dark color schemes and select options that provide a sense of cohesiveness to your app.

Main Colors

Main colors set the tone of SAP Fiori for iOS and ensure that the information presented to users has sufficient visual contrast.

Tint Colors

Tint colors indicate to the user that certain app elements are interactive—for example, text and icons. There are two tint colors: light and dark tint. Light tint is used for content presented on a dark background, while the dark tint is applied to content on a light background.

Be mindful that tint colors are only used for interactive elements, and avoid using color hues similar to the tint colors for non-interactive elements.

Semantic Colors

Use semantic colors to call attention to important information. This information may be positive, negative, or critical. For example, semantic red warns the user that a particular task needs attention.

Accent Colors

The recommended accent colors work harmoniously with SAP Fiori for iOS’s default color scheme and are typically applied to backgrounds, dividers, and lines. Avoid using accent colors in the text.

Text Colors

Text colors may only be applied to non-interactive elements.

Chart Colors

Use chart colors for chart plot and legend-related components. There is currently only one color that can be used on the dark background (such as the Object Header). Text semantic colors may also be used for charts and analytical components.

Resources

SAP Fiori for iOS Stencils – Compact

SAP Fiori for iOS Stencils – Regular

FUIColorStyle — SAP Cloud Platform SDK for iOS Documentation, Fiori Reference