Design tokens

Colour palette

Published on October 11, 2026

Each swatch is oklch(from base-colour lightness c h) using the --lightness-* tokens from theme.css
First swatch: level 0 text on the shade fill
Second swatch: shade text on the opposite level 5 background
Button shades (-b) are shown bold

neutral

Aa Aa light-l0
Aa Aa light-l1
Aa Aa light-l2
Aa Aa light-l3
Aa Aa light-l4
Aa Aa light-l5
Aa Aa dark-a0
Aa Aa dark-a8
Aa Aa dark-a12
Aa Aa dark-a16
Aa Aa dark-b0
Aa Aa dark-b8
Aa Aa dark-b12
Aa Aa dark-b16
Aa Aa light-b16
Aa Aa light-b12
Aa Aa light-b8
Aa Aa light-b0
Aa Aa light-a16
Aa Aa light-a12
Aa Aa light-a8
Aa Aa light-a0
Aa Aa dark-l5
Aa Aa dark-l4
Aa Aa dark-l3
Aa Aa dark-l2
Aa Aa dark-l1
Aa Aa dark-l0

red

Aa Aa light-l0
Aa Aa light-l1
Aa Aa light-l2
Aa Aa light-l3
Aa Aa light-l4
Aa Aa light-l5
Aa Aa dark-a0
Aa Aa dark-a8
Aa Aa dark-a12
Aa Aa dark-a16
Aa Aa dark-b0
Aa Aa dark-b8
Aa Aa dark-b12
Aa Aa dark-b16
Aa Aa light-b16
Aa Aa light-b12
Aa Aa light-b8
Aa Aa light-b0
Aa Aa light-a16
Aa Aa light-a12
Aa Aa light-a8
Aa Aa light-a0
Aa Aa dark-l5
Aa Aa dark-l4
Aa Aa dark-l3
Aa Aa dark-l2
Aa Aa dark-l1
Aa Aa dark-l0

cerise-red

Aa Aa light-l0
Aa Aa light-l1
Aa Aa light-l2
Aa Aa light-l3
Aa Aa light-l4
Aa Aa light-l5
Aa Aa dark-a0
Aa Aa dark-a8
Aa Aa dark-a12
Aa Aa dark-a16
Aa Aa dark-b0
Aa Aa dark-b8
Aa Aa dark-b12
Aa Aa dark-b16
Aa Aa light-b16
Aa Aa light-b12
Aa Aa light-b8
Aa Aa light-b0
Aa Aa light-a16
Aa Aa light-a12
Aa Aa light-a8
Aa Aa light-a0
Aa Aa dark-l5
Aa Aa dark-l4
Aa Aa dark-l3
Aa Aa dark-l2
Aa Aa dark-l1
Aa Aa dark-l0

cinnabar

Aa Aa light-l0
Aa Aa light-l1
Aa Aa light-l2
Aa Aa light-l3
Aa Aa light-l4
Aa Aa light-l5
Aa Aa dark-a0
Aa Aa dark-a8
Aa Aa dark-a12
Aa Aa dark-a16
Aa Aa dark-b0
Aa Aa dark-b8
Aa Aa dark-b12
Aa Aa dark-b16
Aa Aa light-b16
Aa Aa light-b12
Aa Aa light-b8
Aa Aa light-b0
Aa Aa light-a16
Aa Aa light-a12
Aa Aa light-a8
Aa Aa light-a0
Aa Aa dark-l5
Aa Aa dark-l4
Aa Aa dark-l3
Aa Aa dark-l2
Aa Aa dark-l1
Aa Aa dark-l0

pomegranate

Aa Aa light-l0
Aa Aa light-l1
Aa Aa light-l2
Aa Aa light-l3
Aa Aa light-l4
Aa Aa light-l5
Aa Aa dark-a0
Aa Aa dark-a8
Aa Aa dark-a12
Aa Aa dark-a16
Aa Aa dark-b0
Aa Aa dark-b8
Aa Aa dark-b12
Aa Aa dark-b16
Aa Aa light-b16
Aa Aa light-b12
Aa Aa light-b8
Aa Aa light-b0
Aa Aa light-a16
Aa Aa light-a12
Aa Aa light-a8
Aa Aa light-a0
Aa Aa dark-l5
Aa Aa dark-l4
Aa Aa dark-l3
Aa Aa dark-l2
Aa Aa dark-l1
Aa Aa dark-l0

pizazz

Aa Aa light-l0
Aa Aa light-l1
Aa Aa light-l2
Aa Aa light-l3
Aa Aa light-l4
Aa Aa light-l5
Aa Aa dark-a0
Aa Aa dark-a8
Aa Aa dark-a12
Aa Aa dark-a16
Aa Aa dark-b0
Aa Aa dark-b8
Aa Aa dark-b12
Aa Aa dark-b16
Aa Aa light-b16
Aa Aa light-b12
Aa Aa light-b8
Aa Aa light-b0
Aa Aa light-a16
Aa Aa light-a12
Aa Aa light-a8
Aa Aa light-a0
Aa Aa dark-l5
Aa Aa dark-l4
Aa Aa dark-l3
Aa Aa dark-l2
Aa Aa dark-l1
Aa Aa dark-l0

selective-yellow

Aa Aa light-l0
Aa Aa light-l1
Aa Aa light-l2
Aa Aa light-l3
Aa Aa light-l4
Aa Aa light-l5
Aa Aa dark-a0
Aa Aa dark-a8
Aa Aa dark-a12
Aa Aa dark-a16
Aa Aa dark-b0
Aa Aa dark-b8
Aa Aa dark-b12
Aa Aa dark-b16
Aa Aa light-b16
Aa Aa light-b12
Aa Aa light-b8
Aa Aa light-b0
Aa Aa light-a16
Aa Aa light-a12
Aa Aa light-a8
Aa Aa light-a0
Aa Aa dark-l5
Aa Aa dark-l4
Aa Aa dark-l3
Aa Aa dark-l2
Aa Aa dark-l1
Aa Aa dark-l0

bright-yellow

Aa Aa light-l0
Aa Aa light-l1
Aa Aa light-l2
Aa Aa light-l3
Aa Aa light-l4
Aa Aa light-l5
Aa Aa dark-a0
Aa Aa dark-a8
Aa Aa dark-a12
Aa Aa dark-a16
Aa Aa dark-b0
Aa Aa dark-b8
Aa Aa dark-b12
Aa Aa dark-b16
Aa Aa light-b16
Aa Aa light-b12
Aa Aa light-b8
Aa Aa light-b0
Aa Aa light-a16
Aa Aa light-a12
Aa Aa light-a8
Aa Aa light-a0
Aa Aa dark-l5
Aa Aa dark-l4
Aa Aa dark-l3
Aa Aa dark-l2
Aa Aa dark-l1
Aa Aa dark-l0

key-lime-pie

Aa Aa light-l0
Aa Aa light-l1
Aa Aa light-l2
Aa Aa light-l3
Aa Aa light-l4
Aa Aa light-l5
Aa Aa dark-a0
Aa Aa dark-a8
Aa Aa dark-a12
Aa Aa dark-a16
Aa Aa dark-b0
Aa Aa dark-b8
Aa Aa dark-b12
Aa Aa dark-b16
Aa Aa light-b16
Aa Aa light-b12
Aa Aa light-b8
Aa Aa light-b0
Aa Aa light-a16
Aa Aa light-a12
Aa Aa light-a8
Aa Aa light-a0
Aa Aa dark-l5
Aa Aa dark-l4
Aa Aa dark-l3
Aa Aa dark-l2
Aa Aa dark-l1
Aa Aa dark-l0

sushi

Aa Aa light-l0
Aa Aa light-l1
Aa Aa light-l2
Aa Aa light-l3
Aa Aa light-l4
Aa Aa light-l5
Aa Aa dark-a0
Aa Aa dark-a8
Aa Aa dark-a12
Aa Aa dark-a16
Aa Aa dark-b0
Aa Aa dark-b8
Aa Aa dark-b12
Aa Aa dark-b16
Aa Aa light-b16
Aa Aa light-b12
Aa Aa light-b8
Aa Aa light-b0
Aa Aa light-a16
Aa Aa light-a12
Aa Aa light-a8
Aa Aa light-a0
Aa Aa dark-l5
Aa Aa dark-l4
Aa Aa dark-l3
Aa Aa dark-l2
Aa Aa dark-l1
Aa Aa dark-l0

apple

Aa Aa light-l0
Aa Aa light-l1
Aa Aa light-l2
Aa Aa light-l3
Aa Aa light-l4
Aa Aa light-l5
Aa Aa dark-a0
Aa Aa dark-a8
Aa Aa dark-a12
Aa Aa dark-a16
Aa Aa dark-b0
Aa Aa dark-b8
Aa Aa dark-b12
Aa Aa dark-b16
Aa Aa light-b16
Aa Aa light-b12
Aa Aa light-b8
Aa Aa light-b0
Aa Aa light-a16
Aa Aa light-a12
Aa Aa light-a8
Aa Aa light-a0
Aa Aa dark-l5
Aa Aa dark-l4
Aa Aa dark-l3
Aa Aa dark-l2
Aa Aa dark-l1
Aa Aa dark-l0

elf-green

Aa Aa light-l0
Aa Aa light-l1
Aa Aa light-l2
Aa Aa light-l3
Aa Aa light-l4
Aa Aa light-l5
Aa Aa dark-a0
Aa Aa dark-a8
Aa Aa dark-a12
Aa Aa dark-a16
Aa Aa dark-b0
Aa Aa dark-b8
Aa Aa dark-b12
Aa Aa dark-b16
Aa Aa light-b16
Aa Aa light-b12
Aa Aa light-b8
Aa Aa light-b0
Aa Aa light-a16
Aa Aa light-a12
Aa Aa light-a8
Aa Aa light-a0
Aa Aa dark-l5
Aa Aa dark-l4
Aa Aa dark-l3
Aa Aa dark-l2
Aa Aa dark-l1
Aa Aa dark-l0

pelorous

Aa Aa light-l0
Aa Aa light-l1
Aa Aa light-l2
Aa Aa light-l3
Aa Aa light-l4
Aa Aa light-l5
Aa Aa dark-a0
Aa Aa dark-a8
Aa Aa dark-a12
Aa Aa dark-a16
Aa Aa dark-b0
Aa Aa dark-b8
Aa Aa dark-b12
Aa Aa dark-b16
Aa Aa light-b16
Aa Aa light-b12
Aa Aa light-b8
Aa Aa light-b0
Aa Aa light-a16
Aa Aa light-a12
Aa Aa light-a8
Aa Aa light-a0
Aa Aa dark-l5
Aa Aa dark-l4
Aa Aa dark-l3
Aa Aa dark-l2
Aa Aa dark-l1
Aa Aa dark-l0

curious-blue

Aa Aa light-l0
Aa Aa light-l1
Aa Aa light-l2
Aa Aa light-l3
Aa Aa light-l4
Aa Aa light-l5
Aa Aa dark-a0
Aa Aa dark-a8
Aa Aa dark-a12
Aa Aa dark-a16
Aa Aa dark-b0
Aa Aa dark-b8
Aa Aa dark-b12
Aa Aa dark-b16
Aa Aa light-b16
Aa Aa light-b12
Aa Aa light-b8
Aa Aa light-b0
Aa Aa light-a16
Aa Aa light-a12
Aa Aa light-a8
Aa Aa light-a0
Aa Aa dark-l5
Aa Aa dark-l4
Aa Aa dark-l3
Aa Aa dark-l2
Aa Aa dark-l1
Aa Aa dark-l0

cornflower-blue

Aa Aa light-l0
Aa Aa light-l1
Aa Aa light-l2
Aa Aa light-l3
Aa Aa light-l4
Aa Aa light-l5
Aa Aa dark-a0
Aa Aa dark-a8
Aa Aa dark-a12
Aa Aa dark-a16
Aa Aa dark-b0
Aa Aa dark-b8
Aa Aa dark-b12
Aa Aa dark-b16
Aa Aa light-b16
Aa Aa light-b12
Aa Aa light-b8
Aa Aa light-b0
Aa Aa light-a16
Aa Aa light-a12
Aa Aa light-a8
Aa Aa light-a0
Aa Aa dark-l5
Aa Aa dark-l4
Aa Aa dark-l3
Aa Aa dark-l2
Aa Aa dark-l1
Aa Aa dark-l0

cobalt

Aa Aa light-l0
Aa Aa light-l1
Aa Aa light-l2
Aa Aa light-l3
Aa Aa light-l4
Aa Aa light-l5
Aa Aa dark-a0
Aa Aa dark-a8
Aa Aa dark-a12
Aa Aa dark-a16
Aa Aa dark-b0
Aa Aa dark-b8
Aa Aa dark-b12
Aa Aa dark-b16
Aa Aa light-b16
Aa Aa light-b12
Aa Aa light-b8
Aa Aa light-b0
Aa Aa light-a16
Aa Aa light-a12
Aa Aa light-a8
Aa Aa light-a0
Aa Aa dark-l5
Aa Aa dark-l4
Aa Aa dark-l3
Aa Aa dark-l2
Aa Aa dark-l1
Aa Aa dark-l0

daisy-bush

Aa Aa light-l0
Aa Aa light-l1
Aa Aa light-l2
Aa Aa light-l3
Aa Aa light-l4
Aa Aa light-l5
Aa Aa dark-a0
Aa Aa dark-a8
Aa Aa dark-a12
Aa Aa dark-a16
Aa Aa dark-b0
Aa Aa dark-b8
Aa Aa dark-b12
Aa Aa dark-b16
Aa Aa light-b16
Aa Aa light-b12
Aa Aa light-b8
Aa Aa light-b0
Aa Aa light-a16
Aa Aa light-a12
Aa Aa light-a8
Aa Aa light-a0
Aa Aa dark-l5
Aa Aa dark-l4
Aa Aa dark-l3
Aa Aa dark-l2
Aa Aa dark-l1
Aa Aa dark-l0

violet-eggplant

Aa Aa light-l0
Aa Aa light-l1
Aa Aa light-l2
Aa Aa light-l3
Aa Aa light-l4
Aa Aa light-l5
Aa Aa dark-a0
Aa Aa dark-a8
Aa Aa dark-a12
Aa Aa dark-a16
Aa Aa dark-b0
Aa Aa dark-b8
Aa Aa dark-b12
Aa Aa dark-b16
Aa Aa light-b16
Aa Aa light-b12
Aa Aa light-b8
Aa Aa light-b0
Aa Aa light-a16
Aa Aa light-a12
Aa Aa light-a8
Aa Aa light-a0
Aa Aa dark-l5
Aa Aa dark-l4
Aa Aa dark-l3
Aa Aa dark-l2
Aa Aa dark-l1
Aa Aa dark-l0