Quartz Light is the standard theme for SAP Fiori applications. Color communicates importance and association, and provides direction to users. By applying the color palette, user interfaces guarantee a clean and lightweight design that is consistent and coherent across all SAP Fiori applications.

Color Balance

Color balance refers to the recommended mixture of light and dark, and colored and non-colored areas of any SAP Fiori app interface.

Approaching the ideal color balance for each page creates a visual rhythm throughout the application. It also helps to draw the user’s attention to the most important information and functions. Furthermore, it promotes a distinct and consistent look and feel throughout all SAP Fiori apps.

• The Quartz Light theme background colors are subtle, calm, reduced, and minimalistic.
• A reduced background color scheme ensures a stable base for any application content. Foreground colors support the importance, prominence, and visual connection of the information displayed.

Color Usage

Each theme is based on a set of individual base reference values. These are:

• Primary (main user interface colors)
• Secondary (accent colors)
• Grayscale (neutral values)
• Semantic (value state colors)

The reference colors listed on this page give a helpful indication as to where they are used in the UI controls and layouts. However, it is extremely important that reference values are not used directly in the control styling. The Quartz Light reference color values are specific to this particular theme, but are assigned to control parameters.

The reference colors are used as base values, whichare then distributed into the UI controls via a stable set of theme control parameters that are available in each theme. Theme control parameters represent semantically named parts of the controls. They are decoupled from the actual color values so that the color values can be easily replaced. The theming guideline explains how these reference values are mapped to the user interface controls.

Primary Colors

The recommended primary colors leverage the uniqueness of SAP Fiori apps. The primary colors represent the overall look and feel.

SAP Fiori Standard Theme Primary Colors

SAP Fiori Launchpad Gradient

The gradient is mainly applied to launchpad or dashboard overview page types.

Accent Colors

Secondary colors can be applied to accentuate important elements. They make a vivid contribution to the overall UI and should be used sparingly.

Grayscale

Grayscale areas play an important role in any SAP Fiori user interface. They minimize the risk of over-stimulation and foster simplicity. White and the light grays are mainly used for areas in the background or for borders. Darker gray shades are primarily used for text.

Semantic Colors

Semantic colors can be used to represent a negative, critical, positive, neutral, or information status. For more information, see How To Use Semantic Colors / Industry-Specific Colors.

Semantic Foreground Colors

Semantic Background Colors

Indication Colors

The indication color palette is used to follow the color conventions in a line of business or industry. All values are themeable and the meaning of each color depends on the business context. For more information, see How To Use Semantic Colors / Industry-Specific Colors.