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.

Zero photographs, deliberately

There is no photograph of motion design. Days 101–103 each earned their images by having something a photograph could prove; this one does not, and a grid of stock laptops-and-coffee would be the page arguing against its own copy on the way past. The FAQ says so out loud rather than leaving the absence to be noticed. Everything visual here is drawn: the curve, the frame ruler, the favicon and the OG image.

This one IS a table

Day 103's ledger was a list because nobody compares festivals — you read down one column and count. This is a table because comparing rows is the entire point: the same sentence, six times, at six prices. The shape of the data decides the element, and answering that question fresh each day is the only thing keeping these templates apart.

The curve is drawn from the table

The step chart reads the same array the table renders, on a log scale — linear would flatten the first four stages against 48 and hide the only part of the curve a client can still act on. It is aria-hidden because the table beside it is the complete text equivalent, and the caption states the scale so nobody reads a log chart as a linear one.

Cost state is never only a colour

Every stage carries its hour count as a number and the words “Still open”, “Closing” or “Already paid for” in a bordered chip. The two cost tokens are the third signal and neither of them is the accent, because on a page about what a change costs, “expensive” must not be the same colour as a link.

Type

Tokens

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.