Theming

The SAP design language Horizon currently has four themes: Morning and Evening Horizon, and the accessibility themes High-Contrast Black and High-Contrast White. The processes that stand behind creating these are called theming. In order to create these themes, design and development have to work together closely, and that is one of the reasons why the use of design tokens is very important. So, dear reader, see this article as a design token of love.

Theming constitutes the process of systematically customizing your user interface (UI), for example color palettes and typography.

With them, when you change one design value, all others will be changed automatically, too. This is possible because the tokens are connected in order to be able to cascade down value changes through pure defined mapping.If you merely change single, simple items in the UI, for example the brand color, we’re talking about quick theming; if you’re making more in-depth changes, you’re conducting a detailed theming process.

Why is Theming so Important?

The advantages of creating different themes with one design system are manifold:

• If you are a company such as SAP and create products for other companies that they can apply their own brand.
• If you are a company that has several brands.
• If you are operating across platforms.
• For accessibility reasons (think of SAP’s High Contrast themes).

Products with theming are more compatible, efficient, future-oriented, and consistent.

Design tokens store design-related information (colors, fonts, etc.) and are used for repeated decisions concerning the design system’s visual style. They can be transformed and formatted to meet the needs of any platform and system. Their main function is to ensure consistency between design and development.

Their names are self-explanatory, and they correspond with the theme variables implemented within SAP’s central theming base content repository. They are implementable on top of the CSS layer.

Design Token Types

There are three kinds of design token:

Reference tokens: contain primary and secondary colors that make up the essence of the theme. They can be very different in each theme and shouldn’t be used in the CSS of SAP UI controls.

Main/Base tokens: are high-level tokens that can connect to several component tokens for the theming of SAP applications.

Component tokens: tokens that represent all the component parts at an atomic level. You can use them to theme SAP UI components. Their names remain stable from theme to theme and are aligned with the CSS variables provided for all SAP UI technologies.

Why are Design Tokens so Important?

As the connection between the design and development world, design tokens:

• Serve as a single source of truth
• Provide consistency
• Ensure standardization and efficiency.

Schematic presentation of design token hierarchy

There are two tools that are very helpful when it comes to the subject of theming:

The Theming Base Content

It contains all necessary data to connect to the SAP global theming infrastructure.

The UI Theme Designer

It’s a tool for theming and branding key SAP user interfaces. Customers can overstyle colors and apply their own branding. But it’s also beneficial for SAP designers, as they can use this tool to test their ideas. Watch our video if you want to learn more about it.

So, we hope we’ve argued our case and that you’ll help us to spread the word: that a little design token of love goes a long way.