Colors
The UI color system is a crucial element of the Riverty’s design framework, featuring a thoughtfully selected palette aimed at simplicity and usability. Semantic tokens, which map colors to meaningful names like “primary-bg” or “error-text,” ensure consistency and coherence across our digital platforms.
Text
| Token | ||
|---|---|---|
Used in hover and active state of text button | --r-charcoal-600 | --r-neutral-white |
Used as the primary text color | --r-charcoal-400 | --r-haze-200 |
Used as the secondary text color | --r-charcoal-300 | --r-charcoal-200 |
Used for placeholder texts in input fields | --r-charcoal-200 | --r-charcoal-300 |
Used for text on regular and strong backgrounds | --r-neutral-white | --r-charcoal-400 |
| --r-charcoal-400 | --r-charcoal-400 |
Used for text that reinforces the brand | --r-vanguard-400 | --r-dark-vanguard-400 |
Used for text above the brand background | --r-neutral-white | --r-neutral-white |
Link
| Token | ||
|---|---|---|
Used for external links in enabled state | --r-azure-400 | --r-azure-400 |
Icon
| Token | ||
|---|---|---|
Use as the primary icon color | --r-charcoal-400 | --r-haze-200 |
Use as the secondary icon color | --r-charcoal-300 | --r-charcoal-200 |
Used for icons on regular/strong backgrounds | --r-neutral-white | --r-charcoal-400 |
| --r-charcoal-400 | --r-charcoal-400 |
| --r-vanguard-400 | --r-dark-vanguard-400 |
| --r-charcoal-400 | --r-charcoal-400 |
Border
| Token | ||
|---|---|---|
Used for borders and dividers that needs extra high emphasis | --r-charcoal-600 | --r-neutral-white |
Used for borders and dividers that needs high emphasis | --r-charcoal-400 | --r-haze-200 |
Used for borders and dividers that needs medium emphasis | --r-charcoal-300 | --r-charcoal-300 |
Used as a default color for dividers and borders in form components | --r-charcoal-200 | --r-charcoal-300 |
| --r-haze-400 | --r-charcoal-200 |
Used for elements in focused state | --r-focused-400 | --r-focused-400 |
Used for the outlined border on focused elements to support accessibility on different kind of background colors | --r-neutral-white | --r-neutral-white |
| --r-neutral-white | --r-charcoal-400 |
| --r-vanguard-400 | --r-dark-vanguard-400 |
Background
| Token | ||
|---|---|---|
Used as the main background color for Riverty consumer app | --r-haze-200 | --r-charcoal-500 |
Used as the main background color in Riverty web portals | --r-neutral-white | --r-charcoal-400 |
| --r-charcoal-400 | --r-haze-200 |
Used as an overlay on the main background below modals | --r-charcoal-600-alpha-48 | --r-charcoal-600-alpha-80 |
Used as the background color of modals | --r-haze-200 | --r-charcoal-400 |
| --r-vanguard-400 | --r-dark-vanguard-400 |
| --r-vanguard-100 | --r-vanguard-100 |
| --r-neutral-white | --r-neutral-white |
Background interactive
| Token | ||
|---|---|---|
Used for primary buttons in pressed state | --r-charcoal-600 | --r-haze-500 |
Used for primary buttons in enabled state and secondary buttons in hovered state | --r-charcoal-400 | --r-haze-200 |
| --r-haze-400 | --r-charcoal-600 |
Used as background for form components and primary button in hovered state | --r-neutral-white | --r-charcoal-400 |
Used for hovered state in all interactive components except button | --r-charcoal-400-alpha-04 | --r-haze-200-alpha-04 |
Used for pressed state in all interactive components except button | --r-charcoal-400-alpha-12 | --r-haze-200-alpha-12 |
Used as the background for an activated or selected state | --r-charcoal-400-alpha-08 | --r-haze-200-alpha-08 |
Status
| Token | ||
|---|---|---|
Used to communicate error or critical information. Mostly used for borders, text and icons. | --r-red-400 | --r-dark-red-400 |
Used to communicate error or critical information. Mostly used for backgrounds. | --r-red-100 | --r-dark-red-400-alpha-2 |
Used to communicate caution. Mostly used for borders, text and icons. | --r-orange-400 | --r-dark-orange-400 |
Used to communicate caution. Mostly used for backgrounds. | --r-orange-100 | --r-dark-orange-400-alpha-2 |
Used to communicate a success or a favorable outcome.Mostly used for borders, text and icons. | --r-green-400 | --r-dark-green-400 |
Used to communicate a success or a favorable outcome.Mostly used for backgrounds. | --r-green-100 | --r-dark-green-400-alpha-2 |
Used to communicate neutral information.Mostly used for borders, text and icons. | --r-blue-400 | --r-dark-blue-400 |
Used to communicate neutral information.Mostly used for backgrounds.e | --r-blue-100 | --r-dark-blue-400-alpha-2 |
Riverty logotype
| Token | ||
|---|---|---|
Used for Riverty logotype in neutral color | --r-charcoal-400 | --r-haze-400 |
Used for Riverty logotype in neutral color above strong/regular backgrounds | --r-haze-400 | --r-charcoal-400 |
Used for Riverty logotype in Vanguard color | --r-vanguard-400 | --r-vanguard-400 |
Used for Riverty logotype in Ember color | --r-ember-400 | --r-ember-400 |