SAP Fiori's new UI theme Horizon

SAP’s UI Technologies supporting the new Horizon visual theme of SAP Fiori
SAP is transforming our design and development culture to focus more on helping people complete their work faster and easier and achieve better results. If you haven't read the relevant content, please read this blog post by our Chief Design Officer Benedikt Lehnert, and then continue reading: Experience Mindset: Redesign the way we build products in SAP .

SAP's new design language is an evolution of SAP Fiori. The new visual theme Horizon paves the way for a modern and friendly user interface based on an accessible modular design system. Among other things, the planned New Horizons themes include:

• Attractive and fresh color palette that complies with web content accessibility guidelines
• Contrast, white space and bold typography to adapt to the focus of the natural information hierarchy
• Rounded corners create a friendly, approachable modern look
• A mobile-first approach to reduce the learning curve across devices
• A new icon set that can clearly communicate and feel modern

Picture 1: My Home page from

The picture above is the homepage of SAP S/4HANA Cloud 2111, using the Purchase business role to log in. The Horizon preview theme is turned on.

How do SAP’s UI technologies support the Horizon visual theme?

SAP strives to provide a consistent user experience across solutions and across UI technologies. SAP Fiori DNA is built into the foundation of all web developers through a common theme, making it easier to build new SAP Fiori applications. The common theme library is the key to efficiently reuse and unify the appearance of themes and their colors and metrics. Therefore, SAP was able to quickly introduce the Horizon theme and correctly pay attention to various UI technologies.

UI theme designer and HTML-based UI frameworks (such as SAPUI5 / OpenUI5, UI5 Web Components, and Fundamental Library) are based on theme-based content, which provides all relevant theme parameters as modern CSS variables. Customize these parameters through the UI theme designer, and you can create custom themes based on SAP's standard themes.

SAP UI5 support for the Horizon theme

• SAPUI5 1.93.3 and 1.96.0: Support experimental preview version to collect user requirements
• UI5 Web Components 1.0.0 for use in Angular and React.

How to enable the Horizon theme

For the end user, select directly in Fiori Launchpad.

For developers, just add a line of code in index.html:

data-sap-ui-theme="sap_horizon"

More original articles by Jerry, all in: "Wang Zixi":