text-white
Image
Img
SAP Design System

Unify and advance enterprise design

See what's new

Fiori web
align-image-left

SAP Fiori for Web

The original SAP Fiori user interface for web apps based on the SAPUI5 framework.

UI elements

UI kits

Web overview

SAP Android
align-image-left

SAP Fiori for Android

SAP Fiori for Android combines Google's Material Design with SAP's enterprise expertise.

UI elements

UI kits

Android overview

SAP Fiori for iOS
align-image-left

SAP Fiori for iOS

SAP Fiori for iOS blends Apple's iOS design with SAP's enterprise expertise.

UI elements

UI kits

iOS overview

SAP for Digital Design System
align-image-left

SAP Digital Design System

The SAP Digital Design System provides a unified framework for creating consistent web-interfaces.

UI elements

UI kits

Digital overview

What’s New

Stay up-to-date with the latest releases and enhancements in the SAP Design System, and informed with insights from design experts.

AILedDesign
align-image-left

SAP Design System is powering the next generation of AI-led product design

The SAP Design System is a set of building blocks that help designers and developers build, scale, and customize SAP products. Get and overview of all the AI tools and resources available to designers and developers today.

Read the story

Build your best with the SAP Design System
align-image-left

Build your best with the SAP Design System

Releases from Sapphire across our design system resources and UI kits.

See the recap

The evolution of SAP product illustrations
align-image-left

The evolution of SAP product illustrations

Product illustrations as more than decoration; they’re a tool to communicate clearly, quickly, and meaningfully with our users.

Read the story

5 Tips for Getting Started with the SAP Fiori for Web UI Kit
align-image-left

5 Tips for Getting Started with the SAP Fiori for Web UI Kit

The SAP Fiori for Web UI Kit is your go-to resource for creating consistent, efficient, and accessible user interfaces.

Learn more

Building Blocks

Visual elements, UI components, and technologies come together to build out a cohesive experience for all SAP products and apps. Explore the core building blocks that make up the SAP Design System.

Visual Foundation,UI Elements,UI Technologies
true

Universal by Design

A design system built to adapt to users, devices, and preferences in order to bring out the best in any enterprise.

design
align-image-left

Tailored. User experience.

Optimized for many form factors

The SAP Design System is designed to provide a truly cross-platform experience. Across devices, working conditions, and locations, users get their best work done anywhere, any time.

inclusivestart

no-color

align-image-right

Inclusive. User experience.

Accessible and inclusive from the start

Making enterprise software as accessible and inclusive as possible is not a nice-to-have but rather a must-have. The SAP Design System is built on a foundation of inclusive and accessible design in order to best serve as many users as possible.

inclusivestart

no-color

align-image-left

Enterprise. User experience.

Enterprise-grade

No matter how big your business scales, the SAP Design System is built to unify and advance design across all your key touchpoints. Built to work with SAP’s extensive portfolio of technology and apps, our design system is truly enterprise-grade.

inclusivestart

no-color

align-image-right

Intelligent. User experience.

Empowered by AI

SAP’s goal is to provide designers with wholistic support for AI, including principles for designing generative AI in a thoughtful, trust-worthy and ethical way. We’re working on building out AI resources for every part of your design and development journey, including guidance on designing for AI, out-of-the-box components for building AI into apps, and implementation for Joule (SAP’s generative AI-based co-pilot).

Built on principles

Our design system is built on core principles that drive excellence in every detail

record

Background blue 2

align-image-left

Simple

Includes only what is necessary

heart

Background blue 2

align-image-left

Delightful

Makes an emotional connection

synchronize

Background blue 2

align-image-left

Coherant

Provides one fluid, intuitive experience

Person

Background blue 2

align-image-left

Role-based

Designed for you, your needs, and how you work

responsive

Background blue 2

align-image-left

Adaptive

Adapts to multiple use cases and devices