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
• Theming
• Colors
• Iconography
• Motion Design
• Typography
• UX Illustrations
• UI Texts and In-App Help

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:

• Morning Horizon Colors
• Evening Horizon Colors
• Quartz Light Colors
• Quartz Dark Colors
• Belize Colors

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.

If you need an app icon that you can use for your web app in a marketplace, check out the guidelines for creating service icons.

• Iconography – Horizon
• Iconography – Quartz
• Service Icons

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:

• Typography – Horizon
• Typography – Quartz

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.