Sap Fiori Guidelines

SAP Design System Skill (v1.145)

Ready to build smarter? Get started with Fiori skills and discover how AI can help your team ship faster while maintaining the design excellence Fiori is known for.

What's New

• AI Components: AI Button, AI Acknowledgment, Guided Prompts, Quick Prompts, Regenerate, Home Page Banner
• AI Writing Assistant: Inline AI text assistance patterns
• Local AI Notice: On-device AI processing transparency
• AI Input Assistance: Fiori Elements AI features
• S/4HANA AI Error Explanation: AI-assisted error handling
• Updated Foundations: Expanded AI & Joule design guidelines
• Navigation: Side navigation, shell search patterns

Installation

We recommend using the skills CLI for installation:

npx skills add SAP/ai-skills-library --skill sap-fiori-guidelines

Usage

To use it, just start a new conversation and ask anything related to SAP Fiori design - it will trigger automatically based on keywords:

• "Fiori", "SAPUI5", "UI5"
• "SAP button", "SAP form", "SAP table"
• "object page", "list report"
• "SAP design system"
• "AI button", "Joule", "guided prompts"

Example prompts that will trigger the skill:

• "How should I implement buttons in a Fiori app?"
• "What's the correct way to handle messages in SAPUI5?"
• "Design an object page for a sales order"
• "What semantic colors should I use for status indicators?"
• "How do I add AI-powered features to my Fiori app?"
• "What's the pattern for guided prompts in SAP?"

Skill Contents

Version

Built from SAP Fiori Design Guidelines v1.145 (May 2026).

SAP Fiori Foundations: Best Practices

Ui Elements > Title Hierarchy Guidance

Title Hierarchy Guidance

Intro

When designing and building web apps, organizing and managing headings is very important. A clear and consistent heading hierarchy, expressed visually through title styles and structurally through semantic heading levels, helps users scan and understand pages quickly while also supporting efficient navigation for assistive technologies. By establishing clear guidelines for using title styles alongside appropriate semantic heading levels, teams can create layouts that are intuitive, adaptable to different interactions and states, and easy to navigate.

These guidelines focus on content structure and heading hierarchy, not on implementation specifics. They cover the visual use of title styles and the semantic heading levels that determine how titles are announced by screen readers.

This illustrates the hierarchical arrangement of heading levels and the styling of titles on the object page as an example.

Usage

Do Consider the following best practices for usage:

• Assign semantic tags. Use semantic tags based on

the content’s importance and structure.

• Adapt visual styles. Allow visual styling to change

based on branding and design needs while maintaining semantic integrity, making sure the app remains accessible.

• Follow accessibility guidelines. Use ARIA levels

consistently to help screen readers understand the hierarchy of content.

• Use heading sizes appropriately. Align heading size

choices with their defined usage purposes (for example, use Header 6 for small, nested group headers).

• Sequential order. Follow sequential heading orders

without skipping levels to ensure content structure remains clear. levels match the semantic HTML tags used, without causing confusion for screen readers.

Layout and Structure – General Guidance

This outlines the structure of the components, specifying areas, sections with typography, iconography in context, and other details.

Ensuring Logical Flow

• Hierarchy update: When you add more content, adjust the headings to maintain a clear order, ensuring that the visible headings reflect the importance of the content.

• Consistency in updates: Ensure that changes align with the original heading order and integrate smoothly into the user's experience.

Visual Style and Semantic Hierarchy

It's important to understand the difference between the visual appearance of titles and their role in organizing content. Tags help establish content order for accessibility and screen readers, while titles can be styled differently to fit branding and design preferences. Separating these aspects allows developers to use tags based on content importance, while design adapts to achieve their goals. This ensures that apps remain easy to use and visually appealing, following good design principles while maintaining flexibility.

Additional Examples:

• Custom Object Page:

• Flexible Column Layout:

• Dialog in Combination with Panel:

---

Ui Elements

Design System Hero

Best Practices – UI Elements

Formatting

+----------------------------------------------------------------------------------------x-----------------------------------------------------------------------------------------+ Tiles (plain) +----------------------------------------------------------------------------------------x-----------------------------------------------------------------------------------------+ Formatting Data – Overview Use locale‑ready formatting rules for times, dates, numbers, measurements, and comma‑separated lists. +----------------------------------------------------------------------------------------x-----------------------------------------------------------------------------------------+ Formatting Dates Use SAPUI5 to format dates consistently across locales. +----------------------------------------------------------------------------------------x-----------------------------------------------------------------------------------------+ Formatting Numbers Format numbers according to international rules using SAPUI5. +----------------------------------------------------------------------------------------x-----------------------------------------------------------------------------------------+ Formatting Time Format times correctly across locales using SAPUI5. +----------------------------------------------------------------------------------------x-----------------------------------------------------------------------------------------+ Units of Measurement Use standard unit rules for abbreviations, spacing, and pluralization. +----------------------------------------------------------------------------------------x-----------------------------------------------------------------------------------------+ Removing Leading and Trailing White Space Trim blanks when copying and pasting text into input controls.

Component Usage

+---------------------------------------------------------------------------------x---------------------------------------------------------------------------------+ Tiles (plain) +---------------------------------------------------------------------------------x---------------------------------------------------------------------------------+ Busy States Signal work in progress while reducing interruptions. +---------------------------------------------------------------------------------x---------------------------------------------------------------------------------+ Collaboration Add SAP Jam tiles, share menu actions, and social feeds to your app. +---------------------------------------------------------------------------------x---------------------------------------------------------------------------------+ Table Overview Choose the right table for your use case scenario. +---------------------------------------------------------------------------------x---------------------------------------------------------------------------------+ Table Personalization Overview Choose the right personalization pattern to adjust columns, sorting, grouping, and filters. +---------------------------------------------------------------------------------x---------------------------------------------------------------------------------+ Title Hierarchy Create clear and accessible heading hierarchies using title styles and semantic heading levels. +---------------------------------------------------------------------------------x---------------------------------------------------------------------------------+ UI Element States Use appropriate state combinations to signal options and highlight where attention is needed. +---------------------------------------------------------------------------------x---------------------------------------------------------------------------------+ Using Semantic and Industry Colors Apply semantic colors for universal value states and industry colors for domain-specific contexts. +---------------------------------------------------------------------------------x---------------------------------------------------------------------------------+ Using Tooltips Learn how to use tooltips for unlabeled elements. +---------------------------------------------------------------------------------x---------------------------------------------------------------------------------+ Which Selection Control Should I Use? Choose the best selection control for your use case.

Metadata

Title

Breadcrumbs Elements

---

SAP Fiori Foundations: Integration And Services

Sap Fiori Launchpad > Enterprise Search

Enterprise Search

Intro

The SAP Fiori launchpad offers an enterprise search function that searches across all apps and business objects, such as materials, customers, and maintenance plans. The search icon is displayed in the shell bar of the launchpad and is always readily available at the top of the screen. Search icon in the shell bar

Default (col-1)

When pressing the search icon in the shell bar, the search field and the type selector appear.

Information, Col-1: Some customers may not yet have business objects enabled for search. In this case, the UI adapts accordingly to

search for apps only. In particular, the type selector is not visible and the filter functionality is more limited.

Default (col-1)

After entering a search term, users can trigger the search by pressing ENTER, by clicking the magnifier icon, or by selecting one of the suggestions. A search for All can be achieved by pressing ENTER in an empty search field or by using the \* query. If the search field is left empty, clicking the search icon closes the search field.

Default (col-2)

Search field in the shell bar

Section Metadata

style

Type Selection

The search can be restricted to objects of a particular type. Type selection using dropdown This can be done before the search is triggered, either by using the type selector or by typing the object type into the search field and selecting the respective suggestion. To filter a result list by object type, users can select the type tabs or the respective section in the filter panel.

Suggestions

When the user starts typing in the search field, suggestions appear. There are 3 main suggestion types: Search suggestions

• Type suggestions switch the type selector (for example, Search In: Sales Orders).
• App suggestions launch the app (for example, App Create Leave Request).
• Term suggestions execute a search with the respective terms (for example, SAP Walldorf)

Result List

The result list is a ranked list of all matching items. Different object types can have different representations. Apps are shown as tiles and can be launched. Business objects are summarized in a few lines. Pressing the title link of an object shows a full-screen representation of that object, such as an object page or a document viewer. If additional summary attributes area available, clicking the down arrow :slim-arrow-down: on the right will show them. This will also reveal navigation shortcuts to apps that can handle the business object. The tabs at the top of the result list allow users to filter by object type. The tabs are sorted by the number of hits – categories with most hits appear first. If the results have been limited to a certain object type, additional actions appear in the upper right-hand corner. Here, users can change the sort order, or switch to a table representation with the option to show or hide specific columns.

Personalized Search

This feature allows the system to track the user’s search behavior in order to personalize and improve future rankings for search results. Algorithms analyze the user’s behaviors and interests, and adapt accordingly to support the user by focusing on context-relevant information. Users can switch the personalized search on or off in the User Menu under Settings -> [User Profiling](https://main--builder-prospect--sapudex.hlx.page/design-system/fiori-design-web/foundations/integration-and-services/sap-fiori-launchpad/services#user-profiling-in-settings-dialog). They can also delete collected data with the Clear My History button. "Settings" dialog* Some of these features might not be available to the user, depending on the system configuration.

Filters

A filter icon in the top left-hand corner offers additional options for filtering the search results. When the user clicks the icon, a filter panel appears on the left-hand side. In this panel the user can change the object type, which may also be depicted as a hierarchy (depending on the system configuration).

Once the results have been limited to a certain object type, thus ensuring a homogeneous result set, result-specific filters are offered. Only meaningful filters are included. For example, if all results are for the same country, the country filter is not shown.

Up to 5 one-click options are available for each filter. You can show the selection options in a list, or visualize them in a bar chart or pie chart. Multiple selection is supported for all visualizations.

Once the filter panel has been closed, the applied filters are visible in an infobar above the result list. On the right of the infobar, all filters can be cleared without reopening the filter panel.

Filter Panel

Carousel (full-width)

Advanced Filters

Default (col-1)

In addition to the the one-click filters, the user can set more filters by choosing Show More or Show All Filters. This opens a filter dialog with a list of all the available filters on the left. The details for the selected filter show on the right. The available options depend on the data type of the filter (text-based, numeric, date) and the configuration. For most filters, a list of filter conditions is shown, similar to the filter panel. For texts, this list can be filtered and sorted. For numbers and dates, the user can add custom ranges. There is also an option to enter variable conditions: Instead of picking items from a list, the user can specify advanced conditions like begins with.

Default (col-2)

Dialog for setting all available filters

Carousel (full-width, col-2)

Infobar for displaying filters defined by the user

Section Metadata

style

Configuration

Default (col-1)

Users can switch the personalized search on or off, depending on the configuration.

Information, Col-2: Users can access their individual settings via [User Menu](https://main--builder-prospect--sapudex.hlx.page/design-system/fiori-design-web/foundations/integration-and-services/sap-fiori-launchpad/launchpad#user-menu) > S ettings > [User Profiling](https://main--builder-prospect--sapudex.hlx.page/design-system/fiori-design-web/foundations/integration-and-services/sap-fiori-launchpad/services#user-profiling-in-settings-dialog) > Personalized Search.

System-wide configuration for the personalized search is done in the Configure Personalized Search/S11) app.

Section Metadata

style

Default (col-1)

Development teams can fine-tune the search for the business objects they are responsible for.

Information, Col-2: In search models\, you can configure:

• Which attributes are searched in (including associations to other objects)
• Which attributes are displayed and in which order
• Which attributes are displayed as filters in the filter pane
• The importance of each attribute (for a proper search ranking)
• The semantics of each attribute (to select the proper matching/fuzzy algorithms)

Using SAP Fiori launchpad intents you can configure:

• What happens when the user clicks the title
• What actions are listed in expanded result list items

In the *Define Synonyms app, you can configure the synonyms to be applied to each search. In the Fine-Tune Ranking app, you can configure ranking factors and their influence. Examples:* “products that are in stock are more important than others” “new documents are more important” “sales orders created by my team are more important”

Section Metadata

style

Creation of Search Models

The display and behavior of the enterprise search is based on search models. Apply the following rules when creating search models.

• Implement the title of a search result as a link to the [object page](https://main--builder-prospect--sapudex.hlx.page/design-system/fiori-design-web/page-types/floorplans/object-page/) or an equivalent full screen representation of that particular business object.
• Align the title, subtitle, and object type with the corresponding object page. Displaying objects consistently makes them easier to scan.
• To help users recognize objects quickly, use images whenever they are available. However, don’t display indistinctive images or placeholder images.
• Include relevant attributes in the object preview. They can help users to distinguish between objects and answer common questions up front (such as a contact phone number).
• Do not show unimportant attributes or attributes that aren’t shown on the corresponding object page.

Hint: When choosing attributes, focus on attributes that are important during productive use. These can differ from attributes that seem most important during development. For example, master data attributes like “Created On” and “Created By” would not normally be relevant for the preview.

• Use consistent attribute labels that are either identical or aligned (for example, “Team Type” vs. “Type” in the “Team” section of the object page).
• Align the attribute content, especially the display order of “text (ID)” attributes.
• Make visible fields searchable (note that this may not be possible for all fields due to technical constraints).
• Include facets only if they are meaningful as filter criteria. Otherwise, avoid them.

For example, a facet for an ID would not make sense – each ID would return a single result, rather than a set of results.

---

Sap Fiori Launchpad

Design System Hero

SAP Fiori Launchpad

Overview

+----------------------------------------------------------------------x-----------------------------------------------------------------------+ Tiles (plain) +----------------------------------------------------------------------x-----------------------------------------------------------------------+ SAP Fiori Launchpad Learn about the key components of SAP Fiori Launchpad.

Home Page and Spaces

+--------------------------------------------------------------------------x---------------------------------------------------------------------------+ Tiles (plain) +--------------------------------------------------------------------------x---------------------------------------------------------------------------+ Home Page Explore the layout and features of the SAP Fiori launchpad home page. +--------------------------------------------------------------------------x---------------------------------------------------------------------------+ Spaces Use spaces to structure the most relevant apps for users with a certain business role. +--------------------------------------------------------------------------x---------------------------------------------------------------------------+ "My Home" Discover how the “My Home” space enables personalized app access and organization.

Enterprise Search

+-------------------------------------------------------------------------x--------------------------------------------------------------------------+ Tiles (plain) +-------------------------------------------------------------------------x--------------------------------------------------------------------------+ Enterprise Search Learn about search features, personalization options, and best practices for effective results.

Services

+---------------------------------------------------------------------x----------------------------------------------------------------------+ Tiles (plain) +---------------------------------------------------------------------x----------------------------------------------------------------------+ Launchpad Services Get to know essential launchpad services that support personalization, navigation, and user assistance. +---------------------------------------------------------------------x----------------------------------------------------------------------+ App Finder Understand how the app finder organizes and provides access to all available apps.

Metadata

Title

Breadcrumbs Launchpad

---

SAP Fiori Foundations: Interaction

Keyboard Support

Keyboard Support

Intro

Every application and UI component must be fully operable using the keyboard.

This foundation concept defines the global principles and interaction models for keyboard navigation, selection, activation, and text interaction across SAP experiences.

It defines a consistent, predictable baseline for keyboard behavior across components and layouts, so designs remain accessible, efficient, and scalable.

Detailed keyboard behaviors and interaction patterns are documented in the referenced Figma frames.

General Concepts

Certain concepts and shared mechanisms apply across all keyboard interactions and UI components. These include:

• UI element states relevant to keyboard interaction
• The role and intent of modifier keys
• Browser and platform context affecting keyboard behavior
• General principles for mapping keys to interaction intent

These concepts form the basis for all keyboard interaction patterns in this guideline.

For more information, see General Concepts in the Keyboard design specification.

Design Principles

The following core principles guide the design of keyboard interactions across SAP experiences:

• Predictability and robustness, ensuring consistent and stable keyboard behavior
• Immediate reversibility, allowing users to easily undo or adjust keyboard actions
• Discoverability, enabling users to learn and understand available keyboard interactions
• Efficiency, supporting fast and effective interaction for both novice and expert users

These principles underpin all keyboard interaction patterns described in this guideline.

For more information, see Design Principles in the Keyboard design specification.

Navigation

Keyboard navigation defines how focus moves between components and items, independent of selection or activation behavior. It includes:

• Navigation between components, defining how focus moves across distinct UI areas
• Skip navigation, enabling users to bypass repeated content and reach key areas efficiently
• One-dimensional item navigation, used for linear structures such as lists or rows
• Two-dimensional item navigation, used for spatial layouts with horizontal and vertical relationships

Navigation behavior is derived from the structural layout of the UI and must remain predictable and consistent across components.

For more information, see Navigation in the Keyboard design specification.

Selection

Selection behavior defines how users select one or multiple items using the keyboard. Selection includes:

• Single selection, where only one item can be selected at a time
• Multi-selection, allowing multiple items to be selected within a one-dimensional structure
• Block selection, allowing rectangular selection ranges in two-dimensional structures
• Selection in drop-down lists and suggestion lists, where users choose options from a predefined set

Selection behavior depends on the structure and selection capabilities of the UI. It must remain predictable and clearly distinguishable from navigation and activation.

For more information, see Selection in the Keyboard design specification.

Action

Action patterns define how users trigger operations with the keyboard. We focus on patterns commonly used across SAP components and contexts:

• Triggering actions on item level, for example activating the currently focused item
• Opening and closing interaction surfaces, including context menus
• Opening and closing assistance surfaces, including drop-down lists and value help

These action patterns must remain consistent and clearly distinguishable from navigation and selection behavior.

For more information, see Action in the Keyboard design specification.

Drag and Drop

Keyboard drag-and-drop provides an accessible alternative to pointer-based interaction. It covers:

• Initiating drag operations
• Moving items
• Dropping items
• Canceling drag operations

For more information, see Drag and Drop in the Keyboard design specification.

Text

Text interaction covers keyboard behavior for entering, navigating, and modifying text, depending on the type and structure of the text content. It includes:

• Text editing, covering basic text input and modification
• One-dimensional text editing, such as linear text fields or single-line inputs
• Two-dimensional text editing, such as multi-line or structured text areas
• Auto-complete, supporting assisted text entry through suggestions

Text interaction behavior is distinct from navigation and selection and applies only within explicit text editing contexts.

For more information, see Text in the Keyboard design specification.

Shortcuts

Optional keyboard shortcuts give users a faster path for common actions while remaining consistent with global keyboard behavior. The shortcut definition covers:

• Types of shortcuts, describing different categories and usage contexts
• Access keys, enabling direct access to specific UI elements
• Default button behavior, defining how primary actions are triggered
• Recommended shortcuts for Fiori, providing a standardized set of commonly used shortcuts

Shortcuts must be consistent and discoverable, and must never conflict with shortcuts reserved by the platform or browser.

For more information, see Shortcuts in the Keyboard design specification.

---

Overview

Interaction Design Foundations - Overview

Intro

The interaction design foundations define how the user interface should behave when users interact with it to complete specific tasks and achieve their goals. Interaction occurs through input devices such as a mouse, keyboard, gestures, or voice commands, and output devices like screens or screen readers.

These foundations are standardized across the SAP Design System and cannot be modified by individual teams. They should serve as a baseline when designing components, patterns, and floorplans, where applicable.

We will continue to build out the foundation guidelines on an ongoing basis.

Foundations (available) The following guidelines are currently available: following topics:

• Cursors
• Drag and Drop
• Gestures
• Keyboard Support
• Motion Design
• Screen Reader
• States
• Timing
• Wrapping and Truncation

Read on for a short summary of each one. Columns (external_only)

Foundations The following guidelines are currently available:

• Cursors
• Drag and Drop
• Gestures
• Motion Design
• States
• Timing
• Wrapping and Truncation

Read on for a short summary of each one.

Cursors

Cursors are graphical elements that show the current position in the software interface. The cursor’s visual representation changes, depending on where it is placed. This indicates which mouse interactions are available in the context.

For more information, see Cursors.

Drag and Drop

Drag and drop is an interaction that lets users reorder, resize, move elements, and transfer data with clear real-time feedback.

We categorize drag and drop into four main use cases:

• Reorder: Change the order of items within components, like list items.
• Resize: Adjust component sizes, such as dialog boxes or table columns.
• Move: Shift components to new positions, including dialogs or slider values.
• Data Transfer: Move data between components or applications, like dragging items between lists or uploading files.

For more information, see:

• Drag and Drop Overview
• Reorder
• Resize
• Move
• Data Transfer

Gestures

Gestures are touch-based interactions that use natural hand movements to let users navigate, manipulate, and engage with digital interfaces.

Each gesture – such as swipe, tap, double tap, long press, or rotate – expresses specific intentions. Gestures assist with navigation and tasks, or enable users to adjust the size, position, or orientation of elements on the screen.

For more information, see Gestures.

Motion Design

Motion design brings interfaces to life through the use of animated visual elements, helping users navigate SAP applications more intuitively and efficiently.

By providing clear feedback and highlighting changes with subtle animations, motion design enhances user focus, simplifies complex tasks, and creates a polished, modern experience that encourages user adoption.

For more information, see Motion Design.

States

States define the appearance and behavior of a UI element based on user interactions or system status. They influence aspects such as interactivity, visibility, and the semantic meaning of a component. Applying the correct state – or combination of states – helps users identify available options and understand where their input is needed.

UI elements can have different types of states, which may appear individually or combined:

• Component State
• Focus State
• Interaction State
• Selection State
• Value State

For more information, see States Overview and State Combinations.

Timing

Timing in interaction design shapes how users experience transitions, feedback, and system responsiveness. The right timing helps users notice changes without unnecessary delays, balancing clarity with efficiency. Factors like component size, complexity, and user intent all influence how long a component should appear, disappear, or respond.

We distinguish between four timing groups – fast, normal, slow, and very slow. Each group has distinct response times, feedback, and states, and applies to different types of components.

For more information, see Timing.

Wrapping and Truncation

Wrapping and truncation determine how text behaves when its length exceeds the available space. This responsive behavior is consistent across all devices and form factors. Various controls utilize wrapping and/or truncation to manage text display.

For more information, see Wrapping and Truncation.

---

Timing

Timing

Intro

Timing refers to how long a component appears or disappears on screen, as well as any intentional delay between user input and the system response. The speed should be slow enough for users to notice changes, but fast enough to avoid unnecessary waiting.

General Principles

Generally, timing correlates with component size. The following sections explain how durations differ for small and large components.

Small Components

Small components usually contain less content and carry less visual weight, so users can process updates and changes quickly. Shorter transition times work well here—quick transitions help keep interactions brisk, reduce disruption, and let users stay focused on the main content.

Large Components

Large components often present more information, have greater visual prominence, and can cause more noticeable changes to the layout. Use longer transitions for these components. This gives users time to notice and understand the change, support cognitive processing, and integrate new information smoothly without feeling rushed or disrupted.

What to Consider

• Complexity and detail: More complex or detailed components may need more time for users to absorb information.
• Visibility and noticeability: More visually dominant components attract attention, so longer durations can help users understand the change and its purpose.
• Impact on the overall interface: Large components have a greater potential to disrupt flow, so longer transitions help maintain a smooth experience.
• User focus and engagement: Transition timing can help direct user attention and ensure important information isn’t missed.

User Intent

Timing is directly related to the user’s intent and expectations. Well-timed transitions guide focus and provide feedback from the system to the user.

Enter and Exit

When a component enters (appears on the screen), a slightly slower transition helps users notice the change, understand the context, and prepare for interaction. By contrast, components often exit more quickly to reduce the delay and maintain a responsive feel.

• User attention and orientation: Longer entry transitions give users time to notice and get used to new elements, which aids comprehension. Quick exits remove clutter efficiently and let users focus on what comes next.
• Cognitive load: Slower entries give users time to process new information, reducing cognitive load. Fast exits minimize cognitive load by clearing unnecessary elements quickly.
• Expectations and feedback: Longer entry transitions signal new content, aligning with user expectations. Fast exits provide immediate feedback and confirm task completion.
• Emotional and aesthetic appeal: Smooth transitions improve aesthetics and contribute to a more positive user experience. Quick exits create a dynamic, responsive feel.

Reveal Hidden Content

When a user hovers over an item for 300 to 500 milliseconds, this often shows intent to open the item or display hidden content. Revealing hidden content too quickly can cause accidental activations and confuse users, especially during casual cursor movement. On the other hand, waiting too long can make the interface feel unresponsive and interrupt the user’s workflow.

Timing Groups

You can group components by how long they take to appear on screen or respond to user input:

• Fast: Up to 100 milliseconds
• Normal: 100 to 1,000 milliseconds
• Slow: 1 to 3 seconds
• Very slow: More than 3 seconds

Note: 1 second = 1,000 milliseconds.

Fast (up to 100 milliseconds)

Interactions with components should feel immediate and seamless for users. This creates a sense of direct manipulation and responsiveness.

• Response time: Immediate or near-instantaneous (less than 100 milliseconds)
• Feedback: Immediate visual feedback
• State updates: Update immediately with no noticeable delay
• Examples: Changes to the button state, checkboxes and radio buttons, dialogs

Change in the button state on hover – example of a fast interaction (up to 100 milliseconds display time)

An example of fast interaction timing is how a button responds on hover:

A. Entry: When the user moves the mouse pointer over the button, the interaction state changes from regular to hover, giving a visual indication that the component is interactive. B. Exit: When the user moves the mouse away from the button area, the state returns to regular. C. Display time: Each change in state should happen within 100 milliseconds.

Normal (100 to 1,000 milliseconds)

Components in this group handle slightly more complex operations.

• Response time: Expect 100 to 1,000 milliseconds
• Feedback: Perceived as fluid and responsive, acceptable for most interactions
• State updates: There may be a brief delay due to more complex data processing or content changes
• Examples: Tooltips, popovers, delay after the last keystroke to optimize search performance

Tooltip display – example of a normal interaction (100 to 1,000 milliseconds display time)

An example of normal interaction timing is tooltip behavior:

A. Entry: The standard time to display a tooltip with a mouse is 500 milliseconds. This prevents flickering or accidental activation when users move the cursor quickly. The same delay applies when showing a tooltip via keyboard. For touch interactions, tooltips appear instantly with no delay. B. Exit: When triggered by hovering, a tooltip disappears 500 milliseconds after the cursor leaves the element. The same 500 millisecond delay applies when dismissed via keyboard. Tooltips aren’t focusable. On touch devices, the tooltip disappears immediately after the user taps outside the element.

Note: When displaying tooltips in sequence, use a 200 millisecond delay between tooltips. This means the previous tooltip disappears and the new one appears after the delay.

Slow (1-3 seconds)

Components in this category are typically larger or more resource intensive. They include complex data visualizations, transitions that involve multiple components, or major layout changes that need more processing. Some components are designed to stay visible longer, not because they’re slow to respond, but because they provide important information. For example, message toasts use a longer display time on purpose, so users have enough time to read and process the message without interrupting their workflow.

• Response time: 1 to 3 seconds (1,000 to 3,000 milliseconds)
• Feedback: Clear feedback or transition effects to keep users engaged
• State updates: Clearly noticeable delay
• Examples: Message toast (minimum display time), busy indicator, card loading, placeholder loading

Message toast – example of a slow interaction (3,000 milliseconds default display time)

An example of slow interaction timing is message toast behavior:

• Entry: The message toast should appear quickly after the triggering action to provide clear feedback.
• Minimum display time: By default, the toast stays visible for 3,000 milliseconds before the close animation starts. For longer messages, you can extend the display time.
• Exit: By default, the close animation takes 1,000 milliseconds to complete. If no animation is needed, you can set this to zero.

Very Slow (more than 3 seconds)

Response delays over 3 seconds can disrupt user flow and may lead to frustration or abandonment if you don’t handle them well. If delays can’t be avoided, provide visual feedback to reassure users. Use elements like content placeholders or progress indicators.

In some cases, time-related components – like message toasts – are meant to remain visible for long periods by design. This helps ensure users have enough time to read and process important information. Longer display times are acceptable when providing informative feedback without interrupting the user workflow.

• Response time: More than 3 seconds (over 3,000 milliseconds)
• Feedback: Clearly show users that the interaction may take a while
• State updates: May involve large operations or loading significant amounts of data
• Examples: Repetitive placeholders, busy indicators, progress indicators, AI-generated content, authentication processes

Busy indicator – example of a slow or very slow interaction (1-3 seconds display time)

Minimum and Maximum Display Times

The recommended minimum display time is 500 milliseconds. This helps prevent flickering. Adjust this duration as needed to fit your specific use case.

If a process takes more than 10 seconds, show a more detailed progress animation, such as a placeholder animation.

An example of very slow interaction timing is the busy indicator:

• Entry: Only use a busy indicator for system operations that take 1,000 milliseconds or more. For faster operations, don’t show a busy indicator. If you need the busy indicator to appear instantly, set the delay time to 0 milliseconds.
• Minimum display time: Set a minimum display time of 500 milliseconds to prevent flickering. Adjust this duration if your use case requires it.
• Maximum display time: If a process takes more than 10 seconds, show more detailed progress, such as a placeholder animation.

Metadata

Title

Breadcrumbs

Description appear or disappear from the screen, as well as any intentional delay between user input and system response.

---

SAP Fiori Foundations: Visual

Colors Overview

Design System Hero

Colors

Intro

Color brings your screens to life. It communicates importance and association, letting users quickly identify key elements. When you use the theme’s color palette, you help create a clean, lightweight design that stays consistent and coherent across all SAP Fiori applications. Thoughtful use of color enhances visual hierarchy, usability, and accessibility. Colors also reinforce consistency and help users recognize status or visual feedback.

Familiarize yourself with the concepts of color balance and color usage, especially the interplay between primary colors, accent colors, grayscale areas, and semantic colors. For more information, see the colors for each theme:

• Morning Horizon Colors
• Evening Horizon Colors
• Quartz Light Colors
• Quartz Dark Colors
• Belize Colors

SAP Fiori offers a range of themes out of the box. Each theme meets accessibility standards of at least AA. For each theme, you’ll also find AAA-compliant high contrast options. For more information, see Theming.

The DNA Reference Palette

The DNA reference palette contains nine different hues, each with eleven shades. Pure white and black are also included, covering the entire spectrum.

The colors for each theme are offered through a token hierarchy. This system keeps theming smooth and consistent across the user interface. The DNA reference palette forms the first and base level of this hierarchy – every other color palette is built from it.

Reference colors come from SAP company brand colors. These colors may vary between themes, and you shouldn’t use them directly in the CSS of user interface components. They are technology-agnostic and independent of specific use cases.

UI Theme Reference Colors

The DNA color palette ensures coherence across SAP and throughout the customer journey. From this palette, we define a set of UI reference colors as the foundation for theming.

UI reference colors derived from the DNA color palette

Theme-specific colors are listed here: Theming – Reference Colors (Horizon) Don’t apply these colors directly to user interface components. Instead, they are mapped to a stable set of parameters for styling the interface. All colors used in user interface components are listed here: Semantic Control Parameters (Horizon)

Color Contrast

The DNA palette is designed to support simple color contrast rules.

Decorative Elements

The 7th shade is used against the 1st shade, or the 6th shade is used against white.

Color contrast rule for decorative elements

Essential Elements

The 8th shade is used against the 1st or 2nd shade, or the 7th shade is used against white.

Color contrast rule for essential elements

High Contrast

The 9th shade is used against the 1st shade, or the 9th shade is used against white.

Color contrast rule for high contrast

Learn More

For more detailed best practices, check the full guideline and specification:

• Theming – Reference Colors (Horizon)
• Semantic Control Parameters (Horizon)

---

Iconography > Iconography Horizon

Iconography – Horizon

Intro

The SAP icons for the Horizon visual themes feature a fresh, friendly, and bold aesthetic. They are designed for consistency in size, stroke, and balance. As a core element of the SAP visual product identity, these icons are optimized for simple and direct user interaction through intuitive, easy-to-understand metaphors.

Each icon is handcrafted and aligned across the various formats required by SAP Fiori applications. Composed of vector graphics, they offer seamless scalability, ensuring a crisp and professional appearance at any size.

New SAP icon design for the Horizon visual themes

When to Use

Do Use the icons to:

• Provide visual cues that help users navigate complex

interfaces quickly.

• Draw attention to primary actions.
• Save space in tight UI areas like toolbars or tables.
• Improve accessibility by adding a secondary layer of

meaning to color-coded information.

+-----------------------------------------------------------x------------------------------------------------------------+ Top Tips +-----------------------------------------------------------x------------------------------------------------------------+

• Accessibility: Ensure that icons and visual elements are easy for everyone to understand, no matter which

reading direction they use.

• Consistency: Keep icon meaning and visual integrity consistent between LTR and RTL layouts.
• Localization: Avoid culture-specific symbols, ensuring they are universally understandable and adaptable to

different languages, regions, and reading directions.

• Icon metaphors: Ideally represent a single, clear metaphor. If multiple metaphors are unavoidable, they must not

require different RTL handling. For example, combining a directional arrow with a logo creates conflicts, as arrows must be flipped in RTL contexts while logos must not. Such combinations cannot be handled safely and increase development complexity.

• Icon sets: If icons are part of a set, ensure as far as possible that similar icons are visually consistent with

each other across all variants and reading directions, so that each set feels cohesive and unified.

Style

+-----------------------------------------------------------+>-----------------------<+ Bold: Strong presence that ensures clarity at small and large sizes. Icon style – examples Fresh: Modern, clean, and free of unnecessary detail. Simple: Reduced complexity for better readability and faster recognition. Friendly: Soft curves and approachable proportions. +----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------x-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+ +----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------x-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+ Use the Icon Creation Kit, in combination with the Icon Creation Guidance, to ensure consistency and compliance when creating new icons.

Format

We currently support two primary methods for implementing icons:

SVG (scalable vector graphics): SVGs are handled as individual vector files. They offer high-definition rendering at any scale and offer advanced CSS styling options. Icon font: An icon font treats icons as glyphs within a font file. This is a highly efficient way to manage large libraries and allows icons to be styled easily using standard text properties like font size and color.

Both formats are fully integrated into our environment, and you may choose based on the specific needs of your interface. While the system uses SVG as the default format, icon fonts are fully supported as well

Sizing

Default base size (16px)

The standard size for most general interface elements, such as buttons and input fields, is 16px. This size offers the ideal balance between visibility and spatial efficiency for standard desktop and mobile layouts.

Small-scale and high-density (Up to12px)

For dense environments (e.g., data tables, checkboxes, or compact switches), smaller sizes are available.

• Minimum: We recommend 12px as the absolute minimum size for any icon.
• Recommendation: While the SVG library is scalable, avoid reducing icons beyond this point, as it may compromise stroke integrity and make the metaphor difficult to recognize.

Large-scale and emphasis (Up to 48px)

Icons can be scaled up to create visual hierarchy or provide aesthetic emphasis.

• Use cases: Larger sizes are appropriate for avatars, generic tiles, or "highlight" areas.
• Maximum: For standard UI components, we recommend a cap of 48px. Beyond this size, icons may begin to feel visually "heavy" relative to the surrounding typography.

Icon scaling

Grid System

To ensure every icon in the Horizon theme family feels like a cohesive part of the same DNA, we utilize a grid system. This system acts as a blueprint, balancing mathematical precision with visual harmony.

Types of grids

We distinguish between two layers of alignment: the icon grid and the pixel grid.

• Icon grid alignment: Refers to the placement of elements relative to the internal key shapes and orthogonal lines. This ensures visual balance and consistent proportions across different metaphors.
• Pixel grid alignment: Refers to the alignment of paths to the actual physical pixels of the screen. This ensures that the icon remains crisp and avoids "anti-aliasing" (blurriness).

Icon grid alignment (A) and pixel grid alignment (B)

Elements of the SAP icon system grid

The grid is a combination of four essential elements that construct one unified form:

1. Pixel unit grid: The foundational 1x1 coordinate system that ensures every point of the vector sits on a whole number. 2. Orthogonal lines: Vertical, horizontal, and 45° diagonal axes used to maintain structural integrity and consistent angles. 3. Key shapes: Standardized geometric templates (circles, squares, and rectangles) that provide a footprint for the icon's primary mass. 4. Margins: The "safe zone" around the edges of the 16x16px container that prevents the icon from touching the bounding box.

+----------------------------------------------------------x-----------------------------------------------------------+ +----------------------------------------------------------x-----------------------------------------------------------+ Generally, we try to snap every point perfectly to the pixel unit grid. When technical snapping noticeably harms the visual result, we prioritize visual appearance over perfect technical alignment.

Color

Core color tokens

We categorize our icon colors based on their functional role within the interface:

A: Interactive icons: These tokens are used for actionable elements like buttons, navigation items, and clickable tools.

B: Inverted icons: Specifically designed for use within contrast statements or dark backgrounds. These tokens ensure the icon remains legible when placed on top of primary brand colors or dark UI surfaces. C: Non-interactive icons: Applied to purely decorative icons that do not trigger an action. These typically have a lower visual weight to distinguish them from clickable elements. D: Marker icons: Used for marker icons (such as the object marker icons). E: Rated/unrated content: Specialized tokens for feedback systems, such as star ratings. These provide a clear visual distinction between active (filled/rated) and inactive (outlined/unrated) states. F: Semantic use cases (message and status): These icons vary in color depending on the functional state of the message or object state (negative, critical, positive, information or neutral).

Icon color examples

Accessibility

Icons must be usable by everyone.

Requirements

• Provide accessible names for all icon-only controls.
• Hide decorative icons from assistive tech.
• Accompany icons that convey meaning with text or labels.
• Ensure sufficient color contrast.

Never assume an icon’s meaning is universally understood.

For more information, see Accessibility in SAP Fiori and the Accessibility Design Tools Handbook.

---

Iconography > Product Launch Icons

Design System Hero

Product Launch Icons

Intro

Product launch icons help communicate the purpose of the SAP Business Suite experience, enabling users to instantly identify products on the suite’s home page and in the product switch. Designed to complement the Horizon visual language, these icons align with the SAP mobile product icons and app icons to convey a unified brand identity. The balance between individual icon metaphors, characteristic shapes, and coherent visual design embraces the SAP design style.

When to Use

Product launch icons are reserved exclusively for launching products within SAP Business Suite and must not be used for other purposes. They are used on the home page (SAP Start) and in the product switch in the shell bar. Per SAP Brand guidelines, product launch icons may be permitted in board-level keynote presentations in exceptional circumstances. Each icon must always be accompanied by its corresponding text label.

Appearance

Unlike logos, product launch icons are optimized for clarity at small sizes and designed to work consistently across the suite, ensuring intuitive navigation and a cohesive user experience. To maintain a recognizable identity across web and mobile platforms, icons must retain core visual features and use our standard design variables. This ensures the SVGs automatically support all system themes, including Horizon, Quartz, Belize, and High-Contrast modes.

Current Collection

+:---------------------------------------x---------------------------------------:+:-----------------------------------------x------------------------------------------:+:-------------------------------------------x-------------------------------------------:+:--------------------------------------------x--------------------------------------------:+:---------------------------------------------x---------------------------------------------:+ Analytics Cloud | Build | Business Data Cloud | Cloud ERP | Commerce Cloud

+:------------------------------------------x------------------------------------------:+:------------------------------------------x------------------------------------------:+:-----------------------------------------x-----------------------------------------:+:------------------------------------x-------------------------------------:+:--------------------------------------------x--------------------------------------------:+ Concur | Customer Experience | Datasphere | Fieldglass | Finance

+:-----------------------------------------------x-----------------------------------------------:+:----------------------------------------------x----------------------------------------------:+:-----------------------------------------x------------------------------------------:+:-------------------------------------------x-------------------------------------------:+:---------------------------------------x----------------------------------------:+ HANA Cloud | Industries | Integration Suite | Procurement | Sales Cloud

+:-------------------------------------------x--------------------------------------------:+:-------------------------------------------------------x-------------------------------------------------------:+:----------------------------------------x----------------------------------------:+:----------------------------------------x----------------------------------------:+:---------------------------------------------x---------------------------------------------:+ SAP Start | Service Cloud | Signavio | SuccessFactors | Supply Chain Management

+:----------------------------------------x-----------------------------------------:+:x:+:x:+:x:+:x:+ Sustainability | | |

Approach

For product launch icons, we use SAP Fiori icons as a foundation. The best way to start creating product launch icons is to choose an SAP Fiori icon that best represents your app metaphorically, then apply the style. While it's not required to use an icon as a base, product launch icons should follow the same style.

Product launch icon metamorphosis

Anatomy

The product launch icon is composed of three layers, representing the three-tier architecture. 1. Database layer 2. Logic layer 3. UI layer The first level is the database layer, which is the base shape of the app icon. The second layer represents the logic layer. The UI layer is the third layer of the product launch icon. For some icons, it is also possible to use a highlight layer, if needed.

Specification

Background layer Second layer

Product Icon Creation

To streamline icon creation for new products in SAP Business Suite, refer to the Figma file featuring a usage guide and a product launch icon template with the color variables. To request a new product launch icon or to request access to an existing one, there will be a central request process.

---

Iconography

Design System Hero

Iconography

SAP Icons

+---------------------------------------------------------------x----------------------------------------------------------------+ Tiles (plain) +---------------------------------------------------------------x----------------------------------------------------------------+ Iconography – Horizon SAP icons for the latest Horizon visual theme. +---------------------------------------------------------------x----------------------------------------------------------------+ Iconography – Quartz SAP icons for the alternative Quartz visual theme.

Metadata

Title

Breadcrumbs

---

Look Feel And Wording

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. For key products in SAP Business Suite, use the predefined product icons.

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

Default (external_only)

Learn about the icon styles for each theme family, including general icon semantics, the grid system, line thickness, and corner radius values.

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

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

UX 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.

---

Shadow Concept

Design System Hero

Shadow Concept

Intro

The shadow concept offers a standard way to show depth in applications. It defines several depth levels that apply to all container components, such as tiles, menus, dialogs, and other elements. Each depth level uses a unique shadow, so you can easily distinguish one layer from another. This helps create a consistent visual hierarchy.

The shadow concept also covers interaction shadows and text shadows, which improve the user experience and make text easier to read. These shadows come with the component.

The four content shadow levels in the Horizon theme

Content Shadow Levels

You’ll find examples for each shadow level below, shown in four different theming variants. These examples illustrate the visual layering hierarchy of container components in the UI.

Content Shadow Level 0

The examples below show content shadow level 0 on the overview page.

+-------------x-------------+ Carousel (full-width)

(In order: Morning Horizon, Evening Horizon, High-Contrast Black, High-Contrast White)

Content Shadow Levels 1 and 2

The examples below show a combination of content shadow levels 1 and 2.

Content shadow level 1 is used by the following components:

• Action sheet
• Floating footer
• Menu

Columns (external_only) Content shadow level 1 is used by the following components:

• Action sheet
• Floating footer
• Menu

+-------------x-------------+ Carousel (full-width)

(In order: Morning Horizon, Evening Horizon, High-Contrast Black, High-Contrast White)

Content Shadow Level 3

The example below shows the level 3 shadow styling for a [dialog](https://wiki.one.int.sap/wiki/pages/viewpage.action?pageId=2033847432).

Default (external_only)

The example below shows the level 3 shadow styling for a dialog.

+-------------x-------------+ Carousel (full-width)

(In order: Morning Horizon, Evening Horizon, High-Contrast Black, High-Contrast White)

Learn More

For more detailed best practices, check the full shadow concept specification.

---

Typography > Typography Horizon

Typography – Horizon

Intro

SAP applications use SAP’s proprietary typeface 72, with a fallback to sans-serif system fonts if 72 can’t be loaded.

Designing 72 from the ground up made it possible to meet SAP Fiori’s typographic requirements, including:

• Legibility enhancements: Optimize for screen use.
• Font styles: Support a robust typographic hierarchy.
• Brand voice: Be credible and humane.
• Character set: Accommodate complex content.
• Language support: Support Windows Glyph List.
• Accessibility: Improve character recognition.

Typography with 72

“72” replaces the default system fonts to improve the typographic system for SAP applications. The design has been meticulously crafted to portray a look and feel that is more trustworthy, friendly and modern, communicating the visual language of SAP. The metrics have been optimized to ensure compatibility with the corresponding fallback fonts such as Arial. Improvements of the individual characters have been made to enhance legibility and ensure better accessibility recognition. With all these enhancements, along with the humanist influences within the fine details, 72 greatly improves the legibility of SAP applications.

72, a bespoke typeface created for SAP

Language Support and Fallback to System Fonts

Language coverage is one of the most important requirements of a typeface, depending on the number of countries in which your applications need to be available. Beyond the languages the font supports, fallback solutions need to be considered. If the defined fonts cannot be displayed when an application initially loads, fallback fonts are defined in the style sheet. Defining a fallback to sans-serif system fonts that are readily available on every user’s device is a simple solution for loading applications in any language. The font stack that is used within the CSS includes 72 with a fallback to system fonts such as Arial and Helvetica in combination, or Roboto for Android.

Here is an example of how theme parameters are used to specify font stacks. Notice that there are two versions of the 72 font; the first is a smaller subset to help improve performance and the second is the full version:

sapFontFamily: “72”, “72full”, Arial, Helvetica, sans-serif;

The fallback system fonts also have the advantage of zero loading time, ensuring that there is always a consistent font available that works with the fresh, clean, and minimalist SAP visual style. The font stacks used come with a full Unicode solution when special characters are needed. System fonts are available for all the languages that SAP products need to support. 72 is integrated into the control set, making customization easy. The font stacks can also be modified to achieve a custom result.

Accessibility

Optimized for screen consumption, 72’s design enhancements increase legibility, readability and ultimately, accessibility. A wider apex and open counters help with character recognition at smaller sizes. Differentiation of character details, such as the number “1” and the lower case “l” versus the capital “I”, makes the characters easier to distinguish and improves the overall reading experience.

Example of improved accessibility features

Headlines and Font Styles for UI Controls

• Headlines 1 to 6: Titles are defined in several sizes and styles that help to visually identify the context of application pages or grouped content within the user interface. Examples of headlines include the page title, object header title, list, form, table, chart, timeline, and feed titles. Headlines generally use the 72 Bold font weight by default and 72 Black for the key titles in the Horizon theme, but this is flexible depending on the control component or product application context.
• Small text: Used for exceptional use cases within controls, such as time stamps or a unit of measurement. We do not recommend using small text size as the main UI text size within controls.
• Medium text: Default text size used in controls, such as buttons, inputs, tables, or a tree.
• Large text: Stand-out text controls, such as titles within standard list items.
• Key performance indicators or custom display sizes: KPI numbers or custom display text sizes may have individually-specified sizes and font weights depending on the control component or application context. Consider visual accessibility and the typographic hierarchy before choosing any custom size or font weight. Light font weights are recommended only for large sizes that are clearly visible and should never be used for small textual information or labeling. If a UI is specially designed to be visible on very large displays from far away, consider emphasizing key information using a bold font weight.

These recommended sizes and weights are offered by default. However, SAP product lines have the flexibility to define their own type scale.

Header Scale

<https://www.sap.com/design-system/live-examples/_Foundations/Typography/Typography_SE_HeaderScale.html>

UI Control Text Sizes

<https://www.sap.com/design-system/live-examples/_Foundations/Typography/Typography_SE_TextSizes.html>

72 Font Styles

Additional Styles

SAP can now benefit from the additional font styles that have been added to 72, such as 72 Semibold Duplex. These font styles help to expand the possibilities of how to best visualize the information hierarchy within products and websites.

72 Semibold Duplex

72 Semibold Duplex also enables additional accessibility improvements by providing a visual weight distinction to the regular font weight without any visual jump in the width of the letters. This helps bring more interactive affordance to the text used for general actions and also helps bring a more consistent weight when paired with the new stronger weight of the icon style for the Horizon theme.

Line Heights

In general, no line height is applied to text, since the line height affects the padding and leads to misaligned content. If a more generous line height is required for long continuous text, a consistent line height of 1.5 is recommended:

• Normal line height: This is the default auto line height used in bread and butter controls (such as buttons, inputs, lists, and tables with no wrapping text).
• 1.5 line-height: Line height recommended by WCAG accessibility guidelines for long continuous or wrapped text (for example, text area or feed list item).

---

Typography Overview

Design System Hero

Typography

SAP applications use SAP’s proprietary typeface 72, with a fallback to a sans-serif system font if 72 can’t be loaded.

+--------------------------------------------------------------x--------------------------------------------------------------+ Tiles (plain) +--------------------------------------------------------------x--------------------------------------------------------------+ Typography – Horizon Typographic system with the Horizon visual theme. +--------------------------------------------------------------x--------------------------------------------------------------+ Typography – Quartz Typographic system with the Quartz visual theme.

Metadata

Title

Breadcrumbs

---

SAP Fiori Foundations: Writing And Wording

Ux Writing > Ux Writing For Notifications

Design System Hero

UX Writing for Notifications

Intro

Notifications are system-generated messages that notify users about significant changes in workflows, processes, or data. They inform without interrupting work, and acting on them is optional.

This guideline defines conventions for message structure, tone, terminology, and information placement to promote consistent, clear, and actionable notifications across products.

Notifications panel

Voice and Tone Principles for Notifications

SAP product notifications use the voice of an approachable expert – someone who knows their domain deeply, communicates with clarity, and supports users without overwhelming them. They act as system-level cues within the product, delivering timely and relevant information that helps users stay informed and take action when needed.

Notifications are not marketing copy or conversation starters; they are functional, concise, and purposeful. They are delivered to channels such as the application shell bar or emails based on user settings. The right tone builds trust and reduces cognitive load.

1. Serious but supportive

• Communicate urgency and importance without creating anxiety.
• Be clear and straightforward for critical tasks, while staying calm and reassuring for routine reminders and updates.
• Don't use humor, slang, or exaggerated urgency, as they reduce credibility in enterprise environments.

Do Submit your timesheet by 5 PM today.

2. Formal but approachable

• Use professional but conversational tone that’s simple and human.
• Write in second person (“you”), especially when requesting users to act.
• Keep sentences short, active, and free of jargon.

Do Your expense report is ready for approval. and requires further action.

3. Respectful and reassuring

• Respect users’ time and attention – only surface notifications that are necessary and meaningful.
• Provide enough context to help users make informed decisions.
• Never manipulate with guilt or urgency.

Do 3 invoices are pending review. Approve them to proceed with payments.

4. Consistent and role-aware

• Use terminology consistent with the product domain and the user’s workflow.
• Align tone and language with the user’s level of responsibility (manager, employee, admin).
• Use consistent urgency indicators and phrasing across all notifications (“Action required,” “Due today,” “Completed”).

How to Write Notifications

Notifications fall into two broad categories based on their purpose:

• Action-required notifications: Require users to do something (Reminders, Alerts).
• Passive notifications: Inform users without requiring action (Updates).

Action-required notification principles

Reminders

• Action-oriented: Clearly state what the user needs to do and by when. Use direct verbs: “Submit,” “Approve,” “Review.”
• Time-bound: Include deadlines or urgency markers to create relevance.
• Contextual: Specify what the reminder refers to (for example, task name, report period).
• Non-judgmental: Avoid guilt-driven language and emotional triggers.
• Concise: Keep the message glanceable – ideally under 80 characters.

Do Submit your timesheet for Week 39 by 5 PM today. (vague, no action or context) Your quarterly performance review is due tomorrow. You still haven’t done this—why wait?” (judgmental and unhelpful)

Alerts

• Clarity first: State what the issue is and the consequences if ignored.
• Explicit next step: Make it obvious how to resolve the situation.
• Transparent priority: Signal urgency with consistent phrases like “Action Required” or “Immediate Attention Needed.”
• Contextual relevance: Only trigger alerts for meaningful disruptions or risks.
• Avoid panic language: Communicate urgency without alarming users.

Do Action required: Purchase Order #990123 is pending approval. 3 expense claims are overdue. Review them to avoid payment delays.

Passive notifications

Updates

• Informative and reassuring: Clearly state what happened and whether any follow-up is needed.
• Concise and glanceable: Communicate in one line or short phrase.
• Outcome-focused: Lead with the result (“Completed,” “Available”).
• Contextual: Mention the relevant object, task, or system area.
• Respectful: Avoid trivial updates or repetitive confirmations.

Do System maintenance is completed. All services are operational. Your expense report was approved. No action is required. (unclear outcome)

Shell Bar Notifications

Notification item

1. Title 2. Description 3. Product name

Title

The main message that communicates the core action or update.

• Keep under 40 characters to avoid truncation.
• Use title case.
• Lead with the action or outcome (for example, “Approve PO #990123”).
• Avoid filler words, exclamation marks, or jargon.

Description

Secondary details that add context.

• Keep under 80 characters for readability.
• Use sentence case.
• Front-load with the most useful supporting detail.
• Test variables for long values to prevent truncation.
• Avoid repeating the title.

Email Notifications

Email notification – implementation example

1. Header 2. Body 3. Buttons (call to action) 4. Footer

Subject line

The first impression determines if users will open the email.

• Front-load with value: “Approval Needed: PO #990123.”
• Keep under 60 characters to avoid truncation.
• Use urgency sparingly and with context.
• Prefer an active voice for clarity.

Optional: Header (intro line)

A short text that reinforces the subject line inside the email.

• Align with subject line; no contradictions.
• Keep concise and informative: “Your purchase order requires approval.”
• Avoid marketing-style slogans in transactional emails.

Body

The main content explains what happened and what action is needed.

• Use structured hierarchy (short paragraphs, bullet points, tables).
• Keep transactional emails under 240 characters.
• Write clearly and role-aware (manager vs. employee vs. admin).
• Avoid jargon or filler phrases.

Buttons/call to action (CTA)

The primary action that the email is designed to drive.

• Use short, action-driven text: “Approve Request,” “Submit Report.”
• Limit to one primary CTA; add secondary if absolutely needed.
• Keep under 25 characters.
• Avoid vague CTAs like “Click Here.”
• Use title case for buttons.

Footer

The closing section provides trust, compliance, and navigation.

• Use a consistent SAP footer format: support contact, copyright, terms.
• Include unsubscribe link, preference center, and SAP branding.
• Keep concise and mobile-friendly.
• Separate visually with a smaller font or divider.

Additional Considerations

SAP Generic Target Groups

The source text of SAP software is designed for a variety of target groups – decision makers, consultants/implementers, administrators, developers, and users who all have their own unique needs, abilities, and challenges. This can influence the style and tone of voice of content used in the software.

SAP Product Standards

Before writing a notification, familiarize yourself with the SAP product standards that are relevant for the user interface. You don't need to know all product standards and all their requirements. Some requirements apply directly; others are just helpful background. Here are the relevant product standards:

• Product Standard for User Assistance
• Product Standard for User Experience Consistency including the SAP Fiori Design Guidelines
• Product Standard for Accessibility including Inclusive Design
• Product Standard for Globalization

Translation and Translatability

• Understand the user groups and the languages in which the product will be available.
• Use clear and inclusive language that can be easily understood and accurately translated.
• Do not use idioms, slang, wordplay, or culturally specific expressions that may not translate well.
• Be flexible with stylistic rules when needed to make the content clearer or more suitable for local contexts.

Usage of Variables

Do

• Variables should only represent untranslatable items like object IDs, values, or technical names.
• Name variables clearly (for example, {sender}, {recipient}) or use numbering (for example, &1, {0}). This helps translators reorder them correctly.
• Ensure variables are placed naturally within a full sentence. For example, “Do you want to delete {documentName}?”
• Avoid formatting like “day(s)” or “file(s)”. Variables

should not carry grammar logic (like plural/singular). Handle such logic in code or with conditional strings.

Metadata

Title

Breadcrumbs Writing for Notifications

Description

---

Ux Writing

Design System Hero

UX Writing

General Guidelines

+------------------------------------------------------------------------------------x------------------------------------------------------------------------------------+ Tiles (plain) +------------------------------------------------------------------------------------x------------------------------------------------------------------------------------+ UX Writing Guidelines (BETA) First version of the new cross-product UX writing guidelines. +------------------------------------------------------------------------------------x------------------------------------------------------------------------------------+ UI Text Guidelines for SAP Fiori Apps Apply the basic rules for UI text in SAP applications.

Specialized Guidelines

The content guidelines below each focus on UI text for a specific domain.

+--------------------------------------------------------------------------------------------x---------------------------------------------------------------------------------------------+ +--------------------------------------------------------------------------------------------x---------------------------------------------------------------------------------------------+ AI UI Text Enable users to understand and trust AI functionality through well-crafted interface text. +--------------------------------------------------------------------------------------------x---------------------------------------------------------------------------------------------+ Overview Page – UI Text Guidelines Write consistent page and card titles, subtitles, and action texts in overview pages. +--------------------------------------------------------------------------------------------x---------------------------------------------------------------------------------------------+ UX Writing for Notifications Craft actionable, user-friendly, and consistent notification messages. +--------------------------------------------------------------------------------------------x---------------------------------------------------------------------------------------------+ Situation Handling – UI Text Guidelines Create effective and consistent texts for both standard and extended Situation Handling frameworks. +--------------------------------------------------------------------------------------------x---------------------------------------------------------------------------------------------+ Wrapping and Truncating Text Ensure readability by applying effective wrapping and truncation strategies across devices.

+--------------------------------------------------------------------------------------------x---------------------------------------------------------------------------------------------+ Tiles (plain, external_only) +--------------------------------------------------------------------------------------------x---------------------------------------------------------------------------------------------+ Overview Page – UI Text Guidelines Write consistent page and card titles, subtitles, and action texts in overview pages. +--------------------------------------------------------------------------------------------x---------------------------------------------------------------------------------------------+ UX Writing for Notifications Craft actionable, user-friendly, and consistent notification messages. +--------------------------------------------------------------------------------------------x---------------------------------------------------------------------------------------------+ Situation Handling – UI Text Guidelines Create effective and consistent texts for both standard and extended Situation Handling frameworks. +--------------------------------------------------------------------------------------------x---------------------------------------------------------------------------------------------+ Wrapping and Truncating Text Ensure readability by applying effective wrapping and truncation strategies across devices.

Metadata

Title

Breadcrumbs

---

Walkme

Design System Hero

WalkMe

Overview

+-------------------------------------------------------------------x-------------------------------------------------------------------+ Tiles (plain) +-------------------------------------------------------------------x-------------------------------------------------------------------+ About the WalkMe Guidelines Check out our evolving content design resources for WalkMe content creators.

WalkMe Toolkit

+-----------------------------------------------------------------------x-----------------------------------------------------------------------+ Tiles (plain) +-----------------------------------------------------------------------x-----------------------------------------------------------------------+ Content Guidelines Apply content guidelines that are tailored to the WalkMe experience. +-----------------------------------------------------------------------x-----------------------------------------------------------------------+ Toolkit Guidelines Craft clear, helpful content for WalkMe tour components. +-----------------------------------------------------------------------x-----------------------------------------------------------------------+ Bolierplate Text and Examples Find copy-and-paste examples for common tasks and UI elements.

Metadata

Title

Breadcrumbs

---

SAP S/4HANA Design Guidelines

Specific design guidance for SAP S/4HANA applications.

Ai Assisted Error Explanation

AI-Assisted Error Explanation

Intro

AI-assisted error explanation helps users understand and resolve the errors or warnings that they encounter when working on an object page in an application developed with SAP Fiori Elements.

Issue explanation

When to Use

Use AI-assisted error explanation in workflows where the user encounters errors or warnings via the message popover on an object page, and requires more details, and recommendations for resolving them.

Do Use AI-assisted error explanation

• To provide users with a more detailed explanation for the errors or warnings that they encounter in

workflows on the object page

• To recommend how to resolve the error or warning
• To speed up the users’ workflow
• To explain simple errors that the user may already know

how to resolve

Anatomy

AI-assisted error explanation extends the dialog component to enable new AI-specific interactions.

Structure of AI assisted error explanation dialog

1. Dialog Container 2. Short description of the error 3. Understanding the Issue – an AI-generated explanation of the error 4. “Show more” button – For progressive disclosure of a lengthy description. 5. Resolving the issue – AI-generated recommendations on resolving the issue 6. AI Notice 7. Feedback icons 8. Footer – with Copy All and Close buttons

Behavior & Interaction

When the user encounters an error or warning on the object page in edit mode, it appears in the message popover. The user can navigate to the message and trigger an AI-generated explanation with the Explain button.

Message popover with ‘Explain’ button

During Generation

Busy indicator: The Issue Explanation dialog shows a busy indicator to inform the user that AI is generating the explanation.

Generating an error explanation (generation)

After generation

When generation is complete, the error explanation text is displayed in the dialog. The text headings ensure easy readability, and consistency. The user can share the explanation with the Copy All button.

Generation of error explanation completed

Responsive Behavior

The AI-assisted error explanation builds on the foundation of the dialog and its responsive behavior. For more on the responsive behavior of the AI-assisted error explanation dialog, see Dialog.

---

Navigation Menu

Navigation Menu

Intro

The navigation menu is always a click away and provides users with quick access from one work area to another. To optimize their navigation flows, users can personalize the menu with their most used spaces and their favorite S/4HANA Public Cloud apps.

> Information:

All references to “My Home” in this article relate to the SAP S/4HANA product home page, which displays My Home on its interface.

Navigation menu

When to Use

Do Use the navigation menu:

• To give users direct access to all S/4HANA Cloud spaces

and apps

• To let users organize and access apps with favorites,

folder creation, and pinned spaces

Anatomy

Anatomy of the navigation menu

All items below are mandatory and cannot be replaced:

1. The hamburger toggle button: Located in the shell bar and available from every space, it opens and closes the navigation menu. 2. My Home: Navigates to the SAP S/4HANA product home page. 3. Favorite Apps section: Users can add their favorite apps to this section and create folders in it for better organization. The Add Apps item navigates to the App Finder. 4. My Spaces section: Provides access to authorized spaces. Users can pin their favorite spaces in this section. 5. All Spaces: Opens All Spaces where users can pin specific spaces.

Adding favorite apps from the App Finder

Pinning and unpinning spaces from the All Spaces menu

Behavior & Interaction

Open/Close the Navigation Menu

Clicking the hamburger menu, alternately:

• Opens the navigation menu as a popover
• Closes the menu

Selecting a menu item or clicking outside the menu also closes the navigation menu.

Expand/Collapse Menu Sections

Clicking a submenu indicator alternately expands and collapses the section.

Navigation Interactions

• Right clicking an item opens the corresponding app or space in a new tab.
• Clicking a space item navigates to the space.
• Clicking a space submenu indicator expands the menu of subspaces.

Right clicking an app or space shows the menu item for opening it in a new tab

---

S4Hana Product Home Page My Home

My Home in SAP S/4HANA Cloud Public Edition

Intro

My Home in SAP S/4HANA Cloud Public Edition is the entry point to apps, and offers access to:

1. Tasks and situations 2. News feed 3. Pages 4. Analytical insights 5. SAP Business AI recommendations

Additionally, its users benefit from enhanced personalization features for content and layout.

My Home in SAP S/4HANA Cloud Public Edition is based on launchpad spaces and runs best with the Horizon theme, although it supports other SAP and custom themes. A key user must activate My Home in SAP S/4HANA Cloud Public Edition.

Components

Components in My Home in SAP S/4HANA Cloud Public Edition

My Home in SAP S/4HANA Cloud Public Edition is the leftmost option in the top-level shell bar navigation and provides the following sections and content:

1. The salutation bar with specific actions 2. [To Dos](https://www.sap.com/design-system/fiori-design-web/discover/sap-products/sap-s4hana-only/s4hana-product-home-page-my-home#to-dos) for tasks and situations 3. [News](https://sap.com/design-system/fiori-design-web/discover/sap-products/sap-s4hana-only/s4hana-product-home-page-my-home#news) for user-relevant news and other updates 4. [Pages](https://sap.com/design-system/fiori-design-web/discover/sap-products/sap-s4hana-only/s4hana-product-home-page-my-home#pages) for a maximum of 8 pages displayed as tiles 5. [Apps](https://sap.com/design-system/fiori-design-web/discover/sap-products/sap-s4hana-only/s4hana-product-home-page-my-home#apps) for the user’s favorite apps, most used apps, recently used apps, and apps recommended by SAP Business AI 6. [Insights Tiles](https://sap.com/design-system/fiori-design-web/discover/sap-products/sap-s4hana-only/s4hana-product-home-page-my-home#insights-tiles) for tiles with analytical information 7. [Insights Cards](https://sap.com/design-system/fiori-design-web/discover/sap-products/sap-s4hana-only/s4hana-product-home-page-my-home#insights-cards) for cards from overview pages and list-report-based apps 8. A section menu shows actions for each section, including an action to open the My Home Settings dialog. From the dialog, users access personalization options for the section, and for the layout for My Home and the visibility of its sections.

For more information on user workflows for personalization, see the My Home in SAP S/4HANA Cloud Public Edition documentation in the SAP Help Portal.

To Dos

My Home - ‘To-Dos’ section

The To Dos section includes tabs for:

1. Situations from the My Situations app 2. Tasks from the Task Center

Each tab displays the tasks or situations as cards. They are arranged in a row according to their priority, from high to low.

Information: The To Dos section is available only if the My Inbo&#x78;, Task Center, or My Situations app is assigned to the user. The

tabs shown in the section correspond to the assigned apps.

News

My Home - ‘News’ section

A carousel lets users navigate through the news feed. Users can personalize their news feed in the Manage News app, available in the section menu.

Information: The news feed is available only if a key user has activated it.

When users click an item in the carousel, a dialog opens to display the details.

My Home - news dialog

Pages

My Home - ‘Pages’ section

The Pages section shows a maximum of 8 favorite pages represented as tiles. Users define the pages to show or hide in the Pages tab of My Home Settings. See Pages.

Information: A key user can assign custom colors and icons to the pages.

Apps

My Home - ‘Apps’ section

The Apps section includes a Favorites (1) tab, with apps that the users have added from the *Most Used (2), Recently Used (3), or Recommended (4)* tabs.

App groups (5) are displayed as colored folders and contain the apps that the users add to them. See Apps.

Information: Apps are shown on the Most Used and Recently Used tabs only if the user allows app tracking in the My Home Settings dialog:

• Most Used displays the apps used in the last 30 days, ordered from the most to least used.
• Recently Used displays up to 30 activities, ordered from most to least recently used.

Apps recommended by SAP Business AI are based on the user's business role. Users can hide the tab in the My Home Settings dialog.

Insights

Insights Tiles

My Home - ‘Insights Tiles’ section

The Insights Tiles section contains tiles with analytical information, such as charts or KPIs. All tiles are displayed in one row.

Insights Cards

My Home - ‘Insights Cards’ section

1. The Insights Cards section contains a maximum of 10 cards 2. An overflow menu for each card with card-specific actions

Responsiveness

My Home in SAP S/4HANA Cloud Public Edition is responsive and can be used on tablets and phones.

---

SAP Fiori UI Elements: Messages

This reference covers the following UI components:

• Message Strip
• Message Strip Web Component

---

message-strip

+---------------------------------------------------------------------------------------------------------------x---------------------------------------------------------------------------------------------------------------+ Message Strip (information) +---------------------------------------------------------------------------------------------------------------x---------------------------------------------------------------------------------------------------------------+ This guideline now covers both SAPUI5 and SAP Web Components. Learn more.

Intro

The message strip component displays application-related messages directly within the interface. It draws attention to important information, such as warnings or status changes, that might otherwise go unnoticed. The message strip component can be embedded within the header or detail area of an object or page, or it might apply only to a single component (for example, a table).

Message strip

Component availability

This component is available in the following libraries:

+-----------x------------+--------------------------------------------------x---------------------------------------------------+----------------x-----------------+ Library | Technical Name | Identifier +-----------x------------+------------------------------------------------------------------------------------------------------+----------------x-----------------+ SAPUI5 Demo Kit | sap.m.MessageStrip | :badge, info, large, _, SAPUI5: +-----------x------------+--------------------------------------------------x---------------------------------------------------+----------------x-----------------+ | :badge, info, large, _, SAP Web SAP Web Components | ui5-message-strip | Components: +-----------x------------+--------------------------------------------------x---------------------------------------------------+----------------x-----------------+ SAP Web UI Kit (Figma) | Message Strip | :badge, info, large, _, Figma:

Table (external_only) +----------------x-----------------+-------------------------------------------x-------------------------------------------+----------------x-----------------+ Library | Technical Name | Identifier +----------------x-----------------+---------------------------------------------------------------------------------------+----------------x-----------------+ SAPUI5 Demo Kit | sap.m.MessageStrip | :badge, info, large, _, SAPUI5: +----------------x-----------------+-------------------------------------------x-------------------------------------------+----------------x-----------------+ | :badge, info, large, _, SAP Web SAP Web Components | ui5-message-strip | Components: +----------------x-----------------+-------------------------------------------x-------------------------------------------+----------------x-----------------+ SAP Fiori for Web UI Kit (Figma) | Message Strip | :badge, info, large, _, Figma:

When to Use

+-----------------------------------------------------------------------x------------------------------------------------------------------------+ When To Use +-----------------------------------------------------------------------x------------------------------------------------------------------------+ Do Use the message strip to:

• Display messages that apply to either the entire page or a specific section, such as an object header.
• Inform users about the status of an object, such as a process, item, or workflow.
• Display a warning message to alert users to an issue.

+-----------------------------------------------------------------------x------------------------------------------------------------------------+ Don't Don’t use the message strip to:

• Display information within another component (for example, a table cell or list item), or to apply the component to another small element.
• Request decisions or immediate user actions. Use a dialog instead.
• Communicate issues related to a specific input or form element. Use the component’s value state instead.

+------------------------------------------------------------------------x------------------------------------------------------------------------+ Top Tips +------------------------------------------------------------------------x------------------------------------------------------------------------+

• Place message strips close to relevant content to avoid interrupting the user flow.
• Use value states consistently so users can understand the urgency and nature of each message.
• Show an icon to identify the message type.
• Include a Close button when the message is persistent or requires user dismissal.
• Keep text simple and concise, use formatting only when you need to emphasize or add hyperlink text.
• Add a custom icon when you need to communicate specific meaning not covered by standard value states.
• Apply a custom background color when you need to highlight special message types or match application branding.
• Ensure the message strip adapts responsively, keeping the icon on the left, the Close button on the right, and letting text wrap naturally.

Anatomy

1. Container: Holds the icon, message text, and Close button. 2. Icon (optional): Visual indication of the message type. By default, the message strip uses standard icons for negative, critical, positive, and information messages. 3. Text: Displays the main message content. 4. *Close button (optional):* Lets users dismiss the message strip.

Types

Message strip with or without icon

A message strip can be displayed with or without an icon, depending on the context and importance of the message. Including an icon helps users quickly recognize the message type.

Message strip with and without icon

Message strip with or without “Close” button

A message strip can appear with or without a Close button. Use the Close button for temporary or informational messages that users can remove, and omit for persistent messages that convey ongoing status or important system information.

Message strip with and without “Close” button

Message strip with or without formatted text

A message strip can include plain or formatted text. Keep messages simple and concise in both cases. Use formatting, such as bold text or inline links only to emphasize key details, not to add complexity. Below is an additional example to the formatted text to illustrate that links can be added to the message text.

Message strip with and without formatted text

Message strip with custom icon

A message strip can include a custom icon to represent a specific status or industry-related context not covered by the standard value states. You can use a custom icon when you need to convey a unique meaning or align the message with application-specific semantics.

Message strip with custom icon

Message strip with custom background

Use a custom background color when you need to distinguish special message types or align with app-specific branding. For additional options, see the \ indication colors\ palette.

Message strip with custom background color

States

Value states

The message strip supports four value states: Negative, Critical, Positive, and Information. Value states appear with a specific color and icon to convey their meaning. Unlike other components, message strips always have a value state.

A. Negative: Indicates that an error has occurred, possibly guiding users to take corrective action. Message strip value states B. Critical: Alerts users to potential issues that may require attention but are not errors. Users can typically continue but might run into issues later. C. Positive: Confirms that a user action or system process has been successfully completed. D. Information: Displays general information or guidance that is not critical but can help users complete their tasks. > Guideline:

Use message strips sparingly and place them near the related content, so they inform without interrupting the user flow. Consistent use of these semantic states ensures that users can quickly recognize and interpret the nature and urgency of a message across the interface.

For more information, see Value States.

Focus state

All value states can have a focus. A focus state indicates that the component receives the keyboard interaction input. If a message strip contains a link, the focus first goes to the link, and then to the Close button. For more information, see Focus States.

Behavior and Interaction

The user can dismiss a message strip from the application's UI by clicking the Close button located on the right-hand side. On mobile devices, the tap gesture is used for dismissal instead of mouse interaction.

Responsiveness

The message strip adapts to different layouts and screen sizes. Icons remain on the left and the Close button on the right, while text wraps automatically.

If you place the message strip within the detail area for an object, it always uses 100% of the available width and reacts to the responsiveness of the container.

Message strip – web and mobile appearance

Accessibility

SAP follows international standards, such as WCAG and WAI-ARIA, and strives to make our business solutions accessible and inclusive.

For more information, see Accessibility in SAP Fiori and the Accessibility Design Tools Handbook.

Keyboard navigation

The following keyboard combinations are supported by the SAPUI5 message strip component.

Table (col-width-30-70)

Key Combination

Tab If the message strip contains a link, the focus moves to it. If there is no Close button, pressing Tab again moves the focus to the next interactive element outside the message strip. If multiple links exist, pressing Tab moves the focus sequentially through the links, after which it moves to the Close button, if present.

Shift \+ Tab If the message strip contains a link and the focus is on the Close button, the focus moves to the link. If the focus is on the second link, pressing Shift \+ Tab moves the focus to the first link.

Screen reader support

For details on screen reader support and Accessible Rich Internet Applications (ARIA), see UI5 Screen Reader Support and WAI-ARIA Authoring.

Content

Text

Messages should be simple and concise. Keep the following principles in mind when formulating message texts. For more information, see UI Text Guidelines for SAP Fiori Apps – Messages.

Link

All link types (regular, emphasized, subtle, and so on) can be used in the message strip component. Choose the link variant that best fits your use case. However, for a custom message strip using the extended palette, the subtle link is the recommended type. For more information, see Link.

Localization

The message strip supports both left-to-right (LTR) and right-to-left (RTL) languages layout helping users to read and interact naturally. In RTL layouts, the positions of the leading icon and the trailing Close button are flipped to match the reading direction (icon on the right, Close on the left).

Left-to-right message strip

Framework Comparison

There are no differences between SAPUI5 and SAP Web Components regarding the component's behaviors and framework-specific patterns.

---

message-strip-web-component

+------------------------------------------------------------------------------------------------------------------------------------x-------------------------------------------------------------------------------------------------------------------------------------+ +--------------------------------------------------------------------------------------------------------------------------x--------------------------------------------------------------------------------------------------------------------------+---------x----------+

This page has been deprecated and is no longer available.

This page was deprecated with guideline version 1.142.

Reason for deprecation

The guidelines for the SAP Web Component and the SAPUI5 component have been merged. Learn more.

Looking for the latest information?

Visit the page below for the unified guideline with the most recent updates. Message Strip

---