Design System
Colors

Colors

  • text
    var(--r-colors-text)
  • text.inverted
    var(--r-colors-text-inverted)
  • text.white
    var(--r-colors-text-white)
  • contrast
    var(--r-colors-contrast)
  • background
    var(--r-colors-background)
  • pageBackground
    var(--r-colors-page-background)
  • link
    var(--r-colors-link)
  • primary
    var(--r-colors-primary)
  • primaryHover
    var(--r-colors-primary-hover)
  • overlay
    var(--r-colors-overlay)
  • error
    var(--r-colors-error)
  • divider
    var(--r-colors-divider)
  • disabled
    var(--r-colors-disabled)
  • textSoft
    var(--r-colors-text-soft)
  • text
    var(--r-colors-text)
  • text.inverted
    var(--r-colors-text-inverted)
  • text.white
    var(--r-colors-text-white)
  • contrast
    var(--r-colors-contrast)
  • background
    var(--r-colors-background)
  • pageBackground
    var(--r-colors-page-background)
  • link
    var(--r-colors-link)
  • primary
    var(--r-colors-primary)
  • primaryHover
    var(--r-colors-primary-hover)
  • overlay
    var(--r-colors-overlay)
  • error
    var(--r-colors-error)
  • divider
    var(--r-colors-divider)
  • disabled
    var(--r-colors-disabled)
  • textSoft
    var(--r-colors-text-soft)

Challenge Accepted

  • text
    var(--r-colors-text)
  • text.inverted
    var(--r-colors-text-inverted)
  • text.white
    var(--r-colors-text-white)
  • contrast
    var(--r-colors-contrast)
  • background
    var(--r-colors-background)
  • pageBackground
    var(--r-colors-page-background)
  • link
    var(--r-colors-link)
  • primary
    var(--r-colors-primary)
  • primaryHover
    var(--r-colors-primary-hover)
  • overlay
    var(--r-colors-overlay)
  • error
    var(--r-colors-error)
  • divider
    var(--r-colors-divider)
  • disabled
    var(--r-colors-disabled)
  • textSoft
    var(--r-colors-text-soft)
  • text
    var(--r-colors-text)
  • text.inverted
    var(--r-colors-text-inverted)
  • text.white
    var(--r-colors-text-white)
  • contrast
    var(--r-colors-contrast)
  • background
    var(--r-colors-background)
  • pageBackground
    var(--r-colors-page-background)
  • link
    var(--r-colors-link)
  • primary
    var(--r-colors-primary)
  • primaryHover
    var(--r-colors-primary-hover)
  • overlay
    var(--r-colors-overlay)
  • error
    var(--r-colors-error)
  • divider
    var(--r-colors-divider)
  • disabled
    var(--r-colors-disabled)
  • textSoft
    var(--r-colors-text-soft)

Campaign 2024

  • text
    var(--r-colors-text)
  • text.inverted
    var(--r-colors-text-inverted)
  • text.white
    var(--r-colors-text-white)
  • contrast
    var(--r-colors-contrast)
  • background
    var(--r-colors-background)
  • pageBackground
    var(--r-colors-page-background)
  • link
    var(--r-colors-link)
  • primary
    var(--r-colors-primary)
  • primaryHover
    var(--r-colors-primary-hover)
  • overlay
    var(--r-colors-overlay)
  • error
    var(--r-colors-error)
  • divider
    var(--r-colors-divider)
  • disabled
    var(--r-colors-disabled)
  • textSoft
    var(--r-colors-text-soft)

Inverted

  • text
    var(--r-colors-text)
  • text.inverted
    var(--r-colors-text-inverted)
  • text.white
    var(--r-colors-text-white)
  • contrast
    var(--r-colors-contrast)
  • background
    var(--r-colors-background)
  • pageBackground
    var(--r-colors-page-background)
  • link
    var(--r-colors-link)
  • primary
    var(--r-colors-primary)
  • primaryHover
    var(--r-colors-primary-hover)
  • overlay
    var(--r-colors-overlay)
  • error
    var(--r-colors-error)
  • divider
    var(--r-colors-divider)
  • disabled
    var(--r-colors-disabled)
  • textSoft
    var(--r-colors-text-soft)
OverviewColors