Color

Four families carry the whole system: the brand greens, four weights of text, the grounds they sit on, and the hairlines that separate them. Every value below is one the code actually defines.

Colours marked no token are used across the site but written as literals rather than defined in the theme. They are listed because they are real; naming them properly is a change worth making.

Brand

The greens the whole system is built on. Pine carries almost every piece of emphasis; mint is the accent that marks what is active, free or complete.

Pine#064438Headings, primary buttons, active navigation.text-pine / bg-pine
Pine deep#0a3d2cThe darker end of pine surfaces and shadows.bg-pine-deep
Green shade#0f7d56Links on hover, secondary green emphasis.text-green-shade / text-accent
Mint#59eaa9no tokenSection markers, the Free badge, the Most Popular chip.

Content

Four weights of text on light ground, from a heading down to a hint. Anything quieter than faint stops being readable.

Primary#2a2a2aBody copy and anything that must be read first.text-content-primary
Secondary#6d6d6dSupporting copy under a heading.text-content-secondary
Muted#8f8f8fCaptions, metadata, placeholder text.text-content-muted
Faint#cbcbcbDisabled labels and inert icons.text-content-faint
Smoke#7b7b7bLong-form paragraph copy on marketing pages.text-smoke
Mist#b0b0b0The lighter half of a two-tone headline.text-mist
Ink#171717The darkest text, used sparingly.text-ink