The look, feel, and wording of a product are part of its branding. Their consistent use ensures the recognition effect we are all striving for. It is therefore important to adhere to the guidelines laid out in the following section and articles:
SAP provides design tokens for color, typography, shadow, and metrics in a central repository.
The design token styles are linked directly to the SAP themes that are used across all SAP technologies and platforms. Tokens replace hard-coded values with self-explanatory names that are easy to map to UI components.
For more information, see Design Tokens.
The latest theme for SAP applications is called Morning Horizon. In addition, SAP provides alternative themes: Evening Horizon as an optional dark theme and the accessibility themes High-Contrast Black (HCB) and High-Contrast White (HCW).
For more information, see Theming.
Color communicates importance and association, and provides direction to users. By applying the color palette of the themes, user interfaces guarantee a clean and lightweight design that is consistent and coherent across all SAP Fiori applications.
Familiarize yourself with the concepts of color balance and color usage, especially the interplay between primary colors, accent colors, grayscale areas, and semantic colors.
For more information, see the colors for each theme:
Learn about the icon styles for each theme family. In addition to the general icon semantics and grid system, each article covers the line thickness and corner radius values defined for the respective theme. These styling differences explain why the same icons can look slightly different, depending on the theme you’re using.
UI Texts and In-App Help
This section contains guidelines for UI texts and in-app help.