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-600 | r-charcoal-600 |
--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-dark-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-600 | r-charcoal-600 |
--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-hovered-inverse | r-haze-200-alpha-04 | r-charcoal-400-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-pressed-inverse | r-haze-200-alpha-12 | r-charcoal-400-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 |