- Latest Version 1.128
- Version 1.126
- SAPUI Version 1.124
- SAPUI5 Version 1.122
- SAPUI5 Version 1.120
- SAPUI5 Version 1.116
- SAPUI5 Version 1.114
- SAPUI5 Version 1.112
- SAPUI5 Version 1.110
- SAPUI5 Version 1.108
- SAPUI5 Version 1.106
- SAPUI5 Version 1.104
- SAPUI5 Version 1.102
- SAPUI5 Version 1.100
- SAPUI5 Version 1.98
- SAPUI5 Version 1.96
- SAPUI5 Version 1.94
- SAPUI5 Version 1.92
- SAPUI5 Version 1.90
- SAPUI5 Version 1.88
- SAPUI5 Version 1.86
- SAPUI5 Version 1.84
- SAPUI5 Version 1.82
- SAPUI5 Version 1.80
- SAPUI5 Version 1.78
- SAPUI5 Version 1.76
- SAPUI5 Version 1.74
- SAPUI5 Version 1.72
- SAPUI5 Version 1.70
- SAPUI5 Version 1.68
- SAPUI5 Version 1.66
- SAPUI5 Version 1.64
- SAPUI5 Version 1.62
- SAPUI5 Version 1.60
- SAPUI5 Version 1.58
- SAPUI5 Version 1.56
- SAPUI5 Version 1.54
- SAPUI5 Version 1.52
- SAPUI5 Version 1.50
- SAPUI5 Version 1.48
- SAPUI5 Version 1.46
- SAPUI5 Version 1.44
- SAPUI5 Version 1.42
- SAPUI5 Version 1.40
- SAPUI5 Version 1.38
- SAPUI5 Version 1.36
- SAPUI5 Version 1.34
- SAPUI5 Version 1.32
- SAPUI5 Version 1.30
- SAPUI5 Version 1.28
- SAPUI5 Version 1.26
- Latest Version 1.128
- Version 1.126
- SAPUI Version 1.124
- SAPUI5 Version 1.122
- SAPUI5 Version 1.120
- SAPUI5 Version 1.118
- SAPUI5 Version 1.116
- SAPUI5 Version 1.114
- SAPUI5 Version 1.112
- SAPUI5 Version 1.110
- SAPUI5 Version 1.108
- SAPUI5 Version 1.106
- SAPUI5 Version 1.104
- SAPUI5 Version 1.102
- SAPUI5 Version 1.100
- SAPUI5 Version 1.98
- SAPUI5 Version 1.96
- SAPUI5 Version 1.94
- SAPUI5 Version 1.92
- SAPUI5 Version 1.90
- SAPUI5 Version 1.88
- SAPUI5 Version 1.86
- SAPUI5 Version 1.84
- SAPUI5 Version 1.82
- SAPUI5 Version 1.80
- SAPUI5 Version 1.78
- SAPUI5 Version 1.76
- SAPUI5 Version 1.74
- SAPUI5 Version 1.72
- SAPUI5 Version 1.70
- SAPUI5 Version 1.68
- SAPUI5 Version 1.66
- SAPUI5 Version 1.64
- SAPUI5 Version 1.62
- SAPUI5 Version 1.60
- SAPUI5 Version 1.58
- SAPUI5 Version 1.56
- SAPUI5 Version 1.54
- SAPUI5 Version 1.52
- SAPUI5 Version 1.50
- SAPUI5 Version 1.48
- SAPUI5 Version 1.46
- SAPUI5 Version 1.44
- SAPUI5 Version 1.42
- SAPUI5 Version 1.40
- SAPUI5 Version 1.38
- SAPUI5 Version 1.36
- SAPUI5 Version 1.34
- SAPUI5 Version 1.32
- SAPUI5 Version 1.30
- SAPUI5 Version 1.28
- SAPUI5 Version 1.26
Navigating the Guidelines
Intro
Once you’re ready to take a more in-depth look at the SAP Fiori web design guidelines, you’ll want to get acquainted with our navigation structure (visible on the left of the screen, or by clicking the icon on the top left).
The guidelines cover a large number of topics, which are divided into different categories. The sections below summarize what you can expect to find under each category. Since we only mention the most important articles, be sure to check the navigation structure for a complete overview.
SAP Fiori Design System
What is SAP Fiori?
Learn about the new user experience for SAP software.
Design Principles
Learn about the five core principles that underpin the SAP Fiori design philosophy.
Design-Led Development Process
Get to know the SAP Fiori design-led development process and the key milestones and activities.
Responsiveness
SAP Fiori apps work on various devices. Check out SAP Fiori's focus on responsive and adaptive design.
Accessibility in SAP Fiori
Learn how SAP Fiori supports you in designing accessible products.
Look, Feel, and Wording
Theming
SAP Fiori user interfaces are constructed using SAPUI5 control sets that are meticulously styled with CSS.
Colors
Get to know the SAP Fiori color palette, including colors for different semantic states, such as 'critical' or 'positive'.
Iconography
Learn about the visual design of SAP icons and access SAP icon font files and related resources.
Motion Design
Learn about the different motion design principles, such as duration and direction, and their choreography.
UI Texts
Check out our conventions for UX writing, including which words to use for actions and how to write message texts.
SAP Fiori Launchpad
Overview Launchpad
The SAP Fiori launchpad is the main entry point to SAP Fiori apps on mobile and desktop devices.
Shell Bar
The shell bar on top is always visible and hosts a logo, navigation options, enterprise search, notifications, and other services.
Designing Intelligent Systems
Basics
Get to know the core concepts and guiding principles for building intelligence into enterprise software.
General AI Patterns
Find out about the different design patterns for intelligent business systems and machine learning.
General Patterns
Action Placement
Get to know where actions can be placed (typically in toolbars), and how to order and style them.
Draft Handling
Learn about the draft handling concept for SAP Fiori, including auto-save, locking, and preventing data loss.
Message Handling
Learn about common messaging patterns and the message components they use.
Navigation
Navigation in SAP Fiori follows the standard navigation paradigms of various web applications.
Object Handling
Find out about the different interaction flows for objects, including create, edit, and delete.
Layouts and Floorplans
Page Layouts
Get to know the two basic page layouts used for most app designs, and check out other layout options.
Floorplans
Explore the predefined page layouts for specific use cases, known as 'floorplans' in SAP Fiori.
UI Elements
'Explore' Page
Get an overview of all the UI elements available in SAP Fiori.
Learn More
To learn more, check out the UI Elements category in the navigation menu on the left.
Frameworks
SAP Fiori Elements Framework
Learn about the technical capabilities and design options for apps developed with the SAP Fiori elements framework. Predefined templates are available for the most common floorplans.
Analytical Frameworks
Get insights into the analytical frameworks used by SAP Fiori.
Designer Toolkit
UI Kit
Download the UI kit and start designing your own SAP Fiori app.
SAP Icon Font
Download and install the SAP icon font to create true-to-life mockups.
SAP Fiori Community
Ask questions on SAP Fiori design and share your design ideas in our SAP Fiori community.