Enamel

Best for

• Dental practices: check-ups, problem visits and emergencies, fees with item numbers and totals, health funds and the Child Dental Benefits Schedule, nervous patients, dentists and specialists with their registration, all written to Ahpra's advertising rules (see "Dental practices: what we build in")
• Anyone who needs "show us where" plus a clear, itemised price: smash repairers (Straight Edge, tap the damaged panels on a car), physiotherapists (Hinge Physio, tap where it hurts on a body), chiropractors and podiatrists, appliance and phone repairers
• Audiences: people who are a bit anxious about the visit and the bill, and want to know exactly what happens and what it costs

Less suited to: loud retail (Polish, Marquee); editorial or luxury (Blush, Lustre); anything selling on mood rather than clarity.

Personality and voice

Gentle and clear, like a good dentist: here's what we found, here's what it costs, item by item, and here's what we'll do to make it easier. No pressure, no promises of perfect smiles.

• Headlines: "Gentle dentistry, clearly priced." · "A check-up, line by line." · "What makes it easier for you." · "Toothache today, seen today."
• Buttons: "Book a visit" · "Call 03 5300 0000" · "Request the booking" · "Clear"
• Microcopy: "Tap the tooth that hurts. We'll note it on your booking." · "Your fund pays a rebate that depends on your cover." · "Raise a hand and we stop. Every time."
• Words to avoid on a dental site: "best", "painless", "perfect smile", "guaranteed", any patient quote about treatment, "specialist" or "specialises in" for a general dentist.

Colour

Measured contrast (WCAG): ink on paper 15.3:1 · muted on paper 6.1:1 (on well 5.6:1) · teal on paper 5.6:1 (on well 5.2:1, on its soft fill 4.9:1) · white on teal 5.9:1 · coral on card 5.5:1 · white on coral 5.5:1. After hours: ink 16.2:1 · muted 8.5:1 (on card 7.5:1) · teal 10.2:1 · text on teal 8.4:1 · teal on its soft fill 7.7:1 · coral 7.1:1. Example accents on paper: safety orange (Straight Edge) 5.8:1, eucalyptus (Hinge Physio) 6.0:1, bay blue (Bluestone) 6.6:1.

Typography

• Display: Readex Pro 300–600: round, open and calm; headlines in 400 with the promise in 600.
• Body: Mulish 400–800: clear at small sizes, for fees and fine print.

The signature move: the promise at the end of a headline turns heavier and teal, sitting on a soft rounded wash like a fresh polish.

Layout

• 1200px wrap, gutter max(20px, 4vw). A pale teal top line with a coral "Toothache?" and the phone number; a sticky header with a coral "Toothache?" link beside the booking button.
• Hero: copy left, the chart right. Then the emergency card, the fee estimate beside its pitch, the comfort plan, the team with registrations, visit facts and FAQ, and a deep ink closing card with a floating tooth.

Shape

• Soft and clinical: --r-s 10px, --r-m 18px, --r-l 28px, pill buttons, rounded-square avatars.
• Teeth are drawn from above, the way dentists chart them: molars as rounded squares with fissures, premolars as ovals, canines pointed, incisors narrow, on pink gum arches; numbered the FDI way (11–48).
• The brand mark is a tooth on a teal tile.

Motion language

• The chart: a chosen tooth turns coral and sends out a soft ping (1.8s, repeating); chosen teeth are listed with a remove button and a note about that kind of tooth.
• The fees: the total bumps when it changes; unticked items are struck through.
• The comfort plan: each switch lights its card in teal; the plan is written out underneath.
• The emergency dot pings; the closing card's tooth floats. Reveals: 16px rise and fade, 650ms. The phone menu drops in.
• Motion switch in the footer ([data-motion-toggle], html.calm, remembered as site-motion, default from prefers-reduced-motion). Calm stops the pings and the float.
• After hours switch ([data-theme-toggle]), remembered as site-theme; theme-color follows.

Imagery and illustration

The chart is the picture. Photos of the practice, the team and the chairs are welcome; no before-and-after shots, no stock smiles, no images that promise a result.

Signature components

• .chart[data-chart][data-max] › .chart-head + svg.map › g.spot[data-id][data-name][data-note][role=button][tabindex=0] (.ping + .shape + .fis) + text.lab[data-for] + .gum / .side; ul.chart-out[data-chart-out][data-empty], p[data-chart-note][data-default], [data-chart-clear]. Any SVG of spots works: teeth, car panels, body regions.
• .fees[data-fees] › label.fee > input[data-fee] + code + span > b + small + strong; .fees-total > [data-fees-total]; .fees-note.
• .comfort[data-comfort][data-lead][data-tail] › .comfort-item > b + small + .switch[role=switch][data-label]; [data-comfort-out][data-empty].
• .sos (.sos-dot, .btn-coral), .person (.face, .role, .reg), .card, .facts (.stack), .notice, .topline, .nav-sos, .faq, .licence, .close-card (--close-em), .grid-4.

Multi-page kit

• Phone menu: .menu-btn[aria-controls] opens .site-menu (links with data-no); Escape, outside click and links close it; Tab stays inside while open.
• Current page: aria-current="page" (a teal-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"]; 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, layout: input.range, .switch[role=switch], .table / .table.stack, .r, .grid-2.lean.
• Events and helpers: chart (detail.spots [{id, name}]), fees (detail.total, items), comfort (detail.items); Enamel.refresh(root).

Dental practices: what we build in

Dental advertising, websites included, is regulated by the Health Practitioner Regulation National Law (s 133) and Ahpra's advertising guidelines. What we checked, October 2026:

• No testimonials. Patient reviews or quotes about clinical aspects (symptoms, treatment, outcomes) can't be used; the templates carry none. Comments about service alone aren't testimonials, but we leave reviews to third-party sites.
• The total price. Price information must be clear and include the total, not just the first or cheapest part. Fees are shown item by item with their ADA item numbers and a running total, and the copy says plainly that the rebate depends on the fund.
• Specialist titles only for specialists. Only a dentist with specialist registration (for example in orthodontics or periodontics) is called a specialist; general dentists don't "specialise in" anything. Each person's registration line says which.
• No before-and-after photos. Images that aren't clearly attributable to the treatment, or are edited, can breach the guidelines; the style uses none.
• Nothing that creates unreasonable expectations or encourages unnecessary treatment: no "painless", no "perfect smile", no discounts without their terms.
• The Child Dental Benefits Schedule and health funds in plain words; after-hours advice to call 000 or go to emergency for severe swelling or bleeding.

These notes are design guidance, not legal advice.

• Summary of the advertising requirements (Ahpra)
• Advertising and online reviews information sheet (ADA NSW)

Do and don't

• Do show the total, item by item, before anyone books.
• Do say who's a dentist and who's a specialist, with their registration.
• Do make the emergency number one tap away on every page.
• Don't quote patients about their treatment, anywhere.
• Don't use coral for anything but toothache and chosen teeth.
• Don't use before-and-after photos or promise results.

Accessibility

AA contrast throughout (measured above). Skip link and a 3px focus ring. Every tooth (or panel, or body region) is a focusable button named in words ("Upper right first molar (16)") with a pressed state; Enter and Space choose it; chosen spots are listed with labelled remove buttons and a note, announced politely. Fee items are real checkboxes with the total announced politely. Comfort options are switches labelled by their title. The emergency card is a real phone link. Forms label every field, mark errors with aria-invalid and say what's missing in an alert. Responsive to 360px; tested with motion on and off, in Clinic and After hours.

How to make it yours