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.
A conventional shape, on purpose
Days 101–108 were portfolios that each argued with their own genre. Eight of those in a row is itself a house style, and this project's own divergence notes keep warning about exactly that. A landing page has a job, and a landing page that experiments with its own navigation is one that does not convert — so the shape here is a store page and the divergence comes from the section inventory instead.
The screenshots are drawn
A landing page is mostly screenshots and this game is fictional, so the four slots are SVG placeholders labelled with their ratio and the job each image has to do. That is the same call day 108 made and it is more useful here: somebody cloning this gets a brief in every slot rather than four stock photographs to delete.
Schema.org finally fits
Days 103–108 all had to settle for Person plus a Wikidata
additionalType, because schema.org models no freelance creative discipline.
This is a product, and VideoGame is a real type with a real
offers block — so the price, the platforms, the languages and the
publisher are all machine-readable rather than approximated.
Fit and support are never only a colour
The most useful section on the page is a list of reasons to skip the game, so getting that
signalling right matters more here than anywhere. Both columns are headed in words
(“Buy it if” / “Skip it if”), every row carries a glyph, and the
accessibility table prints Yes, Partial or Not yet as text via a
data-glyph ::before. --state-yes and
--state-no are separate from the accent.
The no rows stay in
Two partials and one outright no in the accessibility table. A support list with nothing but ticks tells a player who needs one of those features nothing at all, because they cannot distinguish “supported” from “never checked”.
Type
Newsreader — display
M PLUS 1 Code — 11 hours · $19 · 16:9
Body is Wix Madefor Text. The mono carries the three facts, the capsule sizes and the ratios. None of the three appears in days 1–108.
Tokens
| Swatch | Token | Value | Measured |
|---|---|---|---|
--color-bg | #0C1512 | Sea-green black | |
--color-bg-alt | #12201C | Banding | |
--color-surface | #1A2C26 | Cards, screenshot plates | |
--color-text | #EDF2EE | 16.38 / 14.84 / 12.94:1 · AAA | |
--color-text-muted | #7D948C | 5.73 / 5.19 / 4.53:1 · AA | |
--color-border | #60766F | 3.82 / 3.46 / 3.02 — non-text only | |
--color-accent | #D69729 | Hue 38 — 7.35 / 6.66 / 5.81:1 · AAA | |
--state-yes | #2CBA7F | Buy it if / supported — 7.46 / 6.75 / 5.89:1 | |
--state-no | #DE6D5C | Skip it if / not yet — 5.70 / 5.16 / 4.50:1 | |
--color-band | #EDF2EE | The band inverts: light on a dark site | |
--color-on-band | #0C1512 | 16.38:1 on band · AAA | |
--color-on-band-muted | #4D5E58 | 6.06:1 on band · AA | |
--color-accent-on-band | #90651B | 4.56: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.