Identity

Color

Four neutrals, Paper as a separate surface, the brand colors and the functional ones, with their scale and measured contrast.

The palette has four neutrals and one Paper surface, alongside the brand colors, functional colors and the full scale of each tone. To separate two blocks use gray #e9e9e9 ; for a border you can actually see, darkGray #afafaf . Every color copies with one click. At the end you have the contrast table, with the measured ratio of each pair.

The palette

Click any color to copy its hex.

Neutrals

Surface

Brand colors

Primary #f9be4a

Green #7fbf80

Blue #2797c4

Lila #674a98

Pink #e887a7

Orange #da7835

Deep blue #114f82

Functional colors

Link #114f82

Success #7fbf80

Info #2797c4

Warn #f9be4a

Danger #b3362a

Color scale

Each tone runs from the lightest tint to the darkest. The ring marks the step whose value is the fill of an emphasis color.

Primary

Lila

Pink

Orange

Green

Blue

Red

Neutral

Emphasis colors

There are seven emphasis colors. You pick one with the accent prop, which changes a component's color without touching its role or its geometry. Each carries three canon v5.0.1 tokens: the fill, the color of the text on top, and the version that holds up as text on a light background. They do not mark status: errors and warnings use the functional colors.

Color playground

Pick a color and the preview changes instantly. The accent prop only reaches this card: there is no global mode tinting the whole page.

Pick a color to change the preview.

CategoryEmphasis

Sample card

The same kit Button, Badge and chip, re-tinted only by the accent prop — no change to role, aria or geometry.

accent="amber"

The prop on real components

Amber

accent="amber"

The default color and the strongest of the seven. As a fill it works at any size; as text it does not reach, so writing in amber means using its text-safe tone. For figures and headings, black usually reads better.

Emphasis · Amber

text on the fill: 8.89:1 AAA
the color as text (on light): 5.63:1 AA
UI border · 1.4.11: 5.63:1 ≥3:1

Lila

accent="lila"

The cool color of the usual pair with amber. As a fill it carries whitesmoke on top. It holds up as text better than the rest, and even so it is written in its text-safe tone.

Emphasis · Lila

text on the fill: 6.40:1 AA
the color as text (on light): 9.01:1 AAA
UI border · 1.4.11: 9.01:1 ≥3:1

Blue

accent="blue"

A cool blue that balances a warm-heavy palette. Its fill is the deep blue, not the brand blue, and whitesmoke goes on top. To write in blue on a light surface, use its text-safe tone.

Emphasis · Blue

text on the fill: 7.82:1 AAA
the color as text (on light): 8.29:1 AAA
UI border · 1.4.11: 8.29:1 ≥3:1

Ink

accent="ink"

The brand black used as an emphasis color. It works as a fill and as text, and reads well both ways.

Emphasis · Ink

text on the fill: 13.70:1 AAA
the color as text (on light): 14.94:1 AAA
UI border · 1.4.11: 14.94:1 ≥3:1

Orange

accent="orange"

A first-class orange, not a variant of amber. As a fill it carries black on top; to write it, its text-safe tone.

Emphasis · Orange

text on the fill: 4.78:1 AA
the color as text (on light): 8.02:1 AAA
UI border · 1.4.11: 8.02:1 ≥3:1

Pink

accent="pink"

The lightest of the seven and the one that holds text worst. As a fill it carries black on top; to write in pink, its text-safe tone.

Emphasis · Pink

text on the fill: 6.01:1 AA
the color as text (on light): 7.13:1 AAA
UI border · 1.4.11: 7.13:1 ≥3:1

Green

accent="green"

The same green that marks success among the functional colors; here it is emphasis, not status. As a fill it carries black on top; to write it, its text-safe tone.

Emphasis · Green

text on the fill: 6.88:1 AA
the color as text (on light): 6.48:1 AA
UI border · 1.4.11: 6.48:1 ≥3:1

Combine with intent

One color per surface, black for structure and at most one supporting tone. Three colors at the same weight compete with each other: if you need a third, push it down to a border or a soft background. Amber and lila are the brand's usual pair.

Contrast

Every pair is measured from the canon hexes: if a token moves, the number moves with it.

Black on primary 8.9:1 · AAA

Black on paper 14.2:1 · AAA

Whitesmoke on black 13.7:1 · AAA

Whitesmoke on lila 6.4:1 · AA

Contrast rules

Small text on a light background is black #272727 . Primary #f9be4a does not work as text: to write in amber, use its text-safe tone #8d5d27 .
Whitesmoke #f5f5f5 carries text on dark backgrounds —black #272727 and lila #674a98 — and works as a secondary surface; on primary, write in black.
darkGray #afafaf is for borders and decoration. If the reader has to read it, it goes in black #272727 .
Paper #faf9f7 is the only light brand canvas for the site and documents; use whitesmoke #f5f5f5 for secondary surfaces and gray #e9e9e9 to separate blocks.