Today's Art Direction
The Regatta Program
A race-day capture-the-flag regatta program, run on signal flags and a declared course key.
Regatta programs are event pages with a working vocabulary: a notice of race, a course chart, division flags, a results board. This issue borrows that system for the kind of event landing page a freelancer ships for a race day, festival, or tournament, with the day's news run as the race card. International signal flags do the section marking, and a visible course key declares the only accent colors the page is allowed to use. Screenprint plates keep the print register: flat inks, coarse grain, dusk light.
- Notice of race
- Signal flags
- Halyard bunting
- Race card
- Division bands
- Course chart
- Ship's log
Borrow this pattern
The declared legend
Put the page's color system on screen as a small labeled key, the way this issue maps three signal flags to three sections, then let no accent, label, or marker use a color the key does not declare. Visitors read it as craft; in the build it works as governance, because multi-hue pages drift when every new component invents its own accent.
Use it on any event, campaign, or program page that needs more than two section colors. It stays honest as long as the key stays small and every keyed color actually appears doing its stated job.
Prompt Lab
Today's prompt rebuilds the regatta program as a race-day event landing page: dark harbor ground, a declared course key, and divisions run as flagged bands.
Build a race-day regatta event landing page, dark and print-flavored. Ground the page in deep harbor navy (#10233D) with sail cream text (#F1E7CF), a lighter navy panel tone (#1A3150), signal red (#D9432F), marigold (#E9A63B), and fog blue (#93B4CF). Set display type in a condensed grotesque like Big Shoulders Display (700/800), uppercase, and body in Public Sans at 19px with 1.7 line height; mono labels in JetBrains Mono, uppercase, letterspaced. Open with a hairline-ruled top nav, a decorative SVG bunting line of small geometric signal flags, then a one-line notice-of-race masthead between hairlines carrying the event number, date, and reading time as a plain sentence, never a boxed metadata grid. Hero: a two-line condensed headline, a two-sentence deck, one solid signal-red button, and a wide cream-framed illustration band styled as a screenprint program cover with a caption strip. Declare a visible course key: three small hand-drawn SVG signal flags (red swallowtail, marigold square, fog-blue square with navy center) each mapped to one section, and use only those declared colors for every accent, label, and marker on the page. Run the content as full-width division bands: each opens with its signal flag and a mono race label, followed by linked entries separated by hairlines, with the flag lifting a few pixels on band hover (about 170ms ease). Include one cream-framed course-chart diagram plate with a caption. Close with a three-cell previous/index/next footer and a ship's-log colophon. Keep small text at WCAG AA contrast on the navy ground, reserve the red for large type and graphic marks, no neon glow, no purple-blue gradients, no fake readable text inside images, no emoji icons, and include a prefers-reduced-motion guard.
Run today's prompt through v0, Lovable, Claude Code, or Figma Make, or build it with Beaver Builder AI.
