- Latest Version 1.128
- Version 1.126
- SAPUI Version 1.124
- SAPUI5 Version 1.122
- SAPUI5 Version 1.120
- SAPUI5 Version 1.118
- SAPUI5 Version 1.116
- SAPUI5 Version 1.114
- SAPUI5 Version 1.112
- SAPUI5 Version 1.110
- SAPUI5 Version 1.108
- SAPUI5 Version 1.104
- SAPUI5 Version 1.102
- SAPUI5 Version 1.100
- SAPUI5 Version 1.98
- SAPUI5 Version 1.96
- SAPUI5 Version 1.94
- SAPUI5 Version 1.92
- SAPUI5 Version 1.90
- SAPUI5 Version 1.88
- SAPUI5 Version 1.86
- SAPUI5 Version 1.84
- SAPUI5 Version 1.82
- SAPUI5 Version 1.80
- SAPUI5 Version 1.78
- SAPUI5 Version 1.76
- SAPUI5 Version 1.74
- SAPUI5 Version 1.72
- SAPUI5 Version 1.70
- SAPUI5 Version 1.68
- SAPUI5 Version 1.66
- SAPUI5 Version 1.64
- SAPUI5 Version 1.62
- SAPUI5 Version 1.60
- SAPUI5 Version 1.58
- SAPUI5 Version 1.56
- SAPUI5 Version 1.54
- SAPUI5 Version 1.52
- SAPUI5 Version 1.50
- SAPUI5 Version 1.48
- SAPUI5 Version 1.46
- SAPUI5 Version 1.44
- SAPUI5 Version 1.42
- SAPUI5 Version 1.40
- SAPUI5 Version 1.38
- SAPUI5 Version 1.36
- SAPUI5 Version 1.34
- SAPUI5 Version 1.32
- SAPUI5 Version 1.30
- SAPUI5 Version 1.28
- SAPUI5 Version 1.26
- Latest Version 1.128
- Version 1.126
- SAPUI Version 1.124
- SAPUI5 Version 1.122
- SAPUI5 Version 1.120
- SAPUI5 Version 1.118
- SAPUI5 Version 1.116
- SAPUI5 Version 1.114
- SAPUI5 Version 1.112
- SAPUI5 Version 1.110
- SAPUI5 Version 1.108
- SAPUI5 Version 1.106
- SAPUI5 Version 1.104
- SAPUI5 Version 1.102
- SAPUI5 Version 1.100
- SAPUI5 Version 1.98
- SAPUI5 Version 1.96
- SAPUI5 Version 1.94
- SAPUI5 Version 1.92
- SAPUI5 Version 1.90
- SAPUI5 Version 1.88
- SAPUI5 Version 1.86
- SAPUI5 Version 1.84
- SAPUI5 Version 1.82
- SAPUI5 Version 1.80
- SAPUI5 Version 1.78
- SAPUI5 Version 1.76
- SAPUI5 Version 1.74
- SAPUI5 Version 1.72
- SAPUI5 Version 1.70
- SAPUI5 Version 1.68
- SAPUI5 Version 1.66
- SAPUI5 Version 1.64
- SAPUI5 Version 1.62
- SAPUI5 Version 1.60
- SAPUI5 Version 1.58
- SAPUI5 Version 1.56
- SAPUI5 Version 1.54
- SAPUI5 Version 1.52
- SAPUI5 Version 1.50
- SAPUI5 Version 1.48
- SAPUI5 Version 1.46
- SAPUI5 Version 1.44
- SAPUI5 Version 1.42
- SAPUI5 Version 1.40
- SAPUI5 Version 1.38
- SAPUI5 Version 1.36
- SAPUI5 Version 1.34
- SAPUI5 Version 1.32
- SAPUI5 Version 1.30
- SAPUI5 Version 1.28
- SAPUI5 Version 1.26
Look, Feel, and Wording
Intro
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:
Design Tokens
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.
Theming
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.
Colors
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:
Iconography
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.
Motion Design
Motion design is a design method that applies animation and visual effects to user interface design.
Typography
SAP Fiori uses SAP’s proprietary typeface 72, with a fallback to a sans-serif system font if 72 can’t be loaded.
For more information, see:
UX Illustrations
UX Illustrations are always paired with written messages. Their aim is to help explain complex ideas visually and add more personality to the product.
UI Texts and In-App Help
This section contains guidelines for UI texts and in-app help.
- The UI Text Guidelines for SAP Fiori cover UX writing for the SAP Fiori UI, including word choice, punctuation, formatting, and more.
- Specific UI text guidelines for the overview page are also located here.
- SAP Companion provides context-specific in-app help on UI elements and process flows.