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

TokenValueNote
--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