Dispatch

Best for

• Specialist and mail-order dispensing pharmacies, including Australian dispensaries that supply medicinal cannabis on prescription (the public site never names or shows the goods; see "Regulated health in Australia")
• Compounding pharmacies, home-delivery and cold-chain health logistics, pathology couriers
• Any service whose promise is "it'll arrive, and you'll know where it is": couriers, freight, parts, labs that ship
• Audiences: patients and carers at home on phones, prescribers and practice staff, often checking status more than browsing

Less suited to: walk-in community pharmacies (Remedy), corporate manufacturers (Assay), luxury or lifestyle brands, anything slow and reflective.

Personality and voice

Direct and dependable, like a good dispatcher on the phone: what happens next, when, and who to call. Short imperative sentences; times, cut-offs and counts in mono.

• Headlines: "Your script, dispensed and on its way." · "Four scans to your door." · "Plain outside. Logged inside." · "Send it before two. Sign for it tomorrow."
• Buttons: "Send a script" · "Track an order" · "Next scan" · "Delivery times"
• Microcopy: "We'll text you a tracking link." · "Not home? It goes to a secure locker or back to us." · "We'll confirm the total before anything is dispensed."
• Words to avoid: "best", "cheapest", "discreet" as a selling point for a product, any product, brand, ingredient or condition name on a public page of a regulated-health site.

Colour

Measured contrast (WCAG): ink on paper 15.6:1 · muted on paper 5.6:1 (on well 5.0:1) · orange on card 5.5:1 · white on orange 5.7:1 · cold on card 6.4:1 · alert 6.3:1 · hi-vis behind ink 6.3:1. Night freight: ink 16.6:1 · muted 7.0:1 (on card 6.4:1) · orange 7.5:1 · text on orange 8.3:1 · cold 7.9:1.

No green, for the same reason as Assay on regulated-health sites: it reads as "plant" and "natural".

Typography

• Display: Barlow Condensed 600–800, uppercase: highway-sign capitals, built to be read moving.
• Body: Barlow 400–600: the same signage family at reading size.
• Codes: Martian Mono 400–600: consignment numbers, times, cut-offs, counts, eyebrows.

The signature move: every headline ends in the promise in orange, as a status line would: "Your script, dispensed and on its way." Anything with a time on it (a cut-off, an ETA, a scan) is set in mono.

Layout

• 1240px wrap, gutter max(20px, 4vw). Spacing scale --s-1…--s-8 (4 to 104px).
• A dark status strip sits above the header with today's dispatch state.
• Hero: copy and the cut-off countdown on the left, the tracker on the right; a tape ticker runs under the hero.
• Heavy 2px ink rules frame the important things (tracker, counts, tables, forms); everything else uses hairlines.
• Steps are crates: numbered boxes with a heavy top edge.

Shape

• Squared and sturdy: --r-s 4px for buttons and inputs, --r-m 8px for cards, --r-l 14px for big panels. Buttons have a 3px bottom edge that presses down.
• Shadows are short; the thermal label gets a sharper paper shadow and a peeled corner.
• The eyebrow is a sticker (bordered box) with an orange chevron; the brand mark is a taped parcel from above.

Motion language

• The ride: the tracker scans stop by stop (850ms each); the travelled route fills in ink, the current stop pulses orange, and a parcel rides the line with a small bump at each stop. "Next scan" advances it; at the end it replays.
• The slap: the consignment label lands with a slight overshoot and settles at −1.5°.
• The cut-off counts down each second to today's dispatch time, then names the next dispatch day.
• The network: parcels travel the lanes from the hub; cold lanes carry blue parcels.
• The tape scrolls continuously (38s a loop); the status dot blinks; counts count up.
• Reveals: 16px rise and fade, 600ms. The phone menu drops down as a numbered manifest.
• Motion switch in the footer ([data-motion-toggle], html.calm, remembered as site-motion, default from prefers-reduced-motion). Calm shows the tracker at its current stop, stops the tape and the network, and keeps the countdown's numbers (they're information).
• Night freight switch ([data-theme-toggle]): the dark mode, remembered as site-theme; theme-color follows.

Imagery and illustration

Logistics, not product: trackers, labels, routes, boxes, vans, drawn maps. Line icons at 1.7px stroke on an orange-soft tile. Photography only of real people at work (pharmacists at the bench, packing, couriers), in daylight with a slight warm grade. Never show the goods, pills, leaves, droplets or a customer opening a parcel to reveal a product.

Signature components

• .tracker[data-at] › .tracker-head ([data-eta]) › ol.route › li.stop (data-scan, data-eta, <i>, <b>, <small>) › .tracker-foot ([data-scan-out], [data-advance]).
• .consign: the thermal label (.cs-row.cs-2 / .cs-3, .cs-k, .cs-sort, .cs-big, .cs-bars[data-code], .cs-matrix[data-code], .cs-icons with .inv).
• .cutoff[data-cutoff="14:00"][data-days="1-5"][data-tz][data-open]: the countdown, filled by the script.
• .network[data-net]: JSON {"w","h","hub":{x,y,n,s,pos},"nodes":[{x,y,n,s,pos,cold,trips,minor}]}.
• .tape › .tape-track › spans, .crates (--n), .counts ([data-count]), .feat cards, .strip, .faq, .notice / .notice.safety, .close-card with a tape.

Multi-page kit

• Phone menu: .menu-btn[aria-controls] opens .site-menu (a numbered manifest); Escape, outside click and links close it; focus stays inside while open.
• Current page: aria-current="page" (orange underline).
• Inner pages: .page-head with .crumbs, a .tag and a smaller .h1.
• Fields: .field, .fields, .field-wide, fieldset.field-set, .select, .form-card; form[data-template] shows "This is a template" on submit.
• Tiles: .choices › label.choice > input + span. Segmented control: .seg with button[aria-pressed]; data-filter="#list" and data-value filter items with data-tags.
• Gate: [data-gate] with button[data-show="panel-id"].
• Slider, switch, tables: input.range, .switch[role=switch], .table / .table.stack, td.r, td.m.
• Rendered later: Dispatch.refresh(root).

Regulated health in Australia

Dispatch was written for dispensaries whose public site can't talk about what they dispense. A pharmacy that supplies medicinal cannabis (or any prescription-only medicine) in Australia may describe its pharmacy services, but it may not advertise the medicines:

• Never name, show or describe the goods: no product or brand names, ingredients, strengths, "THC", "CBD", "flower", strains, "plant medicine", or leaf, flower or droplet imagery, and no menus or stock lists.
• No prices for prescription medicines on the site (the only exception, a TGA-format price list, isn't suitable for unapproved products). Tell patients the total before dispensing, privately.
• No condition claims, eligibility quizzes, "get assessed" funnels or links to prescribing clinics, and no testimonials or reviews.
• What you can say: how to send a script, the pharmacist check, packaging, delivery times and costs, tracking, privacy, opening hours, support for prescribers, and how to reach a pharmacist.
• Every page carries a footer line that the site doesn't advertise any medicine, how to report a side effect, and 000 / healthdirect where people might look for help.

These notes are design guidance, not legal advice; check final copy against the TGA's current guidance and the pharmacy's own regulatory advice before launch.

Do and don't

• Do put a time or a count on every promise: cut-offs, ETAs, scans.
• Do keep the tracker and labels honest: sample data is labelled as a sample.
• Do use the tape for service promises only (tracked, signed for, plain packaging).
• Don't use green, leaves or product imagery; don't name the goods anywhere public.
• Don't set small text in hi-vis orange on light grounds; use --orange.
• Don't make the countdown pressure people to order a medicine: it's about dispatch times, not urgency to buy.

Accessibility

AA contrast throughout (measured above). Skip link, visible blue focus ring, the tracker is an ordered list with aria-current="step" and a live scan line, the countdown has a spoken summary, the label and network drawings are decorative and repeated in text or tables, the tape is aria-hidden. Forms label every field. Tables stack on phones. Responsive to 360px; tested with motion on and off, in Day and Night freight.

How to make it yours