03 — Colour Palette

Colour Palette

Six named brand colours. Green Black and Lime carry the digital product. Neon Green and Neon Yellow are identity accents — vivid, purposeful, and used sparingly.

Brand Palette

Six named brand colours. Green Black and Lime are the primary UI workhorses. Neon Green and Neon Yellow are identity and marketing accents — use with restraint in digital UI.

Green Black

HEX #021300
RGB2, 19, 0

Primary text, borders, button backgrounds, nav, headings. The backbone of the entire visual system.

Neon Green

HEX #0FED27
RGB15, 237, 39

Brand accent in logo and identity. Not for UI text or backgrounds — identity use only.

Neon Yellow

HEX #D5FF00
RGB213, 255, 0

Brand accent. Reserved for high-impact marketing and identity moments only.

Kale

HEX #0E491F
RGB14, 73, 31

Deep hover and active press states. Adds depth when layered under Lime on interaction.

Lime

HEX #0AAD0A
RGB10, 173, 10

Hover states, active accents, CTA button hover, active nav links, focus rings. Used sparingly — action only.

Just White

HEX #FFFFFF
RGB255, 255, 255

Primary page background, card backgrounds, button text on dark fills.

Structural Colours

Neutral and functional tones for backgrounds, surfaces, dividers, and notification states. These provide depth and structure rather than brand expression.

Surface

HEX #F9FAFB
RGB249, 250, 251

Subtle section backgrounds, search result panels, filter dropdowns.

Border Light

HEX #E5E7EB
RGB229, 231, 235

Dividers, structural borders, non-featured card outlines.

Notification Green

HEX #EDFEED
RGB237, 254, 237
Border #0AAD0A

Background for notification and confirmation elements — success banners, inline alerts. Always paired with a 1px #0AAD0A border.

Colour Application Rules

How to use the palette correctly in practice.

ContextColourWeight
Headings (H1–H6) #021300 800 / 700
Body copy #021300 400
Subtext / descriptions #021300 300
Metadata, dates, captions #021300 300
Links at rest #021300 inherited
Links on hover #0AAD0A inherited
Active nav link #0AAD0A 600
Primary button background #021300 —
Primary button hover #0AAD0A —
Card borders #021300 2px solid
Card hover border #0AAD0A —
Dividers #E5E7EB —
Page background #FFFFFF —
Subtle surface #F9FAFB —
Notification background #EDFEED —
Notification border #0AAD0A 1px solid

Colour Do / Don't

The most common colour mistakes to avoid.

✓ Do

This is subtext using #021300 at weight 300.

Use #021300 at weight 300 for subtext. The lightness comes from the weight, not the colour.

✗ Don't

This is subtext using Tailwind gray-700.

Never use Tailwind greys (#374151, #6B7280) for text. They are off-brand.

✓ Do
Link at rest Link on hover

Links are dark at rest, green on hover. Green signals action, not default state.

✗ Don't
Link that is green by default

Never use green as a default link or text colour. It is reserved for interactive states only.