Remedy

Best for

• Community pharmacies, compounding pharmacies, pharmacy groups' local sites
• Optometrists, pathology collection centres, hearing clinics, vet dispensaries
• Health retail and any service where getting it exactly right is the promise
• Audiences: locals of every age, carers, people managing more than one medicine; often on a phone, often in a hurry

Less suited to: luxury or lifestyle brands (Atelier), loud youth or fitness brands (Marquee), medicinal cannabis businesses (use Dispatch or Assay, written for those rules), or anything where mood beats information.

Personality and voice

Plain, precise and kind, like a good pharmacist at the counter. Short sentences. Numbers with units. Instructions you can follow. Never alarming, never salesy.

• Headlines: "Your local pharmacy, counted out properly." · "Send it ahead. Skip the wait." · "Clear fees, written down."
• Buttons: "Send a script" · "Book a time" · "Ask a pharmacist" · "Hours and map"
• Microcopy: "We'll text you when it's ready." · "Bring the original paper script when you collect." · "Ask us and we'll tell you before we fill it."
• Words to avoid: "best", "leading", "miracle", "cure", "guaranteed", "cheapest", any medicine brand or prescription medicine promoted by name outside a price list.

Colour

Measured contrast (WCAG): ink on paper 15.7:1 · muted on paper 5.8:1 (on well 5.3:1) · green on card 6.5:1 · white on green 6.5:1 · label ink on label 16.0:1 · alert on card 6.4:1. After hours: ink 16.2:1 · muted 7.2:1 · green 9.5:1 · text on green 8.6:1 · alert 8.2:1.

Never put a red or green cross in the brand mark: those emblems are protected or overused. Remedy's mark is a split capsule.

Typography

• Display: Schibsted Grotesk 600–800: sturdy, newsy, unfussy.
• Body: Public Sans 400–700: built for public information.
• Label face: IBM Plex Mono 400–600: the label printer. Eyebrows (.tag), numbers (.num), label text, notes.

The signature move: every headline ends in a plain promise set in dispensary green (<em>, not italic): "Your local pharmacy, counted out properly." And anything the business would print on a label (directions, hours, a booking) is set in the mono label face on label stock.

Layout

• 1200px wrap, gutter max(20px, 4vw). Spacing scale --s-1…--s-8 (4 to 96px).
• Hero: copy on the left, the counter on the right (label printer above, blister pack overlapping below). The queue strip runs under the hero.
• Sections alternate paper and well; section heads either stack or split (headline left, lead right).
• Cards in grids of 3 (2 on tablets, 1 on phones); steps as three numbered tickets.

Shape

• Labels are nearly square (--r-xs 4px) with perforated top and bottom edges; everything else is soft (--r-m 16px, --r-l 26px) and buttons are pills.
• Shadows are low and cool (--shadow-card, --shadow-lift); labels cast a warmer, sharper shadow (--shadow-label) because they're paper.
• No glass, no gradients on text. The blister pack is the only metallic surface.

Motion language

• The label prints: .printer feeds the label out of its slot over 1.6s when it scrolls into view; a click prints it again (data-reprint).
• The blister counts out: cells fill one by one (70ms apart, a springy pop); days before today are then taken (foil pressed in) and today is outlined. Tap a filled cell to take it.
• The queue ticks: "Now serving" and the wait flip every few seconds.
• The open-now chip pulses while the pharmacy is open.
• Reveals: 14px rise and fade, 640ms --ease. Buttons press 1px. The phone menu prints down from the header like a label.
• Motion switch in the footer ([data-motion-toggle], html.calm, remembered as site-motion, default from prefers-reduced-motion). Calm prints the label and fills the blister instantly and stops the ticker; nothing is hidden.
• After hours switch ([data-theme-toggle]): the dark mode, remembered as site-theme; theme-color follows.

Imagery and illustration

No stock photos of pills, smiling pharmacists or white coats. The pictures are the things a pharmacy actually makes: labels, packs, a queue number, a drawn street map. Line icons at 1.8px stroke, rounded caps, on a green-soft tile. If a client has real photos of their shop and team, use them in calm, well-lit crops with a 16px radius.

Signature components

• .printer › .slot + .feed › .rx-label: the printed dispensing label (.rx-head, .rx-name, .rx-dir, .rx-rows, .rx-bar barcode generated per label from data-code, .rx-foot).
• .rx-tab: a small label used as a card tab or price tag.
• .blister (data-week, data-rows): the blister pack that counts itself out (.blister-days, .blister-grid, [data-left]).
• .queue (data-queue): now serving and the wait, in mono.
• .open-chip (data-hours JSON, data-tz): open now, until when, or when it opens.
• .svc service cards, .steps numbered tickets, .trust accreditation strip (in place of testimonials), .fees, .faq, .close-card closing band with a label.

Multi-page kit

• Phone menu: .menu-btn[aria-controls] opens .site-menu (a label-stock sheet that prints down from the header); Escape, outside click and links close it; focus is kept inside while open.
• Current page: aria-current="page" on nav and menu links (green tint).
• Inner pages: .page-head with .crumbs, a .tag and a smaller .h1.
• Fields: .field (label + control), .fields (two columns), .field-wide, fieldset.field-set, .select wrapper, .form-card; form[data-template] shows "This is a template" on submit.
• Tiles: .choices › label.choice > input + span (with b and small).
• Segmented control: .seg with button[aria-pressed] or radio labels.
• Slider: input.range (filled to --p). Switch: .switch[role=switch] with .sw; fires a switch event.
• Tables: .table around a <table>; .table.stack becomes labelled rows on phones; td.r right-aligns mono numbers.
• Rendered later: Remedy.refresh(root) wires all of the above, plus printers, blisters, queues and open-now chips, in new markup.

Do and don't

• Do keep every claim factual and checkable: hours, fees, accreditation, who's on duty.
• Do put "In an emergency, call 000" and healthdirect (1800 022 222) somewhere on every page of a health site.
• Do use the label for things a pharmacy would genuinely print: directions to visit, a booking, hours.
• Don't show reviews or testimonials for health services (AHPRA), or promote prescription or pharmacist-only medicines (TGA). A price list is allowed only in the TGA's format: see industries/pharmacy-remedy/.
• Don't print real-looking medication directions for a named medicine on a decorative label.
• Don't use red or green crosses, pill-bottle stock photography or "Rx" as decoration.
• Don't put text on --mint; it's decoration only.

Accessibility

AA contrast throughout (measured above). Skip link, visible focus ring in --focus, real buttons for blister cells and switches, aria-live on counts, the label printer is aria-hidden when decorative and a real button when it reprints. Forms label every field and validate step by step. Tables stack with labels on phones. Responsive to 360px; tested with motion on and off.

How to make it yours