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.

The outcome is a word, then a glyph, then a colour

Forty-one rows whose entire content is Selected / Declined / No reply / Withdrawn. Each one is spelled out, preceded by its own glyph via a ::before on a data-glyph attribute, and only then tinted. Three separate outcome tokens exist rather than one accent, because on a page about outcomes “selected” must not be the same colour as a heading — and none of the three is the accent.

The ledger is a list, not a table

A table invites you to compare columns. Nobody compares festivals; you read down the outcome column and count. An ordered list with a fixed grid does that, numbers itself (so deleting a row cannot strand a hand-typed index), and collapses to a readable stack on a phone instead of into a horizontal scroll box. Day 102 needed a table and this does not — the shape of the data decided it, not the house style.

Every number is summed

41 submissions, 6 selections, the fee total, the acceptance rate and both budget totals are all computed from the two arrays in config.ts. The budget section shows two different totals on purpose — with and without entry fees — and hard-coding either of them is how a headline stops matching its own table three edits later.

The festivals are invented, deliberately

The shape of the record is the true part. Publishing a fabricated rejection record against forty-one named real festivals would be defamatory rather than honest, so every name is fictional and the page says so twice — once in the FAQ and once in the footer. Anyone cloning this template is inheriting that constraint along with the layout.

Two stills, not four

Two of the four films have a frame and the page says which and why. A four-up grid with two weak entries would have been the portfolio arguing against its own copy on the way past, which is the same reason day 101 has no gallery.

Type

Tokens

--color-bg

#F9F6F2

Warm bone paper

--color-bg-alt

#EDE7DF

Banding

--color-surface

#FFFFFF

Cards

--color-text

#1A1512

16.80 / 14.74 / 18.10:1 · AAA

--color-text-muted

#70665C

5.21 / 4.57 / 5.61:1 · AA

--color-border

#918273

3.45 / 3.03 / 3.72 — non-text only

--color-accent

#A52790

Hue 310 — 5.92 / 5.19 / 6.38:1 · AA

--outcome-yes

#1F6B33

Selected — 6.07 / 5.33 / 6.54:1

--outcome-no

#B24434

Declined — 5.17 / 4.54 / 5.57:1

--outcome-nil

#70665C

No reply — 5.21 / 4.57 / 5.61:1

--color-band

#1A1512

Inverted band

--color-on-band

#F9F6F2

16.80:1 on band · AAA

--color-on-band-muted

#ACA195

7.14:1 on band · AAA

--color-accent-on-band

#E17FD1

7.03: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.