Design Devtools

Type elements

h0 Design Helper

h1 Design Helper

h2 Design Helper

h3 Design Helper

h4 Design Helper

p Design Helper

Site fonts

Hanken Grotesk (UI & display sans-serif)

Castoro (display serif)

Cascadia Code (code)

Inter (fallback)

Colours

Brand colours

brand (Testificate Teal)

brand-alt (Magernta)

Theme colours

ui-background

ui-background-hover

ui-background-active

ui-background-2

ui-background-2-hover

ui-background-2-active

ui-border

ui-text

ui-text-primary

Key colours

key-clay key-red

key-marigold key-orange

key-sulphur key-yellow

key-avocado key-green

key-ocean key-blue

key-hyacinth key-purple

key-yoghurt key-pink

key-chocolate key-brown

Accent alias colours

ui-accent-error key-clay

ui-accent-warning key-sulphur

ui-accent-success key-avocado

ui-accent-information brand

ui-accent-focussed brand-alt

Mattepanel Modal