Foundations
Colour
Eleven semantic tokens, six themes. Every colour on the site is one of these custom properties, never a literal, and every text pairing reaches WCAG AAA (7:1) in every theme. The values below are read live from styles.css.
Tokens by theme
Light, Chalk and Sand are light; Dark, Night and Petrol are dark. With no choice saved, the site follows the system: Light or Dark. A theme is a token block keyed by a bare [data-theme] selector, so any element can carry one: each column below does.
| Token and role | Light | Chalk | Sand | Dark | Night | Petrol |
|---|---|---|---|---|---|---|
--redPrimary block: the hero, 03, accents. Text on it: --on-color | | | | | | |
--yellowPrimary block: the menu bar, 02. Text on it: --black, in every theme | | | | | | |
--bluePrimary block: 01, accents. Text on it: --on-color | | | | | | |
--blackThe grid lines: the page background the panels sit on. The same in every theme | | | | | | |
--paperNeutral panels; illustration fill on paper | | | | | | |
--grey-aaaSection 04; its illustration fill. Text on it: --on-color | | | | | | |
--inkText on paper; links | | | | | | |
--mutedSecondary text on paper | | | | | | |
--on-colorText on red, blue and grey | | | | | | |
--link-hoverLink hover on paper | | | | | | |
--grid-lineThe blueprint grid of the intro and the curtain; De Stijl's hairlines | | | | | | |
Contrast
Every pairing the site uses, measured here with the WCAG formula. Anything under 7:1 would be flagged.
| Pairing | Light | Chalk | Sand | Dark | Night | Petrol |
|---|---|---|---|---|---|---|
Ink on paper--ink on --paper | Aa | Aa | Aa | Aa | Aa | Aa |
Muted on paper--muted on --paper | Aa | Aa | Aa | Aa | Aa | Aa |
Link hover on paper--link-hover on --paper | Aa | Aa | Aa | Aa | Aa | Aa |
On-color on red--on-color on --red | Aa | Aa | Aa | Aa | Aa | Aa |
On-color on blue--on-color on --blue | Aa | Aa | Aa | Aa | Aa | Aa |
On-color on grey--on-color on --grey-aaa | Aa | Aa | Aa | Aa | Aa | Aa |
Black on yellow--black on --yellow | Aa | Aa | Aa | Aa | Aa | Aa |
Using colour
- A panel gets its colour from one class,
bg-red,bg-blue,bg-yellow,bg-paperorbg-grey, which sets the background and the text colour that passes on it. - White (
--on-color) on red, blue and grey;--blackon yellow;--inkon paper. - Primaries appear only as solid blocks or small accents: no gradients, tints, shadows or transparency on a colour block.
- SVG shapes can’t read custom properties from attributes: filled shapes get
class="solid"and their fill from CSS. - A new colour needs a value in every theme, contrast-checked to 7:1, and a row in this table.
<div class="bg-blue" data-cell="sec01-panel">…</div>
.bg-blue { background: var(--blue); color: var(--on-color); }