Prompt

“An electric ferry operator between Nordic islands: timetable-led, sea, calm, live departures.”

The agent invented Havlinje - Electric ferries between five Nordic islands, run to a fixed timetable with live berths and departures.

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

The page it shipped - live, scaledOpen full page ↗

The move

The route map is the standout: five islands drawn as SVG land shapes on a gradient sea with faint depth contours, Sølvøy as the hub carrying a shore-power bolt, crossing times as rounded tags on each route the way Modern Treasury labels its payment rails, and three dark dots that actually move along the route paths with SMIL animateMotion so the map reads as live rather than decorative. It hands off directly to the departure board below, which is generated from a real timetable in JavaScript against the visitor's clock, so the hero "Next sailing" card, the board and the map all agree on what is leaving and when.

What Inspo gave it

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

Hopper - The tool-as-hero idea: a white floating panel over a sea gradient instead of marketing copy alone. Became the "Next sailing" card sitting beside the headline, and its cool palette (#4c9cd4, #223152, #b9d4ee) set the sea, ink and tint tokens.
Eurostar - A transport page where the booking bar and a "train status and timetables" pill are the real content. Informed the departure board with berth tags and status colours, and the persistent "Buy a ticket" pill in the nav.
Moderntreasury - The only calm map-diagram exemplar in the archive: hub node with floating rounded tags on connecting lines, on a faint grid. Directly shaped the SVG route map, with Sølvøy as the hub, crossing-time tags on each route and a grid pattern under the sea.
Watershed - Mono eyebrow above a left-aligned sentence-case headline, muted periwinkle rules, body kept small against a large display. Set the eyebrow-plus-rule pattern used on every section head and the 5-step type ramp.

How it was built

The actual MCP calls, in order.

recommend
```
brief "electric ferry operator between Nordic islands", vibe calm, detail full
```
Bento Grid pick with grocery and games exemplars that did not fit; useful evidence packet (grotesk-sans 71%, cool accent) and the bento features JSX
search_screens
```
query "ferry boat travel timetable departures sea calm Nordic", industry travel, limit 8, full
```
hopper-com, eurostar-com, belmond-com, explorajourneys-com and others with fold autopsies

search_screens

query "calm coastal minimal light page with cool blue accent, schedule table, transport", accentHue cool, vibe calm, paperBand light, limit 8

watershed-com, calendly-com, atlassian-design and other light cool pages

find_examples_for_macrostructure
```
map-diagram, limit 6, full
```
only two sites: moderntreasury-com and unkey-com, with the thin-coverage note
find_reference_components
```
type hero
```
seven editorial hero archetypes (marquee, split-screen, stat-led, documentary and others)
get_screen
```
hopper-com
```
full record with palette and fold autopsy
get_screen
```
moderntreasury-com
```
full record with the hub-node diagram autopsy
get_screen
```
eurostar-com
```
full record with booking bar and status pill autopsy
compare
```
hopper-com, moderntreasury-com, eurostar-com, watershed-com
```
shared minimalism and swiss styles, 4 to 5 type steps, container widths 1124 to 1440
find_reference_components
```
type footer
```
seven footer archetypes; the address card shape was used
find_reference_components
```
type pricing
```
seven pricing archetypes; the per-use line-item list shape was used for fares

Palette, traced

Every token, and the reference it came from.

--paper#f3f6f8Page ground, a cool off-white so the white cards still read as cards, sits between Hopper's light band and Watershed's paper
--ink#142a3fAll text and the solid pill, a navy rather than black so the page stays maritime, close to Hopper's #223152
--sea#2f7fb8Route lines, the italic headline phrase, boarding status, eyebrows and the charge bars; a deeper cut of Hopper's #4c9cd4 for contrast on paper
--sea-tint#cfe2eeHero gradient foot, map water, berth tags and the empty part of charge bars; the calm water surface
--muted#5d7285Secondary copy, mono meta labels and table headers
--rule#d5dee5Every hairline: table rows, fare list, cards, footer, map tags
--signal#2e8b57The live pulse, "On time" status and the weather verdict; the one green so status reads at a glance

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