Focus colors are special colors used to highlight interactive elements when they are selected or in focus. They help users identify which element is currently active or ready for interaction, enhancing usability and accessibility by providing clear visual feedback.
Focus colors may only be used with the following properties:
|
Web (SCSS) |
outline, outline-color |
|---|---|
|
iOS (Swift) |
N/A |
|
Android (XML) |
N/A |
|
Android (Kotlin) |
N/A |
Default focus
Default focus colors are used on neutral backgrounds to highlight interactive elements. These colors ensure that focused elements are easily identifiable and maintain an accessible contrast ratio, making it clear which element is currently active.
On-color focus
On-color focus colors are designed for use on darker or highly saturated backgrounds. They ensure that focused elements remain distinct and visible, maintaining a high contrast ratio for readability and accessibility on vibrant or dark 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.
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
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