Intro

Color sets the visual balance of SAP Fiori for Android apps. On screen, color is used to define the visual hierarchy of UI elements and to direct the user’s attention to complete their tasks.

Tonal Option Theme

The tonal option theme introduces Material 3’s tone-based surfaces, which maintain enhanced visual hierarchy, improved color contrast between foreground and surface colors, and a refreshed UI with visually balanced colors. Additionally, tone-based surfaces play 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.

Tonal option theme color palette

Brand Colors

Brand colors express SAP Fiori’s identity and provide a cohesive brand voice throughout the design system. There are three levels of brand color roles that provide different levels of emphasis: Primary, Secondary, and Tertiary. These color roles are used throughout the UI to bring attention to essential actions on screen, convey interactivity, and express a product’s branding.

Brand colors: Primary, Secondary, and Tertiary with container variants

Primary

Primary and Primary Container are used for essential actions on screen. Primary is best used for text and icons and Primary Container for contained components such as contained buttons and FABs. Because of their high emphasis, Primary and Primary Container should be used sparingly.

Secondary

Secondary and Secondary Container are muted versions of Primary and should be used on less-emphasized actions 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.

Tertiary

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

Surface Colors

Surface color roles provide distinct visual separation and emphasis for backgrounds and contained surfaces throughout the design system. By intentionally using these color roles, designers can achieve visually balanced layouts with intentional focus points. Lastly, these color roles help to organize content, elevate important information, and create visual separation for more accessible layouts.

Surface and Surface Container: primary neutral background color role

Surface

Surface serves as the backbone of the main screen. Surface can also be used for contained components to create a recessed effect on the background. This helps to emphasize other panes and containers for improved visual balance.

Surface Container

Surface Containers are primarily used to contrast against the Surface color role. There are five levels of emphasis: Surface Container Lowest, Surface Container Low, Surface Container, Surface Container High, and Surface Container Highest. Use these surface container color roles to create visual separation and provide emphasis between different panes throughout the UI.

On Surface and On Surface Variant

On Surface and On Surface Variant are the dedicated “On” Colors used against the Surface and Surface Container color roles. On Surface is the default color for text and icons meanwhile On Surface Variant is used as a supporting color for text and icons.

Inverse Surface

Inverse surface colors are colors used in the snackbar component, and any component that needs to have inverse contrast against the UI.

Outline and Outline Variant

Outline and on Outline Variant colors are the two outline colors used to create separation within the surface and surface container color roles. Use Outline color role for outlines that need to be visible such as the border around the text input field and Outline Variant color role for decorative dividers.

Semantic Colors

Semantic colors are applied to any foreground or background elements such as text, icons, or backgrounds to convey a component’s status, state, or level of priority. These colors are bright to direct the user’s attention to a certain component or part of the UI.

Semantic colors: Negative, Critical, Positive, Informative, and Neutral with container variants

Negative

Negative semantic color role is used to convey danger status, error state, or high priority. Use sparingly in UI elements such as status info label, contained button, text button, and badge.

Critical

Critical semantic color role is used to convey warning status, critical state, or medium priority. Use sparingly in UI elements such as status info label or status indicators.

Positive

Positive semantic color role is used to convey available status, success state, or low priority. Use sparingly in UI elements such as status info label or status indicators.

Informative

Informative semantic color role is used to convey status, new state, or new category. Use sparingly in UI elements such as status info label or status indicators.

Neutral

Neutral semantic color role is used to convey open status, inactive state, or “other” category. Use sparingly in UI elements such as status info label or status indicators.

Accent Colors

Accent colors provide an additional level of visual emphasis used to accent areas of the UI such as avatars, icons, and decorative areas. These colors are bright in hue and provide visual variety to the UI. Accent colors may be used sequentially, but it is not necessary. However, use the accent color along with its “On” color to maintain visual balance.

Accent Container Color 1-10 with container variants

Accent Container 1

Accent Container 2

Accent Container 3

Accent Container 4

Accent Container 5

Accent Container 6

Accent Container 7

Accent Container 8

Accent Container 9

Accent Container 10

Accessibility

Modes

The tonal option supports light and dark modes that provide a systemwide change to the Fiori SDK’s color scheme.

Resources