Colors

Colors

For consistency and brand awareness, we use the below defined color palettes throughout our interfaces.

Neutral palette#

The neutral color palette is used for typography and most backgrounds.

Neutral colors help you structure your content. They set a calm and not distractive environment. They don’t typically have a meaning associated with them, though they can imply things like disabled states of elements.

See how to use neutral colors

Accent palette#

The accent color palette is used in logical ways throughout the product to guide the eye and highlight the important, interactive UI bits.

See how to use accent colors

Notification palette#

Each color in the notification color palette is selected intentionally to provide meaningful feedback within our experiences. Notification colors should be used purposefully to communicate and inform users.

Blue#

Blue is used to indicate informative notifications, progress, and labels in the system.

Green#

Green is used to indicate success states. Green is a vibrant color and should be used sparingly to convey a positive feeling.

Orange#

Orange indicates a warning or that progress is hindered. Use orange to indicate to indicate a user that an issue can be avoided or needs a corrective action.

Red#

Red indicates error states and messages. Red is an alarming color and should be used with care as it can convey a negative feeling.

Functional tokens#

Base color tokens listed above just represent a static color value and looking at them doesn't tell you much about possible applications. Functional tokens allow us to abstract values to attach a meaning to their intended usage. They allow us to layer references on top of base color tokens to enable more predictable combination and application of colors.

Migration to functional tokens will allow easier implementation of new color-related features like dark mode, custom themes or even simplify future product rebranding. Functional tokens act as an API on top of our color palettes, in a sense that the tokens can be referenced without worrying about their underlying value. Apps that stick to the tokens will get all future color and theme updates "for free", which is a win for maintainability going forward.

Every functional color token follows the same predictable naming convention that helps provide an understanding on how or when the token should be used.

The format of the name is: [property][role][variant][state], where:

• ​
  property is a UI entity the token will be aplied to, such as background or border.
• ​
  role describes the intention behind the token.
• ​
  variant refers to variations of the token, for example how prominent it appears. Prominence scale ranges from minimal to contrast.
• ​
  state is optional and can represent available interaction options such as hover or active.

This gives us final token names like:

Finally, the functional tokens are referenced throughout component styles:

import { styled } from '@volue/wave-react';

const Component = styled('div', {
  backgroundColor: '$backgroundSuccessStrong',
  color: '$foregroundSuccessInverse',

  '&:hover': {
    backgroundColor: '$backgroundSuccessStrongHover'
  }
});

Our functional color tokens belong to one of three groups: background, foreground and border.

Pairing#

It is recommended to pair default color foregrounds with their default and subtle background counterparts. These pairings are designed to be legible and meet accessibility guidance (WCAG AA contrast requirements).

However not all colors pair well with each other. For example you shouldn't combine default foregrounds with strong backgrounds as that will result in inaccessible pairings. Instead, use inverse foreground tokens designed to show on strong backgrounds for optimal contrast.

Here are some general color pairings that have been designed and tested for accessible contrast ratios:

Use hover, active and disabled tokens to communicate visual changes related to interaction states:

CSS variables#

Color tokens exist in different formats and can be also consumed as CSS custom properties​ or variables. You can use any styling solution to read those variables.

CSS variable names are formatted in kebab-case​:

.element {
  background: var(--color-background-neutral-moderate);
  color: var(--color-foreground-neutral);
}

There are even more ways of intergating tokens into your product with help of @volue/design-colors package.

Background tokens#

Background color tokens define the background colors used in surfaces of components or UI elements. Do not use these for border colors or foreground colors.

• backgroundNeutralMinimal

  colorWhite

  #ffffff

  Minimal neutral background. Used for the background area of your app and UI components like cards, inputs etc.

  CSS variable:

  var(--color-background-neutral-minimal)

• backgroundNeutralSubtle

  colorGray0

  #f9fafb

  Subtle neutral background. Used for the background of your app, e.g. when you create a card-based layout.

  CSS variable:

  var(--color-background-neutral-subtle)

• backgroundNeutralModerate

  colorGray5

  #f3f5f6

  Moderate neutral background. Used for the background area of components that should stand out somewhat against minimal neutral surfaces.

  CSS variable:

  var(--color-background-neutral-moderate)

• backgroundNeutral

  colorGray10

  #e6ebec

  Default neutral background.

  CSS variable:

  var(--color-background-neutral)

• backgroundNeutralBold

  colorGray60

  #53747b

  Bold neutral background.

  CSS variable:

  var(--color-background-neutral-bold)

• backgroundNeutralStrong

  colorGray80

  #223f44

  Strong neutral background.

  CSS variable:

  var(--color-background-neutral-strong)

• backgroundNeutralContrast

  colorGray100

  #082d35

  Contrast neutral background. Used for backgrounds of components that should stand out from the rest of the content, such as app header or tooltips.

  CSS variable:

  var(--color-background-neutral-contrast)

• backgroundAccentMinimal

  colorAccent0

  #f8fbfc

  Minimal accent background.

  CSS variable:

  var(--color-background-accent-minimal)

• backgroundAccentMinimalHover

  colorAccent5

  #f3f8f9

  Minimal accent background hover state.

  CSS variable:

  var(--color-background-accent-minimal-hover)

• backgroundAccentMinimalActive

  colorAccent10

  #e8f1f3

  Minimal accent background active state.

  CSS variable:

  var(--color-background-accent-minimal-active)

• backgroundAccentSubtle

  colorAccent5

  #f3f8f9

  Subtle accent background.

  CSS variable:

  var(--color-background-accent-subtle)

• backgroundAccentSubtleHover

  colorAccent10

  #e8f1f3

  Subtle accent background hover state.

  CSS variable:

  var(--color-background-accent-subtle-hover)

• backgroundAccentSubtleActive

  colorAccent20

  #c4dbe0

  Subtle accent background active state.

  CSS variable:

  var(--color-background-accent-subtle-active)

• backgroundAccent

  colorAccent10

  #e8f1f3

  Default accent background.

  CSS variable:

  var(--color-background-accent)

• backgroundAccentHover

  colorAccent20

  #c4dbe0

  Default accent background hover state.

  CSS variable:

  var(--color-background-accent-hover)

• backgroundAccentActive

  colorAccent30

  #a8cbd3

  Default accent background active state.

  CSS variable:

  var(--color-background-accent-active)

• backgroundAccentBold

  colorAccent60

  #5b9ba9

  Bold accent background.

  CSS variable:

  var(--color-background-accent-bold)

• backgroundAccentBoldHover

  colorAccent70

  #388597

  Bold accent background hover state.

  CSS variable:

  var(--color-background-accent-bold-hover)

• backgroundAccentBoldActive

  colorAccent80

  #157084

  Bold accent background active state.

  CSS variable:

  var(--color-background-accent-bold-active)

• backgroundAccentStrong

  colorAccent80

  #157084

  Strong accent background.

  CSS variable:

  var(--color-background-accent-strong)

• backgroundAccentStrongHover

  colorAccent90

  #11596a

  Strong accent background hover state.

  CSS variable:

  var(--color-background-accent-strong-hover)

• backgroundAccentStrongActive

  colorAccent100

  #0c4957

  Strong accent background active state.

  CSS variable:

  var(--color-background-accent-strong-active)

• backgroundDangerSubtle

  colorRed5

  #fff7f8

  Subtle danger background.

  CSS variable:

  var(--color-background-danger-subtle)

• backgroundDangerSubtleHover

  colorRed10

  #ffeff0

  Subtle danger background hover state.

  CSS variable:

  var(--color-background-danger-subtle-hover)

• backgroundDangerSubtleActive

  colorRed20

  #ffdbde

  Subtle danger background active state.

  CSS variable:

  var(--color-background-danger-subtle-active)

• backgroundDanger

  colorRed10

  #ffeff0

  Default danger background.

  CSS variable:

  var(--color-background-danger)

• backgroundDangerHover

  colorRed20

  #ffdbde

  Default danger background hover state.

  CSS variable:

  var(--color-background-danger-hover)

• backgroundDangerActive

  colorRed30

  #ffbfc1

  Default danger background active state.

  CSS variable:

  var(--color-background-danger-active)

• backgroundDangerBold

  colorRed70

  #ff3b3d

  Bold danger background.

  CSS variable:

  var(--color-background-danger-bold)

• backgroundDangerBoldHover

  colorRed80

  #df001f

  Bold danger background hover state.

  CSS variable:

  var(--color-background-danger-bold-hover)

• backgroundDangerBoldActive

  colorRed90

  #b20016

  Bold danger background active state.

  CSS variable:

  var(--color-background-danger-bold-active)

• backgroundDangerStrong

  colorRed80

  #df001f

  Strong danger background state.

  CSS variable:

  var(--color-background-danger-strong)

• backgroundDangerStrongHover

  colorRed90

  #b20016

  Strong danger background hover state.

  CSS variable:

  var(--color-background-danger-strong-hover)

• backgroundDangerStrongActive

  colorRed100

  #9d0012

  Strong danger background active state.

  CSS variable:

  var(--color-background-danger-strong-active)

• backgroundWarningSubtle

  colorOrange5

  #fff9ed

  Subtle warning background.

  CSS variable:

  var(--color-background-warning-subtle)

• backgroundWarningSubtleHover

  colorOrange10

  #fff2da

  Subtle warning background hover state.

  CSS variable:

  var(--color-background-warning-subtle-hover)

• backgroundWarningSubtleActive

  colorOrange20

  #ffecc8

  Subtle warning background active state.

  CSS variable:

  var(--color-background-warning-subtle-active)

• backgroundWarning

  colorOrange10

  #fff2da

  Default warning background.

  CSS variable:

  var(--color-background-warning)

• backgroundWarningHover

  colorOrange20

  #ffecc8

  Default warning background hover state.

  CSS variable:

  var(--color-background-warning-hover)

• backgroundWarningActive

  colorOrange30

  #ffdd99

  Default warning background active state.

  CSS variable:

  var(--color-background-warning-active)

• backgroundWarningBold

  colorOrange70

  #ffb900

  Bold warning background.

  CSS variable:

  var(--color-background-warning-bold)

• backgroundWarningBoldHover

  colorOrange80

  #dc9f00

  Bold warning background hover state.

  CSS variable:

  var(--color-background-warning-bold-hover)

• backgroundWarningBoldActive

  colorOrange90

  #b17600

  Bold warning background active state.

  CSS variable:

  var(--color-background-warning-bold-active)

• backgroundWarningStrong

  colorOrange80

  #dc9f00

  Strong warning background state.

  CSS variable:

  var(--color-background-warning-strong)

• backgroundWarningStrongHover

  colorOrange90

  #b17600

  Strong warning background hover state.

  CSS variable:

  var(--color-background-warning-strong-hover)

• backgroundWarningStrongActive

  colorOrange100

  #805400

  Strong warning background active state.

  CSS variable:

  var(--color-background-warning-strong-active)

• backgroundSuccessSubtle

  colorGreen5

  #eeffef

  Subtle success background.

  CSS variable:

  var(--color-background-success-subtle)

• backgroundSuccessSubtleHover

  colorGreen10

  #dbffdf

  Subtle success background hover state.

  CSS variable:

  var(--color-background-success-subtle-hover)

• backgroundSuccessSubtleActive

  colorGreen20

  #c6ffcd

  Subtle success background active state.

  CSS variable:

  var(--color-background-success-subtle-active)

• backgroundSuccess

  colorGreen10

  #dbffdf

  Default success background.

  CSS variable:

  var(--color-background-success)

• backgroundSuccessHover

  colorGreen20

  #c6ffcd

  Default success background hover state.

  CSS variable:

  var(--color-background-success-hover)

• backgroundSuccessActive

  colorGreen30

  #b0ffbb

  Default success background active state.

  CSS variable:

  var(--color-background-success-active)

• backgroundSuccessBold

  colorGreen70

  #1eb84f

  Bold success background.

  CSS variable:

  var(--color-background-success-bold)

• backgroundSuccessBoldHover

  colorGreen80

  #1d873c

  Bold success background hover state.

  CSS variable:

  var(--color-background-success-bold-hover)

• backgroundSuccessBoldActive

  colorGreen90

  #187233

  Bold success background active state.

  CSS variable:

  var(--color-background-success-bold-active)

• backgroundSuccessStrong

  colorGreen80

  #1d873c

  Strong success background state.

  CSS variable:

  var(--color-background-success-strong)

• backgroundSuccessStrongHover

  colorGreen90

  #187233

  Strong success background hover state.

  CSS variable:

  var(--color-background-success-strong-hover)

• backgroundSuccessStrongActive

  colorGreen100

  #125426

  Strong success background active state.

  CSS variable:

  var(--color-background-success-strong-active)

• backgroundInfoSubtle

  colorBlue5

  #f0fcff

  Subtle info background.

  CSS variable:

  var(--color-background-info-subtle)

• backgroundInfoSubtleHover

  colorBlue10

  #e1f9ff

  Subtle info background hover state.

  CSS variable:

  var(--color-background-info-subtle-hover)

• backgroundInfoSubtleActive

  colorBlue20

  #d0f6ff

  Subtle info background active state.

  CSS variable:

  var(--color-background-info-subtle-active)

• backgroundInfo

  colorBlue10

  #e1f9ff

  Default info background.

  CSS variable:

  var(--color-background-info)

• backgroundInfoHover

  colorBlue20

  #d0f6ff

  Default info background hover state.

  CSS variable:

  var(--color-background-info-hover)

• backgroundInfoActive

  colorBlue30

  #bff3ff

  Default info background active state.

  CSS variable:

  var(--color-background-info-active)

• backgroundInfoBold

  colorBlue70

  #00a7c2

  Bold info background.

  CSS variable:

  var(--color-background-info-bold)

• backgroundInfoBoldHover

  colorBlue80

  #008299

  Bold info background hover state.

  CSS variable:

  var(--color-background-info-bold-hover)

• backgroundInfoBoldActive

  colorBlue90

  #006c80

  Bold info background active state.

  CSS variable:

  var(--color-background-info-bold-active)

• backgroundInfoStrong

  colorBlue80

  #008299

  Strong info background state.

  CSS variable:

  var(--color-background-info-strong)

• backgroundInfoStrongHover

  colorBlue90

  #006c80

  Strong info background hover state.

  CSS variable:

  var(--color-background-info-strong-hover)

• backgroundInfoStrongActive

  colorBlue100

  #005766

  Strong info background active state.

  CSS variable:

  var(--color-background-info-strong-active)

• backgroundDisabled

  colorGray10

  #e6ebec

  Disabled background.

  CSS variable:

  var(--color-background-disabled)

• backgroundDisabledSubtle

  colorGray5

  #f3f5f6

  Subtle disabled background.

  CSS variable:

  var(--color-background-disabled-subtle)

Foreground tokens#

Foreground color tokens are used for text content, icons, and other elements rendered on top of a background. Do not use these for border colors or background colors.

• Aa

  foregroundNeutral

  colorGray100

  #082d35

  Default neutral foreground. Used for primary, high-contrast text.

  CSS variable:

  var(--color-foreground-neutral)

• Aa

  foregroundNeutralModerate

  colorGray80

  #223f44

  Moderate neutral foreground. Used for secondary text.

  CSS variable:

  var(--color-foreground-neutral-moderate)

• Aa

  foregroundNeutralSubtle

  colorGray60

  #53747b

  Subtle neutral border. Used for tertiary, low-contrast text.

  CSS variable:

  var(--color-foreground-neutral-subtle)

• Aa

  foregroundNeutralMinimal

  colorGray30

  #9dafb3

  Minimal neutral foreground. Used for disabled text.

  CSS variable:

  var(--color-foreground-neutral-minimal)

• Aa

  foregroundAccent

  colorAccent100

  #0c4957

  Default accent foreground.

  CSS variable:

  var(--color-foreground-accent)

• Aa

  foregroundAccentModerate

  colorAccent80

  #157084

  Moderate accent foreground.

  CSS variable:

  var(--color-foreground-accent-moderate)

• Aa

  foregroundAccentSubtle

  colorAccent70

  #388597

  Subtle accent foreground.

  CSS variable:

  var(--color-foreground-accent-subtle)

• Aa

  foregroundDanger

  colorRed100

  #9d0012

  Default danger foreground.

  CSS variable:

  var(--color-foreground-danger)

• Aa

  foregroundDangerModerate

  colorRed90

  #b20016

  Moderate danger foreground.

  CSS variable:

  var(--color-foreground-danger-moderate)

• Aa

  foregroundDangerSubtle

  colorRed70

  #ff3b3d

  Subtle danger foreground.

  CSS variable:

  var(--color-foreground-danger-subtle)

• Aa

  foregroundWarning

  colorOrange100

  #805400

  Default warning foreground.

  CSS variable:

  var(--color-foreground-warning)

• Aa

  foregroundWarningModerate

  colorOrange90

  #b17600

  Moderate warning foreground.

  CSS variable:

  var(--color-foreground-warning-moderate)

• Aa

  foregroundWarningSubtle

  colorOrange70

  #ffb900

  Subtle danger foreground.

  CSS variable:

  var(--color-foreground-warning-subtle)

• Aa

  foregroundWarningInverse

  colorGray100

  #082d35

  Inverse warning foreground. Used on strong warning background for optimal contrast.

  CSS variable:

  var(--color-foreground-warning-inverse)

• Aa

  foregroundSuccess

  colorGreen100

  #125426

  Default success foreground.

  CSS variable:

  var(--color-foreground-success)

• Aa

  foregroundSuccessModerate

  colorGreen90

  #187233

  Moderate success foreground.

  CSS variable:

  var(--color-foreground-success-moderate)

• Aa

  foregroundSuccessSubtle

  colorGreen70

  #1eb84f

  Subtle success foreground.

  CSS variable:

  var(--color-foreground-success-subtle)

• Aa

  foregroundInfo

  colorBlue100

  #005766

  Default info foreground.

  CSS variable:

  var(--color-foreground-info)

• Aa

  foregroundInfoModerate

  colorBlue90

  #006c80

  Moderate info foreground.

  CSS variable:

  var(--color-foreground-info-moderate)

• Aa

  foregroundInfoSubtle

  colorBlue70

  #00a7c2

  Subtle info foreground.

  CSS variable:

  var(--color-foreground-info-subtle)

• Aa

  foregroundDisabled

  colorGray30

  #9dafb3

  Disabled foreground.

  CSS variable:

  var(--color-foreground-disabled)

• Aa

  foregroundDisabledSubtle

  colorGray20

  #c2cdd0

  Subtle disabled foreground.

  CSS variable:

  var(--color-foreground-disabled-subtle)

• Aa

  foregroundInverse

  colorWhite

  #ffffff

  Inverse foreground. Used for text on strong backgrounds.

  CSS variable:

  var(--color-foreground-inverse)

Border tokens#

Border color tokens define the color of borders, as seen in toasts, cards, form fields, and more. Do not use these for background colors or foreground colors.

• borderNeutralSubtle

  colorGray10

  #e6ebec

  Subtle neutral border.

  CSS variable:

  var(--color-border-neutral-subtle)

• borderNeutralModerate

  colorGray20

  #c2cdd0

  Moderate neutral border.

  CSS variable:

  var(--color-border-neutral-moderate)

• borderNeutral

  colorGray30

  #9dafb3

  Default neutral border.

  CSS variable:

  var(--color-border-neutral)

• borderNeutralBold

  colorGray70

  #2f565e

  Bold neutral border.

  CSS variable:

  var(--color-border-neutral-bold)

• borderNeutralContrast

  colorGray100

  #082d35

  Contrast neutral border.

  CSS variable:

  var(--color-border-neutral-contrast)

• borderAccentModerate

  colorAccent20

  #c4dbe0

  Moderate accent border.

  CSS variable:

  var(--color-border-accent-moderate)

• borderAccent

  colorAccent30

  #a8cbd3

  Default accent border.

  CSS variable:

  var(--color-border-accent)

• borderAccentHover

  colorAccent40

  #7eb0bc

  Default accent border hover state.

  CSS variable:

  var(--color-border-accent-hover)

• borderAccentActive

  colorAccent60

  #5b9ba9

  Default accent border active state.

  CSS variable:

  var(--color-border-accent-active)

• borderAccentBold

  colorAccent70

  #388597

  Bold accent border.

  CSS variable:

  var(--color-border-accent-bold)

• borderAccentStrong

  colorAccent90

  #11596a

  Strong accent border.

  CSS variable:

  var(--color-border-accent-strong)

• borderDanger

  colorRed30

  #ffbfc1

  Default danger border.

  CSS variable:

  var(--color-border-danger)

• borderDangerBold

  colorRed80

  #df001f

  Bold danger border.

  CSS variable:

  var(--color-border-danger-bold)

• borderDangerStrong

  colorRed90

  #b20016

  Strong danger border.

  CSS variable:

  var(--color-border-danger-strong)

• borderWarning

  colorOrange40

  #ffd787

  Default warning border.

  CSS variable:

  var(--color-border-warning)

• borderWarningBold

  colorOrange80

  #dc9f00

  Bold warning border.

  CSS variable:

  var(--color-border-warning-bold)

• borderWarningStrong

  colorOrange90

  #b17600

  Strong warning border.

  CSS variable:

  var(--color-border-warning-strong)

• borderSuccess

  colorGreen40

  #7dfd95

  Default success border.

  CSS variable:

  var(--color-border-success)

• borderSuccessBold

  colorGreen80

  #1d873c

  Bold success border.

  CSS variable:

  var(--color-border-success-bold)

• borderSuccessStrong

  colorGreen90

  #187233

  Strong success border.

  CSS variable:

  var(--color-border-success-strong)

• borderInfo

  colorBlue40

  #9aecff

  Default info border.

  CSS variable:

  var(--color-border-info)

• borderInfoBold

  colorBlue80

  #008299

  Bold info border.

  CSS variable:

  var(--color-border-info-bold)

• borderInfoStrong

  colorBlue90

  #006c80

  Strong info border.

  CSS variable:

  var(--color-border-info-strong)

• borderDisabled

  colorGray10

  #e6ebec

  Disabled border.

  CSS variable:

  var(--color-border-disabled)

• borderDisabledSubtle

  colorGray5

  #f3f5f6

  Subtle disabled border.

  CSS variable:

  var(--color-border-disabled-subtle)

• borderInverse

  colorWhite

  rgba(255, 255, 255, 0.85)

  Inverse border. Used for borders on strong backgrounds.

  CSS variable:

  var(--color-border-inverse)

RGB channels#

When a token translates to #000000 (hex) or rgb(0, 0, 0) color value in CSS, it becomes a challenge to apply opacity just to the color value without making the whole component transparent.

While sticking to solid colors is the default, recommended way, in some special cases there might be a need to reduce the opacity of a color. For example, transparent shades adapt easier to different backgrounds, since they keep the contrast between the element and its background more consistent.

That's why for a subset of background color tokens, their RGB channel values are exposed as separate tokens to be combined with an alpha/opacity. You can use them with the rgba color function​ like this:

const Component = styled('div', {
  backgroundColor: 'rgba($rgbBackgroundNeutralBold, 0.15)'
});

.element {
  background: rgba(var(--color-rgb-background-neutral-bold), 0.15);
}

The following rgb channel tokens are available:

• rgbBackgroundNeutralMinimal

  backgroundNeutralMinimal

  255, 255, 255

  CSS variable:

  rgba(var(--color-rgb-background-neutral-minimal), 0.5)

• rgbBackgroundNeutral

  backgroundNeutral

  230, 235, 236

  CSS variable:

  rgba(var(--color-rgb-background-neutral), 0.5)

• rgbBackgroundNeutralBold

  backgroundNeutralBold

  83, 116, 123

  CSS variable:

  rgba(var(--color-rgb-background-neutral-bold), 0.5)

• rgbBackgroundNeutralStrong

  backgroundNeutralStrong

  34, 63, 68

  CSS variable:

  rgba(var(--color-rgb-background-neutral-strong), 0.5)

• rgbBackgroundAccent

  backgroundAccent

  232, 241, 243

  CSS variable:

  rgba(var(--color-rgb-background-accent), 0.5)

• rgbBackgroundAccentBold

  backgroundAccentBold

  91, 155, 169

  CSS variable:

  rgba(var(--color-rgb-background-accent-bold), 0.5)

• rgbBackgroundAccentStrong

  backgroundAccentStrong

  21, 112, 132

  CSS variable:

  rgba(var(--color-rgb-background-accent-strong), 0.5)

• rgbBackgroundDanger

  backgroundDanger

  255, 239, 240

  CSS variable:

  rgba(var(--color-rgb-background-danger), 0.5)

• rgbBackgroundDangerBold

  backgroundDangerBold

  255, 59, 61

  CSS variable:

  rgba(var(--color-rgb-background-danger-bold), 0.5)

• rgbBackgroundDangerStrong

  backgroundDangerStrong

  223, 0, 31

  CSS variable:

  rgba(var(--color-rgb-background-danger-strong), 0.5)

• rgbBackgroundWarning

  backgroundWarning

  255, 242, 218

  CSS variable:

  rgba(var(--color-rgb-background-warning), 0.5)

• rgbBackgroundWarningBold

  backgroundWarningBold

  255, 185, 0

  CSS variable:

  rgba(var(--color-rgb-background-warning-bold), 0.5)

• rgbBackgroundWarningStrong

  backgroundWarningStrong

  220, 159, 0

  CSS variable:

  rgba(var(--color-rgb-background-warning-strong), 0.5)

• rgbBackgroundSuccess

  backgroundSuccess

  219, 255, 223

  CSS variable:

  rgba(var(--color-rgb-background-success), 0.5)

• rgbBackgroundSuccessBold

  backgroundSuccessBold

  30, 184, 79

  CSS variable:

  rgba(var(--color-rgb-background-success-bold), 0.5)

• rgbBackgroundSuccessStrong

  backgroundSuccessStrong

  29, 135, 60

  CSS variable:

  rgba(var(--color-rgb-background-success-strong), 0.5)

• rgbBackgroundInfo

  backgroundInfo

  225, 249, 255

  CSS variable:

  rgba(var(--color-rgb-background-info), 0.5)

• rgbBackgroundInfoBold

  backgroundInfoBold

  0, 167, 194

  CSS variable:

  rgba(var(--color-rgb-background-info-bold), 0.5)

• rgbBackgroundInfoStrong

  backgroundInfoStrong

  0, 130, 153

  CSS variable:

  rgba(var(--color-rgb-background-info-strong), 0.5)

Data visualisation colors#

The colors available in this category have a unique purpose and should be used only only for data visualisation and information highlighting.

Teal#

Purple#

Pink#

Aqua#

Blue#

Lazuli#

Green#

Lime#

Orange#

Pear#

Brown#

Red#

RGB channels#

RGB channel values of data visualisation colors are exposed as separate tokens to be combined with an alpha/opacity.

• rgbDataTeal20

  dataTeal20

  220, 244, 239

  CSS variable:

  rgba(var(--color-rgb-data-teal20), 0.5)

• rgbDataTeal40

  dataTeal40

  167, 223, 214

  CSS variable:

  rgba(var(--color-rgb-data-teal40), 0.5)

• rgbDataTeal60

  dataTeal60

  111, 201, 186

  CSS variable:

  rgba(var(--color-rgb-data-teal60), 0.5)

• rgbDataTeal80

  dataTeal80

  58, 177, 158

  CSS variable:

  rgba(var(--color-rgb-data-teal80), 0.5)

• rgbDataTeal100

  dataTeal100

  37, 121, 107

  CSS variable:

  rgba(var(--color-rgb-data-teal100), 0.5)

• rgbDataPurple20

  dataPurple20

  244, 234, 248

  CSS variable:

  rgba(var(--color-rgb-data-purple20), 0.5)

• rgbDataPurple40

  dataPurple40

  226, 198, 236

  CSS variable:

  rgba(var(--color-rgb-data-purple40), 0.5)

• rgbDataPurple60

  dataPurple60

  210, 161, 227

  CSS variable:

  rgba(var(--color-rgb-data-purple60), 0.5)

• rgbDataPurple80

  dataPurple80

  197, 116, 228

  CSS variable:

  rgba(var(--color-rgb-data-purple80), 0.5)

• rgbDataPurple100

  dataPurple100

  158, 61, 194

  CSS variable:

  rgba(var(--color-rgb-data-purple100), 0.5)

• rgbDataPink20

  dataPink20

  248, 233, 242

  CSS variable:

  rgba(var(--color-rgb-data-pink20), 0.5)

• rgbDataPink40

  dataPink40

  235, 197, 222

  CSS variable:

  rgba(var(--color-rgb-data-pink40), 0.5)

• rgbDataPink60

  dataPink60

  226, 157, 201

  CSS variable:

  rgba(var(--color-rgb-data-pink60), 0.5)

• rgbDataPink80

  dataPink80

  226, 106, 181

  CSS variable:

  rgba(var(--color-rgb-data-pink80), 0.5)

• rgbDataPink100

  dataPink100

  181, 59, 140

  CSS variable:

  rgba(var(--color-rgb-data-pink100), 0.5)

• rgbDataAqua20

  dataAqua20

  227, 241, 246

  CSS variable:

  rgba(var(--color-rgb-data-aqua20), 0.5)

• rgbDataAqua40

  dataAqua40

  177, 218, 228

  CSS variable:

  rgba(var(--color-rgb-data-aqua40), 0.5)

• rgbDataAqua60

  dataAqua60

  122, 196, 211

  CSS variable:

  rgba(var(--color-rgb-data-aqua60), 0.5)

• rgbDataAqua80

  dataAqua80

  66, 171, 194

  CSS variable:

  rgba(var(--color-rgb-data-aqua80), 0.5)

• rgbDataAqua100

  dataAqua100

  41, 117, 133

  CSS variable:

  rgba(var(--color-rgb-data-aqua100), 0.5)

• rgbDataBlue20

  dataBlue20

  230, 239, 247

  CSS variable:

  rgba(var(--color-rgb-data-blue20), 0.5)

• rgbDataBlue40

  dataBlue40

  191, 213, 233

  CSS variable:

  rgba(var(--color-rgb-data-blue40), 0.5)

• rgbDataBlue60

  dataBlue60

  147, 187, 223

  CSS variable:

  rgba(var(--color-rgb-data-blue60), 0.5)

• rgbDataBlue80

  dataBlue80

  96, 161, 223

  CSS variable:

  rgba(var(--color-rgb-data-blue80), 0.5)

• rgbDataBlue100

  dataBlue100

  52, 109, 162

  CSS variable:

  rgba(var(--color-rgb-data-blue100), 0.5)

• rgbDataLazuli20

  dataLazuli20

  236, 237, 249

  CSS variable:

  rgba(var(--color-rgb-data-lazuli20), 0.5)

• rgbDataLazuli40

  dataLazuli40

  204, 207, 238

  CSS variable:

  rgba(var(--color-rgb-data-lazuli40), 0.5)

• rgbDataLazuli60

  dataLazuli60

  170, 178, 233

  CSS variable:

  rgba(var(--color-rgb-data-lazuli60), 0.5)

• rgbDataLazuli80

  dataLazuli80

  127, 148, 242

  CSS variable:

  rgba(var(--color-rgb-data-lazuli80), 0.5)

• rgbDataLazuli100

  dataLazuli100

  75, 92, 221

  CSS variable:

  rgba(var(--color-rgb-data-lazuli100), 0.5)

• rgbDataGreen20

  dataGreen20

  223, 245, 225

  CSS variable:

  rgba(var(--color-rgb-data-green20), 0.5)

• rgbDataGreen40

  dataGreen40

  173, 226, 176

  CSS variable:

  rgba(var(--color-rgb-data-green40), 0.5)

• rgbDataGreen60

  dataGreen60

  118, 206, 122

  CSS variable:

  rgba(var(--color-rgb-data-green60), 0.5)

• rgbDataGreen80

  dataGreen80

  63, 184, 69

  CSS variable:

  rgba(var(--color-rgb-data-green80), 0.5)

• rgbDataGreen100

  dataGreen100

  42, 121, 46

  CSS variable:

  rgba(var(--color-rgb-data-green100), 0.5)

• rgbDataLime20

  dataLime20

  241, 252, 220

  CSS variable:

  rgba(var(--color-rgb-data-lime20), 0.5)

• rgbDataLime40

  dataLime40

  203, 237, 122

  CSS variable:

  rgba(var(--color-rgb-data-lime40), 0.5)

• rgbDataLime60

  dataLime60

  167, 212, 65

  CSS variable:

  rgba(var(--color-rgb-data-lime60), 0.5)

• rgbDataLime80

  dataLime80

  132, 186, 18

  CSS variable:

  rgba(var(--color-rgb-data-lime80), 0.5)

• rgbDataLime100

  dataLime100

  88, 125, 12

  CSS variable:

  rgba(var(--color-rgb-data-lime100), 0.5)

• rgbDataOrange20

  dataOrange20

  250, 235, 220

  CSS variable:

  rgba(var(--color-rgb-data-orange20), 0.5)

• rgbDataOrange40

  dataOrange40

  245, 202, 163

  CSS variable:

  rgba(var(--color-rgb-data-orange40), 0.5)

• rgbDataOrange60

  dataOrange60

  237, 163, 94

  CSS variable:

  rgba(var(--color-rgb-data-orange60), 0.5)

• rgbDataOrange80

  dataOrange80

  229, 123, 26

  CSS variable:

  rgba(var(--color-rgb-data-orange80), 0.5)

• rgbDataOrange100

  dataOrange100

  164, 84, 10

  CSS variable:

  rgba(var(--color-rgb-data-orange100), 0.5)

• rgbDataPear20

  dataPear20

  252, 252, 219

  CSS variable:

  rgba(var(--color-rgb-data-pear20), 0.5)

• rgbDataPear40

  dataPear40

  232, 229, 76

  CSS variable:

  rgba(var(--color-rgb-data-pear40), 0.5)

• rgbDataPear60

  dataPear60

  203, 201, 32

  CSS variable:

  rgba(var(--color-rgb-data-pear60), 0.5)

• rgbDataPear80

  dataPear80

  175, 173, 7

  CSS variable:

  rgba(var(--color-rgb-data-pear80), 0.5)

• rgbDataPear100

  dataPear100

  118, 118, 5

  CSS variable:

  rgba(var(--color-rgb-data-pear100), 0.5)

• rgbDataBrown20

  dataBrown20

  244, 237, 222

  CSS variable:

  rgba(var(--color-rgb-data-brown20), 0.5)

• rgbDataBrown40

  dataBrown40

  232, 207, 150

  CSS variable:

  rgba(var(--color-rgb-data-brown40), 0.5)

• rgbDataBrown60

  dataBrown60

  216, 177, 85

  CSS variable:

  rgba(var(--color-rgb-data-brown60), 0.5)

• rgbDataBrown80

  dataBrown80

  184, 151, 73

  CSS variable:

  rgba(var(--color-rgb-data-brown80), 0.5)

• rgbDataBrown100

  dataBrown100

  127, 103, 46

  CSS variable:

  rgba(var(--color-rgb-data-brown100), 0.5)

• rgbDataRed20

  dataRed20

  247, 230, 232

  CSS variable:

  rgba(var(--color-rgb-data-red20), 0.5)

• rgbDataRed40

  dataRed40

  236, 199, 201

  CSS variable:

  rgba(var(--color-rgb-data-red40), 0.5)

• rgbDataRed60

  dataRed60

  230, 161, 165

  CSS variable:

  rgba(var(--color-rgb-data-red60), 0.5)

• rgbDataRed80

  dataRed80

  235, 112, 114

  CSS variable:

  rgba(var(--color-rgb-data-red80), 0.5)

• rgbDataRed100

  dataRed100

  187, 58, 66

  CSS variable:

  rgba(var(--color-rgb-data-red100), 0.5)

Colors usage guidelines#

Each color in Waves' color palette has its purpose.

The neutral color palette is used for most backgrounds including the backgrounds of main navigation elements, such as left panels and top headers.

The accent color palette is used for all other interactive elements such as buttons and inputs, including highlights of labels and messages. The accent color is differentiating the content from the main navigation elements.

The main navigation should use the neutral color palette.

Make sure you're not using the accent color palette on your main navigation.

Using neutral color palette for typography and alternative backgrounds than white, ensure that your content is contrasted correctly.

Correct and accessible contrast between background and content.

Defective contrast between background and content.

Colors accessibility#

Found colors in the Wave palette that you would like to use together, but not sure if they will pass WCAG AA contrast requirements?

Recommended tools below can find you to test the colors you're planning on using to see if the pair meets the minimum color contrast requirements.