Vigil

Best for

• Telehealth GP practices, after-hours and online-only clinics, video arms of existing practices
• Any service people book by the quarter hour and join by video or phone: telehealth psychology and allied health, after-hours vets, nurse lines, specialist video clinics
• Audiences: people at home in the evening, often unwell or worried, often on a phone, sometimes with low vision or a sick child on one arm

Less suited to: walk-in clinics with a front door to show (Pebble, Remedy), anything loud or sales-led, products rather than appointments.

Personality and voice

Calm and awake, like a good night nurse: says what happens next and when, never rushes, never sells. Short sentences; every time in mono.

• Headlines: "A doctor on call, with the lamp still on." · "From booking to eScript, in under an hour." · "Wait on the couch, not in a chair." · "The fee, before you book."
• Buttons: "Book a doctor" · "See fees" · "Join the waiting room" · "Add to calendar"
• Microcopy: "If the video drops, the doctor rings your mobile." · "You won't pay for an appointment we can't finish." · "Template demo: no camera or microphone is used."
• Words to avoid: "instant", "skip the GP", "no questions asked", "guaranteed script", "discreet", urgency ("only 2 left!") and any promise of a particular medicine.

Colour

Measured contrast (WCAG): ink on paper 15.7:1 · muted on paper 5.3:1 (on card 5.8:1, on well 4.9:1) · lamp on paper 5.2:1, on card 5.8:1 · white on lamp 5.8:1 · screen on card 6.5:1 · alert 6.6:1. Night shift: ink 16.7:1 · muted 6.8:1 (on card 6.2:1) · lamp 10.5:1 · text on lamp 9.9:1 · screen 8.1:1. On the night surfaces: moon-2 on night 12.3:1, night-muted 7.6:1.

Typography

• Display: Outfit 500–600: round and calm, tight at large sizes.
• Body: Atkinson Hyperlegible Next 400–700: drawn by the Braille Institute for low-vision readers, which is who is reading a clinic's site at 11pm.
• Times: Atkinson Hyperlegible Mono 400–500: every time, fee figure and label, with slashed zeros so 8:00 never reads as 8:OO.

The signature move: every headline ends in the phrase that matters, lit by the lamp: "A doctor on call, with the lamp still on." Eyebrows are a small lit dot and a mono label, green only when it means someone is online.

Layout

• 1200px wrap, gutter max(20px, 4vw). Spacing --s-1…--s-8 (4 to 104px).
• Hero: copy on the left, the night dial on the right, with the lamp glowing behind it.
• Night surfaces (dial, call, closing card, phone menu) are always night, so the page reads as a lit room in Day clinic and a window in Night shift.
• Features are soft rows (icon well, title, sentence), not icon-card grids. Fees are three cards with the figure first.

Shape

• Soft and round: --r-s 10px inputs, --r-m 18px tiles and FAQ, --r-l 28px cards and night surfaces; pill buttons and segmented controls.
• Shadows are long and low; the lamp button carries a warm glow under it.
• The brand mark is a crescent lamp: a lit disc half covered by the night.

Motion language

• The dial: free ticks fade in around the clock when it's seen; the lamp needle sits on now and moves every half minute; every few seconds someone takes a free time (the tick flashes and dims) and the next free time updates.
• The queue: the person at the front goes in through the door and everyone moves up (a FLIP slide), then it starts again.
• The visit log: steps light up one by one to the current one.
• The call: light drifts behind the doctor; the timer counts.
• The lamp breathes (9s), so nothing on the page is ever quite still while motion is on.
• Reveals: 18px rise and fade, 700ms. The phone menu drops down as a night card.
• Motion switch in the footer ([data-motion-toggle], html.calm, remembered as site-motion, default from prefers-reduced-motion). Calm keeps the dial's information (lit ticks, the needle, the next time) and stops everything else.
• Night shift switch ([data-theme-toggle]), remembered as site-theme; theme-color follows.

Imagery and illustration

The service, not stock: the dial, the queue, the call card, the visit log. Line icons at 1.7px stroke in a --lamp-soft well. Photography only of real clinicians at a real desk at night, warm-lit. Never stethoscope-on-laptop stock, pills, syringes, or a patient looking unwell on a sofa.

Signature components

• .dial[data-hours="7-24"][data-step="15"][data-href][data-online] › .dial-head ([data-dial-status]) › .dial-face (empty; the script draws the clock and the centre read-out) › .dial-next (empty; the next four free times as links) › .dial-note. data-href gets ?at=<ms> for pages, or stays as it is for a #hash.
• .queue[data-ahead][data-mins][data-names][data-you][data-next] › .queue-read ([data-q-text], [data-q-time]) › .queue-line (empty).
• figure.call[data-call=<seconds>] › .call-bg, .call-time [data-call-time], .call-self, .call-who (.av, b, small), .call-bar (button[aria-pressed], button.end).
• ol.visit[data-at] › li › .time, b, p.
• .rows › div › .ic, h3, p · .fees[style="--n:3"] › .fee(.lit) › .k, .h3, b, p · .lamp (inside .hero or .page-head) · .notice / .notice.safety · .faq details · .close-card · .foot-safe.

Multi-page kit

• Phone menu: .menu-btn[aria-controls] opens .site-menu (a night card); Escape, outside click and links close it; Tab stays inside while open.
• Current page: aria-current="page" (a soft lamp pill).
• Inner pages: .page-head (with an optional .lamp) with .crumbs, a .tag and a smaller .h1.
• Fields: .field, .fields, .field-wide, fieldset.field-set, .check, .form-card; [aria-invalid="true"] turns the border to alert; form[data-template] shows "This is a template" on submit.
• Tiles: .choices › label.choice > input + span > b + small. Segmented control: .seg with button[aria-pressed] (with data-filter and data-value) or label > input + text.
• Gate: [data-gate] with button[data-show="panel-id"].
• Slider, switch, tables: input.range, .switch[role=switch], .table / .table.stack, .r for figures.
• Helpers for templates: Vigil.slots(day, now, [open, close], step), Vigil.taken(date) (the shared "already booked" pattern), Vigil.time(date), Vigil.day(date), Vigil.refresh(root).

Health services in Australia

Vigil was written for clinics. A few rules shape the copy and the template (design guidance, not legal advice):

• Medicare and telehealth. GP telehealth attracts a Medicare rebate only when the patient has had a face-to-face service with the practice in the past 12 months, or is registered with it through MyMedicare, unless an exemption applies (sexual and reproductive health, babies under 12 months, people experiencing homelessness and others). An online-only practice charges most appointments privately; say so plainly, and show the fee before booking.
• No testimonials or reviews about the clinical service (Ahpra's advertising guidelines), no claims of outcomes, no urgency or scarcity.
• Prescribing only after a real-time consultation, never from a form; say what isn't done by telehealth (emergencies, examinations, Schedule 8 medicines for new patients).
• Every page carries "not for emergencies" with 000, healthdirect (1800 022 222) and Lifeline (13 11 14), or the right crisis lines for the service.

Do and don't

• Do put a time on every promise, in mono.
• Do keep the dial honest: sample times are labelled as samples, and "next free" means free.
• Do keep the night surfaces night in both modes.
• Don't use the lamp for more than one phrase per headline, or for anything that isn't the next action.
• Don't use green except the online dot.
• Don't add testimonials, urgency or "skip the GP" promises.

Accessibility

AA contrast throughout (measured above), a body face built for low vision at 17.5px, skip link, 3px focus ring in the screen blue. The dial is decorative SVG with a spoken read-out (aria-live) and its free times repeated as real links; the queue's text is live and its seats hidden; the call's buttons use aria-pressed; the visit log is an ordered list. Forms label every field and mark errors with aria-invalid. Tables stack on phones. Responsive to 360px; tested with motion on and off, in Day clinic and Night shift.

How to make it yours