Skip to Content
Product Information
Author's profile photo Susanne Wilding

SAP Fiori for Web – Updated Design Guidelines for SAP Fiori 3

The SAP Fiori Design Guidelines for web applications have been updated to reflect SAPUI5 version 1.72. This bumper edition comes with new content for SAP Fiori 3, as well as a host of other updates for new and improved features. Here are some of the highlights…

SAP Fiori 3

New “Quartz” Theme

Explore the revised article on theming and discover the new Quartz Light colors.

(Quartz Dark colors will follow in the next version of the guideline.)

New SAP Fiori Launchpad Shell Bar

The new SAP Fiori shell bar has been standardized across all SAP products.

Standardized Actions

The guideline for actions and their placement has been refined as part of SAP’s UX consistency product standard. We’ve also defined standard labels for common actions.

Designing for Intelligent Systems

The guidelines now have a brand new section on designing for intelligent systems. As well as our guiding principles, you’ll find design concepts for different facets of intelligence in enterprise software, including situation handlingrankingmatchingrecommendations, and how to explain the results provided by intelligent systems.


Updated Layouts and Floorplans

You can see how SAP Fiori 3 and the Quartz Light theme look in practice by browsing the layouts and floorplans (for example, the dynamic page layoutlist report, or object page).

Note: Other parts of the guideline may still show the alternative SAP Belize theme.

New SAP Fiori 3 Design Stencils

With this guideline version, we provide a fully revised stencil package with new stencils for SAP Fiori 3. In addition to stencils in Axure RP, we now also provide Sketch stencils for Mac users.

Other Updates

We’ve also added new articles for the following controls and patterns:

  • The comparison pattern is a new page layout for displaying information from multiple items side by side.
  • The grid list is an alternative view to a list or table. Instead of being displayed in rows, items are shown in a grid. This can be useful for content that requires more height, such as images and charts.
  • There’s now a dedicated article for the existing Formatted Text control.

For a complete overview of the updates with each guideline version, see the corresponding What’s New pages:

That’s it for this update. The next update (guideline version 1.74) is due out in early April. In the meantime, enjoy working with the SAP Fiori design guidelines!

This post originally appeared at and

Assigned Tags

      Be the first to leave a comment
      You must be Logged on to comment or reply to a post.