How This Site Was Built

THE PROGRAM

PRESTON TRAIL · MID-CENTURY TOURNAMENT-PROGRAM EDITORIAL

THE DESIGN DIRECTION

A page with
one idea.

The school of design is Swiss typographic modernism applied to a mid-century tournament program — the annual a spectator carried at the Byron Nelson Golf Classic, re-set by a Basel compositor. Preston Trail is the purist's club of the 248 series: golf only, since 1965, with nothing else on the property. So this is the series' "pure typography" site. Its signature is the setting itself — Oxford rules, a centered program cover, ruled tables, mono folios, a strict 12-pixel spacing sub-grid — and no illustration beyond one drawn line.

Palette: the strictest neutrals after Winged Foot — graphite ink on bone, ash hairlines — plus one course-derived support color, muted trophy brass, held under three percent and permitted only in rules, folios, and numerals: the gilt edge of the era's programs and the engraving on its trophies. Accent Orange is deliberately absent; a 1970 program had no signal color, and the brand allows omission. Signal Lime stays exactly what the system says it is: the 8-frame conversion cluster in every ratio stripe, the player's active states, real playback progress, and the creek's flow pulse.

Type: the brand trio at maximum rigor — Barlow Condensed 500/600/700 for display (the tall tournament-poster voice), Inter for running text, IBM Plex Mono for everything that behaves like a scorer's numeral. One licensed indulgence: Libre Caslon Display, used for the program masthead line ("The Tournament Program") and nowhere else.

The signature motif is THE CREEK LINE — one continuous SVG hairline down the page's bound margin, standing for White Rock Creek, which verifiably crosses the property and comes into play on several holes. It draws in with scroll; its mono mile-markers double as the section numbers; while the anthem plays, a barely-visible lime pulse flows down it on an eight-beat cycle at 112 BPM. It is explicitly a motif, not a routing map — the meander is a deterministic sine composition, not geography — and under prefers-reduced-motion it is simply, fully drawn.

HOW IT WAS BUILT

Set by hand.

  • Hand-written static HTML/CSS/JS — no framework, no authoring build step. One stylesheet, one ES module, one shared player core. No raster imagery anywhere; the visual world is type, rules, and one SVG line.
  • The creek line is generated in JavaScript: the page is measured, a three-wavelength sine meander is sampled every 18 px down the margin and smoothed with quadratic midpoints, mile-markers are placed from each section's data-mile attribute, and stroke-dashoffset is driven by scroll so the water arrives with the reader. It rebuilds on resize and on layout shifts.
  • Typographic discipline is enforced by tokens: spacing values are multiples of a .75rem (12 px) unit, tables carry a brass hairline over a 3 px charcoal head rule (the period's double rule), and dark surfaces exist only as an inset "plate" — the page itself stays a single bone sheet, like a printed program.
  • Fonts are self-hosted woff2 subsets from open-source families via @fontsource: Barlow Condensed 500/600/700, Inter Variable, IBM Plex Mono 400/500, Libre Caslon Display 400 (masthead only).
  • All internal references are relative, so the site works served from a domain root or from a subpath. External URLs (the audio host, sibling sites) stay absolute.
  • Deploy pipeline: build.mjs copies the static tree to dist/ and restores font binaries from npm (deployAssets), so deploy uploads stay text-only.
  • Accessibility: skip link, semantic landmarks, one h1, labeled sections, a real <table> with a caption and a mobile arrangement that hides a column rather than semantics, focus-visible outlines, WCAG AA contrast (brass text uses the darker brass-ink tone; lime is never text on bone), and reveals that are transform-only so content is never opacity-hidden.
THE AUDIO PIPELINE

One track
on the card.

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: ['preston-trail-anthem']), because the deployed host's manifest predates the wave-two playlist keys. The player is the shared 248 core (player.js), skinned here as a program plate: square corners, hairline keyline, 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 and no fake visuals: the creek's flow pulse runs only while audio actually plays, on a fixed eight-beat cycle at the system tempo, and stops in silence.

THE FACTS RULE

Named,
or left blank.

Every number and every historical claim comes from the project's verified facts file for Preston Trail, the tempo-science file, or the track manifest. Verified and used: Ralph Plummer's design with Byron Nelson collaborating; founded 1963, ground broken spring 1963, opened May 1965 after weather delays; par 72 at 7,091 yards, rating 72.1, slope 129; White Rock Creek crossing the property and in play on several holes, most notably the dogleg-right par-4 7th; the men-only, golf-only character and the three crowded North Dallas clubs it answered; the "challenging, not backbreaking" design philosophy with its bunker placement; fifteen Byron Nelsons from 1968 through 1982; Miller Barber 1968; Nicklaus 1970–71 with the sudden-death playoff over Palmer; Watson's four wins (1975, 1978–80), still the most in event history; Gilder 1982; and the Tripp Davis reconstruction of 2008–09 with the rebuilt range, putting green, and three-acre short-game area.

The centerpiece table is where the rule shows: the sources file names champions for only eight of the fifteen editions, so the other seven years appear as blank rows — an em-dash where a name would be — rather than winners looked up nowhere or guessed. No scores appear anywhere, because the facts file carries none. Omitted entirely: membership size, initiation fees, celebrity members, grass types (sources conflict), street address, and club leadership. The creek line claims no geography and says so here. 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.

ITERATION PASSES

Three passes,
honestly.

PASS 1 — DESKTOP + MOBILE, HOME + GUIDE

Findings: the scroll-driven creek drew in only over the first viewport, so in a full-page capture — and for print, and for anyone who had not yet scrolled — the motif read as a broken stub with orphaned mile-markers down the margin. At 390 px the rotated WHITE ROCK CREEK source label collided with the meander itself and with the left end of the cover's Oxford rule. The cover's purism line wrapped with a two-word widow; the mobile masthead let the section nav wrap into a ragged right-hung block; and the guide's direction headline broke with a one-word orphan line. Fixes: the creek gained a printed bed — the full meander always present at low opacity, which scrolling inks over, so the page reads in every state; the cover line got balanced wrapping; the mobile nav drops onto its own left-aligned row; the guide headline was re-set shorter.

PASS 2 — RE-SHOOT, BOTH ROUTES + 2× CLIPS

Findings: the label collision survived the first fix. Root cause, found in the re-clip: the creek's geometry read the --rail custom property with parseFloat, and a clamp() string parses to NaN — the line had been drawing off a guessed fallback width at every viewport. Fix: the margin zone is now derived from the container's computed padding-left (already resolved to pixels by the browser), the meander's amplitude is capped to stay inside it, and the label is capped short of the content edge so it can never cross a rule. Re-shot desktop, mobile, and the guide route 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's cross-links were already correct, and the fact check — including the rating and slope line (72.1 / 129) and the 2008–09 reconstruction row — found no corrections needed. Mobile composition passed review with no further layout changes.

BACK TO THE PROGRAM: PRESTON TRAIL — EXHIBIT 14 / 15