Reference
Design system
Every ratio was computed with tools/a11y/contrast.py against all three grounds,
not just the first one. This page is noindex: it documents the template for
whoever builds with it.
Waiting is hatched, not just coloured
The whole calendar rests on one distinction: which phases are us working and which are us waiting. So the waiting bars carry a 45° hatch, an outline, and the word “Waiting” in the row heading. Any one of the three would carry it alone. On a section whose entire argument is a difference between two kinds of row, encoding that difference in hue would have been the worst possible place to do it.
The chart is a table
Phase, who, days, bar — four columns, and the bar is a cell whose inner span is sized
in percent. With CSS off every row still reads as a sentence and nothing needs an
aria-label describing a picture. A bar chart that needs a text alternative is
usually a table that was drawn instead of marked up.
One photograph, twice
The reframe pair is the same file at 16:9 and centre-cropped to 9:16, and it is the only
argument on the page a table cannot make. The cropped copy is
alt="" and aria-hidden: it is the identical image, and announcing
it twice would tell a screen-reader user there are two photographs when there is one. The
caption carries the point in text.
Required is red, not green
--color-required is its own token rather than the accent, because on a page
where green means “we are working” a green asterisk would read as
“fine”. It clears 8.66:1 on the ground, and the asterisk is never the only
signal — every required field also carries the attribute.
Nothing here is day 101
Yesterday was a blue-black night grade built on definition lists, figures and an SVG diagram. This is a light page built on tables, articles and blockquotes. The roadmap line for today said “reel-led, services, packages”, which is what day 101 already refused to be — repeating that refusal would have produced a re-skin. The divergence had to be structural, not chromatic.
Type
Bricolage Grotesque — display
Red Hat Mono — 28d · 11d · 9:16 · 22 hrs
Day counts, ratios and edit hours run in columns that have to align, so the mono face is load-bearing. Body is Red Hat Text. None of the three appears in days 1–101.
Tokens
| Swatch | Token | Value | Measured |
|---|---|---|---|
--color-bg | #F4F7F3 | Cool paper | |
--color-bg-alt | #E6EBE3 | Banding | |
--color-surface | #FFFFFF | Cards, round panels | |
--color-text | #12180F | 16.72 / 14.92 / 18.05:1 · AAA | |
--color-text-muted | #4C5647 | 7.12 / 6.36 / 7.69:1 · AAA | |
--color-border | #778B79 | 3.38 / 3.02 / 3.65 — non-text only | |
--color-accent | #177A24 | Hue 128 — 5.06 / 4.51 / 5.46:1 · AA | |
--color-required | #8A1B12 | 8.66 / 7.73 / 9.35:1 — deliberately not the accent | |
--color-band | #101610 | Inverted band | |
--color-on-band | #F4F7F3 | 16.99:1 on band · AAA | |
--color-on-band-muted | #9BAE9D | 7.81:1 on band · AAA | |
--color-accent-on-band | #39C64C | 8.18: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.