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.

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.