Foundations

Intro

Welcome to Chapter 2: Foundations of the SAP Design System Essentials learning track. In this chapter you will:

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

To view the whole learning track, go to SAP Design System Essentials Track.

Section 1

The Foundations of SAP Design System

Now that we have an overview of what makes up the SAP Design System, let’s take a closer look at foundations: the underlying elements that provide a visual, interactive, and stylistic framework for the components and patterns.

In the guidelines, we cover foundations for a few key areas including visual, interaction, writing & wording, and AI. Below, we’ll dive into basics and best practices for some of the most used foundations.

Section 2

Visual and Writing Foundations

In order to create a consistent, compliant, and enjoyable experience for our users, it’s important to always rely on the pre-defined styles and avoid creating new styles. These guidelines for color, typography, iconography, grids, responsiveness, motion, and feedback have all been tested and developed for the SAP portfolio with excellent user experience and accessibility in mind.

Here’s a look at some useful foundations:

• Color: The SAP Design System has a core color palette that is available via the UI Kits and libraries in Figma. These palettes include all approved colors, and the guidelines provide in-depth guidance on usage for primary colors, accent colors, grayscale areas, and semantic colors. It’s also important to pay attention to accessibility rules, as defined in the WCAG basics.
• Typography: The SAP Design System uses the proprietary font family 72 for all products. The font was designed to be legible, accessible, and robust enough to meet all of SAP’s rigorous product standards. All UI kits and libraries in Figma include approved font styles. Be sure to download the font to get started.
• Design tokens: Design tokens are the smallest building blocks of the design system’s visual language. They store design decisions—such as colors, typography, spacing, and sizing—in a centralized, reusable format, replacing hard-coded values with clear, consistent names. Tokens ensure visual consistency across applications and platforms, enable easy theming, and allow designers and developers to scale and maintain UI styles efficiently.
• Iconography: Icons are used throughout SAP products to help identify commonly used actions, objects, or concepts quickly and consistently. The latest Horizon Theme icon library is vector-based, and designed to align size, stroke, and balance throughout SAP apps.
• UX writing: Writing and wording shows up all over user interfaces. While many design elements like motion, icons, and buttons make up the bulk of a screen or interaction, words still guide a big part of the user journey. Tip: follow the UX Writing guidelines for voice and tone, mechanics for UI text, and ensuring text is accessible.

Video Tutorials

Section 3

Interaction Foundations

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:

• Cursors: Cursors are visual indicators showing where user interaction is focused on the screen, controlled via mouse, touchpad, or keyboard. Their shape changes dynamically based on context such as selecting text, clicking a button, resizing a column, or dragging an object to reflect the available interaction.
• States: Using the correct state, or combination of states, helps users recognize available options and see where they need to take action. In SAP Design System, states are organized into five categories - component, focus, interaction, selection, and value, each communicating a specific aspect of an element’s condition and how users can interact with it.
• Drag and drop functionality: Drag and drop is a simple, intuitive interaction that lets users reorder, resize, and move elements or transfer data with real-time visual feedback. It applies across many contexts, each with specific needs and requirements depending on the use case.
• Wrapping and Truncation: Wrapping and truncation define how text behaves when the length of the text exceeds the available space. The responsive behavior is device-independent and is the same on all form factors. Different controls use wrapping to show full text or truncation to save space, depending on how important the information is and how much room is available.
• Gestures: Gestures are touch-based interactions that let users navigate, manipulate, and engage with digital interfaces using natural hand movements. They're essential in mobile and touch-enabled environments, where you don't have traditional input methods like a mouse or keyboard. Each gesture – like swipe, tap, double tap, long press, or rotate – conveys a specific intent and triggers context-aware responses from the interface.
• Motion Design: Motion design can be a powerful tool for user interface to indicate something is happening to the users, e.g., a button press, loading state, or transition between screens. It can also direct attention to important elements, reinforce hierarchy, and create a sense of continuity between actions.
  
  Tip: Don’t over-use motion, and always make sure that the motion or timing fits the component.

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

Section 4

Accessibility Standards

Accessibility standards (WCAG basics): Accessibility is a core value of the SAP Design System, ensuring that digital experiences are usable by everyone, including people with disabilities. All of the foundational elements of the SAP Design System are built to meet baseline accessibility standards (WCAG), and support inclusive design principles from the ground up.

The SAP Accessible & Inclusive Design team also provides additional tools and training to ensure an accessible and inclusive product experience for all.

If you want to dig deeper in this topic, you can try our Accessibility learning track.

Continue Learning

Back to SAP Design System Essentials Track