HOW THIS SITE WAS BUILT · WINGED FOOT WEST
SEVERITY
An engraved-editorial site for the hardest examination in championship golf. A room that has seen everything, with the volume down.
The examination,
engraved.
The school of design is Swiss typographic modernism applied to an institutional archive — imagine a USGA record book re-set by a Basel compositor. Hairline rules, a strict grid, numbered sections, tabular data, and one enormous condensed headline per screen. Winged Foot West is the sternest venue in the 248 series, so it gets the sternest page: consequence rendered as typography.
Palette is the strictest of the family: charcoal and graphite ink on bone, ash hairlines. Signal Lime appears only as data ticks — under-par scores in the record table, the 8-frame conversion cluster in every ratio stripe, the release ticks onto the green, active player states. Accent Orange appears exactly once on the whole site: the terminal period of the hero headline. A century of restraint, one full stop.
Type is the brand trio tuned to gravitas — Barlow Condensed 600 letterpress-tight for display, Inter for the working text, IBM Plex Mono for data labels — plus the one serif voice permitted in wave two: Libre Caslon Text, used only for measured longform paragraphs and the founders’ quotation. The serif is the sound of the club; the mono is the sound of the scorer’s tent.
Motion follows the brand law — rhythm is structure. The frames ribbon draws the 24/8 cycle at true system tempo (0.80 s back, 0.27 s down). While the anthem plays, the contour rings of the green pulse faintly outward on each 112 BPM beat, like a struck bell, with amplitude driven by the live RMS level of the audio. In silence the drawing is still. Under prefers-reduced-motion everything is a fully composed static page.
The signature visual is THE GREEN: an SVG contour plan of one archetypal elevated, pear-shaped green with a false front — annotated like an engineer’s drawing, with flanking bunkers hatched, a section inset, a title block, and the brand metaphor played as a ball path: 24 ticks of approach, 8 signal ticks of release onto the green. It is labeled, in the drawing itself, as an archetype of the West’s greens — “not to scale, no hole claimed” — because the traits are verified but no specific hole is.
By hand.
- Hand-written static HTML/CSS/JS — no framework, no authoring build step. One stylesheet, one ES module, one shared player core.
- The signature drawing is generated deterministically in JavaScript as SVG — a polar pear function for the outline, seven contour rings converging on a focus just behind the front edge (which is what makes the lines bunch into a false front), hatched bunker blobs, quadratic-curve tick placement for the 24/8 ball path. No randomness, no raster imagery anywhere on the site.
- Fonts are self-hosted woff2 subsets from open-source families via @fontsource: Barlow Condensed 500/600, Inter Variable, IBM Plex Mono 400/500, Libre Caslon Text 400 roman and italic.
- All internal references are relative, so the site works served from a domain root or a subpath. External URLs (the audio host, sibling sites) stay absolute.
- Deployed as its own Vercel project from the series monorepo; a small build script copies the static tree to dist/ and restores font binaries from npm so deploy uploads stay text-only.
- Accessibility: skip link, semantic landmarks, one h1, labeled sections, focus-visible outlines, WCAG AA contrast (lime is never used as text on bone — only as ticks or on charcoal), and the record table stays a real <table> with a mobile arrangement that hides columns rather than semantics.
One track,
played properly.
Masters are large WAVs; delivery uses the library’s compressed MP3/MP4-AAC versions, streamed from a shared CORS-enabled audio host (248-anthems-audio.vercel.app) whose manifest.json is the single source of truth. This site ships a fallback copy of the manifest and passes its playlist explicitly (playlistIds: ['winged-foot-fu-glory']), because the deployed host’s manifest predates the wave-two playlist keys. The player is the shared 248 core (player.js), skinned here into an engraved slab: square corners, hairline borders, mono readouts, lime reserved for active states. The 32-unit stripe beneath it encodes real playback position — 24 graphite units, then the 8-unit signal cluster. No placeholder audio, no fake waveforms: visuals react to the analyser’s live level, or hold still.
Verified,
or absent.
Every number and every historical claim on the page comes from the project’s verified facts file for Winged Foot, the tempo-science file, or the track manifest. Verified and used: the six U.S. Open champions and their exact scores (1929 Jones 294/+6 through 2020 DeChambeau 274/−6), the 1997 PGA Championship (Love III, 269/−11), the 2028 U.S. Open award (announced January 9, 2023), founding in 1921 by NYAC members, the June 1923 opening, Tillinghast’s authorship of both courses, the Mercury-foot name origin, the “man-sized course” instruction as attributed by pgatour.com and golf.com, the Gil Hanse 2016–17 green restoration, par 72 at 7,426 yards, the 2020 par-70/7,477-yard setup, and the course character: elevated pear-shaped greens, false fronts, deep flanking bunkers, narrow tree-lined fairways.
Omitted because unverified: any named founder for the “man-sized” quotation, the exact 1923 opening date, a claimed 2004 U.S. Amateur, Hogan one-liners about specific holes, and Mickelson’s post-round quote from 2006 — the collapse is on the record; the exact words are not. The green drawing claims no specific hole, no yardages and no scale, and says so in its own title block. “Two winners under par” in the hero is arithmetic over the verified score table, and the 24/8 tempo claims are presented exactly as the science file allows — the 112 BPM grid as engineering arithmetic, never as a lab result.
Three passes,
honestly.
PASS 1 — DESKTOP + MOBILE, HOME
Findings: the first full-page capture was damning — the scroll reveals were opacity-based and gated entire sections, so everything below the hero rendered as blank bone and an empty black band. Content should never be opacity-hidden behind an IntersectionObserver. Fix: reveals rebuilt as transform-only settles (the page always reads, mid-scroll, without JS, or in a capture) and the fade moved to a one-time load intro on the hero. Also raised the hero display floor on small screens.
PASS 1B — ZOOMED INSPECTION OF THE SHEET
Findings, at 2× clips of the green drawing and the record table: the APPROACH label sat on top of the title block; the title block’s second row overflowed its frame; the FALSE FRONT sublabel ran into the left bunker hatch and — worse — stated a fabricated dimension (“7 contours in 24 ft of plan”), which the facts rule forbids. Fixes: label re-anchored above the title block, title-block text shortened to fit, the sublabel rewritten as “bunched contours” with no invented number, and the lime release ticks slimmed so they read as eight ticks rather than a solid bar. The record table needed nothing.
PASS 2 — RE-SHOOT, MOBILE + GUIDE ROUTE
Findings: at 390 px the SVG’s mono labels scaled below legibility. Fix: the sheet keeps a 680 px minimum width on small screens, scrolls sideways like a real drawing on a table, starts centred on the plan, and bumps its label size. Re-shot both routes clean; the only console noise is the expected blocked-egress error for the audio host inside the build container — the fallback manifest takes over, by design.
PASS 3 — SERIES EDITOR REVIEW
A series-level editorial review after all eight course sites and the flagship were complete: full-page desktop and mobile captures re-read, every on-page number cross-checked against the project’s verified facts files, and cross-links audited across the whole family. This site was built before the serving model was finalized, and its links to the eight new course sites pointed at per-site domains that don’t exist yet — they were rewritten to the live hub paths, and again to the dedicated per-site domains (248-anthems-<slug>.vercel.app) once those projects were created. Mobile composition passed review with no further layout changes.
BACK TO THE EXHIBIT: WINGED FOOT — SEVERITY