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 default theme for SAP Fiori is called SAP Quartz Light. In addition, SAP provides alternative themes: SAP Quartz Dark for SAP Fiori applications to work in environments where low light is necessary or unavoidable, and the accessibility themes SAP High-Contrast Black (HCB) and SAP 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.

Iconography

Learn more about icon semantics, the geometric icon grid system, line thickness and border radius, and the SAP icon font in the Iconography article.

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.

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.