Intro

Welcome to the SAP Design System Guidelines for Web

Here you’ll find everything you need to get started designing and building world class SAP apps that bring out the best in every business. The SAP Design System Guidelines for Web offers a single reference point for anyone designing and building apps on SAP technology. Let’s get started!

What Are the Advantages?

Have a look at some of the benefits of using the design guidelines:

A harmonized look and feel throughout the SAP Fiori app suite

You will have an easy-to-maintain and consistent design, ensuring a cohesive look and feel for your users across all apps.

Faster build times

Rather than having to develop everything from scratch, you can make use of a proven system with ready-made building blocks. This guarantees faster build times for new applications!

Easier testing

You will have a tool to do quick quality assurance checks. Neither the guidelines nor the control library are identical to an app. However, both point out issues you may have in your app. By tackling these early on, you’ll avoid them later!

One language for communication

You will have a shared vocabulary to use as a reference when discussing changes and iterations. Designing apps becomes more efficient when everyone involved speaks the same language.

A great onboarding platform

You will have a great platform for onboarding anyone joining the team! This will also help build awareness and appreciation of the design system.

Navigating the Guidelines

Everything you need to know about utilizing the SAP Design Guidelines for Web, including what you’ll find in each section and quick links to get you started.

Foundations

Get to know the principles and basics for all the key areas that make up the design system. Together these elements help foster a consistent, efficient, and delightful user experience across all SAP apps.

Visual Design
First impressions matter, which is why the look and feel of a product is so important to the overall user experience. Learn about the key visual elements that make up the heart of the SAP Design System, including color, typography, iconography, theming, content density, UX illustrations, and motion design.

Interaction
Consistent and coherent interactions make the user experience more enjoyable and efficient. Learn more about all the interactions for web.

Writing & Wording
Language guides users through their product journey. Learn more about standards and best practices for writing and wording to ensure the best possible user experience.

Integration and Services
Common solutions and services that provide a consistent experience across multiple products.

[internal_only]AI & Joule
Patterns and guidelines for building AI into SAP products with Joule. [/internal_only]

UI Elements

UI Elements Library
A complete library of all UI elements used for web. Search by title or function to find everything you need to know about these crucial building blocks, including basic design overviews, examples, and resources.

SAP Web Components
SAP Web Components are framework-agnostic and can be easily integrated into different web development environments.

SAPUI5 Components
Get to know more about specific UI elements used for SAPUI5.

Page Types

Page types and floorplans provide ready-made templates to help you build any kind of content you need for your SAP apps.

Page layouts are dynamic templates made up of a header, content area, and footer toolbar.

Floorplans serve specific use cases and therefore come with a specific combination of UI elements in the header, content area, and footer toolbar.

Resources

Additional resources to help you build your best.

UI Kits
Everything you need to start building, from font downloads to design stencils to Figma libraries.

User Research
Resources to help enable user research, including our User Research Method cards.

Accessibility Design Tools
Tools, materials, and resources to help make accessibility part of the entire product experience from the start.