The SAP Design System – Overview

Why have a design system at all? It’s a lot of work to create, to maintain, and to document. So why is it worth the trouble?

The answer is simple: because the benefits outweigh the costs by far. The three most important benefits are:

• Consistency: With a design system, SAP products will look consistent and recognizable.
• Quality: When all design teams are using the same design system, we can ensure the same design quality. This also applies to topics such as accessibility.
• Efficiency: With a shared design system we are more efficient and can concentrate on productivity and innovation.

Would you like to know more about a design system? Then read on …

Imagine that you wanted to start building good and solid houses. What would you need? Would you just start throwing bricks onto the land that you bought in the hope that they would somehow create a structure by themselves?

The Design Language

The design language can be compared to the architectural style of buildings. It summarizes all style elements of the design system and in that way, metaphorically speaking, prevents a Baroque statue from finding its way into a Bauhaus-villa. Colors, typography, iconography, images and illustrations, motion design, tone of voice, and sound all make up part of the design language.

Interaction Design

Interaction design comprises all aspects of behavior of the user interface when the user interacts with it. Imagine tenants switching on a light, in other words, define a use case. In the design system world, examples include component states, selection, and drag and drop.

Accessibility

We want everyone to be able to access and use applications to the same extent. Designers therefore have to make sure that the interfaces are accessible and in compliance with the Accessibility Product Standard.

Company Behaviors

By this we mean our company culture – how we behave and interact. They are:

• Tell it like it is
• Stay curious
• Embrace differences
• Keep the promise
• Build bridges, not silos

Brand

Everything we create needs to tally with the overall SAP brand strategy.

Have you realized that we haven’t started building yet? With the foundations in place, this is going to change, and all the more quickly for it! Let’s finally look at the contents of the SAP design system:

• Floorplans
• Components
• Patterns
• Design system assets
• Themes
• Design tokens
• Naming conventions
• Design specifications
• Templates

Floorplans

Let’s start with an element that is even borrowed from architecture: in our context, the floorplan does the same thing as the floorplan of a building; it depicts the UI layout of a page schematically, showing patterns and components.

Floorplan in architecture metaphor

Example floorplan in Morning Horizon theme

Component

These are the bricks (windows, beams) of our house, also known as UI elements. There are many different ones, for example, a button, a list, or an input field. Designers determine what they look like and what their interaction behavior is. They can also reuse them when designing patterns, floorplans, and applications. Reusable implementations of components can be found in technology and component libraries, which developers write and use. Product designers develop stencils, which can be found in Figma libraries.

Components in architecture metaphor

Example components in Morning Horizon theme

Patterns

Like a geometric pattern in architecture, a design pattern is a consistent composition of components with user interactions. They are small use cases that are reused by application designers. Examples are cards with list items or filtering a list.

Patterns in architecture metaphor

Example pattern in form field validation

Design System Assets

Design system assets are specific icons, fonts, illustrations, and sounds which are created to be reused by product developers and other users of the design system.

Design system asset examples

Example Design System Assets in Morning Horizon theme

Themes

Think matching cushions and curtains here. The current visual theme is called Horizon, and it comes in four variants: Morning and Evening Horizon, and High Contrast Black and White. These are expressed by their color palette, icons, font, sound, focus visualization, and so on. You define a theme by specifying the values for all design tokens (see below).

Themes in architecture metaphor

Schematic visualization of all four Horizon themes (Morning Horizon, Evening Horizon, High Contrast White and High Contrast Black)

Design Tokens

Design tokens are a way to specify elements of the design language, such as colors, metrics, typography scale, font faces (light, black, etc.). Metrics can be elements like spacing, width of borders, radius of corners of components, like buttons and cards. The overall “look” of the UI depends on the values given to each of the design tokens: for example, the color which is assigned to the token sapButton_Emphasized_Background determines the background color of an emphasized button. These tokens can be referenced in token hierarchies so that style attributes can be inherited; for example, a design token for “sapButton_Emphasized_Background” could get its value from the design token “sapBrandColor”. By means of this referencing mechanism, large token structures can be modified by simply adjusting a few base tokens. Design tokens allow different themes to be defined by using different values for the individual tokens.

Design tokens can be represented by Figma style properties. Design tokens also have a 1:1 relationship to the variables in the theming structure provided by our UI frameworks, thus ensuring that themes defined by design tokens are made available in application UIs built with these frameworks.

Design Tokens in architecture metaphor

Exemplary visiualization of design token hierarchy

Naming Conventions

Should we write ‘OK’ or ‘Yes’ on our buttons? It doesn’t matter as long as we’re consistent. That’s why we need naming conventions.

Naming conventions in architecture metaphor

Exemplary components with defined terms

Design Specifications

How does a plumber know what they need to do so that after their work an electrician can take over immediately? The work required needs to be specified in detail. Design specifications are documents that contain all relevant information to understand, use, and build all design system elements mentioned above.

Templates

By templates we mean templates for creating marketing content, for example PowerPoint slides or e-mail templates.
So here we are, with all the elements with which we can build many beautiful houses in a super-efficient way. Or rather, design our products, as efficiently!