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 | ||
|---|---|---|
--r-text-strong Used in hover and active state of text button | --r-charcoal-600 | --r-neutral-white |
--r-text-regular Used as the primary text color | --r-charcoal-400 | --r-haze-200 |
--r-text-soft Used as the secondary text color | --r-charcoal-300 | --r-charcoal-200 |
--r-text-softer Used for placeholder texts in input fields | --r-charcoal-200 | --r-charcoal-300 |
--r-text-inverse Used for text on regular and strong backgrounds | --r-neutral-white | --r-charcoal-400 |
--r-text-warning | --r-charcoal-400 | --r-charcoal-400 |
--r-text-brand Used for text that reinforces the brand | --r-vanguard-400 | --r-dark-vanguard-400 |
--r-text-onbrand Used for text above the brand background | --r-neutral-white | --r-neutral-white |
Link
| Token | ||
|---|---|---|
--r-link-enabled Used for external links in enabled state | --r-azure-400 | --r-azure-400 |
Icon
| Token | ||
|---|---|---|
--r-icon-regular Use as the primary icon color | --r-charcoal-400 | --r-haze-200 |
--r-icon-soft Use as the secondary icon color | --r-charcoal-300 | --r-charcoal-200 |
--r-icon-inverse Used for icons on regular/strong backgrounds | --r-neutral-white | --r-charcoal-400 |
--r-icon-warning | --r-charcoal-400 | --r-charcoal-400 |
--r-icon-brand-vanguard | --r-vanguard-400 | --r-dark-vanguard-400 |
--r-icon-regular-static | --r-charcoal-400 | --r-charcoal-400 |
Border
| Token | ||
|---|---|---|
--r-border-strong Used for borders and dividers that needs extra high emphasis | --r-charcoal-600 | --r-neutral-white |
--r-border-regular Used for borders and dividers that needs high emphasis | --r-charcoal-400 | --r-haze-200 |
--r-border-soft Used for borders and dividers that needs medium emphasis | --r-charcoal-300 | --r-charcoal-300 |
--r-border-softer Used as a default color for dividers and borders in form components | --r-charcoal-200 | --r-charcoal-300 |
--r-border-softest | --r-haze-400 | --r-charcoal-200 |
--r-border-focused Used for elements in focused state | --r-focused-400 | --r-focused-400 |
--r-border-focused-outlined Used for the outlined border on focused elements to support accessibility on different kind of background colors | --r-neutral-white | --r-neutral-white |
--r-border-inverse | --r-neutral-white | --r-charcoal-400 |
--r-border-brand-vanguard | --r-vanguard-400 | --r-dark-vanguard-400 |
Background
| Token | ||
|---|---|---|
--r-background-soft Used as the main background color for Riverty consumer app | --r-haze-200 | --r-charcoal-500 |
--r-background-softest Used as the main background color in Riverty web portals | --r-neutral-white | --r-charcoal-400 |
--r-background-inverse | --r-charcoal-400 | --r-haze-200 |
--r-background-overlay Used as an overlay on the main background below modals | --r-charcoal-600-alpha-48 | --r-charcoal-600-alpha-80 |
--r-background-modal Used as the background color of modals | --r-haze-200 | --r-charcoal-400 |
--r-background-brand-vanguard | --r-vanguard-400 | --r-dark-vanguard-400 |
--r-background-brand-vanguard-softest | --r-vanguard-100 | --r-vanguard-100 |
--r-background-softest-static | --r-neutral-white | --r-neutral-white |
Background interactive
| Token | ||
|---|---|---|
--r-background-interactive-strong Used for primary buttons in pressed state | --r-charcoal-600 | --r-haze-500 |
--r-background-interactive-regular Used for primary buttons in enabled state and secondary buttons in hovered state | --r-charcoal-400 | --r-haze-200 |
--r-background-interactive-softer | --r-haze-400 | --r-charcoal-600 |
--r-background-interactive-softest Used as background for form components and primary button in hovered state | --r-neutral-white | --r-charcoal-400 |
--r-background-interactive-hovered Used for hovered state in all interactive components except button | --r-charcoal-400-alpha-04 | --r-haze-200-alpha-04 |
--r-background-interactive-pressed Used for pressed state in all interactive components except button | --r-charcoal-400-alpha-12 | --r-haze-200-alpha-12 |
--r-background-interactive-activated Used as the background for an activated or selected state | --r-charcoal-400-alpha-08 | --r-haze-200-alpha-08 |
Status
| Token | ||
|---|---|---|
--r-status-error-regular Used to communicate error or critical information. Mostly used for borders, text and icons. | --r-red-400 | --r-dark-red-500 |
--r-status-error-soft Used to communicate error or critical information. Mostly used for backgrounds. | --r-red-100 | --r-dark-red-600 |
--r-status-warning-regular Used to communicate caution. Mostly used for borders, text and icons. | --r-orange-400 | --r-dark-orange-400 |
--r-status-warning-soft Used to communicate caution. Mostly used for backgrounds. | --r-orange-100 | --r-dark-rustyorange-500 |
--r-status-warning-strong | --r-rustyorange-400 | --r-dark-rustyorange-400 |
--r-status-success-regular Used to communicate a success or a favorable outcome.Mostly used for borders, text and icons. | --r-green-400 | --r-dark-green-400 |
--r-status-success-soft Used to communicate a success or a favorable outcome.Mostly used for backgrounds. | --r-green-100 | --r-dark-green-500 |
--r-status-info-regular Used to communicate neutral information.Mostly used for borders, text and icons. | --r-blue-400 | --r-dark-blue-300 |
--r-status-info-soft Used to communicate neutral information.Mostly used for backgrounds.e | --r-blue-100 | --r-dark-blue-600 |
Riverty logotype
| Token | ||
|---|---|---|
--r-logo-brand-regular Used for Riverty logotype in neutral color | --r-charcoal-400 | --r-haze-400 |
--r-logo-brand-inverse Used for Riverty logotype in neutral color above strong/regular backgrounds | --r-haze-400 | --r-charcoal-400 |
--r-logo-brand-vanguard Used for Riverty logotype in Vanguard color | --r-vanguard-400 | --r-vanguard-400 |
--r-logo-brand-ember Used for Riverty logotype in Ember color | --r-ember-400 | --r-ember-400 |