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.
Amber means a dimension, and nothing else does
The accent is reserved for a measured number and a door opening — on the plan, in the tables, in the load-in list. No heading, link, button or border takes it. That restriction is the whole reason a dimension is legible at a glance in a drawing that also contains room names, walls and people.
One scale for every drawing
Thirteen pixels to the foot, set once and used by the floor plan and all three fit
diagrams, so the live room is literally the same size in four places. A drawing that
quietly rescales itself to fill its box is worse than no drawing, because it still looks
like evidence. Every geometry on the page is computed from the measurements in
config.ts, so the plan cannot disagree with the table beside it.
Fits, tight, does not fit — three signals deep
The word first, then a glyph through data-glyph and a ::before,
then the hue. Turn the colour off and the table still reads; turn the CSS off entirely and
the word is still the first thing in the cell. The choir diagram makes the same point
geometrically, by drawing the back row through the wall.
The drawings are aria-hidden on purpose
Every dimension inside a figure is also in the table or list next to it, so the SVG is a restatement for people who read plans rather than the only copy of a fact. An SVG carrying a number nothing else carries is an accessibility problem dressed up as a feature.
The markup declines two conventional properties
A LocalBusiness with floorSize,
maximumAttendeeCapacity and an amenityFeature per room and per
measurement — and deliberately no priceRange and no
aggregateRating. A vague "$$" band would make the
machine-readable version less precise than a page publishing four exact prices, and one
quoted client is not a star rating. Seventh day running that the structured data says less
than the page.
Type
Gabarito — display
Monaspace Neon — 24 × 19 ft · 58 in · 19 dBA
Body is the system stack. Every dimension on the page and inside every drawing is set in Monaspace Neon, so a number in the plan and the same number in the table are visibly the same number. Neither face appears in days 1–118.
Tokens
| Swatch | Token | Value | Measured |
|---|---|---|---|
--color-bg | #121629 | Blueprint navy — reads as ink, not as neutral | |
--color-bg-alt | #171C33 | Banding | |
--color-surface | #1D2340 | Cards | |
--color-text | #E8EBF2 | 15.01 / 14.07 / 12.88:1 · AAA | |
--color-text-muted | #8F97B4 | 6.19 / 5.80 / 5.31:1 · AA | |
--color-border | #656D99 | 3.58 / 3.36 / 3.07 — non-text only | |
--color-accent | #F2A93B | A dimension line — 8.97 / 8.41 / 7.69:1 · AAA | |
--color-nofit | #FF8A6B | Does not fit — 7.76 / 7.28 / 6.66:1 · AAA | |
--color-band | #E8EBF2 | The band inverts: light on a dark site | |
--color-on-band | #121629 | 15.01:1 on band · AAA | |
--color-on-band-muted | #4B5372 | 6.33:1 on band · AA | |
--color-accent-on-band | #8A4B06 | 5.70: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.