Colour Tokens
The colour foundation of the site lives in the active Skin (/admin/appearance/skins): the brand colours, the six surfaces, the functional colours (success, error, warning, info), the gradient palette and the radius ladder. Components reference these tokens, so the site stays consistent — when a token changes, everything follows.
Live Example
Surfaces
Turquoise Light
--surface-primary-light
Cards or content that is highlighted as more important, such as active element in the menu.
Turquoise Soft
--surface-primary
Headers of content accordions (e.g. Main Course Topics on the Lecturing page).
Turquoise Strong
--surface-primary-strong
Navigation between different pages (e.g. page navigation pills). Also the default for list markers.
Pink Soft
--surface-second
Action-related page components, such as topic grid containers.
Pink Strong
--surface-second-strong
Frames of section headers and list bullets.
Surface Third
--surface-third
Navigation on pages, such as accordion tabs and pill buttons linking to content on the same page.
Links
Link, hover, active and visited colours are Skin tokens as well — a sample link.
Surface on any container
<div class="basic-card surface-primary-light">…</div>Gradient background on any container
<div class="topics-grid-container gradient-10">…</div>Coloured logo-grid lines
<div class="logo-grid-container logo-grid-lines-preussen">…</div>