Primitive colors

What are primitive colors?

Primitive colors serve as low-level tokens that are used to further define our semantic tokens. Unlike semantic tokens, primitive colors are not intended for direct use in UI design. They are defined in a neutral, agnostic manner that describes the color itself rather than its usage or meaning within the design.

 

Palette anatomy

Each color palette comes with a default shade, and alongside it, you'll find lighter and darker variants. This gives you a range of choices to maintain a cohesive and visually pleasing design while allowing you to create the desired visual hierarchy and contrast in your user interface.

 

Neutral palette

The neutral palette is primarily used for neutral background colors (i.e. surfaces), neutral text, and neutral borders. These colors typically do not convey any specific context in the UI, hence we call them “neutral“. They are essential for establishing hierarchy in the interface without drawing attention to themselves.

 

Primary palette

The primary palette is designated for storing your brand colors, particularly your primary brand color. This palette ensures that your brand color is consistently represented across your applications, making it a key element in reinforcing your brand identity.

 

Swatches

Swatches in the primitive palette are essentially a collection of miscellaneous colors. These colors are often used in charts or to categorize information. Many of the swatches contribute to the creation of categorical tokens at the semantic level, allowing for diverse and dynamic color usage in various data visualizations and categories.

 

Light & dark modes

In our Design System, we offer the convenience of separate light and dark mode color palettes. Our dark mode colors are intentionally desaturated by default, prioritizing improved accessibility in dark mode environments. It’s important to note that when configuring primitive colors, these palettes need to be customized separately. Also bear in mind that dark mode is currently supported in our mobile experiences only and is unavailable for web.

 

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