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 tones for backgrounds, surfaces, and dividers. These never carry brand meaning — they provide depth and structure.

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.

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 —

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.