Horizon Theme

Intro

The Horizon theme with its tonal variant combines Google’s Material 3 tone-based surfaces with Horizon’s core colors. It improves the overall aesthetic with more balanced contrast and enhanced legibility for all components while maintaining SAP Fiori’s visual identity.

Adaptive layout uses tonal colors to achieve visual hierarchy across multiple screen layouts. The tonal option of the Horizon theme plays a crucial role in large screen layouts ensuring each element feels integrated into the broader interface while maintaining clarity and focus across multiple screen sizes.

By using Material 3’s token framework, the tonal option of the Horizon theme simplifies adoption of color styles.

Horizon theme with tonal variant

Visual Color Roles of Horizon’s Tonal Variant

With the Tonal option of the Horizon theme, we're moving away from the Material 2 color system to achieve a refreshed appearance. This involves integrating a tonal color scheme, enhancing brand colors to meet accessibility standards, streamlining color management, and improving alignment between design and development.

App screen with color style annotations

Surface and Surface Container

Primary, Secondary, and Tertiary serve as the key colors for the Horizon theme. Primary (formerly S2, T4, B3) being the most saturated color, is directly derived from the Horizon color palette while Secondary and Tertiary are the muted derivatives of Primary that provide different levels of visual hierarchy.

Surface and Surface Container: primary neutral background color role

Surface

Surface is the default color for the main canvas. Surface can also be used for contained components to create a recessed effect into the background. This helps to emphasize other panes and containers for improved visual balance.

Surface: foundation background color for the rest of the UI

Surface Container

Surface containers are primarily used to contrast against the Surface color role. Choosing between Surface Container Lowest and Surface Container Highest provides the desired emphasis. Typically, the default is the Surface Container color role as it provides medium emphasis against Surface.

Surface Container color roles layered on top of Surface

On Surface and On Surface Variant

On Surface and On Surface Variant are the dedicated On Colors for the Surface and Surface Container color roles. On Surface is best used for high emphasis text and icons and On Surface Variant for lesser emphasis text and icons.

On Surface and On Surface Variant: color roles for neutral UI elements

Primary, Secondary, and Tertiary

Primary, Secondary, and Tertiary serve as the key colors for the Horizon theme. Primary (formerly S2, T4, B3) being the most saturated color, is directly derived from the Horizon color palette while Secondary and Tertiary are the muted derivatives of Primary that provide different levels of visual hierarchy.

Primary, Secondary, and Tertiary: key colors of Horizon’s tonal option

Primary

Primary and Primary Container are used on the most important components on screen. Primary is best used for text and icons and Primary Container for contained components such as contained buttons and FABs. Because of it’s high emphasis, Primary and Primary Container should be used sparingly.

Primary: most prominent key color

Secondary

Secondary and Secondary Container are used as a less emphasized version components on screen. Secondary and Secondary Container are best used for less emphasized fills, text, and icons such as tint tonal button and tint tonal FAB variants. Secondary container is also used to indicate a selected container such as the selected destinations in the navigation bar, navigation drawer, and navigation rail.

Secondary: supporting key color for Primary

Tertiary

Tertiary and Tertiary Container are the least key colors. Tertiary and Tertiary Container are best used for recessed fills, text, and icons such as neutral tonal button and neutral tonal FAB variants. Tertiary and Tertiary container can add another level of neutral color apart from On Surface and On Surface Container.

Tertiary: most recessed key color for less prominent UI elements

Semantic Colors

Semantic colors include a container variant for each semantic color type. The container variant is used as a recessive tonal version of the semantic in instances where a less prominent semantic is needed such as the negative tonal button.

Semantic color roles

Accent Colors

On Accent Container (n) and Accent Container (n) are decorative colors applied to selected areas of the UI in order to bring more colors to the UI.

Accent color roles

Color Mapping from Horizon to Horizon’s Tonal Option

Color mapping from Horizon to Horizon’s tonal variant