Turndown

Best for

• Hotels, B&Bs, motels, holiday homes and serviced apartments. It's written to the total-price, short-stay levy and accessibility expectations (see "Stays: what we build in").
• Anyone who sells time by the night or the day:
  • co-working (Deskhouse: desk days with weekday rates, guests, and spaces with access sheets)
  • campervan and car hire (Roamer: daily rates, minimum hires, cleaning in the total, a van with a hoist)
  • venue hire, glamping, boat hire, holiday parks
• Audiences: travellers comparing the real total, people who need to know a room will work for them, and anyone who wants the cancellation terms before paying.

Less suited to: a restaurant (Mise), a day spa's appointment book (Exhale), or a big chain's channel-managed booking engine (use theirs, with this look around it).

Personality and voice

Gracious and exact: the polish of a good hotel, with every number on the table.

• Headlines: "Twelve rooms, one quiet harbour." · "The whole price, up front." · "Rooms, measured."
• Buttons: "Check dates" · "Book for $660" · "Access sheet: measurements"
• Microcopy:
  • "Bookings from Saturday 7 November are at least 2 nights. Choose Monday 9 November or later."
  • "The night of Thursday 12 November is booked. Choose an earlier check-out, or other dates."
  • "Full refund until 2pm on Friday 13 November."
• Words to avoid: "from" prices that nobody can book, "+ fees" or "taxes calculated at checkout", "accessible" without measurements, and countdowns ("only 1 room left!") that aren't real.

Colour

Measured contrast (WCAG).

• Day:
  • ink on paper 16.3:1
  • muted on paper 5.7:1 (5.2:1 on well)
  • navy on paper 10.5:1 (9.6:1 on well, 9.4:1 on its soft fill), white on navy 11.5:1
  • ink on brass 7.5:1; brass text 5.8:1
  • alert on paper 6.6:1
• Night:
  • ink 15.8:1
  • muted 7.5:1 (6.9:1 on card)
  • navy 9.6:1, text on navy 8.9:1, navy on its soft fill 7.9:1
  • brass 9.9:1, alert 9.2:1
• Example dials: eucalypt (Deskhouse), ochre (Roamer) and mineral green (Hepburn House) all meet AA, and so does each closing card.

Typography

• Display: Bodoni Moda, 500–800 with italics and optical sizes. Headlines, room names, the total.
• Body: DM Sans, 400–700. Reading, forms, buttons.
• Mono: Fragment Mono. Nightly rates, dates, measurements, the folio's figures.

The signature move: the lit words are Bodoni italic in navy, and they settle into place, letters closing up like a sheet smoothed flat.

Layout

• Frame: a 1200px wrap with a max(20px, 4vw) gutter. An ink top line with a brass label for the season's offer; a sticky header with the key tag mark.
• Hero: copy on the left; a drawn room on the right with a key tag naming it.
• Then: the booker (calendar and cancellation beside a sticky folio), the rooms with access sheets, the arrival guide, straight answers, and a deep closing card with a key tag swinging on its ring.

Shape

• Crisp: --r-s 4px, --r-m 8px, --r-l 14px.
• Rooms: drawn, with a window, a turned-down bed and a lamp, never stock photos of someone else's hotel.
• The mark: a key tag, navy with a brass ring, hanging at an angle.

Motion language

• Calendar: months slide when you change them; the chosen range fills in.
• Folio: the brass rule under the total redraws when it changes.
• Cancellation: the three windows resize to your dates.
• Rooms: access sheets open in place; the lamp glows.
• Elsewhere: the headline settles in, the closing card's key tag swings, sections reveal with a 14px rise over 650ms, and the phone menu drops in.
• Motion switch in the footer ([data-motion-toggle], html.calm, remembered as site-motion, with the default from prefers-reduced-motion). Calm stops the settle, slides, rule, glow and swing.
• Night switch ([data-theme-toggle]), remembered as site-theme; theme-color follows.

Imagery and illustration

Your own photos of your own rooms, taken in daylight and not stretched wider than they are, plus a photo of each accessible bathroom. The template draws rooms so nothing is borrowed, and no reviews or star ratings are invented.

Signature components

• Calendar: .stay[data-stay] (with an id), containing:
  • script[data-stay-data] with base, rates by weekday (0 is Sunday), dates, min by weekday, minAll, minDates, blocked or blockedAhead, from, until, pick or pickNext, and words (check-in, check-out and night, for days or hires)
  • [data-months-out], button[data-stay-step], [data-stay-msg]
• Folio: .folio[data-folio][data-for="<calendar id>"] with data-clean, data-levy, data-levy-label, data-guest-fee, data-base-guests, data-max-guests, data-unit and data-guest-word, containing [data-guest-step], input[data-add][data-name] (room choices), [data-folio-lines], [data-folio-total], [data-folio-go] and [data-folio-done].
• Cancellation: .cancel[data-cancel][data-for] with data-free-days, data-half-days and data-half-pct, containing .track and an ol of three windows.
• Rooms: [data-rooms] with .switch[data-step-free], [data-rooms-count] and .room[data-step-free], each with .scene[style=--h], .specs, button[data-access-toggle][aria-controls] and .access (a dl of measurements).
• Arrival: .arrive > li with b, time and p.
• Supporting pieces: .booker, .hero-scene with .hero-tag, .card, .facts, .notice, .side-box, .faq, .close-card (--close-bg, --close-em).

Multi-page kit

• Phone menu: .menu-btn[aria-controls] opens .site-menu. Escape, an outside click or choosing a link closes it, and Tab stays inside while it's open.
• Current page: aria-current="page", shown as a navy-soft pill.
• Inner pages: .page-head (brass pinstripes on the right), .crumbs, a .tag and a smaller .h1.
• Fields: .field, .fields, .field-wide, fieldset.field-set, .check, .form-card, [aria-invalid="true"]; form[data-template].
• Tiles, segmented control, gate, slider, switch, tables: .choices, .seg, [data-gate], input.range, .switch[role=switch], .table.
• Events: stay (checkin, checkout, nights), folio (total, nights, guests), rooms (stepFree, shown).
• Helper: Turndown.refresh(root).

Stays: what we build in

We checked these for Australian accommodation in October 2026:

• One total price. Under the Australian Consumer Law, if you show part of a price you must also show the single total, including all taxes, fees and levies, at least as prominently. The folio leads with the total, everything included, and the calendar's nightly rates add up to it.
• No drip pricing. Parliament has passed a ban on drip pricing and other unfair trading practices, starting 1 July 2027: per-transaction charges must be disclosed next to the base price. The folio already works this way; check the final rules before launch.
• Victoria's short stay levy. A 7.5% levy on stays of under 28 nights in short-stay accommodation such as holiday homes (hotels and motels are exempt), from 1 January 2025. Hepburn House shows it as its own line inside the total.
• Access information in measurements. Door widths, bed heights, shower and rails, step-free routes, and assistance animals always welcome (Disability Discrimination Act).
• Cancellation in dates. Refund windows worked out from the guest's check-in, with consumer guarantees untouched if the place cancels.

These notes are design guidance, not legal advice.

• Displaying prices (business.gov.au)
• Australia's new unfair trading practices regime (Allens, July 2026)
• Victoria introduces short stay levy (HLB)

Do and don't

• Do show the whole total, with every fee and levy, from the first date picked.
• Do explain a minimum stay or a booked night in words.
• Do publish access measurements for every room, not just the accessible one.
• Don't add fees at checkout or a card surcharge you didn't show.
• Don't invent scarcity, star ratings or reviews.
• Don't use other hotels' photos.

Accessibility

• AA contrast throughout (measured above), a skip link and a 3px focus ring.
• Calendar: every day is a button whose label says the date, the rate and any minimum, or that it's booked; arrow keys move by day and week, across months; the result is announced politely.
• Folio: a list of lines and a total that's announced; the button names the amount.
• Rooms: the step-free filter is a real switch, the count is announced, and access sheets are disclosure buttons.
• Forms: labelled fields, errors listed in an alert, linked to and marked on each field.
• Testing: responsive to 360px, and tested with motion on and off, in Day and Night.

How to make it yours