Colour Palette Overview
Primary
Secondary
Accent
Dark 1
Dark 2
Dark 3
Light 1
Light 2
Light 3
Primary & Secondary Colours
Primary Colour
#2F4F4F
rgba(47, 79, 79, 1)
Dark slate grey - Perfect for headers, main text, and primary brand elements.
Secondary Colour
#00FF00
rgba(0, 255, 0, 1)
Bright lime green - Use sparingly for highlights, call-to-action buttons, and attention-grabbing elements.
Accent Colour
#10B981
rgba(16, 185, 129, 1)
Emerald green - Ideal for interactive elements, links, and success states. Balances the bright secondary colour.
Dark Variants
Dark 1
#151515
rgba(21, 21, 21, 1)
Deep charcoal - Perfect for dark themes, backgrounds, and creating strong contrast with light elements.
Dark 2
#13111c
rgba(19, 17, 28, 1)
Dark purple-grey - Great for secondary backgrounds and subtle depth in dark interfaces.
Dark 3
#14142b
rgba(20, 20, 43, 1)
Dark navy - Excellent for creating sophisticated gradients and premium feel in designs.
Light Variants
Light 1 - Off White
#F7F7F7
rgba(247, 247, 247, 1)
Soft off-white - Perfect for main backgrounds, card backgrounds, and creating clean, minimal layouts.
Light 2 - White Blue
#F9F7FF
rgba(249, 247, 255, 1)
Subtle blue-tinted white - Ideal for subtle highlights, hover states, and creating visual hierarchy.
Light 3 - Yellow
#E6DBAE
rgba(230, 219, 174, 1)
Warm cream yellow - Perfect for highlights, notifications, and adding warmth to the cool colour palette.
Usage Guidelines
Headers & Navigation
Use Primary (#2F4F4F) with Light 1 (#F7F7F7) text, or Dark 1 (#151515) backgrounds with Accent (#10B981) highlights.
Call-to-Action
Secondary (#00FF00) for primary CTAs, Accent (#10B981) for secondary actions. Always ensure proper contrast.
Backgrounds
Light variants for main content areas, Dark variants for premium sections or dark mode interfaces.
Text Hierarchy
Primary (#2F4F4F) for headers, Dark variants for body text, Accent (#10B981) for links and interactive elements.