skip to content

Colors

Token Value Demo
$black #403F41
$blackOpacity rgba(64, 63, 65, 0.2)
$white #fff
$pinkForWhite #E6007C
$blueLight #E4F4FB
$blueForWhite #007CAD
$blueForBlack #00B6FF
$greenForWhite #32841A
$greenForBlack #4BC427
$redForWhite and $redForBlueLight #D91714
$amber #FFC037

Accessible pairings

As the names suggest, the “forWhite” colors can be safely paired with $white and the “forBlack” colors can be safely paired with $black. For example:

.ds-my-component {
  color: $white;
  background-color: $greenForWhite;
}

.ds-my-component-reversed {
  color: $greenForWhite;
  background-color: $white;
}

The is no $pinkForBlack because we tried to make one and it looked gross.