Updated: June 15, 2022

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:

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 more about icon semantics, the geometric icon grid system, line thickness and border radius, and the SAP icon font in the iconography articles:

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.