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--earl-green-deep--earl-lime--earl-cream--earl-fg-light--earl-moss--earl-borderPink 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-bg-d--pink-bg-l--pink-fg-d--pink-fg-l--pink-hi-d--pink-hi-l--pink-bd-dPurple hue
Used by the About section. Apply with data-hue="purple".
--purple-bg-d--purple-bg-l--purple-fg-d--purple-fg-l--purple-hi-d--purple-hi-l--purple-bd-dBlue hue
Used by the Start / CTA banner. Apply with data-hue="blue".
--blue-bg-d--blue-bg-l--blue-fg-d--blue-fg-l--blue-hi-d--blue-hi-l--blue-bd-dNews 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.
--cat-pr--cat-sport--cat-ai--cat-company--cat-financialHue + theme in practice
Hues compose two layers. data-hue sets the palette, data-theme picks light or dark within that palette. Drop both attributes on the section root and use the paired tokens (--c-bg, --c-fg, --c-hi, --c-sub, --c-bd) inside.