Colour System

The palette is built on CSS custom properties, configured per-site via the PaletteComponent and the initializer's configure_palette block.

Colour Families

Four families, each with tones from 10 (lightest) to 90 (darkest):

Family	Variables	Usage
Primary	--primary-10 to --primary-90	Brand colour, main CTAs, navigation
Secondary	--secondary-10 to --secondary-90	Supporting elements, alternate sections
Accent	--accent-10 to --accent-90	Highlights, alerts, accent buttons
Mono	--mono-0 to --mono-100	Text, borders, neutral backgrounds

Semantic Aliases

Each family has five named aliases:

Alias	Tone	Example
light	10	--primary-light
muted	20	--primary-muted
medium	40	--primary-medium
vibrant	70	--primary-vibrant
dark	90	--primary-dark

Panel Backgrounds

Panels accept a layout_background_colour parameter. Available values:

• primary-light
• primary-muted
• primary-dark

These match the options exposed in Contentful. Text and link colours automatically adapt to maintain contrast on each background.

Semantic Tokens

Always use semantic tokens — never raw palette variables or hex values. Defined in styles/_colours.scss.

Backgrounds

Token	Value	Use for
--bg-primary-light	--primary-10	Light tinted panel/card background
--bg-primary-muted	--primary-20	Muted tinted background
--bg-primary-dark	--primary-90	Dark primary background
--bg-mono-light	--mono-10	Light grey background
--bg-white	--mono-0	White background
--bg-disabled	--primary-20	Disabled state background

Text

Token	Value	Use for
--text-dark	--mono-90	Body text on light backgrounds
--text-light	--mono-0	Body text on dark backgrounds
--text-primary	--primary-90	Primary brand text
--text-accent	--accent-90	Accent-coloured text
--text-link	--link-dark	Default link colour
--text-disabled	--mono-40	Disabled text
--text-watermark	--mono-40	De-emphasised text

Headlines

Token	Value	Use for
--headline-dark	--secondary-90	Headings on light backgrounds
--headline-light	--accent-10	Headings on dark backgrounds

Links

Token	Value	Use for
--link-dark	--primary-90	Links on light backgrounds (aliased as --text-link)
--link-light	--accent-10	Links on dark backgrounds

Borders

Token	Value	Use for
--border-mono-medium	--mono-40	Standard card/component border (@include card)
--border-mono-dark	--mono-90	Strong mono border
--border-primary-dark	--primary-90	Primary dark border
--border-primary-medium	--primary-40	Primary medium border
--border-accent-dark	--accent-90	Accent dark border
--border-accent-medium	--accent-40	Accent medium border

Common Fixed Colours

Token	Value
--common-white	--mono-0
--common-black	--mono-100

Business Sector Colours

Token	Sector
--leisure	Leisure
--libraries	Libraries
--gsf	Sport (GSF)
--spaexp	Spa
--boxoffice	Box Office