Reference
Design system
This page is noindex: it documents the template for whoever builds with it. Every contrast
ratio below was computed against the WCAG relative-luminance formula (tools/a11y/contrast.py)
before shipping, not eyeballed.
The palette, measured
RESEARCH.md names proscenium fuchsia #EE2BEE — HSL(300°, 85%, 55%) — pulled from magenta
stage-gel cross-lighting, and states four ratios against the black-box ground #0B0B0D: cream
text at 17.1:1, fuchsia text/rules at 5.8:1, rigging-iron grey at 5.6:1, and black text on a fuchsia
button fill at 5.8:1 (white on the same fill measures only 2.9:1 and fails). Measured independently with
tools/a11y/contrast.py, the figures come out at 17.14:1,
5.82:1, 5.64:1 and
5.82:1 respectively — all within rounding of RESEARCH.md’s own
figures, no correction needed. The footer band inverts to a light playbill-cream background (the day-101
cinematographer-portfolio pattern, not this batch’s default): on that light band, the raw accent measures
under AA, so --color-accent-on-band is a darkened same-hue fuchsia (#A90EA9,
5.51:1) and --color-on-band-muted is a darkened same-hue grey (#605E65, 5.57:1).
Typography
Display: Big Shoulders Display — a condensed grotesque
with the tall, narrow proportions of Victorian wood-type show-bill lettering. Text:
Source Serif 4 — a plain, readable text serif for
programme-note prose and the about copy. No monospace face this batch: the get-in dimensions, model-box
scale figures and schedule tables use Source Serif 4 with
font-variant-numeric: tabular-nums lining-nums (the .fig and .v
classes), so columns of numbers still align without a third font package. Two font packages only —
this batch’s revised brief (2026-09-16) reserves monospace for days 136 and 140.
Schema.org — settled and withheld
Person for Elspeth Osei, with memberOf the Society of British Theatre
Designers (real, cited). TheaterEvent for each of the six named PAST productions —
startDate, endDate, location and director are settled,
already-happened facts. No offers/ticket price on any of them: this designer’s own site
does not sell tickets, the receiving venue’s box office does, and asserting an Offer here
would assert a sale that never happens on this page. TheaterEvent markup is deliberately
withheld from the one currently in-development,
not-yet-announced production named in "About" — its dates are not settled by the producing theatre
yet, so it stays in prose only. Also withheld: aggregateRating (no review aggregator) and
Product/Offer anywhere on the page — nothing here is a purchasable good, the
fresh-type decision for this day, distinct from the recent ledger’s Product+Offer days. No
Organization schema either: Elspeth is a freelance sole practitioner, not a named studio
brand.
One module, read by every surface that shows its numbers
src/lib/scale.ts's modelToBuiltCm()/modelToBuiltM() is the only
place a model-box measurement is converted to a built dimension — the "Model to stage" table and the
scale-bar diagram both read it, so the two can never quietly disagree. src/lib/sightline.ts's
sightlineClearanceMm() is the only place a C-value is computed — the "Sightlines" prose
and its diagram both read the same function against the same worked-example parameters.
A figure corrected from the brief
RESEARCH.md's first draft cited a target sightline C-value convention without stating a source figure
precisely; UK theatre-consultant literature (see RESEARCH.md, Sources) is commonly summarised as treating
figures around 60 mm as a practical working
minimum rather than a single codified number, so this page states it hedged
("commonly treats") rather than as a single hard rule — see src/lib/sightline.ts,
PRACTICAL_MINIMUM_MM.
Tokens
| Token | Value | Note |
|---|---|---|
| --color-bg | #0B0B0D | Black-box black — the matte black paint/masking of a studio theatre, not a pure #000 |
| --color-bg-alt | #131316 | Banding |
| --color-surface | #17171B | Cards, tables, figures — 15.58:1 for cream text |
| --color-text | #F2EFE9 | Playbill cream — 17.14:1 on ground · AAA |
| --color-text-muted | #8B8890 | Rigging-iron grey — 5.64:1 on ground · AA |
| --color-border | #2E2D31 | Non-text only |
| --color-accent | #EE2BEE | Proscenium fuchsia — 5.82:1 on ground · AA, text-safe on this dark ground |
| --color-on-accent | #0B0B0D | 5.82:1 on accent fill · AA — the primary-button pair; white-on-fuchsia measures only ~3.4:1 and is never used |
| --color-band | #F2EFE9 | The footer inverts — a light band on the dark body, day 101’s pattern |
| --color-on-band | #0B0B0D | 17.14:1 on band · AAA |
| --color-on-band-muted | #605E65 | 5.57:1 on band · AA — same hue as rigging-iron grey, darkened for the light band |
| --color-accent-on-band | #A90EA9 | 5.51:1 on band · AA — same hue as the accent, darkened for the light band |