Colour
Fairway Green and Putting Green form the primary brand language. Semantic tokens sit on top of primitives and enforce purposeful colour use across every surface.
Core Colours
The foundational brand pair. Fairway Green drives navigation and interactive controls; Putting Green is the primary action accent.
Fairway Green
The primary brand colour. Used for navigation, text links, interactive controls, and the sidebar. Use sparingly as a fill — it carries significant visual weight.
Putting Green
The interactive accent. Fill for all primary buttons and interactive controls. Always paired with dark Fairway text — see --content-on-primary.
Secondary Colours
Supporting palette for editorial, illustration, and accent use. Not used in core product UI — consult design before applying in product contexts.
Neutral Colours
Warm-tinted neutrals derived from Fairway Darkest. Used for text hierarchy, surfaces, and subtle borders.
Sentiment Colours
Three sentiment families — Negative, Positive, Warning — each with a base, light, dark, and overlay variant.
Negative
Positive
Warning
Content Colours
Token names that describe intent, not colour. Use these — not primitives — in all product UI code.
| Token | Value | Primitive | Use | |
|---|---|---|---|---|
--content-primary |
#080300 |
--color-dark-1 |
Primary body text and headings. | |
--content-secondary |
#271F19 |
--color-dark-2 |
Supporting text, subtitles, metadata. | |
--content-tertiary |
#3A342E |
--color-dark-3 |
Captions, placeholders, helper text. | |
--content-link |
#065C3E |
--color-fairway-base |
Inline hyperlinks. | |
--content-negative |
#900C12 |
--color-negative-dark |
Error and negative feedback text. | |
--content-success |
#036245 |
--color-positive-dark |
Success and positive feedback text. | |
--content-warning |
#984D08 |
--color-warning-dark |
Warning feedback text. |
On-Surface Colours
Tokens for text and icons placed on interactive surfaces — buttons, nav elements, and chips. Never use on body text or headings.
On Primary
Text on primary buttons.
On Secondary
Text on secondary buttons.
On Elevated
White text for dark and image backgrounds.
Nav
Nav link text — default state.
Nav Hover
Nav link text — hover state.
Muted
Disabled or de-emphasised text.
On Negative
On negative alert backgrounds.
Interactive Colours
Surface fills for interactive elements. Applied to button backgrounds, control fills, and hover/active states — never to text.
Action fills
Surface fills applied directly to button and control backgrounds.
| Token | Value | Primitive | |
|---|---|---|---|
--interactive-primary |
#84EDB2 |
--color-putting-base |
|
--interactive-primary-hover |
#BCF6D5 |
--color-putting-lighter |
|
--interactive-secondary |
rgba(132, 237, 178, 0.24) |
--color-putting-24 |
|
--interactive-secondary-hover |
rgba(132, 237, 178, 0.32) |
--color-putting-32 |
|
--interactive-primary-neutral |
#271F19 |
--color-dark-2 |
|
--interactive-secondary-neutral |
rgba(24, 27, 26, 0.08) |
--color-fairway-darkest-08 |
|
--interactive-secondary-neutral-hover |
rgba(24, 27, 26, 0.12) |
--color-fairway-darkest-12 |
|
--interactive-control |
#065C3E |
--color-fairway-base |
|
--interactive-contrast |
#84EDB2 |
--color-putting-base |
|
--interactive-ghost-hover |
rgba(6, 92, 62, 0.08) |
--color-fairway-base-08 |
|
--interactive-ghost-active |
rgba(6, 92, 62, 0.12) |
--color-fairway-base-12 |
|
--interactive-elevated |
#FFFFFF |
--color-white |
Sentiment backgrounds
Tinted surfaces for negative, positive, and warning alert contexts.
| Token | Value | Primitive | |
|---|---|---|---|
--interactive-bg-negative |
#FFDDDF |
--color-negative-light |
|
--interactive-bg-negative-overlay |
rgba(231, 0, 11, 0.12) |
--color-negative-overlay |
|
--interactive-bg-positive |
#D0FBE4 |
--color-positive-light |
|
--interactive-bg-positive-overlay |
rgba(0, 153, 102, 0.12) |
--color-positive-overlay |
|
--interactive-bg-warning |
#FFF9C5 |
--color-warning-light |
|
--interactive-bg-warning-overlay |
rgba(255, 185, 0, 0.12) |
--color-warning-overlay |
Background Colours
Page and surface backgrounds. Use exclusively for layout fills — never for text or interactive elements.
Screen White
Full-screen white surfaces.
Screen
App screen background. This page uses this token.
Surface Primary
Cards, sheets, modals, and elevated surfaces.
Surface Secondary
Recessed sections within a card.
Surface Tertiary
Segment controls, input fills, deep recesses.
Surface Overlay
Selected/active state tint. Applied over surfaces.
Border Colours
Four border tokens covering all product border use cases.
| Token | Value | Primitive | Use | |
|---|---|---|---|---|
|
|
--border-neutral |
rgba(8, 3, 0, 0.12) |
--color-dark-tint |
Default cards, inputs, and dividers. |
|
|
--border-overlay |
rgba(6, 92, 62, 0.12) |
--color-fairway-base-12 |
Selected and active state borders. |
--border-error |
#E7000B |
--color-negative |
Error state input borders. | |
--border-focus-ring |
#022C1F |
--color-fairway-darker |
Keyboard focus outline. |
Icon Colours
Icon fill tokens for Phosphor Icons. Always apply these — never hardcode colours on icons.
Icon Neutral
Default icon fill.
Icon Negative
Error and alert icons.
Icon Positive
Success icons.
Icon Warning
Warning icons.