Nāra — Seaside Guest House, Jūrmala

Nāra — the whole season, not just the nights you asked for

A concept design exploring how a seaside guest house should take its own bookings

This is a portfolio concept piece, not a live client engagement. Nāra is a seventeen-room wooden house from 1936 on the Bulduri dune line in Jūrmala, and we built it to test one uncomfortable idea: a small hotel does not lose to Booking.com on price — rate parity forbids that — it loses because the listing site is the only place a guest is ever shown a calendar.

What the design solves

Every guest house site in this segment hides its rates behind a form. You arrive, you type two dates, you get one number, and if that number is high you leave. The listing sites win the way a vending machine wins: they answer the question you happened to ask. Nobody tells you that the Tuesday after your Saturday costs sixty-one euros less.

So the centre of this page is a rate ledger — a month diary of every night in the season, each priced on its own tier, each carrying a bar for the rooms still left. Price is encoded as temperature: warm sand for the quiet nights, cool grey for the dear ones, amber when two rooms or fewer remain. You pick your range by clicking two nights directly on the diary, and if you try to book across a sold-out night the selection restarts and says why. Totals then sum each night at its own rate rather than multiplying one headline figure by the number of nights — otherwise the page would be lying. When a cheaper window sits within three days of your choice, a quiet card offers to move you.

Then the page goes dark exactly once, for the money. "Same price. Different destination." draws two bars of identical length for the stay you have actually selected — because the price is identical — and splits one of them to show the eighteen percent that leaves for the platform. There are no struck-through prices anywhere on the page: parity contracts mean there is no discount to claim, so commission is drawn as a slice of the price and never as a markup on it. Below it, the same rate across a year of seventeen rooms comes to roughly €51,792 — and the working is shown, including the assumption that a little over half the year arrives through the big sites rather than all of it, because that is the first thing an owner will interrogate.

Design system highlights

• Petrona and Schibsted Grotesk — the serif carries the poetry, the grotesque carries the money; chosen for genuinely tabular numerals so a column of rates aligns, and for keeping the macron on Ā where several display faces silently drop it
• A palette named by role, not by shade — SHELL, PAPER and NIGHT for surfaces, and one amber that only ever means money that stays here, never a discount; the standing rule is to add a row before adding a fill
• Availability honoured everywhere — sold-out and scarce nights are one source of truth shared by the hero picker, the ledger and the wizard, and the submit handler re-checks it before the page is ever allowed to say "booked"
• A bottom bar with two minds — an IntersectionObserver swaps it between the running total while you are in the form and the commission argument everywhere else, so one fixed element does both jobs instead of two fighting for the same edge
• Reviews that show their arithmetic — the 9.2 average is drawn as a histogram of 187 verified stays using the same bar device as the rooms-left indicator, so the number is derived in front of you rather than asserted

Stack

• TanStack Start with React 19 for SSR — every date and inventory value is a fixed literal or a pure function, so server and client cannot disagree
• Tailwind v4 @theme tokens scoped to this mockup
• Framer Motion under MotionConfig reducedMotion="user", with step changes announced into a screen-reader-only "Step 2 of 4" heading that also takes focus
• Deployed on Vercel — the photo payload came down from 1,637 KB to 614 KB and eager images from eight to one along the way

Want this for your guest house?

The whole system — availability bar, rate ledger, four-step booking flow, commission comparison, rooms, reviews, the lot — is built and themeable. We can put your rooms, your tiers and your season into it, connect your PMS or channel manager (or build the reservation side outright), and ship a production site in around two to three weeks. Start a conversation →