Elevation

Elevation refers to the perceived virtual height or distance from the background to a component’s surface. This concept is a combination of techniques and visual cues, such as tonal color, shadows, and scrims, that allows for a layered yet cohesive visual experience.

Examples of elevation using tonal color (left), shadow (middle), and scrim (right)

Tonal Color

Material 3’s tonal color is essential for conveying materiality and depth using distinct shades across the UI. This approach also helps define a component’s tactile area and visual emphasis relative to other containers and surfaces, providing a visually balanced user experience. Tonal color is further defined by the surface and surface container color roles.

Tonal color is used to define different component’s tappable area

Surface

The surface color role is the default tonal value that defines the overall background for surface containers and foreground elements. It is also used on navigational components such as the navigational rail and top app bar, which allow them to blend against the overall background.

Tonal color is used to define different component’s tappable area

Surface Container

The surface container color role comprises five tonal colors defining the components’ elevation on the screen. The higher the surface container, the more prominent it appears on the screen. The surface container color roles can also be paired with shadows to further emphasize a container.

Surface container color roles are used to provide contrast and definition between different containment areas

Shadows: Adding Depth and Focus

Shadows are an essential technique for making key interface elements stand out and appear interactive, such as cards, modals, and other actionable components. Shadows can also be used to add further emphasis to a component in areas that are visually busy such as against an image or a background that is using the same color role.

Shadows can be used to supplement components in instances where contrast is not met. For example, a button over an image (left) or a button over a background with similar contrast (right)

Elevation Levels

SAP Fiori for Android provides five distinct elevation levels (0-4) to establish visual hierarchy within the UI. Higher levels are typically used for prominent content, guiding users’ attention to the most critical interactive areas.

Name	Usage	Light Mode	Dark Mode
Level 0	Filter Chip (Flat) / Full-screen Dialog / List Item / Input Chip / Navigational Rail / Tabs / Side sheet (Docked) / Slider (Track) / Top App Bar
Level 1	Banner / Bottom/ Sheet (Modal) / Elevated Button / Elevated Card / Extended FAB (Lowered) / FAB (Lowered)
Level 2	Bottom App Bar / Dropdown Menu / Menu / Navigation Bar / Select Menu / Rich Tooltip / Top App Bar (Scrolled)
Level 3	FAB / Extended FAB / Modal Date Picker / Docked Date Picker / Modal Date Input / Dialog / Search Bar / Search View / Time Picker / Time Input
Level 4	(Not assigned as resting level)
Level 5	(Not assigned as resting level)

Scrim

Scrims are transparent underlays that help bring focus to components. They are underlaid to create contrast between the background and the components. Examples of components that use scrims include side navigation, bottom sheet, and modals.

Scrim provides focus and elevation for components like bottom sheet

Resources

SAP Fiori for iOS: Elevation

Material Design (Elevation)

Android Developers (Elevation)

Related Components/Patterns: Color, Accessibility

Adaptive Behavior and Navigation

Navigation Components

The navigation region holds the primary navigation components such as:

Navigation Bar
Navigation Rail
Navigation Drawer

These components help users to navigate between destinations within the app and access important actions. The adaptive navigation feature dynamically swaps out navigation components during runtime as the window sizes change. The scaffolding automation provided by Android automatically adjusts the standard M3 navigation components to fit the relevant breakpoints.

Schematics illustrating the swapping behavior of the navigation components

Profile and Setting

To maintain consistency across all SAP products, the entry point for the user profile and settings is located on the right side in the top app bar. It’s recommended to place the user profile on the home screen only.

Profile placement on compact and expanded window size classes

Dialogs

Dialogs are a type of modal that are used to provide high priority information, display critical information, or ask for specific user actions or decisions. They prompt the user to react and interrupt the process of the application. It is recommended that dialogs have a clear and specific purpose, such as confirming an action or communicating critical details to the user. Dialogs should only be implemented when necessary to avoid disrupting the user experience. Additionally, dialogs should be responsive, adapting to different screen sizes and orientations to provide a consistent experience across devices.

Resources

Development: About Adaptive layouts, Design for Large Screens, Get Started with Large Screens

Material Design: Layouts

Design Adaptive Apps

Optimizing your app for all window size classes requires a clear understanding of its structure and the relationships between screens. In compact mode, users navigate through screens hierarchically, whereas in larger window size classes, multiple panes can be displayed side by side on one screen.

Transformation from compact to an expanded window size class

Starting with One Window Size Class

Begin by designing your app for a specific window size class, such as compact, and make sure its layout is responsive and adaptive.

Creating an Information Architecture

Develop a hierarchical model that illustrates the structure of your app.

Identifying Related Screens

Look for screens that are closely related in the information architecture, such as a list screen and its detail view. These screens typically interact directly with each other.

Merging Related Screens into Panes

For larger screens, integrate related screens into a single display using multiple panes. For example, one pane could show the list, while another shows the detail view.

Adjusting Designs for Different Window Sizes Classes

Tailor your design for various window sizes by considering the following questions:

What needs to be displayed? Ensure that all essential details available on large and medium screens are available on compact screens, even if it requires an additional tap to view certain elements. For example, a filter might be shown beside a list on a large screen but open on a new screen after a tap in compact mode.
How should the screen be divided? Determine the best way to split content across panes for different screens.
What size adjustments are necessary? Adjust element sizes to fit different window sizes appropriately to make your app’s layout responsive and adaptive while maintaining visual coherence across devices.
What needs to be relocated? Some components might need to be moved. For example, the bottom navigation bar in compact mode might transition to a navigation rail or drawer on medium and large screens.
Which components should be exchanged? Replace certain elements better suited for specific window sizes. For example, a navigation bar in compact size could be swapped for a navigation rail or drawer on larger screens.

Information architecture of an app in a compact window size class

List and detail screen in compact window size classes

Information architecture of an app in expanded window size class with fewer levels as several screens from compact are combined into one

Two list detail screens from compact converted to one screen in expanded window size class

Canonical Layouts

Material 3 defines three standard canonical layouts: list-detail, supporting pane, and feed. Each layout offers a different approach to organizing content and components based on the available window space.

The list-detail layout is ideal for displaying explorable lists of items alongside each item’s supplementary information – the item detail.

The supporting pane layout organizes app content into primary and secondary display areas, with the primary area occupying most of the app window and the secondary area presenting supporting content.

The feed layout is unique for using a grid composition that allows for browsing content easily, such as news, photos, and social media.

The M3 navigation components such as navigation bar, rail, and drawer enhance canonical layouts by keeping primary navigation options within easy reach while minimizing screen space.

Schematics illustrating the different canonical layouts: list-detail (A), supporting pane (B), and feed (C)

Panes

Panes are used to arrange UI elements. A layout may include 1–2 visible panes of different widths, adjusting dynamically to the window size class. Depending on the window size class, an alternative layout option is to stack the panes vertically, for example, with the supporting pane positioned below the focus pane instead of beside it. Additionally, for extra-large windows, a standard side sheet can serve as a third pane.

When there are multiple panes, it’s important to consider the size of each pane. For example, in a list-detail layout, the list should have a fixed width, while the detail pane should be flexible, adjusting to the available space by growing or shrinking. This ensures that the layout remains visually appealing and adapts smoothly across different window size classes.

Pane Types

In all layouts, there should be at least one flexible pane that can adjust to the window size, ensuring responsiveness across various screen sizes. The available pane types are:

Window Size Classes

Each window size class corresponds to a specific breakpoint where the layout needs to adjust to fit the available space, device conventions, and ergonomics. The three primary window size classes are compact, medium, and expanded. These size classes provide the basis for designing adaptable layouts that work across various devices and orientations. Material 3 also supports large and extra-large window size classes, which are best suited for creating content designed for extra-large tablets or external displays. These window size classes offer multiple pane layouts and start at a screen width of 1200dp.

The Importance of Designing with Window Size Classes

When designing applications, it’s important to use window size classes rather than focusing on specific devices because the available window space is dynamic and can vary based on user behavior, such as using multi-window modes or unfolding a foldable device. Additionally, devices can be categorized into various window size classes depending on their orientation.

Width and Height Window Size Classes

Available width and height are classified separately, so your app always has two window size classes – one for width and one for height. Typically, available width holds more significance than available height because vertical scrolling is more common. Therefore, the window size class related to the available width is likely more relevant to your app’s UI.

Schematics illustrating width-based window size classes

Schematics illustrating height-based window size classes

Layout Basics

Density-Independent Pixels (dp)

SAP Fiori for Android uses a system of pixel units (dp) that allows for a design to scale to screens with different pixel densities. The UI therefore adapts to various device displays regardless of pixel density.

Increment System

SAP Fiori for Android layouts are designed in increments of 4dp and 8dp for smaller elements for scalability purposes. Using an incremental system allows for all measurements in a design to be predictable and easier to scale when designing on multiple devices.

The 4dp/8dp incremental system enables a variety of spacing options from 4dp to 52dp

Spacing

Margins and Padding

Margins are the spaces between the left/right window edge and the component. Typically, these margins are set to 16dp or 24dp, depending on the window size. For larger window size classes, margins can be adjusted more flexibly to improve legibility, similar to the design element of letterboxing.

Padding is the horizontal or vertical space between elements within a component. Padding ensures consistency and allows for easy scalability.
The padding between elements within a component should add up to an increment of 4dp. This height affects the overall vertical layout.

Compact screen size with 16dp margins (left) and medium/expanded screen size with 24dp margins (right)

Spacers

In a layout, a spacer is the space between two panes. Spacers are 24dp wide and can have a drag handle to adjust the size and position of the panes. The touch target of the handle slightly extends over the panes.

Medium/expanded size with a spacer of 24dp to separate the panes

Parts of Layout

For a seamless transition between different window size classes and to provide the user with better orientation, three regions play an important part:

App Bar
Body
Navigation

Schematics illustrating the three main UI regions: app bar (A), body (B), and navigation (C)

Touch Target

Accessibility is key when designing the spacing of interactive elements. It’s essential to provide sufficient space to place elements, aiming for a minimum touch target size of 48dp x 48dp with 8dp padding between multiple touch targets.

48dp x 48dp touch targets

Resources

Material Design 3: Understanding Layout, Applying Layout

Design Tokens

Design tokens are our cross-platform solution to managing color across iOS and Android. Design tokens are stored pieces of UI information such as color, spacing, sizing, and typography that collectively make up our design system’s visual identity. Additionally, design tokens help us to maintain visual consistency, scale design decisions, and are simple to maintain and update.

Token groups (left) with Token types (right)

Token Hierarchy

The token hierarchy adds structure and scalability to visual assets in a design system. Each level of the design token hierarchy adds a layer of abstraction that informs designers and developers on how a design token should be used.

Token hierarchy shows the different levels of design tokens

Reference Tokens

Reference tokens are the foundational elements of a company’s theme by storing the static values of a design decision such as hex code, line height, and typography values. Since the reference token naming does not indicate its usage, they should not be used directly in components and UI elements.

The reference token is used as a foundation for other tokens.

Semantic Tokens

Semantic tokens define the specific role by which a referenced token should be used within the UI. This scales the design language throughout a specific theme or context allowing for themeability across the SAP BTP SDK for Android and iOS. Additionally, semantic tokens assign light and dark mode definitions for each semantic definition providing alignment between modes.

The semantic token is used directly within the UI.

Token Naming

This token naming is platform-agnostic and follows a set structure logic that can be used across mobile platforms.

The naming structure of a design token shows the naming logic

1. Company Name

Company name indicates which company’s design system the token belongs to. In our instance we use “sap” to indicate SAP design token system.

2. Level

Level indicates which level in the token hierarchy the token belongs to. There are two levels in our token hierarchy, reference tokens and semantic tokens.

3. Category

Category indicates the type of token. There are five categories in our token system such as color, spacing, sizing, corner radius, and typography.

4. Group

Group refers only to color tokens and indicates which grouping the token belongs to. There are five groupings in the color token system such as brand, neutral, status, accents, and header.

5. Usage

Usage refers only to color tokens and indicates where in the UI the token should be used. There are three sub-groupings in the color token system that explicitly inform developers and designers on the tokens usage such as background, foreground, and stroke.

6. Scale

Scale indicates the token’s sequence within a category, group, or subgroup. A scale’s number sequence is dependent on the type of token, token group, or subgroup.

Theme

Theme refers to the Horizon reference color palette however this baseline theme can be swapped out to a company’s own. For example, Horizon is the baseline theme for our SDK which includes reference colors Blue, Grey, Mango, Indigo, etc. Swapping our baseline theme would cascade a company’s brand colors down to every aspect of the UI allowing for theming. Design tokens only facilitate this scalability of our design system.

Light and Dark Mode

Each semantic color token definition stores values for both Morning Horizon (light mode) and Evening Horizon (dark mode). Since multiple modes are built-into each color token definition, this helps designers and developers apply color tokens to each UI element consistently across modes.

Morning (Light)
Evening (Dark)

The semantic token stores the value for both light and dark mode

Native OS Mapping

Design tokens map to the native OS APIs. This allows us to implement design tokens across both iOS and Android while preserving the native OS components, behaviors, and interactions. Having a unified workflow would improve the management of all visual assets and better alignment between iOS and Android platforms. Stakeholders would also benefit by making it easier to consume the SDK and our UI Kits.

Semantic Token (Horizon)
System Token (Material 3)
Component Token (Material 3)

The semantic token stores the value for both light and dark mode.

Resources

SAP Fiori for iOS: Design Tokens

SAP Fiori for Web: Design Tokens

Material Design: Design Tokens

Related Components/Patterns: Colors, Theming

Accessibility

The SAP Fiori for Android design system is designed to be compliant with accessibility standards. Our components are flexible, readable, and adaptable for usage by a wide range of users, providing an optimal and user-friendly experience for everyone, including individuals with visual, motor, auditory, speech, or cognitive impairments.

Color Contrast Ratio

Color contrast is the ratio measuring the difference between the color of the foreground element against the color of the background. Achieving the minimum contrast ratio ensures that all text and visual elements in our design system are legible to all users including visually impaired and/or color-blind users. If the color appears faint against the background, it may be a sign that the color has insufficient color contrast. First, determine its current contrast ratio, second, determine the target contrast ratio of the UI element (e.g., 3:1, 4.5:1, 7:1), and lastly, follow our color pairing system. To validate this, use a color contrast calculator.

Color contrast ratio examples

Color Pairings

The horizon color palette has been designed to comply with WCAG accessibility standards with a color pairing system that allows designers and developers to easily pair color combinations. Following the color pairing combinations allow you to achieve your desired color contrast.

Example of color pairings for 3:1, 4.5:1, and 7:1 color contrast ratios

Color Pairing for 4.5:1 Contrast (Default)

To ensure the minimum color contrast ratio of 4.5:1 for small text (below 18 point regular or 14 point bold) is met, pairing any color that is five steps apart will achieve this. For example, pairing the fourth color with the ninth color ensures that the minimum color contrast for normal text is met. For a minimum color contrast ratio for text and content, we recommend a 4.5:1 color contrast ratio.

Achieving 4.5:1 color contrast

Color Pairing for 3:1 Contrast

To ensure a minimum of 3:1 color contrast ratio for large text (18 point and above regular or 14 point and above bold) and decorative elements are met, pairing any color that is four steps apart will achieve this. For example, pairing the fourth color with the eighth color in the spectrum ensures that the minimum color contrast ratio for large text, bold text, graphical objects, and user interface components is met. graphical elements we recommend a 3:1 color contrast ratio.

Achieving 3:1 color contrast

Color Pairing for 7:1 Contrast

To ensure the minimum color contrast ratio of 7:1 is met, pairing any color that is seven steps apart will achieve this. For example, pairing the fourth color with the eleventh color ensures that the minimum color contrast for a high-contrast theme is met.

Achieving 7:1 color contrast

High Contrast Text

If users require an additional increased level of color contrast, they can activate their device’s high-contrast text. Activating this mode will change the text color to either black or white, depending on the original text color.

Example of high contrast text (left) scaled up version (right)

Text Scaling

If users have difficulty reading small text, they can increase their font size by accessing their device’s Font Size Accessibility Settings. Toggling this mode allows users to fine-tune their font to their preferred size by increasing or decreasing the font size.

Image showing text scaling and wrapping

Android Accessibility Features

In addition to color contrast ratio, increase contrast and dynamic type, there are more ways to ensure that your app is accessible to everyone. IOS/Android provides guidance on how to enable accessibility features such as voice-over, reading support, switch control, dictation, increase contrast, and more. See (Accessibility on iOS / Accessibility on Android) for more information.

See Accessibility on Android for more information.

Android accessibility features

Resources

SAP Fiori for iOS: Accessibility

Accessibility at SAP: Guidelines

Material Design: Accessibility

Related Foundations: Colors, Typography

Product Icon

SAP Fiori for Android product icons

The product icon of SAP mobile apps communicate the purpose of SAP’s mobile experience and supports business users in recognizing the app in the Play Store and on their home screens.

Our product icon design direction complements the Horizon visual design and creates a recognizable mobile brand. The balance between individual icon metaphors, characteristic shapes and coherent visual design embraces the SAP mobile product family.

We have created a guide that describes exactly how the style should look like and how to create a new icon.

Approach

As a base for the product icons, we use the same origin as the SAP Fiori icons. The best way to start creating app icons is to simply pick out an SAP Fiori icon that is the best metaphor for your app and then apply the style. It is not mandatory to use an icon as a base but it should follow the style.

Product icon metamorphosis

Anatomy

The product icon is composed of three layers and stand for the three-tier architecture.

Database Layer
Logic Layer
UI Layer

The first level is the database layer and is the base shape of the app icon, then comes the second layer, this represents the logic layer and finally the UI layer which is the third layer of the product icon. For some icons there is also the possibility to use a highlight layer if needed.

Do

Use product icons that communicates the purpose of the app
Use simple product icons because they are usually easier for people to understand and recognize
Use the same style to complement the Horizon visual design
Design your icon as a full-bleed square image

Don't

Do not use product icons from other sources
Do not include too many details, it will be difficult to determine and might make an icon seem noisy
Do not use other colors for the app icon
Do not use any color for the app icon background
Do not use a picture for product icons

Specification

Background Layer

Second Layer

First Layer

Third Layer

Product Icon Creation

To learn more about the best practices and process for creating Android product icons, refer to the Material Design Product Icons article.

Resources

Material Design: Iconography – Product Icons

Theming

Theming refers to using a color palette and a logo to define a system-wide appearance for an application. It’s achieved by applying colors to major UI elements, such as text and background, with the intention to create visual harmony. It gives users a holistic visual experience throughout the application. This visual experience can be leveraged to enhance readability in certain lighting environments and to express your unique product branding across platforms. By applying brand-specific colors to the themeable elements, you provide users with a visual connection between the application and your brand.

Example of different themes

Themeable Elements

A customized theme is comprised of multiple visual elements. To create a brand theme, use the UI theme Designer powered by SAP and customize the following themeable elements:

Logo

A logo is the visual symbol used to express a product’s distinct identity.

Themeable element: logo

Tint Colors

Tint colors are the ones applied to any interactive elements to indicate interactivity or a call to action. It can be used on a button, an icon, a tab, etc.

Semantic Colors

Semantic colors refer to the tint color applied to UI elements to communicate a state, priority, or destructive or confirmational action.

Accent Colors

Accent colors are decorative colors applied to selected areas of the UI in order to bring more colors to the UI.

Themeable elements: tint color, semantic color, accent color

Text Colors

Text colors apply to any content written in text, including numbers and symbols.

Surface

Surface color comprises of the backgrounds of elevated components such as cards, app bars, bottom navigation, etc.

Background

Background refers to the main app background that appears behind scrollable content.

Themeable elements: text color, surface and background

Scenarios

The UI theme designer can achieve various levels of customization. Theming can be as minimal as only changing the logo or can be as comprehensive as changing all color parameters. The following examples detail possible theming scenarios from a basic theme all the way to a comprehensive theme.

Basic Scenario

The main branding elements are your logo and primary branding tint. Your app colors can use the existing default text, background, semantic colors, and accent colors from the preliminary baseline theme (Horizon theme for SAP Fiori). This approach is enough to communicate your brand without having to do any major visual overhaul to the baseline theme. The UI theme designer can accommodate simple theme changes like applying your logo and applying your main brand tint.

Themeable Elements

The following elements are themed in this simple scenario:

Logo
Tint

Screen showing basic theme scenario

Detailed Scenario

Your main branding elements consist of a logo, tint, text, and backgrounds therefore require a full theme overhaul to achieve the look and feel of your brand. This means that more customization is needed from our preliminary baseline theme (Horizon theme for SAP Fiori). The UI theme designer allows for granular control over the overall theme resulting in a faithful representation of your brand.

Themeable Elements

The following elements are themed in this detailed scenario:

Logo
Tint
Text
Background
Semantic colors
Accent colors

Screen showing detailed theme scenario

Theming Strategy

Theming strategy is your product’s approach to a distinct theming plan to express your branding’s visual experience, support various lighting situations, or fit a user’s phone’s system configuration. A product could support a single theme or multiple themes depending on your company’s branding identity and/or the end user’s lighting environments.

Single-Theme Strategy

Your theming strategy should be based on your company’s branding or user needs. For example, if your company is using a light theme, it communicates a lighter approach to the visual design while also easing the lighting on the eyes within indoor or outdoor settings with bright lighting. The opposite is true for darker themes where the theme communicates a more serious tone while also being easier on the eyes in workplace settings with dimmed office lighting or outdoor night–time settings.

Single-theme strategy

Two-Theme Strategy

Your product could use a two–theme strategy to reflect the changing conditions of the end user’s lighting environment or to match an end user’s theme system settings. A two–theme strategy is the industry standard and is helpful if your product wants to provide themes for both bright and dim lighting environments. When applying the two–theme strategy, make sure that all foreground colors have been considered on either theme.

Two-themed strategy

Resources

SAP Fiori for iOS: Theming

SAP Fiori for Web: Theming

Development: Theming and Styling

Development: UI Theme Designer

Colors

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.

Horizon Theme Color Palette

The Horizon color palette introduces a unified color palette that brings our brand and products together to achieve a cohesive experience across all SAP touchpoints. The Horizon color palette is designed to provide bold and vibrant color while remaining accessible in instances with complex UIs.

Horizon color palette

UI Colors

UI colors are colors that are grouped based on their role or usage within the UI. This additional level of abstraction allows product teams to swap out the default Horizon theme with their own product colors. UI colors are grouped into the following color groups:

Surface colors
Text colors
Borders colors
Semantic colors
Accent colors

Surface Colors

Surface colors are colors applied to the background of all components. These colors contrast with all foreground colors and are the basis for the overall theme. Surface colors are identified by the letter S followed by a number sequence (e.g., S1, S2, S3) in our UI Kit.

Light Mode		Dark Mode		Name	Usage
	Base White #FFFFFF		Base Dark #14171A	S0-Background	Base Background (0dp)
	Base White #FFFFFF		Base Dark with Overlay Overlay: #7198BF	S1-Primary	Elevated Surfaces (1dp-24dp)
	Blue 7 #0070F2		Blue 5 #4DB1FF	S2-Secondary	Call-to-Action Elements
	Grey 11 #12171C		Base White #FFFFFF	S3-Tertiary	Snackbar Background
	Grey 1 #F5F6F7		Grey 6 #5B738B, 20%	S4-Quarternary	Muted Backgrounds
	Blue 7 #0070F2, 8%		Blue 5 #4DB1FF, 20%	S5-Selected Surface	Selected Backgrounds
	Base White #FFFFFF		Base Dark with Overlay Overlay: #7198BF	S6-Header	Header Background
	Grey 6 #5B738B		Grey 4 #A9B4BE	S7-Switch	Idle Switch Backgrounds
	Grey 7 #475E75		Grey 3 #D5DADD	S8-Switch Selected	Selected Switch Backgrounds

Text Colors

Text colors are colors applied to the text and icons of all components. These colors range from neutral grey colors to interactive brand colors applied to text and icons. Text colors are identified by the letter T followed by a number sequence (e.g., T1, T2, T3).

Light Mode		Dark Mode		Name		Usage
	Grey 9 #223548		Grey 1 #F5F6F7	T1-Main on Primary	Titles, Subtitles
	Grey 7 #475E75		Grey 3 #D5DADD	T2-Support on Primary	Body Text, Caption
	Grey 6 #5B738B		Grey 4 #A9B4BE	T3-Minor on Primary	Muted Text, Placeholder Text
	Blue 7 #0070F2		Blue 5 #4DB1FF	T4-CTA on Primary	Tinted Text, Links, Interactive Icons
	Base White #FFFFFF		Grey 11 #12171C	T5-Main on Secondary	Text on S2-Secondary
	Blue 5 #4DB1FF		Blue 7 #0070F2	T6-Main on Tertiary	Text on S3-Tertiary
	Blue 8 #0057D2		Blue 4 #89D1FF	T7-Selected Text	Selected Text on S5-Selected Surface
	Grey 9 #223548		Grey 1 #F5F6F7	T8-Main on Header	Titles, Subtitles on Header
	Grey 7 #475E75		Grey 3 #D5DADD	T9-Secondary on Header	Body Text, Caption on Header
	Grey 6 #5B738B		Grey 4 #A9B4BE	T10-Tertiary on Header	Muted Text, Placeholder Text on Header
	Blue 7 #0070F2		Blue 5 #4DB1FF	T11 - CTA on Header	Tinted Text, Links, Interactive Icons on Header

Border Colors

Border colors are applied to any linear elements such as dividers or graphical elements used to define any areas within components. These colors range from neutral grey colors to interactive brand colors often used to communicate the state of a certain part of a component. Border colors are identified by the letter B followed by a number sequence (e.g., B1, B2, B3).

Light Mode		Dark Mode		Name	Usage
	Grey 3 #D5DADD		Grey 6 #5B738B 50%	B1-Section Divider	Divider Lines
	Grey 5 #8396A8		Grey 5 #8396A8	B2-Default Border	Text Field Borders
	Blue 7 #0070F2		Blue 5 #4DB1FF	B3-Selected Border	Selected Text Field Borders
	Blue 7 #0070F2, 28%		Blue 5 #4DB1FF, 36%	B4-Light Selected Border	Transparent Selected Borders
	Grey 6 #5B738B		Grey 4 #A9B4BE	B5-Border Switch	Idle Switch Borders

Semantic Colors

Semantic colors are applied to any foreground or background elements such as text, icons, or backgrounds to communicate a component’s status, state, or level of priority. These colors are bright in hue to direct the user’s attention to a certain component or part of the UI. Semantic colors are identified by the following naming (e.g., negative label, critical label, positive label, and neutral label).

Light Mode		Dark Mode		Name	Usage
	Red 7 #D20A0A		Red 5 #FF5C77	Negative Label	Semantic Label
	Mango 7 #C35500		Mango 5 #FFB300	Critical Label	Semantic Label
	Green 7 #188918		Green 5 #5DC122	Positive Label	Semantic Label
	Blue 7 #0070F2		Blue 5 #4DB1FF	Informative Label	Semantic Label
	Grey 7 #5B738B		Grey 5 #A9B4BE	Neutral Label	Semantic Label
	Red 6 #EE3939, 8%		Red 6 #EE3939, 12%	Negative Background	Semantic Background
	Mango 6 #E76500, 8%		Mango 6 #E76500, 12%	Critical Background	Semantic Background
	Green 6 #36A41D, 8%		Green 6 #36A41D, 12%	Positive Background	Semantic Background
	Blue 6 #1B90FF, 8%		Blue 6 #1B90FF, 12%	Informational Background	Semantic Background
	Grey 6 #5B738B, 8%		Grey 6 #5B738B, 12%	Neutral Background	Semantic Background

Accent Colors

Accent colors provide an additional level of color luminance and are 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 are identified by the word “Accent” followed by a number sequence (e.g., Accent 1, Accent 2, Accent 3).

Light Mode		Dark Mode		Name
	Mango 8 #A93E00		Mango 3 #FFDF72	Accent Label 1
	Red 8 #AA0808		Red 3 #FFB2D2	Accent Label 2
	Raspberry 8 #BA066C		Raspberry 3 #FECBDA	Accent Label 3
	Pink 8 #A100C2		Pink 3 #FFAFED	Accent Label 4
	Indigo 8 #470CED		Indigo 3 #D3B6FF	Accent Label 5
	Blue 8 #0057D2		Blue 3 #A6E0FF	Accent Label 6
	Teal 8 #046C7A		Teal 3 #64EDD2	Accent Label 7
	Green 8 #256F3A		Green 3 #BDE986	Accent Label 8
	Grey 8 #354A5F		Grey 3 #D5DADD	Accent Label 9
	Mango 2 #FFF3B8		Mango 9 #8D2A00	Accent Background 1
	Red 2 #FFD5EA		Red 4 #840606	Accent Background 2
	Raspberry 2 #FFDCE8		Raspberry 3 #9B015D	Accent Background 3
	Pink 2 #FFDCF3		Pink 3 #7800A4	Accent Background 4
	Indigo 2 #E2D8FF		Indigo 3 #2C13AD	Accent Background 5
	Blue 2 #D1EFFF		Blue 2 #0040B0	Accent Background 6
	Teal 2 #C2FCEE		Teal 3 #035663	Accent Background 7
	Green 2 #EBF5CB		Green 3 #1E592F	Accent Background 8
	Grey 2 #EAECEE		Grey 3 #223548	Accent Background 9

Accessibility

The Horizon theme color palette offers color mapping logic that is easy to understand. It introduces eleven tonal values across nine color hues of vibrant and bold color. Our Horizon theme color palette ensures that color combinations comply with WCAG accessibility standards.

For more information, see Accessibility.

Color contrast ratio scale

Elevation

Elevation plays a key role in the Horizon theme color palette. In light mode, the drop shadow represents the elevation of the components. However, in dark mode, elevated components are differentiated by changes in tone to mimic a range of depth. At lower elevations, the surface tone is darker, while at higher elevations the tone is lighter. Refer to the following table to understand elevation.

Light and dark theme elevation scale

Themes

The Android design system includes systemwide appearance settings for light and dark modes which use color consistently and sparingly.

Light Mode

Light mode is the default mode for the Android design system. Light mode is a bright UI that displays dark grey foreground elements and saturated accent colors against light surfaces. In light mode, neutral colors are used to make content readable, and accent colors are used sparingly to call attention to important information or show the relationship between parts of the interface. Lastly, light mode is best used in bright environments where battery life isn’t an issue.

Light mode example

Dark Mode

Dark mode is the secondary mode for the Android design system. Dark mode is a dim UI that displays white foreground elements and desaturated accent colors against dark surfaces. In dark mode, all component surfaces and backgrounds are dark grey in color with tonal variations depending on a component’s elevation. Lastly, dark mode preserves battery life (especially on OLED screens) by reducing the usage of light pixels, helpful in scenarios where the user needs to reduce battery consumption.

Dark mode example

Resources

Development: Theming and Styling

SAP Fiori for iOS: Colors

Related Components/Patterns: Accessibility

SAP Fiori Design Principles

SAP Fiori provides a consistent and holistic user experience for SAP software. By creating visually pleasing designs with a strong focus on ease of use, the experience is intuitive and simple, across all devices. With effortless interaction patterns, the SAP Fiori UX is designed for a powerful impact across your enterprise.

Design Principles

The design philosophy of SAP Fiori is based on five core principles: role-based, delightful, coherent, simple, and adaptive.

Role-Based

SAP Fiori is designed for your business, your needs, and how you work. It draws from our broad insights on the multifaceted roles of today’s workforce. SAP Fiori provides the right information at the right time and reflects the way you actually work.

Delightful

Apart from making you work smarter, SAP Fiori also enriches your work experience by allowing you to simply do your job.

Coherent

Whether you fulfill a sales order, review your latest KPIs, or manage leave requests – SAP Fiori adheres to a consistent interaction and visual design language. Across the enterprise, you enjoy the same intuitive and consistent experience.

Simple

With SAP Fiori, you can complete your job intuitively and quickly. SAP Fiori helps you focus on what is important – essential functions are easy to use, and you can personalize the experience to focus on your relevant tasks and activities.

Adaptive

SAP Fiori enables you to work how and where you want, regardless of the device you use. And, it provides relevant information that allows for instant insight.

Typography

SAP Fiori for Android type system maps SAP’s 72 typeface to Material Design’s type hierarchy. This respects the established visual harmony of Material Design’s components while introducing SAP Fiori’s unique visual identity.

SAP Fiori for Android 72 type system

72 Typeface

SAP Fiori for Android uses SAP’s proprietary 72 typeface to maintain consistency with other SAP products. In addition, the 72 typeface has been designed to meet the typographic requirements needed for the enterprise. 72 typeface adheres to the following principles:

Legibility enhancements: Optimized for screen use
Font styles: Supports a robust typographic hierarchy
Brand voice: Be credible and humane
Character set: Accommodate complex content
Language support: Supports the Windows Glyph List
Accessibility: Improved character recognition

Resources

Download: 72 Font

Information: 72 Showcase

Material Design: The Type System

Iconography

SAP icon library

SAP icons have been redesigned for the Horizon visual theme with a fresh, friendly, and bold style. The new icons maintain consistency of size, stroke, and visual balance and are tailored for simple and direct user interaction, using metaphors that are easy to understand in an enterprise setting.

Usage

Do

Use the SAP icon library.
Use icons to highlight important actions for users.
Use icons to indicate navigation actions to other screens.
Use icons that are clear to the user

Don't

Don’t use different-sized icons.
Don’t use third-party icons.
Don’t use icons that are ambiguous.

Design Language

The SAP icon library communicates the following SAP Design principles:

Simple
Fresh
Neutral
Modern

Icon Grid

The standard size of SAP Icons is based on a 24dp grid. This grid size is used to design SAP icon used within our components and is based on the increment system. The 24dp area serves as a container where the actual icon graphic sits.

24 x 24 grid (1X scale)

24 x 24 grid (10X scale)

Live Area

SAP icons are designed within a 20dp x 20dp live area. This means that the icon has top and bottom paddings within the icon itself and ensures a sense of break between icon and any other UI elements.

Live area, designated space for your icon

Padding space, to provide ample space around your icon

Pixel Alignment

When designing custom icons, ensure that icons use full pixels. This means they should have whole number units, with no decimals to maintain clarity on screens with high pixel density.

Do

Aligned icon showing crisp edges

Use full pixel units when designing custom icons. This means pixels should have whole number units, with no decimals to maintain clarity on screens with high pixel density.

Don't

Misaligned icon showing blurred edges

Don’t design custom icons where pixel units fall in between pixels, these are called half pixels. Half-pixeled units will look blurry on screens with high pixel density.

Resources

SAP Icons: SAP UI5 Icon Explorer

Layout: Increment System

Overview

SAP Fiori for Android leverages various window size classes to provide a pleasant user experience across different form factors. This adaptive design functionality allows content to be dynamically rearranged and resized in response to changes in device orientation or when the app is used on different . By shifting the focus from specific devices, such as phones and tablets, to window size classes, breakpoint-based layouts can be implemented to seamlessly adapt to various screen sizes and orientations.

The objective is to convert the content of static page types, such as object details and list reports, into adaptable panes, ensuring optimal composition for each window size class. This approach promotes thinking in “panes” rather than screens. Adaptive design facilitates the dynamic adaptation, rearrangement, and resizing of panes to ensure that the app’s content is displayed appropriately within the available space.

Benefits of Adaptive Layout

Adaptive design enables designers and developers to create versatile, user-friendly interfaces that seamlessly adapt to different screen sizes and devices. Optimizing large screen design for SAP’s business applications has a positive impact on the of mobile users. By utilizing larger screen space, numerous daily tasks can be performed more efficiently.

Streamlining Navigation and Control

Making menus and controls easily accessible next to the workspace and incorporating intuitive gesture-based navigation.

Improving Data Visualization and Analysis

Enhancing readability and interactivity of complex data sets, such as charts and spreadsheets, for quicker and more effective analysis.

Enhancing Data Entering and Form Filling

Providing extra space for on-screen keyboards and data entry fields to minimize scrolling, reduce errors, and expedite the process.

Facilitating Document Editing and Review

Simplifying editing with full-page views of texts, images, or presentations, facilitating side-by-side comparisons, and allowing for stylus support for precise input.

Resources

Material Design 3: Understanding Layout, Applying Layout