Design System
Legacy Styles
Colors

Colors

  • logo
    var(--color-logo)
  • default
    var(--color-default)
  • overlay
    var(--color-overlay)
  • hover
    var(--color-hover)
  • alert
    var(--color-alert)
  • error
    var(--color-error)
  • defaultInverted
    var(--color-defaultInverted)
  • overlayInverted
    var(--color-overlayInverted)
  • divider
    var(--color-divider)
  • dividerInverted
    var(--color-dividerInverted)
  • primary
    var(--color-primary)
  • primaryHover
    var(--color-primaryHover)
  • primaryText
    var(--color-primaryText)
  • text
    var(--color-text)
  • textInverted
    var(--color-textInverted)
  • textSoft
    var(--color-textSoft)
  • textSoftInverted
    var(--color-textSoftInverted)
  • disabled
    var(--color-disabled)
  • accentColorBriefing
    var(--color-accentColorBriefing)
  • accentColorInteraction
    var(--color-accentColorInteraction)
  • accentColorOppinion
    var(--color-accentColorOppinion)
  • accentColorFormats
    var(--color-accentColorFormats)
  • accentColorMeta
    var(--color-accentColorMeta)
  • accentColorAudio
    var(--color-accentColorAudio)
  • accentColorFlyer
    var(--color-accentColorFlyer)
  • overlayShadow
    var(--color-overlayShadow)
  • fadeOutGradientDefault
    var(--color-fadeOutGradientDefault)
  • fadeOutGradientDefault90
    var(--color-fadeOutGradientDefault90)
  • fadeOutGradientOverlay
    var(--color-fadeOutGradientOverlay)
  • displayLight
    var(--color-displayLight)
  • displayDark
    var(--color-displayDark)
  • sequential100
    var(--color-sequential100)
  • sequential95
    var(--color-sequential95)
  • sequential90
    var(--color-sequential90)
  • sequential85
    var(--color-sequential85)
  • sequential80
    var(--color-sequential80)
  • sequential75
    var(--color-sequential75)
  • sequential70
    var(--color-sequential70)
  • sequential65
    var(--color-sequential65)
  • sequential60
    var(--color-sequential60)
  • sequential55
    var(--color-sequential55)
  • sequential50
    var(--color-sequential50)
  • opposite100
    var(--color-opposite100)
  • opposite80
    var(--color-opposite80)
  • opposite60
    var(--color-opposite60)
  • neutral
    var(--color-neutral)
  • discrete1
    var(--color-discrete1)
  • discrete2
    var(--color-discrete2)
  • discrete3
    var(--color-discrete3)
  • discrete4
    var(--color-discrete4)
  • discrete5
    var(--color-discrete5)
  • discrete6
    var(--color-discrete6)
  • discrete7
    var(--color-discrete7)
  • discrete8
    var(--color-discrete8)
  • discrete9
    var(--color-discrete9)
  • discrete10
    var(--color-discrete10)
  • chartsInverted
    var(--color-chartsInverted)
  • flyerBg
    var(--color-flyerBg)
  • flyerText
    var(--color-flyerText)
  • flyerMetaText
    var(--color-flyerMetaText)
  • flyerFormatText
    var(--color-flyerFormatText)
  • logo
    var(--color-logo)
  • default
    var(--color-default)
  • overlay
    var(--color-overlay)
  • hover
    var(--color-hover)
  • alert
    var(--color-alert)
  • error
    var(--color-error)
  • defaultInverted
    var(--color-defaultInverted)
  • overlayInverted
    var(--color-overlayInverted)
  • divider
    var(--color-divider)
  • dividerInverted
    var(--color-dividerInverted)
  • primary
    var(--color-primary)
  • primaryHover
    var(--color-primaryHover)
  • primaryText
    var(--color-primaryText)
  • text
    var(--color-text)
  • textInverted
    var(--color-textInverted)
  • textSoft
    var(--color-textSoft)
  • textSoftInverted
    var(--color-textSoftInverted)
  • disabled
    var(--color-disabled)
  • accentColorBriefing
    var(--color-accentColorBriefing)
  • accentColorInteraction
    var(--color-accentColorInteraction)
  • accentColorOppinion
    var(--color-accentColorOppinion)
  • accentColorFormats
    var(--color-accentColorFormats)
  • accentColorMeta
    var(--color-accentColorMeta)
  • accentColorAudio
    var(--color-accentColorAudio)
  • accentColorFlyer
    var(--color-accentColorFlyer)
  • overlayShadow
    var(--color-overlayShadow)
  • fadeOutGradientDefault
    var(--color-fadeOutGradientDefault)
  • fadeOutGradientDefault90
    var(--color-fadeOutGradientDefault90)
  • fadeOutGradientOverlay
    var(--color-fadeOutGradientOverlay)
  • displayLight
    var(--color-displayLight)
  • displayDark
    var(--color-displayDark)
  • sequential100
    var(--color-sequential100)
  • sequential95
    var(--color-sequential95)
  • sequential90
    var(--color-sequential90)
  • sequential85
    var(--color-sequential85)
  • sequential80
    var(--color-sequential80)
  • sequential75
    var(--color-sequential75)
  • sequential70
    var(--color-sequential70)
  • sequential65
    var(--color-sequential65)
  • sequential60
    var(--color-sequential60)
  • sequential55
    var(--color-sequential55)
  • sequential50
    var(--color-sequential50)
  • opposite100
    var(--color-opposite100)
  • opposite80
    var(--color-opposite80)
  • opposite60
    var(--color-opposite60)
  • neutral
    var(--color-neutral)
  • discrete1
    var(--color-discrete1)
  • discrete2
    var(--color-discrete2)
  • discrete3
    var(--color-discrete3)
  • discrete4
    var(--color-discrete4)
  • discrete5
    var(--color-discrete5)
  • discrete6
    var(--color-discrete6)
  • discrete7
    var(--color-discrete7)
  • discrete8
    var(--color-discrete8)
  • discrete9
    var(--color-discrete9)
  • discrete10
    var(--color-discrete10)
  • chartsInverted
    var(--color-chartsInverted)
  • flyerBg
    var(--color-flyerBg)
  • flyerText
    var(--color-flyerText)
  • flyerMetaText
    var(--color-flyerMetaText)
  • flyerFormatText
    var(--color-flyerFormatText)