Inspo.
← All examples

Prompt

A boutique alpine hotel: snow and larch wood, room-led, slow, booking-first.

The agent invented Brenna - Eleven rooms of snow and larch at 1,842 metres in the Dolomites, booked directly at one flat rate per season.

Toolchain
pure + inspo
Register
light mode
Build effort
12+ MCP calls · 5 sites studied
Self-score
7.0 / 10
The page it shipped - live, scaledOpen full page ↗

The move

The hero is the booking module. Following explorajourneys-com and lyfehotels-com, the form sits directly under a three-line serif headline instead of a marketing button, and it is live: choosing dates, a room and a guest count computes the stay from the same season table printed lower on the page, flags the festive five-night minimum and the closed thaw weeks, and refuses a third guest in a two-person room. The right half of the fold is a snow-and-larch scene drawn entirely in SVG (gradient sky, four ridge layers, a slatted larch house with lit windows) so the page ships with no photography yet still reads as a place, and the same drawing language repeats as the window in each room card and the larch house in the story section.

What Inspo gave it

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

  • Luxury Cruises | Explora Journeys - The hero shape: a sentence-case serif headline with one italic phrase emphasised, and a booking module (dropdowns plus one wide filled button) sitting directly under it rather than a marketing CTA. Also the sage-and-olive restraint, one accent only on the button.

  • Lyfehotels - The booking bar as a functional white strip with labelled fields, breaking the hero, and the season-led rate framing; I kept its check-in / check-out / room / search field order and dropped its secondary nav.

  • Belmond - The destination eyebrow with a short rule before it ("Valtura, Dolomites") and the copy-beside-picture rhythm used in the house and getting-here sections; I rejected its wide-tracked uppercase.

  • Audocph - Tone reference for the ghosted serif caption on an image; became the two-line caption sitting inside the hero panel and the muted, monochrome-with-one-wood-accent palette.

  • Louispoulsen - The severe 50/50 split with warm off-white ground and a documentary image beside a small text block, reused for the larch house section (drawn in code instead of a photograph).

How it was built

The actual MCP calls, in order.

  1. recommend
    brief "boutique alpine hotel: snow and larch wood, room-led, slow, booking-first", detail full

    Picked marquee-hero with agency exemplars (standardvision-com, deathandcompany-com, generalcondition-com, bauhausclock-com, phantom-land), the marquee hero JSX, hero-fit and spacing guidance, and evidence that the genre leans grotesk-sans (a pull I chose to go against with a serif).

  2. search_screens
    query "boutique hotel mountain lodge rooms booking calm", industry travel, limit 8, detail full

    lyfehotels-com, belmond-com, standardhotels-com, hopper-com, eurostar-com, explorajourneys-com, lyft-com, bird-co with fold autopsies; the two hotel screens became the primary references.

  3. search_screens
    query "luxury hospitality serif editorial photographic warm wood snow", vibe luxe, paperBand light, limit 8, detail full

    loewe-com product page, mirazur-fr--en-reservation-html, gagosian-com, hypebeast-com article, detroit-paris, lyfehotels-com--about-us, belmond-com--hotels, louispoulsen-com--en-private-about-us-designers-poul-henningsen; confirmed light paper plus serif display for the luxe register.

  4. find_examples_for_macrostructure
    name photographic, limit 6, detail full

    arts-ac-uk, audocph-com, basicagency-com, bbcearth-com, chloe-com, crackmagazine-net; audocph-com kept as a tone reference, the rest too image-dependent for a code-drawn page.

  5. find_reference_components
    no filter

    Scan view of all 68 reference components; chose split-screen hero, per-use pricing, address footer and accordion faq to pull in full.

  6. get_screen
    slug explorajourneys-com

    Full record: Shapiro italic display, sage nav, search bar composition, palette #8f936b / #c6c8b4.

  7. get_screen
    slug lyfehotels-com

    Full record: booking strip signature, Branch serif display, gold accent on CTAs and dividers.

  8. get_reference_jsx
    type hero, id split-screen

    Typography on one half, a pure-CSS atmospheric panel on the other, no image placeholder; the basis for the hero grid and the drawn snow-and-larch panel.

  9. get_reference_jsx
    type pricing, id per-use

    Line-item pricing that reads as a menu; adapted into the season-by-room rate table with the explanatory column on the left.

  10. get_reference_jsx
    type footer, id address

    Four-column business-card footer (find us, write, hours) with no social row; used almost as-is with a seasons column.

  11. get_reference_jsx
    type faq, id accordion

    Native details/summary with typographic plus affordance and single-open behaviour; ported to vanilla JS.

  12. compare
    slugs explorajourneys-com, lyfehotels-com, belmond-com--hotels, audocph-com

    Shared styles minimalism plus editorial, three to six type steps, spacing scales topping out at 76 to 175px, radius scales of 0 and 50; set the section rhythm and the pill buttons.

Palette, traced

Every token, and the reference it came from.

  • --paper#f4f3efPage ground; a warm-leaning snow white so the larch does not look orange against a blue-white.
  • --snow#e6ebeeCool snow panel behind the hero drawing and the "A day here" band; the only cool surface, so the page reads snow against wood.
  • --ink#1f1d1aHeadlines and body text; a brown-black rather than pure black, to sit with the timber.
  • --muted#6b655eLedes, captions, table headers and metadata; warm grey that stays readable on both paper and white cards.
  • --rule#d9d4ccEvery hairline: nav border, table rows, accordion rows, card borders; warm enough not to read as blue.
  • --larch#a9683cLarch wood mid tone; eyebrow rules, bullets, the dashed path on the map, hover state of the primary button and the wood pattern in the drawings.
  • --larch-deep#6e4024Deep end-grain brown; primary button fill, italic emphasis in headlines, room links and the window frames in the room cards, so every accent is literally wood.
Built with the Inspo MCP - try it on your own brief.← All examples