GLL Component Library

Colour System

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-dark
  • secondary-light, secondary-dark
  • accent-light, accent-dark
  • mono-light, mono-dark

Text and link colours automatically adapt to maintain contrast on each background.

Semantic Tokens

/* Backgrounds */
--bg-primary-dark, --bg-primary-light, --bg-primary-muted
--bg-mono-light, --bg-white, --bg-disabled
/* Text */
--text-dark, --text-light, --text-primary
--text-accent, --text-link, --text-disabled
/* Borders */
--border-primary-dark, --border-primary-medium
--border-accent-dark, --border-mono-dark