Colors

Every colour is defined as a CSS custom property in tokens.css. This project is migrating from SASS vars to CSS vars. At the moment the SASS vars still exist and are aliases of the CSS vars. SASS vars are deprecated and should be converted to CSS vars. See CSS custom properties for the background.

Semantic properties

These describe the role a colour plays rather than what it looks like. They are the better choice in application code: when the design system gains theme-aware values, these are the properties that will change.

They have no Sass equivalent — they are new.

CSS property	Used for	Value
`--ds-colour-text`	Body and heading text	`#403F41`
`--ds-colour-text-inverse`	Text on a dark background	`#fff`
`--ds-colour-link`	Links and interactive text	`#E6007C`
`--ds-colour-action`	Buttons and calls to action	`#007CAD`
`--ds-colour-action-inverse`	The same, on a dark background	`#00B6FF`
`--ds-colour-focus`	Keyboard focus outlines	`#FFC037`
`--ds-colour-background-page`	The page background	`#fff`
`--ds-colour-background-panel`	Forms, tables and filters	`#E4F4FB`
`--ds-colour-background-inverse`	Dark headers and footers	`#0D1117`
`--ds-colour-background-subtle`	Code blocks and highlighted text	`rgba(64, 63, 65, 0.2)`
`--ds-colour-border`	Card, form and table borders	`rgba(64, 63, 65, 0.2)`
`--ds-colour-border-inverse`	Borders on a dark background	`rgba(255, 255, 255, 0.2)`
`--ds-colour-success`	Success states	`#32841A`
`--ds-colour-error`	Errors and validation failures	`#D91714`
`--ds-colour-info`	Informational states	`#007CAD`

Primitive palette

These are the raw palette values. The number describes relative strength, not a measurement: within each hue, -700 is contrast-safe against white and -400 is contrast-safe against the dark backgrounds. That is the distinction the ...ForWhite and ...ForBlack Sass names were making.

Prefer the semantic properties below these where one fits.

Sass variable	CSS property	Value
`$black`	`--ds-colour-grey-900`	`#403F41`
`$darkBlack`	`--ds-colour-grey-950`	`#0D1117`
`$blackOpacity`	`--ds-colour-grey-900-alpha`	`rgba(64, 63, 65, 0.2)`
`$white`	`--ds-colour-white`	`#fff`
`$pinkForWhite`	`--ds-colour-pink-700`	`#E6007C`
`$blueLight`	`--ds-colour-blue-100`	`#E4F4FB`
`$blueForWhite`	`--ds-colour-blue-700`	`#007CAD`
`$blueForBlack`	`--ds-colour-blue-400`	`#00B6FF`
`$greenForWhite`	`--ds-colour-green-700`	`#32841A`
`$greenForBlack`	`--ds-colour-green-400`	`#4BC427`
`$redForWhite` and `$redForBlueLight`	`--ds-colour-red-700`	`#D91714`
`$redForBlack`	`--ds-colour-red-400`	`#FF6347`
`$amber`	`--ds-colour-amber-400`	`#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: var(--ds-colour-white);
    background-color: var(--ds-colour-green-700);
}

.ds-my-component-reversed {
    color: var(--ds-colour-green-700);
    background-color: var(--ds-colour-white);
}

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