Introduction to the SAP Design System

Values and Benefits of the SAP Design System

Learning Goals

Understand the core purpose and value of using the SAP Design System in product development

Content

The SAP Design System improves consistency, productivity, and design quality. By simplifying the design processes, it allows product designers to concentrate on innovation rather than repetitive tasks. It also emphasizes accessibility and inclusivity, making it easier for a diverse user base to engage with SAP products across different platforms.

In the light of the current transition to HPOM (Harmonized Product Operating Model), the new operating model with empowered, cross-functional teams, you might be wondering where the SAP Design System fits. The short answer? It's designed to make the empowered product team more effective, efficient, and aligned with the SAP’s UX principles.

Let’s see what the benefits for the team are in general.

Faster development

Starting from a blank canvas slows teams down and creates avoidable variability. With the SAP Design System, you can begin with proven floorplans such as List Report, Object Page, and Analytical List Page (ALP) and implement them through Fiori Elements and SAPUI5. A typical list-to-detail workflow, maintenance orders for example, can be designed and implemented in days rather than weeks. If the use case doesn’t involve the development of a custom component, of course.

Better consistency

Consistency is more than matching colors. It’s the same mental model and interactions across applications. A plant manager who learns your maintenance module on Monday should feel at home in production scheduling on Tuesday. Shared patterns, a common filter bar, familiar table behaviors, and tokenized styles make that possible. The result is less training overhead and fewer “how do I…?” support questions as users move across modules and lines of business.

Reduced technical debt

Custom controls and one-off fixes feel fast at the moment but become costly to maintain. The SAP Design System replaces that fragility with standardized, actively maintained libraries. Accessibility improvements, security hardening, and performance optimizations are delivered in regular SAPUI5 and Fiori Elements releases. Teams adopt them through their planned upgrade cadence, guided by semantic versioning and change logs, rather than re-implementing the same fixes in every app.

Scalable decision-making

Endless debates about button shapes or color shades rarely improve outcomes. Design tokens and established patterns give you smart defaults so the team can focus on higher-value decisions - the critical steps in a workflow, how to present exceptions in complex datasets, or which insights to show.

Enterprise-grade quality

Enterprise users expect accessibility, responsive behavior, and robust data handling out of the box. Components and floorplans in the SAP Design System come with keyboard support, screen reader labels, and responsive layouts that adapt across devices. Performance improvements such as virtualization and efficient rendering are continually refined in the underlying libraries. While these foundations raise the baseline, teams should still validate in context - large datasets, specific devices, and assistive technologies vary aiming for outcomes like WCAG 2.2 AA compliance and strong task success rates.

Here's how the SAP Design System addresses the specific needs of each key role in HPOM teams.

For the product managers

Product Managers need to balance business objectives, user needs, and delivery constraints. The SAP Design System helps them make decisions faster.

Faster alignment on priorities - shared language and ready-to-use elements reduce time spent discussing the basics of implementation or feasibility.
Clearer roadmap planning - With reusable components and guidelines, estimating scope and dependencies becomes more predictable.
Consistency across all lines of businesses in SAP - Ensures that localized or partner-driven adaptations still fit into the broader product strategy without unnecessary duplication.
Stronger consumer trust - Delivering consistent experience shows that the team is reliable and professional.

For the designer

The designer must ensure that the user experience is consistent, accessible, and aligned with brand values. The SAP Design System is the best tool to fulfill this mission.

Consistency at scale – All available UI kits and components guarantee a cohesive user experience across the variety of business cases.
Focus on solving user problems - Less time spent on recreating basic elements means more time for innovation and refinement.
Accessibility and quality by default - Built-in standards ensure designs meet accessibility and usability requirements.
Easier collaboration with developers - Designers and engineers work from the same foundation, reducing friction.

For the development manager

Development managers are responsible for ensuring quality, performance, and maintainability of solutions. The SAP Design System simplifies their work and improves efficiency.

Reduced code to maintain - Standardized components decrease the need for one-off solutions that are costly to maintain.
Improved collaboration with designers - Shared patterns mean fewer misinterpretations and less rework.
Faster onboarding - New developers can work productively sooner by relying on familiar, documented elements.
Scalability in delivery - Common building blocks allow teams to expand solutions quickly without sacrificing quality.

Bringing it together

The SAP Design System is not just a toolkit, it provides a set of standards, ready-to-use elements, and comprehensive guidelines that help you choose what to use. It reduces unnecessary duplication, establishes a common foundation, and ensures that teams can focus on solving business and user problems rather than re-creating basic elements.

What is so special about the SAP Design System in contrast to other design systems? Learn the answer from the Head of the Design System team, Sophia Levens.

Play Podcast

Duration: 30 min 28 sec

Get to know the SAP Design System

Learning Goals

Have a comprehensive understanding of the SAP Design System.
Be able to identify the core components and elements that make up a design system.
Understand the basic structure and key principles of the SAP Design System.
Apply this knowledge to design seamless, user-centric experiences aligned with SAP standards.

Content

The SAP Design System offers a cohesive user experience across all SAP software, regardless of the platform or device. It extends beyond just software, establishing the visual identity for SAP's events, social media, corporate website, documentation, and more. Serving as the foundation of SAP’s product experience and design strategy, it's important for creating a unified brand presence.

If you just want to have a quick glance at what the SAP Design System is, check out the video below.

Play Video

Duration: 3 min

To learn more about the essentials of the SAP Design System, sign up for the mission that introduces you to the SAP's design principles and guidelines, empowering you to create user-friendly, visually appealing interfaces that align with SAP's brand and user experience standards.

Start Mission

Duration: ca. 27 min + variable steps

If you want to dive deeper into the SAP Design System, Thomas Reiss will walk you through the different aspects of the design system - what it consists of, why it is important to have it and how to use it.

Play Video

Duration: 48 min 32 sec

What’s next for the SAP Design System?

Learning Goals

Learn what’s in the making for 2025 for the SAP Design System

Content

The SAP Design System is a living breathing thing that constantly evolves. Let the Head of the Design System team, Sophia Levens, give you a short overview of what happened in 2024 and what’s in the pipelines for 2025.

Play Podcast

Duration: 31 min 02 sec

Overview

Structure and Layout

Let’s start with the bones. You can’t build a strong body without a sturdy skeleton. This usually applies to living beings, but apps are no different.

Behind the interface you will find a well-planned structure and that structure comes from me, the SAP Design System. The defined grids that adapt to every screen size keep the things aligned no matter whether you create an application for a wide screen or a mobile phone. Using the available layouts, you will get a well-designed product that works perfectly on any device.

Structure brings clarity. Its superpower is to bring order to chaos and define the exact place and space for the different elements even when the space gets tight.

The standard page layout is the dynamic page. All available floorplans are built with the dynamic page as a base. It consists of а header, а content area and in most cases – a footer toolbar.

I mentioned the floorplan, right? This is a kind of a page variant built for a specific use case. For example, if you need to cover a case where the user needs to see a list of items and manage them – the list report is your choice. If they need an analytical element such as charts and they want to understand the root cause of some issue, the analytical list page may be the one that will do the job. And when the user wants just to read through the details of an object or edit one or two values inside – the choice is the object page.

А layout or a floorplan isn’t about just placing elements, it’s about establishing rhythm. A consistent rhythm that ensures the smooth flow of your content and familiarity of the common elements between the different applications from the SAP portfolio.

Components in Action

I already showed you the skeleton and usually the skeleton is covered with muscles. The muscles in this case are the components. They are flexible, powerful and built to move the applications.

What are these components, you may ask. These are my smallest building blocks. They are designed to be modular and reusable. They have their own variants and states. Let’s take the button for an example – it stays the same in its nature, no matter the context. The changes come from the above-mentioned variants and states.

You can combine the different components and create more complex ones, and they will still work the way they were designed.

And remember, all of the components are with already defined accessibility built in them.

And my favorite part: all these components are already part of the floorplans – combined in a way that helps product designers like you to build better and cleaner interfaces that are accessible to everyone despite the physical and mental differences.

Patterns

So, we have the bones and the muscles. But what makes them move and work properly? The answer is – the patterns.

A single button is useful, but when it is included in a form and triggering it also triggers a form validation – that is a pattern. The possibility to edit a page and all the following interactions – yes, that is a pattern too. There is also a pattern for draft handling and filtering.

These patterns are created to bring a common way for the components to behave when combined in a certain way. Patterns reduce friction and increase predictability. All users will know what to expect when they save a form or trigger a search.

Content and Communication

Many overlook the content, but it’s just as important as the features of the components. The way you name the buttons, what tone of voice you use for the messages – they are also part of me.

From microcopy in tooltips to empty state, the established guidelines keep the experience warm, clear, and consistent. After all, design without the right words is just decoration. The right words guide users, build trust, and give your application its personality.

Visual Style and Theming

What is the first thing that everyone sees when using an application? The visual style, of course. This is where the overall brand identity is translated into pixels. All the colors are not picked randomly. They are precisely defined not only to look harmonious and balanced but also carefully calculated with accessibility in mind.

Typography brings hierarchy, rhythm, and personality to every headline and hint of microcopy. And the icons are the visual language - sharp, clear, and consistent enough to be understood at a glance with common metaphors and symbols.

And all this creates a consistent experience in the form of a theme. My theme is called Horizon, and it comes in four flavors – Morning and Evening Horizon (light and dark mode of the theme respectively) and the High Contrast White and High Contrast Black.

What’s next?

You already have a glimpse of what my main content is. If you want to learn more, just check the knowledge blocks below.

Foundation

Learning Goals

Get familiar with the foundational aspects of the SAP Design System that apply to all elements in the design system.

Content

Interaction design foundations define how a user interface should behave in response to user actions aimed at completing specific tasks and achieving related goals.

Key aspects include:

User input and expected actions
System responses and proactive behaviors

Some of the available interaction design foundations in the SAP Design System are:

These elements ensure that the interface feels intuitive, responsive, and aligned with the user expectations.

Components

Learning Goals

Get familiar with the reusable building blocks for creating the user experience across all SAP applications.

Content

A component is a reusable unit used to build different user experiences for a variety of use cases. It combines visual design, accessibility and interaction behavior in a consistent way, regardless of the technology.

Design Role: Designers define a component’s appearance and behavior independently of any specific platform or framework.
Reusability: Components can be reused across design patterns, floorplans, and entire applications to ensure consistency and efficiency.
Development Role: Technology libraries and frameworks such as SAP UI5 often offer pre-built, reusable implementations of these components, making them easy for developers to integrate and maintain.

Components serve as a bridge between design and development, enabling scalable and cohesive user interface design.

Play Video

Duration: 2:31 min

Learn more about the components by reading the article Components Basics.

Card System

Learning Goals

Get familiar with the available card system and how to use it in your applications

Content

Cards are all over the web these days, and you can find them in the SAP applications as well. But designing for the web can be tricky – how do we keep things consistent, easy to use, and flexible for different situations?

Caroline Schuster and Barbara Kuntz from the SAP Design System Web team will give you an overview of the unique challenges of designing the Web Card System. Let's dive in and see what we can learn!

Play Podcast

Duration: 15 min 31 sec

Floorplans

Learning Goals

Know what a floorplan is and when and what type of floorplan to use depending on the use case.

Content

A floorplan is a reusable design system element made up of smaller UI components, tailored to support common user scenarios. It can represent either a single page or a series of pages within an application.

Floorplans help application designers efficiently structure user interfaces by addressing typical use cases such as:

Presenting an overview of key tasks and information specific to a user role
Searching and navigating large datasets
Performing actions on selected items or objects
Gaining insights through integrated business intelligence tools
Viewing, creating, or editing individual objects

By using floorplans, designers can ensure consistency, usability, and scalability across applications.

Theming

Learning Goals

Learn what a Theming is and how it evolved to get to what it is now.

Content

Theming is the systematic process of customizing the visual aspects of your user interface (UI), such as color palettes, typography, and other design elements.

This customization is powered by design tokens - interconnected values that enable consistent updates across the UI. When you modify one token (e.g., a color or font), related elements automatically update through predefined mappings.

There are two levels of theming:

Quick theming: Involves simple changes like updating the brand color.
Detailed theming: Involves deeper customization, affecting multiple design aspects across the interface.

This approach ensures both flexibility and consistency in maintaining a cohesive user experience.

Learn more about Theming in the video below.

Play Video

Duration: 01 min 30 sec

A brief history about themes at SAP products

SAP products have gone through various user interface themes over the years to improve user experience, accessibility, and alignment with contemporary design principles. Here are some of the notable themes:

SAP GUI (Graphical User Interface) Themes:

SAP Signature Theme: Widely used in classic SAP GUI applications, focusing on simplicity and functionality.
Corbu Theme: A minimalist design inspired by modern web aesthetics, providing a cleaner look while maintaining traditional SAP functionalities.
Blue Crystal Theme: A more vibrant and appealing theme with enhanced icons and font styles, aimed at improving visual appeal and user experience.

SAP Fiori Themes:

SAP Belize Theme: Introduced with SAP Fiori 2.0, Belize is designed to offer a cohesive and user-friendly experience across various devices. It is characterized by its bright and clean visuals, and consistent design language.
SAP Quartz Light: Part of SAP Fiori 3, Quartz Light provides a modern, fresh, and bright user interface, aiming to improve productivity by minimizing visual clutter.
SAP Quartz Dark: The dark mode variant of Quartz, offering the same modern aesthetics as Quartz Light, but with a darker color scheme that is easier on the eyes in low-light environments.

SAP BusinessObjects Themes:

SAP BusinessObjects default themes: These themes have typically emphasized clarity and data visualization to cater to business analytics users.

SAP Horizon Theme:

Introduction: The SAP Horizon theme is introduced as part of SAP Fiori 3, reflecting SAP's commitment to continuous improvement and modern design standards.
Design Principles: SAP Horizon emphasizes simplicity, clarity, and coherence across all SAP applications. It incorporates clean lines, easily readable fonts, and intuitive icons to enhance user interaction and productivity.
Highlights:
- Modern Aesthetics: It brings a fresh and contemporary look, aligning with current design trends and user expectations.
- Accessibility: Improved color contrasts and readability to meet accessibility standards, ensuring a better experience for all users.
- Consistency: Ensures a unified look and feel across desktop and mobile interfaces, creating seamless transitions and familiarity no matter the device.
- Personalization: Users can adjust themes and settings to their preferences, creating a more personalized user experience.

The SAP Horizon theme represents SAP's latest strides in user interface design, aiming to provide a state-of-the-art digital workspace that meets modern demands. It leverages insights from user feedback and the latest research in UI/UX design to create an optimized and engaging experience.

Each theme iteration has incorporated user feedback, design trends, and technological advancements to better meet the needs of SAP product users. The evolution from SAP GUI to SAP Fiori themes demonstrates SAP's commitment to improving user interfaces and ensuring a seamless, intuitive, and efficient user experience.

Navigating the SAP Fiori Design Guidelines

Learning Goals

Get an introduction to the structure and content of the SAP Fiori design guidelines.

Content

Creating intuitive, consistent, and user-friendly enterprise applications requires more than good intentions. It requires a shared design language. The SAP Fiori Design Guidelines provide a comprehensive framework for designing applications that align with SAP’s user experience standards.

Whether you are starting or deepening your expertise, the SAP Fiori Guidelines are the primary resource for principles, components, and patterns. They define how SAP applications should look, behave, and feel, ensuring consistency across products and helping teams deliver intuitive, efficient experiences aligned with SAP’s design principles.

The SAP Fiori Design Guidelines lead you from principles to implementation. The articles are divided into several categories: Foundations, UI elements, and Page types.

The Foundations category lays the groundwork by explaining foundational design principles and core concepts that make apps coherent and simple to use. It covers visual language and theming. You will also find guidance for concepts like essential interaction and motion patterns, and inclusivity topics such as accessibility, keyboard and focus behavior, writing guidance, and best practices.

In UI elements category, you can find details of all reusable components, explaining when and how to use them for clear, consistent interactions. It spans actions and navigation, inputs and forms, data display, lists, tables, charts, containers, and feedback.

If you are looking for information about different ways to organize your screen, the Page Types category is the place to go. There, you can read about available layouts and floorplans and how and when to use them. All necessary resources can also be found in the Guidelines, whether you need to download the company font or use the UI kits.

Different roles benefit from the SAP Fiori Design Guidelines in specific ways. Designers use them to select the right components, apply visual styles, and ensure alignment with SAP’s UX principles. Developers rely on the guidelines to understand interaction behavior, states, and accessibility requirements for implementing UI elements. For product managers, the guidelines offer clarity on design possibilities and constraints. They help teams make informed decisions and keep products consistent across the portfolio.

Using the guidelines effectively means knowing where to find information and recognizing when and how to apply it without overcomplicating the solution. But be careful. There are a few common pitfalls to be aware of. One of them is customizing components too heavily instead of using what is already available in the SAP Design System. This may cause issues when new updates must be applied and using custom code could break accessibility or responsiveness, which are essential for delivering a consistent user experience.

Mastering the SAP Fiori Design Guidelines does not mean memorizing every detail. It is about knowing where to find the right guidance when you need it. With the portal as your standard reference, design decisively and deliver consistent, user‑focused solutions.

If you want to learn more about how to use the Guidelines in your daily work, the SAP Fiori Design Guideline Training can be your next destination.

The training consists of a virtual workshop held over two half-days, centered around the SAP Fiori for Web design guidelines. To help participants become familiar with these guidelines, the workshop includes instructor-led presentations and a variety of hands-on group exercises.

The primary goal is to equip participants with the knowledge to design interfaces that align with the SAP Fiori design principles.

Learn more about the training

Mastering the SAP Design System Portal as a Consumer

Learning Goals

Discover how the new beta Portal empowers consumers to fully leverage the SAP Design System’s capabilities.

Content

In this interactive session, Jean-Luc Terrée will walk you through navigating the Portal, accessing essential tools and resources, and utilizing component guidelines to streamline your application development process.

This session was part of SAP Design System Learning Days 2024.

Play Video

Duration: 30 min 26 sec

The new SAP Design System portal brings together the product design guidelines SAP Fiori for web, SAP Fiori for iOS, and SAP Fiori for Android, as well as to the new digital design system guidelines.

Play Video

Duration: 0 min 45 sec

SAP Design System Services: Your Expert Advisor for Design Solutions

Learning Goals

Learn how SAP Design System Services helps you find the right answers.

Content

Learn how SAP Design System Services helps you find the right answers – whether through inbox duty, design consultations, or other support – backed by real numbers.

This session was part of SAP Design System Learning Days 2024.

Play Video

Duration: 27 min 29 sec

From Vision to Reality: The Collaborative Journey Behind the SAP Design System Portal

Learning Goals

Dive into the story of how a small group of SAP colleagues created the new SAP Design System Portal.

Content

Get a preview of the beta version and our strategic rollout plans, all designed to bring us closer to our vision: making the SAP Design System Portal a one-stop-shop that blends technology and creativity, empowering everyone to create applications that users love.

This session was part of SAP Design System Learning Days 2024.

Play Video

Duration: 28 min 44 sec

Designing For Performance: How Collaboration Drives a Great UX

Learning Goals

Explore practical techniques and strategies on how to best design with performance in mind.

Content

User Experience consists of many aspects: Among tailored designs for best usability, effective flows for usefulness, and modern aesthetics, we probably all agree that performance needs to be just right for users to call it “great UX”. If users need to wait even a few seconds to do their work while screen elements load, they get frustrated. When that happens, it doesn’t matter what else is great in the product. The experience breaks.

How to make performance great?

The answer, again, is teamwork: PM, Dev, and UX need to talk early to achieve a performant application, loading relevant information first and super-fast, because not all content is equally relevant, and some data can even be stale (from the cache). Together we annotate the designs by identifying the so-called “hero element” of the screen to be loaded with priority, and by specifying the loading order for other data blocks, determining whether the blocks’ data need to be up-to-date right away or not. This also leads to an earlier “Time to Interactive” (TTI), the time till the user can interact with elements on the screen (e.g., think of the search on Amazon which works before anything else is shown).

Play Video

Duration: 15 min 49 sec

Design and Development: Excellence through Collaboration

Learning Goals

Find out what happens when the worlds of design and technology meet, as they inevitably do during the design process.

Content

What are the challenges at different stages? How can we deal with them? Stanislava Baltova shows us how we can use the advantages of both worlds with a little help from neuroscience.

Play Video

Duration: 23 min 13 sec

Training Material

Self-Study Courses

Get to know the SAP Design System

Design is People Podcast

Additional Information

SAP Design System Essentials

SAP Design System Academy / SAP Design System Essentials / Introduction to the SAP Design System

Learning Module: