Text
| Token | ||
|---|---|---|
--r-text-brand Used for decorative, large texts only (from font size 24), to emphasize brand Example: Marketing email headers | r-vanguard-400 | r-dark-vanguard-100 |
--r-text-inverse Used for regular texts but then on strong backgrounds Example: Text in Primary button | r-neutral-white | r-charcoal-400 |
--r-text-inverse-static Used for decorative, large texts only (from font size 24) to use above backgrounds with brand color Example: Onboarding screen of the Riverty App | r-neutral-white | r-neutral-white |
--r-text-regular Used for all texts that aren’t in need of exceptions Example: Headlines, body texts, labels | r-charcoal-400 | r-haze-200 |
--r-text-soft Used for texts that are additional, not crucial Example: Hint texts, placeholder texts | r-charcoal-300 | r-charcoal-200 |
--r-text-strong Used on colored backgrounds to ensure better contrast compared to `r-text-regular` Example: Text in Toast with warning status | r-charcoal-600 | r-neutral-white |
--r-text-strong-static Used on colored backgrounds that don’t change from light to dark mode, compared to `r-text-strong` Example: Text in Primary button | r-charcoal-600 | r-charcoal-600 |
Link
| Token | ||
|---|---|---|
--r-link-emphasis Used to indicate to users the interactivity of a link, used for hover and activated states | r-azure-500 | r-dark-azure-100 |
--r-link-enabled Used to indicate to users that a link is enabled | r-azure-400 | r-dark-azure-200 |
--r-link-visited-emphasis Used to indicate to users the interactivity of a visited link, used for hover and activated states | r-amethyst-500 | r-dark-amethyst-100 |
--r-link-visited-enabled Used to indicate to users that a link has been visited before | r-amethyst-400 | r-dark-amethyst-200 |
Icon
| Token | ||
|---|---|---|
--r-icon-brand Used to add emphasis on one single icon | r-vanguard-400 | r-dark-vanguard-100 |
--r-icon-inverse Used for icons that are used on inverse backgrounds | r-neutral-white | r-charcoal-400 |
--r-icon-regular Used for icons that are interactive | r-charcoal-400 | r-haze-200 |
--r-icon-regular-static Used for icons that are interactive but should keep static in dark mode | r-charcoal-400 | r-charcoal-400 |
--r-icon-soft Used for icons that are supporting labels | r-charcoal-300 | r-charcoal-200 |
--r-icon-strong-static Used on colored backgrounds to ensure better contrast compared to r-icon-regular, static in dark mode | r-charcoal-600 | r-charcoal-600 |
Border
| Token | ||
|---|---|---|
--r-border-brand Used for borders that serve decoration and function, adding color | r-vanguard-400 | r-dark-vanguard-100 |
--r-border-focused Used for creating focus states of interactive components | r-focused-400 | r-focused-400 |
--r-border-focused-outlined Used for highlighting the focus states of interactive components | r-neutral-white | r-neutral-white |
--r-border-inverse Used for borders that are on strong backgrounds in light mode and soft backgrounds in dark mode | r-neutral-white | r-charcoal-400 |
--r-border-regular Used for borders balanced with regular texts and icons | r-charcoal-400 | r-haze-200 |
--r-border-soft Used for smoother borders but still clearly visible | r-charcoal-300 | r-charcoal-300 |
--r-border-softer Used for making distinctions between sections | r-charcoal-200 | r-charcoal-300 |
--r-border-softest Used for borders that serve as decoration rather than function | r-haze-400 | r-charcoal-200 |
--r-border-strong Used for clear, distinct borders | r-charcoal-600 | r-neutral-white |
Background
| Token | ||
|---|---|---|
--r-background-brand Used in regular decorative screens, containers or sections Example: Onboarding screens, Login screens | r-vanguard-400 | r-dark-vanguard-100 |
--r-background-brand-softest Used in soft decorative screens, containers or sections Example: Onboarding screens, Login screens | r-vanguard-100 | r-dark-vanguard-400 |
--r-background-inverse Used for specific sections that require attention | r-charcoal-400 | r-haze-200 |
--r-background-overlay Used as an overlay background for components that behave modal | r-charcoal-600-alpha-48 | r-charcoal-600-alpha-80 |
--r-background-regular Used for regular backgrounds in components Example: Primary button | r-charcoal-400 | r-haze-200 |
--r-background-soft Used as static backgrounds in our components Example: Dialog, bottom sheet | r-haze-400 | r-charcoal-600 |
--r-background-softer Used as the main background color of Riverty mobile interfaces | r-haze-200 | r-charcoal-500 |
--r-background-softest Used as the main background color of our desktop interfaces, as well as small components Example: Input field, select | r-neutral-white | r-charcoal-400 |
--r-background-softest-static Used as a soft background independent of mode | r-neutral-white | r-neutral-white |
--r-background-state-activated Used for activated state in all interactive components | r-charcoal-400-alpha-12 | r-haze-200-alpha-12 |
--r-background-state-hovered Used for hovered state in all interactive components | r-charcoal-400-alpha-04 | r-haze-200-alpha-04 |
--r-background-state-selected Used for selected state in all interactive components | r-charcoal-400-alpha-08 | r-haze-200-alpha-08 |
Status
| Token | ||
|---|---|---|
--r-status-error-regular Used for indicating strong error Example: Error border for badge, error border for toast, error text | r-red-400 | r-dark-red-100 |
--r-status-error-regular-static Used for indicating strong error, static in both light and dark mode Example: Error background for primary button | r-red-400 | r-red-400 |
--r-status-error-soft Used for indicating soft error, often combined with regular error color Example: Error background for badge, error background for toast | r-red-100 | r-dark-red-500 |
--r-status-info-regular Used for indicating strong info Example: Info border for badge, info border for toast | r-blue-400 | r-dark-blue-100 |
--r-status-info-soft Used for indicating soft info, often combined with regular info color Example: Info background for badge, info background for toast | r-blue-100 | r-dark-blue-500 |
--r-status-success-regular Used for indicating strong success Example: Success border for badge, success border for toast | r-green-400 | r-dark-green-100 |
--r-status-success-soft Used for indicating soft success, often combined with regular success color Example: Success background for badge, success background for toast | r-green-100 | r-dark-green-500 |
--r-status-warning-regular Used for indicating strong warning Example: Warning border for badge, warning border for toast | r-orange-400 | r-dark-orange-100 |
--r-status-warning-soft Used for indicating soft warning, often combined with regular warning color Example: Warning background for badge, warning background for toast | r-orange-100 | r-dark-orange-500 |
Riverty logotype
| Token | ||
|---|---|---|
--r-logo-brand Used when logo requires attention | r-vanguard-400 | r-vanguard-400 |
--r-logo-brand-ember Not used, will be removed in future | r-ember-400 | r-ember-400 |
--r-logo-brand-inverse Used on dark backgrounds, when logo doesn’t require much attention | r-haze-400 | r-charcoal-400 |
--r-logo-brand-regular Used when logo doesn’t require much attention | r-charcoal-400 | r-haze-400 |