As the name implies, border colors are colors applied specifically to the borders of various UI elements, like containers and separators.
Border colors may only be used with the following properties:
|
iOS (Swift) |
borderColor |
|---|---|
|
Web (SCSS) |
border, border-color |
|
Android (XML) |
color on a Stroke |
|
Android (Kotlin) |
setStroke() |
Usage
Border colors can be instrumental denominators in separating specific elements from the rest of your UI. By categorizing border colors within a dedicated group of color tokens, we ensure that border colors are globally configurable and easy to align with accessibility standards.
Border colors are hierarchically organized based on their importance and usage:
- border/default is used as the strongest border color with highest contrast ratio.
- border/subtle is a softer border color for elements not required to pass accessibility requirements.
Border colors also consist of colors that can be used with contextual elements such as:
- border/info
- border/success
- border/warning
- border/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
Foreground colors
Meant for generic content
On-background colors
Pairing colors to ensure accessible contrast ratios
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