Prompt

“A mountain rescue volunteer team: serious, high-visibility orange, callout log, donation-led.”

The agent invented Harrowdale Mountain Rescue Team - Thirty-eight unpaid volunteers covering 420 square kilometres of fell, funded entirely by donations.

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

The page it shipped - live, scaledOpen full page ↗

The move

The callout log is the page's centre of gravity: a warm-black band directly under the fold where eight real incidents sit in a table with mono dates, durations and team counts, orange only on the callout number and on the "air" tag for helicopter lifts. It is the thing a mountain rescue team actually has that nobody else does, and the donate section that follows converts it, with eight fixed amounts each naming the exact piece of kit it buys and a live panel that rewrites itself as you pick, including a monthly mode that multiplies the figure out to what the team can plan around.

What Inspo gave it

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

Institute of Health - The hero's stat sidebar is lifted from here: big numerals on the right, each with a hairline rule, sitting beside a flush-left sentence-case headline. Also the model for tabular numerals and a single grotesk family doing display and body.
Propublica - The one-coral-element rule. Orange lands on exactly one nav element (Donate) against a monochrome warm-grey page, and the newsletter bar idea became the full-bleed donate band lower down.
Cloudflare - Evidence that a saturated orange field can carry a whole section with white type and a white pill on top. The donate section is a Cloudflare band: orange paper, white text, paper-coloured button.
Video API for developers | Mux - Warm grey paper (#d5d0c0 there, lightened here) with near-black ink and one vivid orange, plus mono for utility text only. Set the paper and the mono-for-metadata discipline for the nav, log and footnotes.
Arweave - Orange used purely as an index marker on numbered items; the numbered steps in "how to call for help", the footnote superscripts and the module numbers follow that pattern, with everything else in ink.

How it was built

The actual MCP calls, in order.

recommend
```
brief "A mountain rescue volunteer team: serious, high-visibility orange, callout log, donation-led.", detail full
```
Picked Marquee Hero; exemplars cloudflare-com, 11x-com, gatesnotes-com, ritual-com, fromanother-love; evidence of grotesk-sans display at 75%, mid/light paper split, warm accent as a live option; hero-in-fold and 96px seam guidance.
search_screens
```
query "non-profit donation charity serious stat-led figures", industry non-profit, limit 8, detail full
```
effectivealtruism-org, participantinc-org, ghost-org, siena-film, propublica-org, frontierclimate-com, dropdeadgenerous-org, signal-org; propublica-org's single Donate puncture was the takeaway.
search_screens
```
query "high-visibility orange accent serious technical log table dark", macrostructure stat-led, limit 8, detail full
```
digitalocean-com--blog, reactsummit-com, tinybird-co, instituteofhealth-com; instituteofhealth-com's numeral sidebar became the hero's right column.
find_by_color
```
hex #ff5a00, limit 8, detail full
```
brex-com, drams-framer-website, cloudflare-com, substack-com, typotheque-com, mux-com, arweave-org, brightful-me; confirmed warm-grey paper plus #fc5c04-ish orange as a working family and gave mux-com and arweave-org.
find_reference_components
```
type stat
```
annotated, bar-chart, before-after, grid, row, single-hero; the year-to-date section is the annotated 3x2 grid with footnotes plus the pure-CSS bar chart, and the 999 block is the single-hero stat idea.
get_screen
```
slug instituteofhealth-com
```
Full autopsy of the stat sidebar with rules between numerals and the sentence-case headline in the lower left.
get_screen
```
slug propublica-org
```
Autopsy confirming accent on the Donate pill only, warm off-white paper, rigid left gutter.
get_screen
```
slug mux-com
```
Autopsy of the warm grey paper, orange primary pill, mono reserved for utility text.
find_reference_components
```
type footer
```
address, colophon, list, long-copy, newsletter, sitemap, statement; the footer is the Ft8 address card (base, write, team, money) with no social row.
find_reference_components
```
type nav
```
breadcrumb, floating-pill, inline, marginal, mega, off-canvas, search-first; the nav is N1 inline minimal with a mono link row and a tighter utility cluster on the right.

Palette, traced

Every token, and the reference it came from.

--paper#e9e5dcPage ground. Warm stone grey between mux-com's #d5d0c0 and propublica-org's off-white, light enough for body text at 16px.
--ink#16150fHeadlines, body, rules that need weight, the intake box and the road on the map. Warm near-black so it does not go blue against the paper.
--muted#6a665cMono metadata, supporting paragraphs, footnotes and map labels. Contrast stays above 4.5:1 on the paper.
--rule#c6c0b1Hairlines in the stat grids, table rows, legend boxes and the map grid. Visible but never competing with ink.
--orange#ff5a00The high-visibility orange. Nav Donate pill, hero eyebrow tick, callout dots and patch boundary on the map, and the full donate band. Deliberately rationed so the band lands hard.
--orange-deep#b83c00Orange for text on light paper (footnote numbers, step numbers, hover states) where #FF5A00 would fail contrast.
--night#1c1b18The callout log band. A warm black so the log reads as an operations board rather than a dark-mode switch.

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