Background colors

As the name implies, background colors can only be used on the background of UI elements such as the background of your page, or the background color of a card. Therefore they may only be used on the following properties in code:

 

Background types

In order to understand background colors and their usage, it is important to first understand the different types of backgrounds we currently recognize in our design system. Our background colors are divided into four main categories:

 

 

Surface backgrounds

Surfaces are special background colors that define the hierarchy and elevation of your views. They are typically used as the background color for a whole page and for any raised containers within those pages. The naming convention of surface backgrounds provides a clear indication of the order in which they should be used (e.g. background/page, background/surface-1, background/surface-2).

 

Interactions

Together with our regular surfaces we also provide interaction-specific surface tokens that visually indicate a surface is being interacted with. These tokens are used when a UI element using a surface background color occurs in a hovered or pressed state.

 

Practical example

To illustrate how surface colors work, let's examine a straightforward example. This breakdown shows how you'd use surface colors for a basic screen within a user journey.

 

Stateful backgrounds

The stateful backgrounds category includes background colors that correspond to specific states of UI elements. Unlike interaction-based backgrounds, such as hovered and pressed states, stateful background colors are associated with states that are not dependent on user interactions.

Here are some examples of such states:

 

Contextual backgrounds

Contextual backgrounds are a subset of background colors used for UI elements that express a specific informational context such as info, success, warning or danger.

 

Default variants

Default variants are the bold and attention-grabbing versions of our background colors. They are typically used to draw strong user focus and can be used for elements that represent primary actions or highlight crucial information in your UI.

 

Subtle variants

Subtle backgrounds are softer versions of our background colors. They are typically used for elements that require moderate user attention and we avoid using them for elements that represent the primary actions in your UI.

 

Interactions

Contextual backgrounds are also offered with their interaction variants, which are used to show a user's interaction with elements that use contextual background in their default state. These tokens are meant for interactions such as hovering over or pressing an element.

 

Categorical backgrounds

The categorical backgrounds group includes a subset of background colors specifically designed to define categorical distinctions within your UI. These colors are ideal for visually differentiating elements such as charts, transaction types, or any other category-based content.

Our design system provides ten distinctive category colors, each provided in both default and subtle variants, similar to contextual backgrounds.

 

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).