Headliner

Best for

• Music festivals, one day or a camping weekend. It's written to single-price rules, the drip pricing rules from 1 July 2027 and the Companion Card (see "Events: what we build in").
• Anyone selling tickets to a program:
  • food and wine festivals (Harvest Table: a tasting ticket, a designated driver price, free under-12s, masterclasses)
  • conferences (Code by the Bay: conference, student and workshop passes, talks across rooms and two days)
  • comedy and arts festivals, sports carnivals, school fetes and markets with stages
• Audiences: people comparing ticket totals, groups planning who sees what, and anyone who needs to know the last bus before they buy.

Less suited to: a single concert in a seated venue (Marquee), a nightclub, or a reseller.

Personality and voice

Loud on the poster, clear on the details, caring about the walk home.

• Headlines: "Two days by the river." · "Pick your acts, dodge the clashes." · "Look after your mates."
• Buttons: "Get tickets" · "Plan your day" · "Pay $778"
• Microcopy:
  • "2 × 2-day pass · $249 each, including the $6.95 booking fee"
  • "1 clash: Wren & the Wires and Neon Gully overlap by 30 min."
  • "Camping chair · No · It blocks views. There are seats at the River Stage"
• Words to avoid: "from $199 + fees", "only 3 left!" when it isn't true, "no refunds under any circumstances", and anything that makes risky behaviour sound normal.

Colour

Measured contrast (WCAG).

• Day session:
  • ink on paper 16.5:1
  • muted on paper 6.2:1 (5.6:1 on well)
  • hot on paper 6.0:1 (5.4:1 on well, 5.3:1 on its soft fill, 6.5:1 on card), white on hot 6.5:1
  • ink on cyan 11.3:1; cyan text 5.8:1 (5.6:1 on its soft fill)
  • hot on the stage light 5.4:1 at its brightest
  • alert 6.0:1
• After dark:
  • ink 17.0:1
  • muted 7.4:1 (7.0:1 on card)
  • hot 9.1:1, text on hot 8.3:1, hot on its soft fill 7.9:1
  • cyan 12.4:1
  • the stage light dims to 26%, so the lit words keep 5.0:1 in it
• Closing card: text 15.7:1, cyan em 11.5:1, ink on its cyan button 11.3:1.
• Example dials: wine (Harvest Table), teal (Code by the Bay) and wattle amber (Wattle Hill) all meet AA, light and dark, and so does each closing card.

Typography

• Display: Bowlby One, one weight, uppercase. Headlines, totals, stage names.
• Body: Kumbh Sans, 400–800. Reading, forms, buttons, act names.
• Mono: Victor Mono, 400 and 600. Set times, prices, departures.

The signature move: the lit words turn hot fuchsia, lit from below by a cyan stage light that slowly sweeps from side to side.

Layout

• Frame: a 1200px wrap with a max(20px, 4vw) gutter. An ink top line with a cyan label for the current release; a sticky header with the wristband; two stage beams crossing behind the hero.
• Hero: copy on the left; the ticket builder on the right.
• Then: the clash finder with your timetable beside it; getting home beside the bag checker; looking after each other; questions; and a stage-dark closing card with sweeping beams and a crowd along the bottom.

Shape

• Friendly: --r-s 8px, --r-m 14px, --r-l 22px.
• Beams: conic gradients from the top, in cyan and fuchsia, behind the hero, the page heads and the closing card.
• The mark: a wristband, a fuchsia loop with a cyan tag. Page heads carry one dropped in the corner.

Motion language

• Tickets: the total slides in when anything changes; release bars show what's left.
• Clash finder: acts lift on hover; picked acts fill; clashes stripe.
• Elsewhere: the stage light sweeps under the headline, the beams drift behind the hero and sweep on the closing card, 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 light, the beams and the slides.
• After dark switch ([data-theme-toggle]), remembered as site-theme; theme-color follows.

Imagery and illustration

Your own festival photos, with the permission your conditions of entry describe: crowds from behind, stages, food, the site at golden hour. The template draws beams and wristbands so nothing is borrowed. No artist photos or logos you don't have rights to, and no invented reviews or "sold out" badges.

Signature components

• Ticket builder: .tickets[data-tickets] containing script[data-tix-data] (fee, unit, optional after and adultText), .tix[data-price] rows (optional data-adult, data-needs-adult, data-max, data-comp; .tx-name, button[data-q], an output, .tx-price, .tx-phase with --left), input[data-companion], [data-tix-lines], [data-tix-total], [data-tix-per] and [data-tix-warn].
• Clash finder: .clashes[data-clashes] containing script[data-clash-data] (stages, days as label and acts of stage, name, start, end and an optional class like head, picked, prompt), [data-days], [data-clash-grid] (filled with .cg-col stages and button.act blocks), [data-mine] and [data-clash-sum]. Times after midnight count as late that night.
• Getting home: .gethome[data-gethome] containing script[data-home-data] (modes as name, note, walking minutes, departure times and an optional walking note; leaveTimes; leaveDefault), select[data-leave], [data-home-out] and [data-home-note]. It follows the picks event.
• Bag checker: .bagcheck[data-bagcheck] containing script[data-bag-data] (items as item, yes, no or limit, why, and search aliases), input[data-bag-q], button[data-bag-chip], [data-bag-count] and [data-bag-list].
• Supporting pieces: .plan-pair, .card, .facts (--n columns, or .stack), .notice, .side-box, .checks, .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 hot-soft pill.
• Inner pages: .page-head (a beam and a wristband), .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: tickets (people, paid, total, fees, ok), picks (day, count, clashes, until, last), home (leave).
• Helper: Headliner.refresh(root), and Headliner.last, the latest detail of each event, for scripts that load afterwards.

Events: what we build in

We checked these for Australian events in October 2026:

• One total, fees in. Under the Australian Consumer Law a price shown in parts needs a single total at least as prominent. The templates put the booking fee inside every ticket price and say so, and show the total with nothing added at checkout.
• Drip pricing from 1 July 2027. New unfair trading practice and drip pricing rules, passed by Federal Parliament, start on 1 July 2027: a per-transaction charge has to be shown with the base price, prominently, with whether it applies and whether the price includes it. Folding fees into the price already meets that.
• Companion Card. Companion Card affiliates give a cardholder's carer or support person free entry; the ticket builder adds companion tickets for free once the box is ticked, capped at the paid tickets on the order.
• Under-18s. Under-18 tickets need an adult ticket on the same order, enforced before checkout; bars serve responsibly.
• Resale and refunds. Resale through the official exchange at the price paid, and a full refund including fees if the organiser cancels; consumer guarantees on top.
• Care. Free water, medical teams without judgement, quiet spaces, a clear way to report harassment, a lost-mates point, and the way home planned before the last act.
• No card surcharges. Surcharging on eftpos, Mastercard and Visa ended on 1 October 2026.

These notes are design guidance, not legal advice.

• Australia's new unfair trading practices regime (Allens)
• Apply to be a Companion Card affiliate (Service NSW)
• Displaying prices (business.gov.au)
• Card surcharging to end on 1 October 2026 (RBA)

Do and don't

• Do put the booking fee inside the price, and say so.
• Do show what's left in a release only when it's true.
• Do plan the way home on the same page as the lineup.
• Don't add fees at checkout.
• Don't use artists' photos or logos without permission.
• Don't put text on cyan in anything but ink.

Accessibility

• AA contrast throughout (measured above), a skip link and a 3px focus ring.
• Tickets: every plus and minus button names the ticket; counts and the total are announced; the under-18 rule is a status message; sold-out tiers say so.
• Clash finder: each act is a button with its name, stage and times, and a pressed state; the grid scrolls sideways on phones; your timetable and clashes are text beside it, announced as they change.
• Getting home: a labelled select; each option's next departures are text.
• Bag checker: a labelled search field; the count of matches is announced; each item's answer is a word, not just a colour.
• 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 session and After dark.

How to make it yours