Waypoint

Best for

• Tour operators of every kind: day tours, cruises, multi-day walks. It's written to the consumer law on single prices and cancellations, and the industry template to the Great Barrier Reef's charge and Queensland's snorkelling safety rules (see "Tours: what we build in").
• Anyone selling a place on a date:
  • whale watching and boat cruises (Humpback Bay: adults, children and free under-4s, a whale promise)
  • guided multi-day walks (Overland: places left, the single supplement, three days hour by hour, a fitness check)
  • food and wine tours, cooking classes, workshops, retreats, adventure activities
• Audiences: travellers comparing the whole price, families working out who's free, and people who want to know whether a tour suits them before they pay.

Less suited to: a hotel (Turndown), a venue hired by the date (Garland), or a ticketed festival with seat maps.

Personality and voice

Inviting and organised, the guide who's done this a thousand times and still loves it.

• Headlines: "A day in the Barossa, planned." · "One price, everything in it." · "The day, hour by hour."
• Buttons: "Choose a date" · "See the day" · "Send the booking"
• Microcopy:
  • "8 of 11 seats left · Needs 1 more to run"
  • "Reef tax (Environmental Management Charge), 3 × $8.50, set by the Marine Park Authority"
  • "You'll wear a red snorkel so the crew can spot you at a glance. This isn't a test you can fail."
• Words to avoid: "from $99*" with fees added at checkout, "only 2 left!" when it isn't true, "non-refundable" where the law says otherwise, and "suitable for all fitness levels" when day two has a 300 m climb.

Colour

Measured contrast (WCAG).

• Day out:
  • ink on paper 14.1:1
  • muted on paper 5.3:1 (5.2:1 on well)
  • route on paper 7.6:1 (6.8:1 on well and on its soft fill), white on route 8.5:1
  • ink on sea 9.3:1; sea-ink text 5.6:1 (5.3:1 on its soft fill)
  • ok 5.3:1, alert 5.8:1
• Night sky:
  • ink 16.3:1
  • muted 7.2:1 (6.6:1 on card)
  • route 9.4:1, text on route 9.0:1, route on its soft fill 7.9:1
  • sea 10.9:1, ok 10.1:1, alert 9.1:1
• Closing card: text 14.7:1, sea em 9.8:1, ink on its sea button 9.3:1.
• Example dials: ocean (Humpback Bay), forest (Overland) and reef teal (Reefline) all meet AA, light and dark, and so does each closing card.

Typography

• Display: Alegreya, 500–900 with italics. Headlines, dates, totals.
• Body: Alegreya Sans, 400–800. Reading, forms, buttons.
• Mono: Anonymous Pro, 400 and 700. Times, seats, prices in lists, labels.

The signature move: the lit words turn italic and route violet, and a dashed route draws itself underneath them to a pin.

Layout

• Frame: a 1200px wrap with a max(20px, 4vw) gutter. An ink top line with a sea-glass label; a sticky header with the compass; contour lines rising behind the hero (hidden on phones).
• Hero: copy on the left; the departures on the right.
• Then: the fare beside the fit check; the day plan; what's included and what isn't; questions; and a night-blue closing card with contour rings and a pin that bobs on them.

Shape

• Soft: --r-s 6px, --r-m 12px, --r-l 20px. Cards sit on a soft shadow with a hairline.
• Pins: drawn in CSS, a rounded teardrop with a hole, for the tag, the page heads, the day plan and the fit check's advice.
• The mark: a compass, a sea-glass face with a route-violet needle.

Motion language

• Departures: seats bars fill; the chosen date fills its chip.
• Fare: the total slides in when anything changes.
• Day plan: the route fills to the chosen pin.
• Elsewhere: the route draws under the headline, the closing card's pin bobs, 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 route, the bars, the fill and the bob.
• Night sky switch ([data-theme-toggle]), remembered as site-theme; theme-color follows.

Imagery and illustration

Your own photos from your own tours, with your guests' permission: the place, the guides, the group size as it really is. The template draws maps and pins so nothing is borrowed. No invented reviews, "as seen on" badges or stock photos of somewhere else.

Signature components

• Departures: .departures[data-departures] containing script[data-dep-data] (cap, min, unit, time, show, pick, optional go and need sentences, and deps as rows of day offset, seats booked and an optional note), [data-dep-list], [data-dep-more] and [data-dep-msg]. Each date renders as button.dep.go|need|full.
• Fare builder: .fare[data-fare] with data-for (the departures) and data-unit, containing:
  • .trav[data-price] rows (optional data-min, data-max), each with .tr-name, button[data-q] and an output
  • .addon[data-price][data-cap] rows (people or paying), the same shape
  • script[data-fare-charges] rows of label, amount, who pays (all, paying or booking) and a note
  • [data-fare-lines], [data-fare-total], [data-fare-per] and [data-fare-warn]
• Day plan: .dayplan[data-dayplan] with button[data-show-day] tabs and .dp-day[data-day] panels, each with .grade (--g out of 5), .dp-line holding button.dp-pin (--x along the line) and .dp-stops > li (.dp-at, h4, p, .dp-meta).
• Fit check: .fitcheck[data-fitcheck] containing script[data-fit-data] (advice as key to title and text, and the start, some and none lines), fieldset.fit-q[data-q] with yes and no radios carrying data-adds (comma-separated keys), [data-fit-head] and [data-fit-out].
• Supporting pieces: .plan-pair, .incl (.checks and .nots), .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 route-soft pill.
• Inner pages: .page-head (contour rings and a dropped pin), .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: departure (date, left, guaranteed, label, time), fare (people, paying, total, over), stop (day, index), fit (flags, answered, total).
• Helper: Waypoint.refresh(root), and Waypoint.last, the latest detail of each event, for scripts that load afterwards.

Tours: what we build in

We checked these for Australian operators in October 2026:

• One total price. Under the Australian Consumer Law a price shown in parts needs a single total at least as prominent, so the fare puts every mandatory charge in the total and shows it as a line, never added at checkout.
• The reef tax. Visitors on tourism trips in the Great Barrier Reef Marine Park pay the Environmental Management Charge: $8.50 a person for a full day (three hours or more) and $4.25 for a part day, rising to $9.00 and $4.50 from 1 April 2027. Under-4s are exempt only when they travel free, which is exactly how the fare counts them.
• Snorkeller safety. Queensland's Safety in Recreational Water Activities Regulation 2024 and its code of practice require medical advice for every snorkeller, headcounts and a lookout, and ask operators to identify people who may be at risk (45 and over, medical conditions, weak swimmers, people who don't speak English well) so supervision can be planned around them: red snorkels, flotation, staying near the lookout or a guide. The fit check asks exactly that, and says it guides supervision rather than turning people away.
• When a tour doesn't run. Minimum numbers are shown on every date, and the copy says what happens if a date falls short or the weather turns: another date or a full refund. Consumer guarantees apply on top.
• No card surcharges. Surcharging on eftpos, Mastercard and Visa ended on 1 October 2026.

These notes are design guidance, not legal or safety advice.

• What are the charges? (Great Barrier Reef Marine Park Authority)
• Snorkelling incidents (WorkSafe Queensland)
• Safety a priority for the diving and snorkelling industry (WorkSafe Queensland)
• Displaying prices (business.gov.au)
• Card surcharging to end on 1 October 2026 (RBA)

Do and don't

• Do show seats left and the minimum to run on every date.
• Do put every mandatory charge in the total, as its own line.
• Do say how the tour adapts to people, before they ask.
• Don't invent scarcity, reviews or "as seen on" badges.
• Don't call a hard day "suitable for everyone".
• Don't put text on sea-glass in anything but ink.

Accessibility

• AA contrast throughout (measured above), a skip link and a 3px focus ring.
• Departures: each date is a button with its status in words; full dates are disabled and say so; the chosen date's consequences are announced.
• Fare: every plus and minus button names who it adds, each count and the total are announced, and the over-capacity warning is a status message.
• Day plan: pins are buttons named with their time and stop; the list carries the same content, so the line is never needed to understand the day.
• Fit check: each question is a fieldset with a legend and two labelled radios; the advice is announced as it changes.
• 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 out and Night sky.

How to make it yours