Cask

Best for

• Breweries, wineries, distilleries and cellar doors. It's written to the ABAC Responsible Alcohol Marketing Code, the drinking guidelines, standard drinks and pregnancy warning labelling, age checks for online sales and delivery, and responsible service (see "Alcohol: what we build in").
• Anyone who pours, books tables or ships drinks:
  • pubs and bars (The Railway Hotel: a tap board and a table booking that sorts the ride home)
  • bottle shops (Corner Cellars: standard drinks on every bottle, case prices and Saturday tastings)
  • cideries, meaderies, kombucha and non-alcoholic drinks makers
• Audiences: day-trippers planning a cellar door crawl, locals after a pint, gift buyers and club members.

Less suited to: a restaurant (Mise), a café (Riso), or anything selling to people under 18.

Personality and voice

Generous and honest, the cellar hand who pours a taste, tells you its strength, and asks who's driving.

• Headlines: "Brewed in the shed, poured fresh." · "Come for a tasting. Get home safe." · "Take some home."
• Buttons: "Book a tasting" · "Book the tasting" · "Yes, I'm 18 or over"
• Microcopy:
  • "Shed Lager, 90 mL at 4.4% · 0.3 std drinks"
  • "1 driver: soft drinks and a cheese plate, on us"
  • "We check ID when we deliver and never leave alcohol unattended."
• Words to avoid: "smashable", "session all day", "strong", "gets you going", "the perfect way to unwind", anything that dares or rewards drinking more, and medals or awards you didn't win.

Colour

Measured contrast (WCAG).

• Cellar door:
  • ink on paper 15.9:1
  • muted on paper 6.5:1 (5.8:1 on well)
  • claret on paper 8.9:1 (7.9:1 on well, 8.0:1 on its soft fill), white on claret 10.1:1
  • ink on amber 8.4:1; amber ink 6.6:1 (6.6:1 on its soft fill)
  • ok 6.5:1, alert 6.5:1
• Candlelight:
  • ink 16.1:1
  • muted 7.3:1 (6.7:1 on card)
  • claret 9.4:1 (8.6:1 on card), text on claret 8.8:1, claret on its soft fill 8.4:1
  • amber 8.7:1 (7.4:1 on its soft fill)
  • ok 9.9:1, alert 8.4:1
• Closing card: text 15.9:1, body 12.0:1, amber em 8.6:1, ink on its amber button 8.4:1.
• Example dials: pub green (The Railway, white on green 8.1:1), navy (Corner Cellars, 10.2:1) and shiraz (Nightjar, 12.4:1) all meet AA, light and dark, and so does each closing card.

Typography

• Display: DM Serif Display, 400 with italics. Headlines, names on the taps and bottles, the big totals. A label-printer's serif.
• Body: Epilogue, 400–700. Reading, forms, buttons.
• Mono: Source Code Pro, 400–600. ABV, standard drinks, mL, prices.

The signature move: the lit words rest on a line of ale. Claret italics, with an amber wave that pours in underneath and gently sloshes.

Layout

• Frame: a 1200px wrap with a max(20px, 4vw) gutter. An ink top line with an amber label; a sticky header with the tulip-glass mark; bubbles rising through a warm haze behind the hero.
• Hero: copy on the left; the tasting flight on the right.
• Then: the tap board full width; the visit planner beside its heading; the bottle shop; questions; and a dark closing card with a glass that fills and keeps its head.

Shape

• Crisp: --r-s 6px, --r-m 12px, --r-l 20px.
• Glassware: the tulip mark and tag, the bottles and cans in the shop, the glass in each page head and the closing card are drawn in CSS. No images needed.

Motion language

• Pour: the wave pours in under the lit words and sloshes.
• Flight and shop: the meter fills (and stripes red past the guideline), totals slide in when they change.
• Elsewhere: bubbles rise behind the hero and page heads, the page-head glass swirls, the closing glass fills, the mark tilts on hover, and sections reveal with a rise.
• Motion switch in the footer ([data-motion-toggle], html.calm, remembered as site-motion, with the default from prefers-reduced-motion). Calm stops all of it.
• Candlelight switch ([data-theme-toggle]), remembered as site-theme; theme-color follows.

Imagery and illustration

Your own brewhouse, vines, barrels and people, with anyone shown clearly 25 or over. The template draws its glasses, cans and bottles in CSS, so nothing is borrowed. No stock "friends cheersing at sunset", nobody drinking near water, a car or a boat, and no awards or medals you can't show the certificate for.

Signature components

• Tasting flight: .flight[data-flight] with script[data-fl-data] (max, guide, scale, price), containing a [data-fl-pour] segmented control (values in mL), .fl-item labels with input[data-fl-item][data-abv] and [data-fl-sd], [data-fl-count], [data-fl-lines], [data-fl-total], .fl-meter and [data-fl-note]. Standard drinks = litres × ABV × 0.789.
• Visit planner: .visitplan[data-visitplan] with script[data-vp-data] (open weekdays, slots, full as [day, slot], price (0 makes it a table booking), adults, drivers), containing [data-vp-days], [data-vp-times], [data-vp-step] steppers with [data-vp-n] (adults, kids, drivers), a [data-vp-how] segmented control, [data-vp-out], [data-vp-home], [data-vp-book] and [data-vp-msg].
• Bottle shop: .shop[data-shop] with script[data-sh-data] (key, delivery, freeOver), containing .bottle cards (data-id, data-kind can or bottle, data-ml, data-abv, data-price, data-case, data-case-price, and --c on .pic) with [data-sh-step] buttons and an output, [data-sh-lines] and [data-sh-total]. The order is kept for the tab.
• Tap board: .taps[data-taps] with script[data-tp-data] (pours as [name, mL]), a [data-tp-style] segmented control, [data-tp-count], and .tap rows (data-style, data-abv, .low when nearly gone) with .pours and .keg.
• 18+ check: .gate[data-age-gate] (with data-no-text) containing [data-age-yes], [data-age-no] and [data-age-out]; the rest of the page is inert until confirmed, remembered as site-age-ok.
• Supporting pieces: .sd (a standard drinks label), .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 soft pill.
• Inner pages: .page-head (rising bubbles and a tulip glass), .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: flight (std, picks, pour), visitplan (adults, kids, drivers, how, cost), shop (units, total).
• Helper: Cask.refresh(root), and Cask.last, the latest detail of each event, for scripts that load afterwards.

Alcohol: what we build in

We checked these for Australian producers and venues in October 2026:

• The ABAC Responsible Alcohol Marketing Code covers websites, packaging, competitions and influencers. No drinking beyond the guidelines, no promoting strength, no suggesting alcohol brings success, relaxation or a better occasion, no drinking alongside driving, swimming or machinery, and no strong appeal to minors. Paid models and influencers who are adults under 25 can't be shown prominently, and age-restriction tools are used where they exist. Promotions and merchandise follow the same rules.
• The guidelines: no more than 10 standard drinks a week and no more than 4 on any day, and none when pregnant or breastfeeding. Every pour, glass and bottle shows its standard drinks; one is 10 grams of alcohol.
• Labels: the pregnancy warning has been mandatory on alcohol since 31 July 2023.
• Online sales and delivery: sales only to people 18 and over, an age check before shop pages, ID checked on delivery and orders never left unattended. NSW's same-day delivery rules have required age verification at ordering since September 2022.
• Responsible service: staff hold RSA training, ID is checked for anyone who looks under 25, under-18s can't taste or buy, drivers are looked after, and the licence number and the under-18 warning sit in the footer.

These notes are design guidance, not legal advice.

• ABAC Responsible Alcohol Marketing Code (ABAC)
• Pregnancy warning labels (Food Standards Australia New Zealand)
• NSW crackdown on age verification for alcohol delivery (Brews News)
• Card surcharging to end on 1 October 2026 (RBA)

Do and don't

• Do show standard drinks on every pour and product.
• Do ask who's driving, and make the sober choice easy and free.
• Do keep the 18+ check in front of anything you sell.
• Don't promote strength, or present drinking as a dare, a reward or a cure.
• Don't show anyone who looks under 25 prominently, or anything that appeals to kids.
• Don't put text on amber in anything but ink.

Accessibility

• AA contrast throughout (measured above), a skip link and a 3px focus ring.
• 18+ check: a labelled dialog that holds focus, with the page behind it inert until it's answered.
• Flight: pours are labelled checkboxes with their ABV and standard drinks in text; the total and the guideline note are announced; the meter is decoration.
• Planner: days and times are buttons with aria-pressed and spoken dates; full slots are disabled; the steppers announce their counts; the booking result is announced.
• Shop and taps: each stepper button is labelled with the product; totals are announced; standard drinks and keg levels are text.
• Testing: responsive to 360px, and tested with motion on and off, in Cellar door and Candlelight.

How to make it yours