Audiologist Website Template

About this audiologist website template

The 22 pages you get

Home /

Centred headline, book and online-check buttons and a trust line, then three appointment cards with prices: free hearing test, ear wax removal, hearing aids. Then promises, the four services, the online hearing check, the clinic band, the patient journey, the hearing-aid finder, the tech-level table, patient quotes, guides and FAQ tabs.

Hearing aids /hearing-aids/

The three styles with prices from, the hearing-aid finder and the tech-level comparison.

Style pages /hearing-aids/…/

Behind-the-ear, in-the-ear and rechargeable: the price for each tech level, the rechargeable option, specs at a glance, who each style suits, what to think about, and a book button that pre-selects the style.

Services /services/

All four appointments with price and length.

Service pages /services/…/

Full hearing test, ear wax removal, tinnitus assessment and hearing-aid aftercare: price, length, what’s included and a book button that pre-selects the appointment.

Prices /prices/

Every clinic appointment price, hearing aids per pair by style and tech level, and how paying and the home trial work.

Online hearing check /hearing-check/

The hearing check on its own page, with an explanation of each result band and how to read the chart.

About the clinic /about/

The clinic’s story, why independence matters to patients, the audiologists, access (hearing loop, step-free) and a registration line for your own details.

Guides /journal/

A card list. Add a Markdown file and it appears here and in the sitemap.

Guides /journal/…/

Three written guides: the signs you need a hearing test, choosing your first hearing aids, and sleeping with tinnitus.

FAQ /faq/

Twelve questions in keyboard-friendly tabs: Hearing tests, Hearing aids and Tinnitus.

Book an appointment /contact/

Booking request with appointment type, hearing-aid style, tech level, online check result, best time and how to reply, filled in from any book button, the finder or the hearing check.

Privacy and terms /legal/…/

Two starter legal pages on a shared layout, including how the online check handles data.

404 /404

Designed, with a way back to home and to booking.

What is in the build

• An online hearing check built with the Web Audio API: five pitches in each ear, stepped quieter until the patient stops hearing them, plotted on a chart drawn in code, with a result band, a not-a-diagnosis note and a book button that carries the result to the form
• Nothing plays until the patient presses a button, and every control works from the keyboard
• A hearing-aid finder: style, tech level, rechargeable and budget give the price per pair, per ear, the aftercare included and what the level does, and flag a choice that is over budget
• Every hearing-aid price, tech level, aftercare list and clinic fee in src/data/aids.ts, and the hearing-check levels and result wording in src/data/hearing-check.ts, with the maths in tested files
• A tech-level table that stacks row by row on phones instead of scrolling sideways
• Hearing-aid styles, services and guides as content collections, and every clinic fact, opening hour and access note in one file
• Real clinic photography with no patient faces and maker names retouched out; one accent colour and two fonts rebrand the whole site; Vitest and Playwright suites included

The design decision

Every template in this catalog is loud in exactly one channel and deliberately quiet in the other three. That single rule is what stops 65 different worlds reading as one design system in different paint.

The world

Warm white ground with pale periwinkle-grey blocks and one dark linen band, Crimson Pro over Golos Text, real photography of hands at the ear, otoscopes and clinic rooms, and one periwinkle accent.

The mechanic

Headphone tones at five pitches in each ear step quieter until the patient stops hearing them, then a chart drawn in code gives a result band and a book button that pre-fills the form; a finder turns style, tech level, rechargeable and budget into a price per pair with the aftercare included. Motion is one quiet reveal.

Loud channel

Imagery

Imagery. Hands at the ear, otoscopes, audiometry headphones, ear specula and clinic rooms

Type & palette

Crimson Pro · Golos Text

#fbfaf7 #1b1d2b #4b57c9

Who it is for

Built for independent audiologists, hearing aid dispensers and small hearing clinics that test, fit and look after hearing aids, remove ear wax and see tinnitus patients. It suits a clinic that wants patients to understand prices and book before they ring, and it works for any currency or price list by editing one data file.

Under the hood

• Astro 7 · static output, zero client framework
• Tailwind 4 · one @theme block holds the palette
• MDX content collections for the blog
• GSAP + Lenis for the scroll work, reduced-motion aware
• Self-hosted woff2 — no Google Fonts request
• Sitemap, canonicals and per-route meta wired
• Vitest + Playwright suites in the repository
• Zero third-party requests · strict CSP-ready

How to get started

1. 01 Accept the repository invite and clone it.
2. 02 Run npm install, then npm run dev.
3. 03 Replace the content in src/data/ with your own — that is where the brand, the copy and every list live.
4. 04 Swap the images in public/images/ and the palette in the @theme block.
5. 05 Run npm run build and deploy dist/ anywhere static.

Questions