Want to test these colours for contrast?

Open Colour Tool

Colours

Earl uses a hue-paired token system. Every section opts into a hue (green, pink, purple, blue) and a theme (light or dark) to compose its surface, foreground, highlight, and border.

Brand greens

The default hue. Green is home: backgrounds, surfaces, foreground text, accent, and the only hue that ships out of the box without an opt-in.

Earl Green
Primary brand surface, sidebar, cards. Token --earl-green
Earl Green Deep
Page background, deepest surface. Token --earl-green-deep
Earl Lime
Primary accent, CTAs, highlights, logo. Token --earl-lime
Earl Cream
Foreground text on green. Token --earl-cream

Neutrals

Used for type on light surfaces, print, and any context where the green palette would read too coloured.

Earl Black
Type on light surfaces, print. Token --earl-black

Pink hue

Used by the What we do section. Apply with data-hue="pink" on the section root, then set data-theme="light" or "dark".

Pink Dark
Dark surface. Token --pink-bg-d
Pink
Accent and highlight. Token --pink-hi-d
Pink Light
Light surface and foreground. Token --pink-bg-l

Purple hue

Used by the About section. Apply with data-hue="purple".

Purple Dark
Dark surface. Token --purple-bg-d
Purple
Accent and highlight. Token --purple-hi-d
Purple Light
Light surface and foreground. Token --purple-bg-l

Blue hue

Used by the Start / CTA banner. Apply with data-hue="blue".

Blue Dark
Dark surface. Token --blue-bg-d
Blue
Accent and highlight. Token --blue-hi-d
Blue Light
Light surface and foreground. Token --blue-bg-l

News category accents

Single colours used to tag news cards by category. They draw from the hue palettes above so they sit correctly on any surface.

PR
--cat-pr
Sport
--cat-sport
AI
--cat-ai
Company
--cat-company
Financial
--cat-financial