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):

Semantic Aliases

Each family has five named aliases:

Surfaces

A container places its children and publishes context to them. It never styles their internals. A panel owns the grid, the gaps and the cell each card lands in. What is inside the cell is the card's business, and context reaches it as inherited custom properties, never as a selector aimed at it. panels/_panel.scss contains no .media-card or .text-card selector.

Whoever paints a background declares the surface with one of three mixins from utilities/_mixins.scss, and everything on that surface reads the published values:

// A panel publishes. It knows no card exists.
&[data-bgc=primary-dark]{ @include dark-surface(var(--primary-dark), var(--bg-primary-muted)); }
// A card reads. It knows no panel exists.
&[data-layout-style=quote]{
  @include inherit-surface(var(--surface-tint));
  .media-card__quote-rule{ background-color: var(--surface-accent); }
  .media-card__quotee-name{ color: var(--surface-ink); }
}
// A card that paints its own background republishes for its children.
&[data-layout-style=background]{ @include light-surface(var(--surface-raised, var(--bg-white))); }

A null background publishes without painting, for a surface something else paints. Text over a photo is a scrim-surface: the dark contract with --surface-headline and --text-link kept at --text-light, since white over a scrim is the design and the accent tint is for painted dark panels. The hero's background media and the image-background card both @include scrim-surface. Controls that paint themselves (inputs, the combobox listbox, pagination cells, the navigation submenu) declare light-surface(var(--bg-white)) and read --surface-ink / --text-link like anything else.

--surface-raised is the one value a container chooses: the background a nested card paints to stand off the surface (light panels alternate light and muted). It is only emitted when given. inherit-surface sets every token to inherit explicitly, so a transparent variant beats a surface declared on the same element by a lower-specificity rule.

The :root defaults make a card correct on a bare light page. A host that paints a dark page wraps the card in dark-surface; no panel CSS is needed.

Panels accept layout_background_colour with the values primary-light, primary-muted and primary-dark, matching Contentful. Each publishes its surface as above.

Size is not colour. A card that must stack when its column is narrow responds to the width of its own cell with a container query (.panel__cell is container-type: inline-size), never to the panel's column count.

Semantic Tokens

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

Backgrounds

Text

Headlines

Links

Borders

Common Fixed Colours

Business Sector Colours