The Ruled Instrument.

The design direction

The direction is named the Ruled Instrument: Swiss editorial structure — Müller-Brockmann's grid discipline, hairline rules, numbered mono sections — applied with the restraint of racing telemetry. The page is a light bone surface on which everything drawn is either information or a rule separating information. Nothing glows, nothing floats, nothing is decorated.

Why light, ruled and measured? Because the brand claim is structure. A dark neon "performance" treatment argues by atmosphere; an editorial instrument argues by evidence. The bone page reads as paper — the surface of published research, scorecards and spec sheets — and the dark graphite panels are reserved for the one place the product actually runs: the player. That inversion gives the audio a stage without letting the whole site become one.

Every signature graphic explains a real quantity. The ratio stripe is 32 units — 24 graphite, 8 lime — and wherever it appears it encodes something true: scroll progress in the header, playback progress in the player band, or simply the ratio itself in the hero and footer. The pulse ring beats at exactly 60/112 s. The tempo-grid canvas under the hero sweeps its playhead across 32 columns in two beats at 112 BPM — and when audio plays, the columns take their amplitude from the live Web Audio analyser, never from fake data. Lime is a signal, not a wash: it marks the conversion — the 8 — and active states, and it never appears as text on bone.

How it differs from variants A, B and C

The three style-test flagships predate the brand system and keep their own identities — that comparison is the point of the series. Edition A — Signal is dark instrument-panel Swiss: black, orange, a WebGL tempo pendulum. Edition B — Dusk and Edition C — Chorus test other temperatures of the same brand. This site supersedes them as the standard: default-light instead of default-dark, DIN-style condensed display instead of grotesk, lime as the single system signal, and the 24-column ruled grid with numbered sections as the family layout. Wave-2 course sites derive from THIS site: they may warm or cool the neutrals toward their landscape and add one course support color, but the 70/20/8/2 palette discipline, the mono-numbered anatomy and the 112 BPM motion clock hold everywhere.

The token system

Color is budgeted 70/20/8/2 — bone surfaces, graphite ink and panels, lime signal, orange accent. Orange is rarer than lime by design: one terminal period in the hero, one underline in the contact block, focus outlines on light surfaces. Course sites inherit these tokens and may add exactly one course-derived support color (here, the seventeen card-chip colors stand in for the seventeen course worlds).

Display

Barlow Condensed 500/600/700, uppercase, tight. It stands in for the licensed DIN Condensed of the printed style guide: the same industrial-signage DNA — tall, flat-sided, engineered — available as an open-source woff2 we can self-host and subset.

Text

Inter Variable, body 16/1.55. A neutral workhorse that stays out of the display face's way.

System

IBM Plex Mono 400/500 for every number, label, footnote and section index — 11px, uppercase, letter-spaced. Numbers always carry units: 112 BPM, 24 / 8 · 3:1.

Layout

1440 container, gutter-margined; hairline-ruled boxes carry dense information, bone whitespace carries the rest. Sections are numbered 01–06 with mono labels and drawn rules.

Lime rule

Lime appears on dark surfaces or as thick graphic cells only — never as text on bone. Orange text on bone is likewise avoided; orange is a graphic accent at display scale.

Motion rules

Motion follows rhythm — every visible pulse is derived from the 112 BPM system clock, never from an arbitrary duration. The pulse rings breathe once per beat (60/112 = 0.536 s), with amplitude scaled by the player's live RMS level while audio plays. The tempo-grid playhead crosses its 32 columns in exactly two beats — the duration of one 24/8 swing cycle. Scroll reveals are single, calm entrances: rules draw in once, numbers count up once, nothing bounces or loops for attention. There is no parallax.

prefers-reduced-motion receives a fully composed page, not a broken one: the tempo grid renders as a static annotated diagram, rings hold at rest, reveals appear without transition, and playback progress still updates its 32-cell stripe — information is kept, choreography is removed.

How it was built, and the audio pipeline

Hand-written static HTML/CSS/JS — no framework, no authoring build step; view source and it's all there. The visual world is type, SVG and canvas only: no raster images anywhere on the site. Fonts are self-hosted woff2 latin subsets from open-source families via @fontsource, restored from npm at deploy time by build.mjs. This page is the /guide route of the flagship-brand project in the series monorepo; each site deploys as its own Vercel project.

The player is the shared series core (player.js) — queue, library, Web Audio analyser, MediaSession — skinned here into the ruled instrument: squared transport, lime play block, mono labels, a 32-unit progress stripe and a course-colored SVG monogram tile generated per track. Audio streams from the shared CORS-enabled host (248-anthems-audio); its manifest.json is the single source of truth for track titles, courses, versions and sync status, with a committed fallback copy for resilience. The library table in section 03 renders that manifest directly — the counts on the page are computed from it, not typed in. No placeholder or synthetic audio exists anywhere: tracks not yet synced to the host are badged "sync pending" and skipped.

The facts rule

Only verified data is presentable as fact. Tempo claims trace to Tour Tempo (Novosel, 2004), the Grober & Cholewicki preprint (labelled a Yale physics study, not peer-reviewed), and Sommer & Rönnqvist (2009, peer-reviewed) — see the journal, where each piece carries its sources. The 112 BPM grid is presented as arithmetic, everywhere, without exception. Course locations on the cards come from the series fact files. Track data comes from the manifest.

What was deliberately omitted: the concept boards' fictional session minutes, playlist statistics, member counts and course lists; per-track BPM claims (not provided by the artist); any claim that anthems measurably lower scores; and all "system status" dashboard theater. Every number on this site is real — BPM, ratio, track counts, unit indices — or it is absent.

That rule now has its own route. Anthem Labs puts the science of the system in the reader’s hands: tap out your own tempo and watch where you land against the band human tapping actually clusters in; press play on a 24/8 swing and hear takeaway, top and impact against the 112 BPM grid; drag a control across every musical tempo and see where the beat really sits. The research sits underneath the instruments, and every caveat the brand owes anyone is collected in one condensed section at the foot of the page.

Building the evidence page

The first version of Labs led with a correction — the unit error the tempo-audio category makes when it claims a track’s BPM entrains brainwaves at 10–40 Hz — and organised everything behind it into evidence tiers. It was accurate, and it was the wrong shape: a page that opens by arguing sounds like a brand apologising for its own claims. Rigour should read as confidence.

So it was rebuilt to play first and argue last. Three instruments open the page, the research sits under them stated plainly, and every caveat, failed replication and piece of brand framing is collected into a single condensed accordion at the bottom. Nothing was deleted — the page still survives a hostile fact-check — it simply stopped being the lead.

All three instruments compute rather than illustrate. The tap pad takes the median inter-tap interval, so one stray tap doesn’t skew the reading, and places the result against the 85–120 BPM preferred-tempo band. The swing divides frames by 30fps against the beat period and schedules a metronome on the Web Audio clock — a synthesised click, never music, and the copy says so. The ruler is a true log₁₀ axis, so “every musical tempo sits far below the EEG bands” is a property of the drawing rather than a claim printed on top of it.

Nothing auto-runs, so the reduced-motion path is the same page. The tap pad is a real button, the ruler a real range input, the fine print native <details>. Everything is SVG, and the full argument — including the entire fine print — survives with JavaScript disabled.

Building the evidence page

The Labs route was built from an audit (docs/facts/neuro-audio-science.md) that graded every substantive scientific claim this brand makes into three tiers, and it publishes the grading rather than hiding it. Tier colour is load-bearing: graphite for established, orange for supported-with-limits, lime for the tier that says this part is us. A limitation is never behind a click — the one-line caveat is always visible, and only supporting detail sits inside a native disclosure.

Both instruments draw real numbers rather than illustrating a claim. The frequency ruler is a true log₁₀ axis, so "every musical tempo sits inside delta" is a property of the drawing: drag the control across the entire musical range, 40 to 200 BPM, and the marker never leaves the sub-4 Hz region. The grid divides frames by 30fps and seconds by the beat period, and reports the result to three decimals — including the detail that 24/8 lands exactly at 112.5 BPM, so the system's 112 is 4.8 milliseconds slow. Neither is decorative, and the page labels the arithmetic as arithmetic.

Everything is SVG, so nothing is locked inside a canvas; the full argument survives with JavaScript disabled; and the reduced-motion path is the same page, because nothing sweeps or auto-runs in the first place.

Iteration passes

After the first complete build, the site was screenshotted at desktop (1440) and mobile (390) widths across all three routes, read closely, fixed, and re-shot. Findings below are honest.