What are design tokens?
Design tokens are a crucial component of modern design systems, acting as a bridge between design and engineering by converting design decisions into data. These tokens represent small, reusable design values, such as colors, typography, and spacing, with descriptive and easily understandable names that replace static values like hex codes.
Primitive colors
The base level of the Backbase Design System token architecture
Semantic colors
Defining the high-level logic of UI coloring
Value & cost of migration
Benefits and cost of the migration to the new token architecture
Theming
At Backbase, design tokens are the primary tool powering the theming capabilities of our products. Since every Backbase-powered app requires a unique visual style, design tokens enable this differentiation. By redefining the design token values, every project can be delivered with a completely different look and feel while reusing the same frontend.
Modes
Design tokens also enable multi-dimensional theming, allowing for more flexible and context-sensitive design solutions. Beyond providing a single, cohesive theme aligned with your unique branding, design tokens can be adapted to different contexts, such as light mode and dark mode. This adaptability ensures that your theme remains consistent and effective across various user environments.
Tiers & terminology
Backbase design tokens are organized into three tiers, each serving a different purpose:
- Primitive tokens: These define raw values for your color palette and scales.
- Semantic tokens: These build on primitive ones, defining specific usage of tokens.
- Component tokens: The most specific ones, defining parts of individual components.
This structure ensures clarity and consistency in applying design elements 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.
Background colors
Semantically setting the background of your UI
Foreground colors
Meant for generic content
On-background colors
Pairing colors to ensure accessible contrast ratios
Border colors
Consistently coloring borders of UI elements
Focus colors
A specific highlight for interactive elements
Link colors
Special colors for interactive text elements
Migration
Learn more about how to migrate to the latest version of our design tokens (semantic tokens).
The use of Semantic Tokens is not mandatory upon their introduction. The previous tokens, now referred to as “deprecated tokens”, remain supported for the time being in Web but will eventually be removed and omitted from future updates and features.
Projects themed using deprecated tokens will continue to function as expected. However, if both semantic and deprecated tokens are applied simultaneously, the semantic ones will take precedence, potentially overriding any theme applied through deprecated tokens.
You can find a comprehensive list of the tokens that were deprecated upon the introduction of the new token architecture in the 2024.09-LTS release of the Backbase Design System in our old documentation site.
Introduction
The first step when migrating your project setup to the new token architecture
Migration in Android
Migrate your Android setup to the new token architecture introduced in the 2024.09-LTS release
Migration in iOS
Migrate your iOS setup to the new token architecture introduced in the 2024.09-LTS release
Migration in Web
Migrate your web setup to the new token architecture introduced in the 2024.09-LTS release