What’s New

Welcome to the New SAP Design System Portal!

The SAP Design System portal is your one-stop-shop for all the resources and guidance you need to build your best with SAP. Here you’ll find all of the SAP Fiori Design Guidelines across mobile, web and digital design platforms, along with resources and support to help you get the most out of the system.

What’s new?

The SAP Fiori Design Guidelines are now the all-encompassing SAP Design System Guidelines. All the content you use and rely upon can be found here in the new experience, either via the Android landing page (direct links right to key sources like components, visual foundations, and mobile documentation), or the side bar navigation within the system guidelines. You can also toggle between web, mobile, and digital design using the top menu navigation.

The old URL (experience.sap.com/fiori-design) will stay live for a transitional period, before being deprecated and re-directing to the new portal site (sap.com/design-system). Make sure to bookmark your new links!

SAP BTP SDK for Android 25.11

Accessibility

Feature / Guideline Enhancements! We have updated our accessibility guidelines and added a keyboard focus indicator to all custom components.

Focus Indicator in tint and negative

AI Handoff

New Guideline! An AI handoff refers to a user’s transition between contextual embedded AI features and the Joule conversational panel. This guideline article provides best practices and examples on how to create a seamless transition, so users get a unified AI experience that accelerates their workflows cohesively.

AI handoff

AI Inline User Feedback

Feature Enhancements! The AI inline user feedback is a variant of the AI user feedback. It contains a short message of the feedback context with two buttons for gathering user feedback on the relevant AI experience with minimum interruption.

AI inline user feedback

AI Insight

New Pattern! AI insights provide a standardized way to display a summary, analysis, or suggestion generated with AI. This pattern can be applied to a full-screen or a card depending on the scope of content generated by AI.

AI insights

Cards

Feature Enhancements!

  • Added a filled card variation in addition to the elevated card and outline card.
  • Added horizontal orientation, where the media block is placed either to the left or right of the vertically stacked content blocks, creating a card with a wider dimension.
  • Added a flex item to the main card header, which can contain preferred components such as status info label, tag(s), or a custom component.

Vertical card orientation examples

M3 Standard Components

Guideline Enhancements! As SAP Fiori for Android transitions to the Horizon theme with its tonal option, updates for specific Material 3 components have been discontinued, shifting our focus to only providing support for the Horizon theme. The new guideline section, M3 Standard Components, provides information on how to use the app bar, navigation bar, navigation rail, search, and tabs.

The navigation drawer is being deprecated in the Material 3 expressive update; use an expanded navigation rail instead.

Medium app bar and navigation rail

Medium Contrast and High Contrast Colors for Horizon Tonal Option

Feature Enhancements! The Medium Contrast and High Contrast color palettes work with the Tonal option color roles to provide better user experience for people with visual disabilities. The contrast settings are automatically applied to both light and dark themes.

Default, medium, and high contrast modes

Onboarding

Feature Enhancements! For the app passcode creation screen, we have enabled an option to skip the passcode. This option is available when the app's security protocol makes the passcode optional for certain user groups.

“Create Passcode” default screen (left) and variation with passcode skipping option (right)

Profile & Settings

New Guideline! The profile and settings pattern provides a centralized entry point for account management and app-specific preferences. It follows a list-detail navigation model and is accessed from the avatar in the home screen’s top app bar.

Profile and settings in a list-detail layout on compact (left) and on large device size (right)

Product Icon

Updated Guideline! The Android app icon guidelines have been updated to keep your SAP mobile apps aligned with Material Design’s best practices by adding new sections for appearances as well as app naming conventions.

Product icons for SAP Fiori for Android

Stepper

Feature Enhancements! The stepper component’s accessibility has been improved with a new guideline section introducing default roles and labels, and best practices for label customization.

Stepper form cell SDK default value update announcement

Text Input

Feature Enhancements! Both the simple property form cell and note form cell now support semantic messages in addition to helper text and error message. We’ve also updated the error message layout to be consistent with other form cells, and improved alignment for inline AI notice. Label and character counter colors have been updated to align with SAP Fiori for iOS.

Semantic messages: warning (top) and success (bottom)

Augmented Reality (AR)

Deprecated Component! The AR component has been deprecated and will be removed from the UI Kit starting with SDK release 26.1.

AR cards with image preview

SAP BTP SDK for Android 25.8

UI Components & Patterns

AI User Feedback

New Pattern! The AI user feedback pattern allows users to provide positive or negative feedback about their experience with embedded AI, applicable from component-level feedback to page-level feedback.

AI user feedback in default view

AI Writing Assistant

New Pattern! AI writing assistant quickly and seamlessly edits text in text input fields via provided prompts in a panel, allowing users to refine their input and complete writing tasks with efficiency.

AI writing assistant default panel

Circular Progress Indicator

Feature Enhancements! The icon button can be changed to a different icon button once loading is finished.

Object cell with a progress indicator

Illustrated Message

Feature Enhancements! New illustration assets have been added.

Illustrated message with the new “empty task” illustration

Native File Viewer

Feature Enhancements! The native file viewer now supports password-protected PDFs by prompting users to enter a password in a dialog before the file is displayed.

Viewing password-protected PDF files

Picker Form Cell

Feature Enhancements! The Jetpack Compose version of the picker form cells is now available.

Date picker form cell with Horizon tonal color option

Stepper Form Cell

New Component! The stepper form cell in two layout options and the nested stepper control are now available for Jetpack Compose.

Stepper form cell in horizontal layout (top) and vertical layout (bottom)

Text Input

Feature Enhancements! Text input – single property form cell now supports currency input by offering an ISO code on the label, and formatting the entered value with currency symbol based on local settings.

Text input – single property form cell with currency input

Time Picker

Feature Enhancements! The Jetpack Compose version of the time picker is now available.

Time picker with Horizon tonal color option

SAP BTP SDK for Android 25.4

Design Kit

New Design Kit with Horizon Tonal Color Option

Updated Design Kit! A tonal variant of the Horizon theme has been added. The tonal color option provides better Android native experience. With this update, a new design kit has also been created, separating it from the non-tonal color option.

Picture 1, Picture

SAP Fiori for Android Design Kit

Foundation

Adaptive Layout

Guideline Enhancements! The guideline articles have been updated to provide guidance on how to apply M3’s adaptive layout to mobile apps for a better user experience on large screens.

Picture 1, Picture

List-detail layout displayed in expanded window size

Colors

Guideline Enhancements! Introducing Horizon theme with tonal option. The tonal variance of the Horizon theme combines the Horizon characteristics with M3 tonal styles to create an enhanced Android native experience.

Horizon theme with tonal variant

UI Components & Patterns

AI Notice

New Pattern! The AI notice informs users when content is AI-generated, reminding them to double-check its accuracy.

Picture 1, Picture

A note form cell with AI notice

AI Progress Indicator

New Component! The AI progress indicator provides information about the status of a user’s request while they wait for the content to be generated by AI.

Picture 1, Picture

AI linear progress indicator

Attachment Form Cell

Feature Enhancements! A confirmation dialog now appears by default when an attachment is deleted.

Picture 1, Picture

Confirmation dialog for deleting an attachment

Feature Enhancements! The banner component is now available in Jetpack Compose.

Picture 1, Picture

Banner with one-line text and one action

Barcode Scanner

New Pattern! The barcode scanner allows users to quickly locate an object by scanning a barcode via their device’s built-in camera. It supports both manual and auto capture modes for processing multiple bar codes.

Picture 1, Picture

Barcode scanner in auto mode

Calendar

Feature Enhancements! The calendar control now supports range selection.

Picture 1, Picture

Calendar control in range selection mode

Card Header

Feature Enhancements! The card header now provides slots for custom components. The card cell has been enhanced to allow for improved information hierarchy.

Picture 1, Picture

Main card header with slots for custom components

Circular Progress Indicator

Feature Enhancements! The in-place loading state can be applied to a button inside an object cell. The button reverts to its original state after successful loading.

Picture 1, Picture

Loading state button in object cell

Collection View

Feature Enhancements! The Jetpack Compose version of the collection view has been updated with visual changes such as an adopted attachment grid.

Picture 1, Picture

Collection view with edge-to-edge horizontal scroll

Date Picker

Feature Enhancements! The Jetpack Compose version of the date picker supports custom features such as an alternate calendar and clearing a selection.

Picture 1, Picture

Date picker dialog with Horizon tonal color option

Inline Signature Capture

Feature Enhancements! Inline signature capture now supports mandatory field indicators and error state.

Picture 1, Picture

Inline signature Capture in error state

Material Design 3 Standard Components

Guideline Enhancements! Several components will be discontinued for receiving updates as we transition to providing Horizon theme support for M3 standard components.

Picture 1, Picture

M3 primary tabs on compact screen with Horizon tonal color option

Onboarding

Guideline Enhancements! The single-user onboarding guideline article has been updated with detailed explanation of how to choose the right flow for your use case and best practice examples for customization.

Picture 1, Picture

Custom page example for QR code scan

Rating Control

Feature Enhancements! The rating control now supports a leading label for the display-only variant and has a new interactive variant.

Picture 1, Picture

Interactive rating control example

SAP BTP SDK for Android 24.12

Design Kit

New Updates via Branches

Updated Design Kit! We’ve transitioned from creating new versions as separate files to updating within the same file using branches. This change ensures a single source of truth, improves collaboration, and simplifies version control by keeping all updates centralized and organized in one place.

SAP Fiori for Android Design Kit

Foundation

Color System - Elevation

New! The Elevation article goes into the details, visual cues, examples, and usage of the elevation system.

Elevation techniques: tonal color, shadow, and scrim

UI Components & Patterns

AI Button

Guideline Enhancements! The AI Button guideline article now includes best practices for using the icon-only AI button variant.

Icon-only AI button placed in object cells

AI Acknowledgement

Guideline Enhancements! The guideline now includes best practices for using the AI Acknowledgement in an onboarding and in-app service update scenario.

AI Acknowledgement in onboarding

Attachment Form Cell

Feature Enhancements! The attachment form cell can now indicate mandatory fields with an asterisk. If the user doesn’t upload a file, the attachment form cell displays an error state. An optional helper text has also been introduced.

Attachment form cell in error state

Avatar and Avatar Group

Feature Enhancements! A short label can now be displayed together with the avatar group to provide descriptive information. For better visibility, the avatar group now also offers avatars with a size of 24dp in addition to the default 16dp.

Avatar group with trailing label

Button

Feature Enhancements! The loading state can be applied to a button when a user-triggered non-disruptive progress is being processed. The original icon and/or text is replaced with an activity indicator and/or loading message.

Loading button examples

Chips

Feature Enhancements! The chip form cell now supports adding a mandatory field indicator.

Chip form cell with required field

Circular Progress Indicator & Linear Progress Indicator

Updated to M3 style! The circular progress indicator and linear progress indicator components have been updated to integrate the lasted Material 3 styles. This update enhanced accessibility for both components.

Progress indicator examples

Date and Duration Picker

Feature Enhancements! The date and range pickers now enable a few features provided by View-Based Android picker. The date and range picker dates may now show a disabled date, and a minimum and/or maximum date may now be set. The date picker may now show status indicators.


Date picker showing disabled states and status indicators

Document Scanner

New Component! The document scanner offers both automatic and manual scanning modes for single or multiple documents, along with border detection. Editing options are also available in the gallery view.

Document scanner camera view (left) and gallery view (right)

Multi-Message Handling

New Component! Multi-message handling helps users manage multiple messages within an app, making it easy for users to take action. Multi-message handling follows the basic structure of a bottom sheet, prioritizing message components based on their importance.

Multi-message handling

Object Cell

Feature Enhancements! The object cell has been enhanced to support more nested components, including rating controls and menus. Options to include text buttons, icon buttons, and KPI, and new combinations for the right accessory have also been added. Additionally, rows can be swapped for increased flexibility.

Object cell on compact screen (top) and expanded screen (bottom)

Section Header/Footer

New Section Footer! The section footer provides additional actions or information at the bottom of a group section. It supports various layouts, including a left-aligned button, right-aligned button, two opposite buttons, and text only, with flexible positioning to adapt to different use cases.

Section footer types

Slider

Updated to M3 style! The slider and slider form cell have been visually updated to align with the latest Material 3 design guidelines. Updates include wider active and inactive tracks, a stop indicator at the end of the inactive track, and the redesigned handle.

Slider form cell