Visual Design Foundations - Overview

Intro

Visual design plays a key role in how users perceive and recognize a product. Applying consistent styles reinforces brand identity and helps users feel confident as they interact with your application. Explore the sections below to get an overview of each visual design area and find links to detailed guidance:

• Design Tokens
• Theming
• Colors
• Iconography
• Typography
• UX Illustrations
• Shadows

Design Tokens

At the heart of SAP’s design system

SAP provides design tokens for colors, typography, shadows, and metrics in a central repository. These tokens connect directly to SAP themes used across all SAP technologies and platforms. Tokens replace hard-coded values with clear, meaningful names that are easy to map to UI components.

For more information, see Design Tokens.

Theming

One design, multiple flavors

SAP provides multiple application themes, all of which meet accessibility standards, including WCAG levels AA and AAA (Web Content Accessibility Guidelines 2.2). The latest SAP theme is Horizon, available in a light mode (Morning Horizon) and a dark mode (Evening Horizon). We also offer dedicated high-contrast themes: High-Contrast Black (HCB) and High-Contrast White (HCW).

For more information, see Theming.

Colors

The DNA of SAP’s themes

Color communicates importance and association, guiding users as they work. By applying the theme color palette, you create user interfaces that are clean, lightweight, and consistent across SAP Fiori applications. Make sure you understand the concepts of color balance and color usage, especially the interplay between primary colors, accent colors, grayscale areas, and semantic colors. For more information, explore the color palettes for each theme:

• Morning Horizon Colors (latest theme)
• Evening Horizon Colors (latest theme)
• Quartz Light Colors
• Quartz Dark Colors
• Belize Colors

For more information, see Colors.

Iconography

SAP’s icon font style

Learn about the icon styles for each theme family, including general icon semantics, the grid system, line thickness, and corner radius values.
If you need an app icon for your web app in a marketplace, check out the guidelines for creating service icons.

• Iconography – Horizon (latest theme)
• Iconography – Quartz
• Service Icons

Typography

SAP’s corporate font

The “72” font family supports SAP’s visual language and has been crafted to convey trust, friendliness, and a modern look. Enhanced accessibility features also improve readability. “72” is optimized to render flawlessly on all supported devices and platforms. When “72” can’t be used, SAP applications automatically fall back to the next best available font.

For more information, see:

• Typography – Horizon (latest theme)
• Typography – Quartz

Illustrations

Consistent illustration style

UX illustrations simplify complex information, improve comprehension, and boost engagement through visual storytelling. When you use illustrations purposefully, you help create a human-centered experience and make interactions feel more approachable, relatable, and meaningful.

For more information, see UX illustrations.

Shadows

Elevation and depth

The shadow concept uses a generic approach for depicting depth in applications. Multiple depth levels apply across all container controls, like tiles, menus, dialogs, and more. Each level uses a distinct shadow, making it easy to recognize one level from another and keep a consistent visual hierarchy. The concept also applies to interaction and text shadows, improving the overall user experience and readability.

For more information, see Shadow Concept.