5.6 KiB
The oval is a monument. Every city has one — worn terracotta, chalked lanes, the same quarter-mile run ten thousand times by ten thousand different people at ten thousand different speeds. This is a publication about Washington DC's running tracks: where they are, what they feel like underfoot, who has run them, and why the oval endures as the purest form of athletic space. The aesthetic draws from the physical materials of the track itself and the tradition of serious amateur athletics — collegiate, unhurried, earned. The palette is the track: terracotta surface, forest green infield, cream of an old race programme, white of a lane marking. The typography is authoritative and editorial, like the annals of an athletics club that has been meeting on the same oval since 1923. Every design decision references something real and physical, not digital.
Design System
Colors
- Primary (#1B3026): Deep midnight forest green — near-black, the infield at first light. All text, headings, core content.
- Secondary (#7A6A5A): Warm weathered slate — aged concrete, worn rubber track. Captions, metadata, supporting structure.
- Tertiary (#B5491C): Track terracotta — the surface itself. The single vivid accent. Used once per panel for CTAs and emphasis only.
- Neutral (#F2ECE2): Warm cream — archival paper, a race programme from 1948, linen. The canvas.
Typography
- Headline Font: High-contrast collegiate editorial serif — authoritative, slightly condensed, the kind found on the cover of a century-old athletics club annual. Large sizes use tight tracking. Headlines are left-aligned, never centered.
- Body Font: A refined humanist serif or classic editorial sans for extended reading. Generous line height (1.7). Warm and legible. The prose of a serious running magazine.
- Label Font: Monospace, all uppercase, wide tracking — like a race timing display, a lane marker, a split time on a stopwatch. Section eyebrows in muted warm gray.
Elevation
No shadows. Depth through tonal surface variation only — warm cream panels giving way to slightly deeper cream containers. The page reads like a printed object, not a glowing screen. No drop shadows anywhere.
Shape
Roundedness: 0px. The track is geometry — precise arcs, exact distances, chalk-white right angles. No softness.
Components
- Buttons: 0px radius. Tertiary terracotta fill. Dark forest green text. One per panel — the lane marker, the single instruction. Use an outer ring at forest-green / 10% opacity instead of a solid border.
- Pull quotes: Large editorial serif, left-bordered with a 2px terracotta rule. The voice of a runner, a coach, a timekeeper.
- Track labels: Monospace eyebrow style — track name, surface type, distance, ward. Like the data panel beside a race course map.
- No icons on buttons. No centered layouts. No solid borders alongside shadows.
Do's and Don'ts
- Do use terracotta exactly once per panel — it is the lane marker, not the paint.
- Do left-align all heroes with a split layout: large headline left (~3/5), description and CTA right (~2/5), both top-aligned.
- Do let photography and typography share equal weight — this is an editorial publication, not a product page.
- Don't use warm backgrounds other than the cream canvas — warmth lives in the terracotta accent only.
- Don't center section headings — inline heading + subheading on the same line, heading dark bold, subheading in warm gray medium weight.
- Don't use solid borders alongside shadows — outer ring at 10% opacity only.
- Don't use sidebars or headers. Minimal to no chrome.
Layout: Lookbook / Editorial Spread — Full-bleed imagery dominates each panel. Text overlays or sits adjacent in generous margins. The layout reads vertically like turning pages in a physical catalogue. Each panel is its own composition — a full-width photograph of a specific track paired with sparse editorial text and a single terracotta CTA. Scrolling feels deliberate. Scroll-snap behavior. Decoration: A subtle canvas grid of thin ruled lines between panels — horizontal lines at full viewport width, vertical lines within the page container. Like the lane markings of the track extended onto the page. Low contrast, architectural, not decorative. Build the home page for "The Tracks of Washington DC" — a prestige editorial publication cataloguing every running track in the city. The page has 6 full-viewport panels:
- Hero: Full-bleed aerial photograph of a terracotta running track at dawn. Magazine title "The Tracks of Washington DC" in large left-aligned collegiate serif. Subheading right: "A field guide to the city's ovals — their surfaces, their histories, their regulars." Single terracotta CTA: "Begin the Circuit".
- Georgetown Waterfront Track: Full-bleed photograph. Editorial left panel with track name as monospace eyebrow, headline about the track's character, body prose (2–3 sentences), distance and surface specs as data labels.
- A runner mid-stride on the back straight: Cinematic, wide. Pull quote left-bordered in terracotta — a single line about what the oval teaches. No CTA. The image is the content.
- Anacostia Park Track: Mirror of panel 2 — image right, text left. Different character, different story.
- The Washington Circuit map: A simple graphic showing all tracks across the city as points on a minimal street map. Monospace labels. Distances. Surface types. Forest green and terracotta on cream.
- The Guide: Newsletter / field guide sign-up. Forest green surface container. Cream text. "Know every oval." Single terracotta CTA: "Get the Guide".