Foreground colors are used for generic content such as text or icons. They are only used in combination with the surface backgrounds. Surface backgrounds are more neutral in color tones and can support more text colors than other types of background colors such as contextual or categorical backgrounds.
Foreground colors may only be used with the following properties:
|
iOS (Swift) |
textColor, tintColor |
|---|---|
|
Web (SCSS) |
color, fill |
|
Android (XML) |
android:textColor, android:tint |
|
Android (Kotlin) |
setTextColor(), setTintColor() |
Usage
Foreground colors are carefully selected to ensure readability and accessibility of textual or graphic content within your UI, which is always placed on top of a background (thus the “foreground” naming). These colors are meant to be used for textual content (e.g. headings, body text, labels, links) and icons.
Foreground colors are organized in a hierarchy based on their importance and usage:
- foreground/default is for important texts like headings, titles and main body text.
- foreground/support is used for less prominent text, like labels and secondary text.
- foreground/brand is used for non-interactive but brand expressive content.
Foregrounds also consist of colors that express contextual information such as:
- foreground/info
- foreground/success
- foreground/warning
- foreground/danger
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
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).
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