SAP Fiori is the design language that brings great user experiences to enterprise applications. In addition to the great resources we already provide to support the adoption of our design system, we are announcing an exciting new step in our goal to bring the award-winning SAP Fiori user experience (UX) to as many applications as we can.

What you may already know about SAP Fiori

Those of you familiar with SAP Fiori, know that it can be implemented in various UI technologies. We provide the Fiori design language out-of-the box with the SAPUI5 framework, as well as with SAP Fiori for iOS and SAP Fiori for Android to build native mobile apps. If you’ve done any designing or developing for Fiori, you probably also know SAP Fiori elements, a helpful framework for the most common application patterns that ensures design consistency and compliance with the latest design guidelines. Developers in particular benefit from Fiori Elements because it reduces the amount of frontend code needed to build SAP Fiori apps.

All of these guidelines, tools, templates, stencils and code snippets are open source for anyone interested in building Fiori apps. And we will continue to offer these resources in the future.

3 reasons why SAP Fiori UX is decoupled from the code base

First, UI technology changes very frequently. Supporting only one UI technology does not give us the flexibility to take advantage of the latest and greatest technology on the market. Second, because of the breadth of our portfolio, it is impossible for us to converge on only one technology stack, UI technology or UI framework. Re-platforming for the sake of UX consistency alone does not bring our customers value. And finally, we want to give our community of internal and external designers and developers the freedom to choose the right technology for their projects. 

What’s new?

The next big step in our offering will be SAP Fiori fundamentals. This is a light-weight presentation layer that can be used with your UI framework of choice (e.g. Angular, React, Vue, etc.).

Keep in mind, SAP Fiori fundamentals is not a new UI technology, nor is it replacing UI5. And, we are not abandoning or slowing down our investments in UI5. SAP Fiori fundamentals is a library of stylesheets and HTML tags that developers can use and extend to build Fiori apps in their preferred UI framework. It is open sourced to enable our various product teams, our customers and our partners to quickly extend the library and evolve SAP Fiori in any web-based technology.

For designers and developers

In addition, we plan to redesign the Fiori Guidelines to support our two main personas: the designer and the developer.  The designer path will contain the guidelines, stencils, tools, and plugins needed to easily create experiences using the Fiori design language. We will also provide Sketch plug-ins so that they can produce Fiori designs with predefined Fiori components. The developer section will contain the guidelines, libraries, and sample code they need to develop apps or applications with Fiori UX, in the technology of their choice. These investments will help SAP deliver a consistent Fiori user experience for our own products AND will enable our partners and customers to adopt Fiori UX for their own applications. 

Try it out today

Please explore SAP Fiori fundamentals and let us know what you think by leaving a comment here below or sending us an email at

Not logged in
  • Anonym  4 months ago
  • Juan M   4 months ago

    SAP Fiori fundamentals HTML/CSS seem a bit verbose. Why shall you use

    • Juan M   4 months ago

      Thanks Sebastian. I was saying that the html seems a bit verbose. For example an alert has these classes fd-alert fd-alert–warning fd-alert–dismissible


    • Juan M   4 months ago

      Thanks Sebastian. I’ll try again 🙂

      I was saying that the HTML seems a bit verbose. For example, in the utility clases a name is fd-has-font-weight-bold, why not use something sorter as fd-text-bold.

      I did not see headers within the components, instead, in utils ( we have a p with different sizes (which by the way is not a semantically correct nor accessible).

      Then, it seems that the naming conventions are hard to remember… or inconsistent? For example, in an alert I found fd-alert fd-alert--warning fd-alert--dismissible, in a button fd-alert__close and for icons sap-icon--arrow-right sap-icon--s. That is sometimes we have – as separator, others — and others __. The prefix is fd for all except for icons…

    • Christos Koutsiaris   4 months ago

      Hi Juan, thanks for your comment. Certainly, there is room for improvement in naming. I will discuss it with the team and plan the next steps. In the meantime, since SAP Fiori fundamentals is an open source project it would be great if you can have a look in the code and create a new issue in github.


    • Zack Frazier   4 months ago


      Thanks for the comments. Let me address your feedback.

      We follow a BEM model for naming, which admittedly can be a bit verbose. This approach helps us keep CSS specificity low and maintain a good separation between presentation and layout, where elements tend to be more about layout and modifiers more about the style.

      For example, `alert` is a block, i.e., component. The base component can be modified — `–modifier` — like turning an `alert` yellow as in `fd-alert–warning`. While we try to mimimize presentation classes, sometimes we can’t avoid them like where we must have `fd-alert–dismissible` to properly layout the content and the button inside of the `alert`. You mention the `fd-alert__close`. This is an element, i.e., a child of the block, used only for the button.

      Any icon set could be used with our components so we opted to differentiate the namespace for the SAP icons since we don’t manage the icon set and have no ability to add or modify icons.

      We are open to simplifying the utility classes names but we wanted to follow a logical naming system using actual CSS properties with a recognizable prefix. We use `is-` for states like `is-selected` and `has-` for helpers. The intention is that helper classes should be used sparingly but sometimes you need brute force. Also, we only recently got specs for text headers and will implement those very soon. See

      Lastly, there are some discrepancies for sure that we are working through, We will continue to optimize the vocabulary we use, e.g, “warning” vs. “alert”, to match the Fiori standards. As we do that work, we will deprecate some classes over time.

      I hope that helps. With any design system, every choice has many trade-offs. I look forward to gathering more feedback. Please don’t hesitate to contact us.


  • Timothy Muchena   4 months ago


    This is a great move. I have few questions:
    1. Is it possible to set these apps on Fiori Launchpad?
    2. How do I make use of my OData services in the SAP ABAP backend?
    3. The How To Use SCSS uses Angular. Does this mean that Angular is SAP’s 1st choice with Fiori Fundamentals?
    4. When will the Getting Started Guides be ready?

    Thank you

    • Zack Frazier   4 months ago

      Fiori Fundamentals is only concerned with CSS and markup so theoretically it can be used with any technology as long as the proper markup and CSS is loaded.

      The library can be used with any technology but we emphasized Angular since we have received more queries. We hope to get more guides and tutorials up soon.

      You can also check out implementations of Fundamentals in both Angular — — and React — These are being built by SAP devs to ease the implementation of the library.

  • Alexander Chan   4 months ago

    This is a good direction, although I don’t think it’s bad to pick a framework (i.e. react) for a reference implementation. I can understand the reluctance to tie to any one framework, but there’s definitely value in being able to pick off the shelf components to speed development, prevent bike-shedding and to implement more complex interactions such as the datepicker and autocomplete search dialogs.

    As a side note, Sketch plugins would be good — but just stencils would be a great start. I know many people only have windows or can’t use macs in work environment so the plugin would not benefit them, however using stencils in figma is totally possible and cross platform.

  • Alexander Chan   3 months ago

    Just saw the github note on providing both Angular and React. Bravo!

  • Dominik Augustin   3 months ago

    I’m really thrilled to see where this might go.
    Is there already some tiny demo app to see how this works with FLP / OData integration?
    How would a Fiori 3.0 application look like?
    Netweaver Gateway {{Firoi 3 Controller? }} fundamental

  • Marc Chisinevski   1 month ago


    I’m working on a solution that automatically generates API protection profiles by importing OpenAPI 2.0 spec files for SAP apps.

    Are there any sample apps based on Fiori Fundamentals that I can use for testing?

    So far I only tested using the APIs for SAP Ariba (worked like a charm) but the process is very similar for the other SAP APIs published at S/4HANA, C/4HANA, SuccessFactors, Fieldglass, Concur etc

    Please find a short video of API protection for SAP Ariba at


  • Clare Johnson   1 month ago

    Thanks for this informative article – it’s quite relevant for me as I work on the SAP API Business Hub (, whose UI is developed in Angular.

    I’d be very interested to hear more about how Fiori Fundamentals and UI5 Web Components are positioned relative to each other, for example when to use what.

    • Mike O'Donnell   3 weeks ago

      Hi Clare, while I’m not sure of the status of UI5 web components, I would say choose the technology you’re more comfortable with. However, with the release of Angular 6 came the Angular Elements package:

      We are planning on exploring Angular Elements and releasing the individual components from fundamental-ngx as Angular WebComponents

    • Mladen Droshev   3 weeks ago

      Hi Clare,
      as Mike wrote we have created an angular open source implementation of Fiori Fundamentals. It is light-weight evolving library that brings the Fiori Fundamentals look and feel. It benefits from the angular features such as performance, productivity… Give it a try, especially if your solution is already in Angular. You won’t depend on polyfills(in case you consider web components) which most probably will affect the performance. Especially for browsers like Internet Explorer and Edge which don’t support web components natively.

    • Douglas Cezar Kuchler   3 weeks ago

      Hello. Congratulations on the great work you are doing!

      As an ABAP, Screen Personas and SAPUI5 developer I’ve already put a lot of effort understanding how to use the available technologies to build Fiori applications for desktop web and mobile.

      In your opinion which steps should I take to begin exploring the use of Fiori Fundamentals with Angular considering that I am totally new to Angular?

      Thank yo a lot!

    • Mladen Droshev   2 weeks ago

      Hi Douglas,

      Thanks for showing interest on what we are doing. You don’t have to do anything if you don’t want to. I am sure there are new features ABAP and SAPUI5 that you can focus on learning and applying.

      But, if in case you are curious, you are more than welcome to try out fundamental-ngx. We are working hard to improve the documentation.