Collar

Best for

• Vet clinics: same-day sick visits, the urgent check and the toxin lookup, puppy and kitten plans, prices with what's included, vets with interests and registered specialists. All of it follows the vet boards' advertising rules (see "Vet clinics: what we build in").
• Anyone who tags, triages and schedules: plumbers (Tap & Tide: keys on a numbered key tag, "is it an emergency?", a hot water plan), lawn care (Fernway: a plant stake, "lawn in trouble?", a weeds lookup, a new-lawn plan), dog groomers and walkers, pet sitters, locksmiths, pool services.
• Audiences: people who are worried and want a straight answer about how soon, and what it'll cost.

Less suited to: luxury and editorial (Lustre, Atelier), clinical healthcare (Enamel, Remedy), or anything that should feel hushed.

Personality and voice

Warm and practical, like a good vet nurse: tell us what's happening, here's how soon, here's what it costs. Calm in an emergency, a little playful the rest of the time.

• Headlines: "Vets who know them by name." · "Is it urgent? Ask first." · "Their first year, date by date." · "What a visit costs."
• Buttons: "Book a visit" · "Call 03 5400 0000" · "Check now" · "Request the booking"
• Microcopy: "Who are we seeing?" · "If you're not sure, call: we'd rather you asked." · "Don't make them vomit unless we tell you to."
• Words to avoid on a vet site: "best vets in…", "specialises in" or "specialist" for a vet who isn't a registered specialist, brand names of prescription medicines, and "guaranteed".

Colour

Measured contrast (WCAG), Daylight:

• Ink on paper: 15.6:1
• Muted on paper: 6.1:1 (5.6:1 on well)
• Plum on paper: 9.2:1 (8.4:1 on well, 8.1:1 on its soft fill)
• White on plum: 9.9:1
• Red on paper: 6.1:1 (5.3:1 on its soft fill)
• White on red: 6.5:1
• Ink on ball: 13.2:1
• Engraving on brass: 5.9:1

Night shift:

• Ink: 16.5:1
• Muted: 7.4:1 (6.8:1 on card)
• Plum: 9.7:1
• Text on plum: 9.0:1
• Plum on its soft fill: 7.7:1
• Red: 8.5:1
• Engraving: 5.4:1

Example and industry accents (on paper, light / dark): copper (Tap & Tide) 6.8:1 / 9.2:1, turf green (Fernway) 6.3:1 / 11.5:1, Swan River blue (Brindle) 7.7:1 / 10.0:1.

Typography

• Display: Gabarito, 500–800. Round, sturdy and friendly. Headlines are set in 700, tight.
• Body: Rethink Sans, 400–700. Clear at small sizes, for the signs and the prices.
• Engraved: Sometype Mono, 400–600. Used for the tag, eyebrows, dates and registration lines.

The signature move: the promise at the end of a headline turns plum, with a tennis-ball-green leash squiggling underneath it.

Layout

• Page frame: a 1200px wrap with a gutter of max(20px, 4vw). An ink top line carries a red "Emergency?" and the phone number. The sticky header has a red "Emergency?" link beside the booking button.
• Hero: copy on the left, with "Who are we seeing?". On the right is the stage: a plum collar with stitching, a buckle and a D-ring, with the ID tag hanging from it and a tennis ball bouncing in the corner.
• Then, in order:
  • The emergency card
  • The triage beside the lookup
  • The planner, with three facts beside it
  • Prices, with what's included
  • The team, with their interests and registrations
  • Visit facts and an FAQ
  • An ink closing card with a drifting paw

Shape

• Soft and sturdy: --r-s is 12px, --r-m 20px and --r-l 32px. Buttons are pills, with a 4px plum "step" shadow that presses down when clicked.
• The tag is real metal: a brass fill, a darker rim, a lighter bevel inside and a steel ring. It comes in four shapes. Bone and round hang from a tab. Key hangs from a hole at one end. Stake is a plant label pushed into a strip of turf.
• The paw is the style's mark. It sits on eyebrows, lists and the brand mark, and examples can swap it for their own (a drop, a leaf) through --paw-mask.

Motion language

• The tag: it sways gently from its ring (3.6s). When it comes into view it engraves the default name letter by letter, with a blinking cursor. Each keystroke and each shape change jolts it on its ring.
• The ball: bounces with squash and stretch (2.6s).
• The gauge: slides to Book, Today or Now with a springy overshoot. It turns plum for "today" and red for "now".
• The planner: the next date pulses in tennis-ball green.
• Other motion: the emergency dot pings and the closing card's paw drifts. Sections reveal with a 16px rise and fade over 650ms, and the phone menu drops in.
• Motion switch in the footer ([data-motion-toggle], sets html.calm, remembered as site-motion, default from prefers-reduced-motion). Calm stops the sway, the ball, the pulses and the engraving (the name appears at once).
• Night shift switch ([data-theme-toggle]), remembered as site-theme; theme-color follows.

Imagery and illustration

The tag is the picture. Real photos of the clinic, the team and patients (with their owners' permission) are welcome. Don't use stock puppies or sad-animal photos to push treatment.

Signature components

• The ID tag: .idtag[data-idtag][data-shape][data-demo] (role="img") › .swing › .ring + .plate-box › svg.plate (.metal, .bevel) + .text › [data-tag-name][data-default] + [data-tag-line][data-default]. It sits on .stage (.collar with .dring, .ball, .stage-foot), or .stage.loose without a collar, or .stage.grounded with .turf.
• Engraving inputs: input[data-engrave="name"|"line"][data-for]. The name also fills every [data-pet-name][data-default]. .petname is the hero field, and [data-tag-shape] > button[data-shape] switches the shape.
• The triage: .triage[data-triage][data-say-0..3] › .signs > label.sign[data-level] > input + .gauge + .triage-out ([data-triage-title], [data-triage-text], [data-at-level], [data-triage-clear]).
• The lookup: .lookup[data-lookup] › input[data-lookup-q] + [data-lookup-count] + ul.lookup-list > li[data-terms] (b, .lvl.lvl-1..3, .who, p) + [data-lookup-none].
• The planner: .plan[data-plan][data-lead][data-tail][data-done][data-demo-weeks] › input[data-plan-start], input[data-plan-pick], ol.plan-list[data-plan-group] > li[data-days][data-when] (b, small, time) + [data-plan-out] + .plan-note.
• Other pieces: .sos (.btn-red), .price-card (.pick[data-pick]), .person (.face, .role, .pets, .reg), .card, .facts (.stack), .notice, .topline, .nav-sos, .faq, .licence, .close-card (--close-em).

Multi-page kit

• Phone menu: .menu-btn[aria-controls] opens .site-menu (links carry data-no). Escape, an outside click or a link closes it, and Tab stays inside while it's open.
• Current page: aria-current="page", shown as a plum-soft pill.
• Inner pages: .page-head, .crumbs, a .tag and a smaller .h1.
• Fields: .field, .fields, .field-wide, fieldset.field-set, .check, .form-card, [aria-invalid="true"], and form[data-template].
• Tiles: .choices › label.choice > input + span > b + small.
• Segmented control: .seg (filters work on [data-tags]).
• Gate: [data-gate] with button[data-show="panel-id"].
• Slider, switch, tables and layout: input.range, .switch[role=switch], .table / .table.stack, .r, .grid-2.lean.
• Events: engrave (detail.part, value), triage (detail.level, signs), lookup (detail.query, shown), plan (detail.group, start, next).
• Helpers: Collar.refresh(root) and Collar.engrave(tag, part, text).

Vet clinics: what we build in

There's no national advertising law for vets like the one for human health practitioners. Each state's board sets the rules, and the Australian Consumer Law applies everywhere. Here's what we checked in October 2026:

• No false, misleading or "better than other vets" claims. WA's Code of Practice (8.1) rules out false or misleading advertising, vulgar or sensational advertising, and claims of superiority over other vets. So the copy has no "best vets in…".
• "Specialist" only for registered specialists. Only vets registered as specialists may use the title, or anything implying it ("Veterinary Ophthalmologist"). Other vets can say they're "a vet with an interest in" something, but not "special interest in" or "specialising in" (VPB WA's specialist titles guideline; the other boards take the same line). Each person's registration line says which they are.
• No prescription medicines named to the public. Advertising Schedule 3, 4 and 8 medicines to the public is prohibited under the Therapeutic Goods Act, as the Victorian board reminded vets. So flea, tick and worming products are talked about as "a plan we'll recommend at a consult", never by brand.
• Estimates before treatment. The codes expect vets to explain the likely cost before providing services where practicable (NSW Code of Professional Conduct, clause 16). Prices show what's included, and every procedure gets a written estimate.
• The local rules for new pets. In Victoria, dogs and cats are microchipped and registered from 3 months. In WA, dogs are microchipped and registered by 3 months (Dog Act 1976), and cats are microchipped, sterilised and registered by 6 months (Cat Act 2011).
• After hours, and first aid that's safe. The site says where to go after hours. The lookup never tells people to make their pet vomit.

These notes are design guidance, not legal advice.

• Code of Practice, advertising (Veterinary Practice Board of WA)
• Specialist titles guidelines (Veterinary Practice Board of WA)
• TGA prohibitions on advertising medicines (Veterinary Practitioners Registration Board of Victoria)
• Veterinary Practice Regulation 2013 (NSW), Schedule 2
• Registration and microchipping of dogs and cats (WA DLGSC)

Do and don't

• Do let people ask "how soon?" before they ask "when can I book?".
• Do show what's included in each price, and promise an estimate before any procedure.
• Do say who's a vet with an interest and who's a registered specialist.
• Don't name prescription medicines, or claim to be the best.
• Don't use red for anything but emergencies.
• Don't set text in tennis-ball green.

Accessibility

• AA contrast throughout (measured above), a skip link and a 3px focus ring.
• The tag: a labelled image with its text hidden from screen readers. The name input is a real labelled field.
• The triage: real checkboxes, with the advice announced politely and the call button appearing only when it's needed.
• The lookup: a labelled search field, with the count announced politely and Escape to clear it.
• The planner: a native date input and radios, with each date as a <time> and the next step announced politely.
• The emergency card: a real phone link.
• Forms: every field is labelled, errors are marked with aria-invalid, and an alert says what's missing.
• Testing: responsive to 360px, and tested with motion on and off, in Daylight and Night shift.

How to make it yours