Introduction

What are semantic colors?

Semantic colors define the high-level logic used when applying color to an interface. They're are divided into six distinct groups, each serving different purposes and uses. Below, you will find a list of all color categories, along with links to dedicated pages that provide detailed information and usage guidelines for each color type.

 

 

Reading semantic colors

Semantic colors are named to clearly indicate their intended usage and role within the design system. It is therefore important to understand how to properly read and interpret their naming. You can take a look at the examples in the image below. They nicely showcase how you may read and interpret the names of different semantic color tokens.

 

An example of semantic colors: contextual palettes

The contextual palette includes colors such as info, success, warning, and danger. These colors are used to convey context within the interface, such as indicating different types of messages (e.g., informational, successful, warning, or dangerous messages). These palettes help users quickly interpret the nature of different contextual information within the UI.

 

Applying semantic colors

The diagram below demonstrates the application of semantic colors across various interface layers and elements. Each label represents a specific semantic color, such as background/brand, on-background/brand and border/separator, which are applied based on their functional purpose.

 

Token references

References are a unique type of token definition. Unlike primitive tokens, which are defined directly by HEX codes, semantic colors take a different approach. Instead, they usually refer to a specific primitive token within the system.

These references act as a bridge between the high-level, rule-based naming of semantic tokens and the foundational primitive tokens.

 

Light & dark mode

Semantic colors are adaptable to different modes, such as light mode and dark mode. They dynamically point to different primitive tokens based on the active mode. This approach ensures that our user interface maintains a coherent and visually pleasing appearance across various contexts.

 

Resources

Below, you can find additional documentation and resources to help you navigate the world of design tokens. The documentation includes guides for engineers and designers, as well as high-level information about our design tokens at Backbase.

 

Semantic tokens

Discover all foundational concepts to get you started with our new semantic tokens architecture.

 

Migration

Learn more about how to migrate to the latest version of our design tokens (semantic tokens).