Colours

Brand, primary, secondary, semantic, and foreground palettes. Toggle dark mode in the sidebar to preview dark variants.

Brand palette

Core brand colours used for buttons, links, active states, and accents.

brand-softer

#f4f7f5

brand-soft

#e8efe9

brand-medium

#d1dfd3

brand

#5E9268

brand-strong

#4D7D55

brand-light

#6B8E73

Primary palette

Green palette used for primary UI elements, from lightest to darkest.

#f4f7f5

100

#e8efe9

200

#d1dfd3

300

#a9c4af

400

#89ab8f

500

#5E9268

600

#4D7D55

700

#475b4a

800

#3c4c3e

900

#333f35

Secondary palette

Dark blue palette used for secondary UI elements and foreground text.

100

#e6ecf0

200

#c8d6de

300

#7aa0b8

500

#3a6178

600

#2d4a5e

700

#213745

800

#1a2d3a

900

#14242e

Semantic colours

Status colours communicated via the koala-badge tag helper.

Success (emerald) Warning (amber) Danger (red) Info (blue) Neutral (gray)

<span koala-badge="Success">Success (emerald)</span>
<span koala-badge="Warning">Warning (amber)</span>
<span koala-badge="Danger">Danger (red)</span>
<span koala-badge="Info">Info (blue)</span>
<span koala-badge="Neutral">Neutral (gray)</span>

Foreground brand

Text colours derived from the secondary palette, used for links, labels, and headings.

fg-brand-subtle — The quick brown fox jumps over the lazy dog

#7aa0b8 · text-fg-brand-subtle

fg-brand — The quick brown fox jumps over the lazy dog

#357089 · text-fg-brand

fg-brand-strong — The quick brown fox jumps over the lazy dog

#213745 · text-fg-brand-strong

<p class="text-fg-brand-subtle">Subtle foreground text</p>
<p class="text-fg-brand">Default foreground brand text</p>
<p class="text-fg-brand-strong">Strong foreground brand text</p>

Toggle the dark mode switch in the sidebar to preview how all colours adapt. Brand colours shift to work on dark backgrounds, and foreground brand colours adjust for contrast.