Reference
Design system
Every ratio was computed with tools/a11y/contrast.py against all three grounds.
This page is noindex: it documents the template for whoever builds with it.
One set of coordinates, six drawings
The body, fins, gill and eye are five constants in the page frontmatter, and every one of the six plates draws from them. What differs is stroke weight, colour count and which parts are present — which is exactly what differs between the six real outputs. If the drawings were six independent SVGs the page would be making a claim it could not support.
The bridge in the vinyl plate is the whole point
The eye is a counter, so in the single-path version it is joined to the outside edge by a bar. Without it the shape falls out of the sheet when the cut is weeded, and a cutter will cheerfully produce that result. It is a drawing decision made for a production reason, which is the argument of the page in one detail.
The second ink is an ink
--ink-red appears in exactly one place: the risograph plate, where it is one
of the two colours the drawing is genuinely separated into, offset from the teal by five
units to show the misregistration the drawing is built to absorb. It is not used as a
decorative accent anywhere else on the page.
Six artworks, not one with six media
Schema has artMedium on VisualArtwork, and the tempting shape is
one work carrying a list of six. That would contradict the page: the medium is not a
property of the drawing, it is the thing that decides what the drawing is. So the graph
emits six VisualArtworks in one
CreativeWorkSeries, each with only the medium it was drawn for. More verbose,
and true. No image, because the drawings are SVG in the page rather than
files.
Type
Halant — display
Roboto Condensed — 0.4 pt · ±1 mm · 2 px · 4 mm
Body is the system stack. Every physical constraint on the page is set in the condensed face so a measurement reads as a measurement rather than as emphasis. Neither appears in days 1–125.
Tokens
| Swatch | Token | Value | Measured |
|---|---|---|---|
--color-bg | #F7EBE3 | Warm paper — the first light ground here with a hue in it | |
--color-bg-alt | #EEDCD0 | Banding | |
--color-surface | #FDF6F1 | Plate cards | |
--color-text | #241A16 | 14.54 / 12.79 / 15.90:1 · AAA | |
--color-text-muted | #5F5049 | 6.57 / 5.78 / 7.19:1 · AA | |
--color-border | #8D7A71 | 3.48 / 3.06 / 3.81 — non-text only | |
--color-accent | #0C6367 | Petrol — 5.99 / 5.27 / 6.55:1 · AA | |
--ink-red | #B32F26 | The second riso ink — 5.36 / 4.71 / 5.86:1 · AA | |
--color-band | #241A16 | The band inverts: ink on warm paper | |
--color-on-band | #F7EBE3 | 14.54:1 on band · AAA | |
--color-on-band-muted | #A8968D | 6.00:1 on band · AA | |
--color-accent-on-band | #5FD6D9 | 9.81:1 on band · AAA |
The border token clears 3:1 against all three grounds, which is what WCAG 1.4.11 asks of a non-text boundary. It is never used for text.