Palette

Every colour in the site and what each one is for. All of it is defined in src/styles/tokens.css; nothing else picks a colour. Module accents are computed from the part in src/lib/hues.ts. Swatches are painted with the tokens themselves, so this board cannot drift from the stylesheet.

Structure: what you can act on

The burgundy family, and nothing else uses it.

• --primary buttons, radio and checkbox marks
• --primary-text links, and hover text on plain surfaces
• --primary-hover a link or button under the cursor
• --primary-ring focus rings, hovered borders, the language slider
• --primary-soft chip fills, focus glow, the open teach term
• --primary-underline the rule under a prose link

Blocks: the closed box canon

One green-to-blue idea, 20 dE2000 apart at the closest.

• --key-points Key points, at the top of every page
• --definition Definition, the main mention of a term
• --callout Callout: notes, caveats, practical advice
• --going-further Going further, and Try it
• --evaluation Evaluation, on class pages

Syntax: code blocks and the figures that show code

Shiki writes these into inline styles at build time (astro.config.mjs reads them back out of tokens.css), and the SVG figures carry the same values.

• --syntax-name element and tag names
• --syntax-attribute attribute names
• --syntax-value attribute values, strings, numbers
• --syntax-punctuation angle brackets, slashes, quotes
• --syntax-keyword keywords, in languages that have them
• --syntax-comment comments

States: how an answer stands

More saturated than the boxes, so they read as signals. Always labelled in words too.

• --state-ok a correct answer, a finished exercise
• --state-partial a partly correct answer, an attempt
• --state-wrong a wrong answer, an invalid pattern

Hues: the structure palette

Five, one per part plus the near-neutral for what sits outside them. The plain hue is never painted on anything: it is the base every module's shade is mixed from, and the chips on /resources/ use it unshaded. Admin surfaces have no colour of their own: Todo markers, /todo/ chips and the teach view all use the burgundy.

• --hue-petrol part: Foundations & classical NLP
• --hue-terracotta /resources/ level: Technical
• --hue-teal part: Translation technology · /resources/ level: Accessible
• --hue-indigo part: Large language models · /resources/ level: Intermediate
• --hue-plum part: Evaluation & transversal skills
• --hue-stone site surfaces belonging to no module (.shell-reference)

Modules: hue from the part, shade from the position in it

The five boxes, as they render