BHDicaire

Colour-palette

Data

Brand palette#

The brand view keeps approved brand values fixed, independent of the page theme.

Core colours

Near black Aa

Near black

color.ink

17.88:1 contrast ratio · WCAG AA normal text

Warm paper Aa

Warm paper

color.paper

17.88:1 contrast ratio · WCAG AA normal text

Accent colour

Signal orange Aa

Signal orange

color.accent

4.76:1 contrast ratio · WCAG AA normal text

Accessible accent text Aa

Accessible accent text

color.accent-text

5.03:1 contrast ratio · WCAG AA normal text

On accent Aa

On accent

color.on-accent

4.76:1 contrast ratio · WCAG AA normal text

Neutrals

Quiet line Aa

Quiet line

color.line

13.17:1 contrast ratio · WCAG AA normal text

White Aa

White

color.white

19.03:1 contrast ratio · WCAG AA normal text

Black Aa

Black

color.black

19.74:1 contrast ratio · WCAG AA normal text

Web palette by theme#

The Web view resolves semantic colour roles through the active light or dark collection.

Core colours

Primary text Aa

Primary text

color.ink

17.88:1 contrast ratio · WCAG AA normal text17.88:1 contrast ratio · WCAG AA normal text

Black Aa

Black

color.black

19.74:1 contrast ratio · WCAG AA normal text19.74:1 contrast ratio · WCAG AA normal text

Focus colour

Accent Aa

Accent

color.accent

4.76:1 contrast ratio · WCAG AA normal text4.76:1 contrast ratio · WCAG AA normal text

Accent text Aa

Accent text

color.accent-text

5.03:1 contrast ratio · WCAG AA normal text4.76:1 contrast ratio · WCAG AA normal text

On accent Aa

On accent

color.on-accent

4.76:1 contrast ratio · WCAG AA normal text4.76:1 contrast ratio · WCAG AA normal text

Surface colours

Reading surface Aa

Reading surface

color.paper

17.88:1 contrast ratio · WCAG AA normal text17.88:1 contrast ratio · WCAG AA normal text

Quiet divider Aa

Quiet divider

color.line

13.17:1 contrast ratio · WCAG AA normal text9.76:1 contrast ratio · WCAG AA normal text

White Aa

White

color.white

19.03:1 contrast ratio · WCAG AA normal text19.03:1 contrast ratio · WCAG AA normal text

Example

{{< colour-palette >}}

When to use

Brand or web colour cards with token names, role groups, and generated WCAG contrast ratios.

Implementation

layouts/shortcodes/colour-palette.html

Options

OptionRead by the shortcode template
viewRead by the shortcode template
colourPaletteInstanceRead by the shortcode template

Interface manifest

Kind
Shortcode
Category
Data
Status
Implemented
Implementation
Shortcode:layouts/shortcodes/colour-palette.htmlData:data/brand/tokens.ymlCSS:assets/css/generated/themes.cssassets/css/site.css