THE GUIDE

Edition A — “Signal.”

1 · The design direction

Signal treats 248 Anthems as a precision instrument. It draws on the Swiss International Typographic Style — Müller-Brockmann’s grids, Vignelli’s restraint — crossed with the look of laboratory spec sheets and metronome faceplates. If the other editions ask how the brand feels, Signal asks the brand to prove it, which is why the tempo claim is drawn as a working instrument, not an illustration.

PALETTE

Paper #F4F3EE, ink #0B0C0A, and a single electric accent — volt #C8FF2E. High contrast, one voice, no gradients. The player section inverts to an ink “stage” so the product sits in a different light than the argument.

TYPE

Space Grotesk (variable) for display — geometric but with enough character to carry a music brand; IBM Plex Mono for labels, figures, and footnotes, giving the page its instrument-panel voice.

MOTION

Everything moves on the 112 BPM grid. The hero’s WebGL pendulum swings a true 3:1 tempo — 1½ beats back, ½ beat down — with an impact ring on every cycle; the frames ribbon lights 24 cells slow and 8 cells fast; the player’s spectrum makes the audio itself the ornament. Honors prefers-reduced-motion.

3D

three.js with an orthographic camera — 3D rendered like a technical drawing, matching the Swiss language while staying genuinely dimensional (metal arm, emissive bob, point-trail).

2 · How it was built

• Hand-written static HTML/CSS/JS. No framework, no build step — view source and it’s all there.
• three.js (self-hosted module build) renders the tempo pendulum; a 2D canvas draws the live frequency spectrum from the Web Audio analyser.
• Fonts self-hosted as woff2 from open-source families (via the @fontsource packages).
• One repo, six sites: each folder in the monorepo deploys as its own Vercel project. This page is the /guide route of the flagship-a project.
• All six players share one core (player.js) — queue, library, Web Audio graph, MediaSession — and each site skins it with its own CSS custom properties.

3 · The audio pipeline

• The anthem masters are large WAVs (50–110 MB), so delivery uses the library’s compressed versions — MP3s and MP4/AAC audio — with remastered/final versions preferred where multiple exist.
• Audio streams from a shared, CORS-enabled Vercel project (248-anthems-audio). Its manifest.json is the single source of truth for every player: track titles, courses, versions, files, and sync status.
• scripts/sync-audio.mjs (in the repo) matches the manifest against the Mastered Tracks library, remuxes MP4→M4A or transcodes WAV→AAC only when no compressed source exists, and deploys the host.
• No placeholder or synthetic audio. A track that hasn’t reached the host yet is shown honestly with a “sync pending” badge and is skipped by playback — never faked.

4 · The facts rule

Nothing presented as fact is invented. The tempo claims trace to Tour Tempo (Novosel, 2004), a Yale physics study (Grober & Cholewicki, 2006), and peer-reviewed metronome-training research (Sommer & Rönnqvist, 2009) — and the 112 BPM grid is presented as what it is: arithmetic. Course pages cite verified facts or omit. The research fact sheets live in the repo under docs/facts/.

5 · Iteration passes