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.

This one is a dl, and that is the point

Days 104 and 105 both used tables, because comparing rows was the argument in each. Here it is not: you never hold stage two's “judge this” up against stage four's. You read one stage, act, and come back. That is a definition list — a term and its definitions — and choosing the element from the shape of the data rather than from the house style is most of what keeps six consecutive templates in one sprint apart.

Two states, three signals

The whole content of the spine is “judge this now” versus “not yet”, so encoding it in hue would have been the worst possible decision. Each permission carries its label as text, a glyph via a data-glyph ::before, and a border on the correct side — and only then a colour. --note-now and --note-not are their own tokens; neither is the accent.

One picture, and it earns its place

Thirteen marks in two rows, same count and same distance, spaced evenly and then eased. It is the only idea in animation a still image can honestly demonstrate, which is exactly why it is the only image on a page arguing that stills mislead. The SVG is aria-hidden and the caption carries the comparison in full text, naming which row is which rather than relying on position or colour.

The arithmetic is shown, not asserted

Five lines, one multiplication each, ending at five weeks. A number handed over is an assertion; a number arrived at is an argument, and the last row of the list is styled heavier for the same reason a total rule is heavier on paper.

Type

Tokens

--color-bg

#16180F

Olive-black

--color-bg-alt

#1D2014

Banding

--color-surface

#262A19

Cards, the spacing plate

--color-text

#F0F2E6

15.83 / 14.62 / 12.99:1 · AAA

--color-text-muted

#8D9274

5.54 / 5.12 / 4.55:1 · AA

--color-border

#70735E

3.67 / 3.39 / 3.01 — non-text only

--color-accent

#AAC520

Hue 70 — 9.15 / 8.45 / 7.51:1 · AAA

--note-now

#3F95D2

Judge this now — 5.50 / 5.08 / 4.51:1

--note-not

#E06E3E

Not yet — 5.52 / 5.10 / 4.53:1

--color-band

#F0F2E6

The band inverts: light on a dark site

--color-on-band

#16180F

15.83:1 on band · AAA

--color-on-band-muted

#585B48

6.17:1 on band · AA

--color-accent-on-band

#5C6B11

5.20:1 on band · AA

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.