Prompt

“A city marathon: route map, registration, countdown, energetic.”

The agent invented Calder Bay Marathon - A closed-road city marathon on 18 April 2027, with a live countdown, a drawn route and open entries.

Toolchain: pure + inspo
Register: light mode
Build effort: 9+ MCP calls · 5 sites studied
Self-score: 7.5 / 10

The page it shipped - live, scaledOpen full page ↗

The move

The route map is the page's image and its data at once. It is a single inline SVG on a faint street grid: a bay and river in pale water blue, the park in green, the 42.195 km loop in one hot orange stroke with direction arrows, nine numbered kilometre rings placed by measuring the path length and dividing by 44.55 units per kilometre, five ink cheer-zone squares that match the spectator list, and start and finish tags. The list beside it repeats the same numbers as a split table with elevation notes, so a runner reads the course two ways without a photograph anywhere on the page. Above it, the countdown card is a real clock to 07:00 on 18 April 2027, and the entry tiers mark themselves open or closed from their closing dates, so the page changes as race day approaches.

What Inspo gave it

The captures it studied, and exactly what each one contributed.

Stonesthrow - The raw orange-on-monochrome energy and the "accent lands on one thing" discipline: its red monolith and orange rectangles became my hot orange on the route line, the primary pill and one colour-broken word in each headline, nothing else.
Savvycal - Condensed heavy display type set in an acid tint on a deep ground, with a radial glow behind it and no photography. That is the countdown card: lime digits on navy with a soft radial highlight, and the same cool-to-warm handoff into a paper section below.
Unkey | The Developer Platform for Modern APIs - A diagram that is the hero visual, bleeding behind and through the copy layer, with the headline anchored lower-left. It convinced me the SVG route map could carry a whole section as the image rather than sit as a small illustration.
Moderntreasury - A literal infrastructure map as content: hub, labelled nodes, floating tags on the lines. My kilometre markers, cheer-zone squares and start/finish tags follow that labelled-node language on a faint grid.
Deel - One word of the headline broken out in a second colour, and small stat overlays ("480+ hrs") with a label beneath. The "closed" and "your city" breaks and the stat tiles under the map come from here.

How it was built

The actual MCP calls, in order.

recommend
```
brief "A city marathon: route map, registration, countdown, energetic", detail full
```
Feature Stack pick with alloy-com, dub-co--about, instrument-com--about, synthesia-io, everlaw-com; evidence packet (71 percent grotesk display, warm accent consensus), the pricing table reference JSX, hero and spacing guidance including the padding-inline rule.
search_screens
```
query "energetic sports event race registration bold countdown", vibe loud, limit 8
```
boldmonday-com, dropout-tv, stinkstudios-com, kelseydake-com, stonesthrow-com, idyllic-co-nz, generalcondition-com, leonardo-ai; stonesthrow-com was the keeper for warm accent on a mono ground.
search_screens
```
query "map diagram route with markers", macrostructure map-diagram, limit 6
```
unkey-com and moderntreasury-com, the two map/diagram exemplars, both with fold autopsies describing how a diagram carries a section.
search_screens
```
query "big numbers stats condensed bold display warm accent", displayClass display-condensed-bold, limit 6
```
dia-com, graza-co, savvycal-com, idyllic-co-nz, flipboard-com, deel-com; confirmed condensed heavy display plus a neutral sans as the type pairing.
find_reference_components
```
type hero
```
Seven canonical hero shapes (documentary, manifesto, marquee, question, split-screen, stat-led, word-as-art); stat-led informed the records band and the countdown as a number-first block.
get_screen
```
slug stonesthrow-com
```
Full record: palette #f88b07 / #bb2c24, General Sans, spacing scale 30 to 180, the accent-on-one-element rule.
get_screen
```
slug savvycal-com
```
Full record: #0c542c ground with #bcfc7b headline, GT Alpina Condensed plus Inter, the radial-ring background behind type.
find_components
```
type stat, limit 5
```
alloy-com, aristidebenoist-com, calendly-com stat crops; alloy-com's stat strip under the hero reinforced the tile-with-label pattern.
compare
```
stonesthrow-com, savvycal-com, unkey-com, deel-com
```
Type scale steps of 5 to 6 across all four, spacing seams of 80 to 128, radius scales that pair 0 with a full pill; used to set my five-token scale, the 72 to 128 section rhythm and the pill buttons.

Palette, traced

Every token, and the reference it came from.

--paper#f5f0e6Page ground and the map card's neighbour tone; warm off-white so the hot orange reads as heat rather than alarm.
--ink#12110fBody text, the waves section ground, the footer and the ticker; a warm near-black that does not fight the paper.
--accent#ff4b1fThe route line, kilometre marker rings, primary pills, the colour-broken headline word and the full records band; taken from the stonesthrow-com orange and pushed hotter.
--navy#0f1f3dThe countdown card and the road closures panel; the deep cool ground that makes the lime digits glow, following savvycal-com's deep-ground-plus-acid pairing.
--lime#d9f34fCountdown digits, wave start times, closure times and cheer-zone numerals; the acid tint from savvycal-com and unkey-com, used only for time and number.
--muted#6f6a60Lead copy, table labels and captions; warm grey so secondary text stays on the paper's temperature.
--rule#d9d2c2Hairlines, card borders and the map grid; a warm rule that disappears until you look for it.

Built with the Inspo MCP - try it on your own brief.← All examples