Optometrist Website Template
Demo brand: VELLOWAY EYECARE · Optometrist / eyecare practice · 16 routes · Astro 7 + Tailwind 4
Live preview
The demo is a full desktop site. Open it in a new tab ↗
About this optometrist website template
A complete site for an optometry practice: sixteen built routes covering eye tests, glasses and lenses, contact lenses, eye health and OCT, a children’s clinic, prices, booking, terms, privacy and a three-post journal.
A dark-adapted acuity lane — a dim consulting room ground at C* 11.8, lit chart cards, and no accent colour at all: the CTA is a solid block of the chart’s own white ink. Lexend against Reddit Mono.
The signature move is the subjective refraction, performed in type. Every rendered font size on every route is 17 × 1.2589254ⁿ — the logMAR chart’s own 0.1-log step — and each heading snaps between two lens states one ladder step apart. It never scrubs, because a trial lens set is discrete. The control is the pinhole: one heading whose two states are the same line, so its flip changes nothing — because acuity that does not improve through a pinhole is not refractive error, and you get referred.
The 16 pages you get
- Home
/ - The acuity ladder, the practice’s position, the services and the booking close.
- Eye tests
/eye-tests/ - What a test involves and what it costs. The core service page.
- Glasses and lenses
/glasses/ - The retail line, which is where the margin is.
- Contact lenses
/contact-lenses/ - The recurring-revenue line, separately routed.
- Eye health and OCT
/eye-health/ - The clinical differentiator. An independent practice with OCT should never bury it.
- Children’s clinic
/childrens-clinic/ - A distinct audience with distinct anxieties, given its own page.
- Prices
/prices/ - Published figures — the page that beats the chain on the high street.
- About the practice
/about/ - Who examines you, and their registration.
- Book an eye test
/book/ - A working form with a pre-filled mailto: fallback and a live tel:.
- Journal
/journal/ - A wired content collection — add an .mdx file and it appears here and in the sitemap.
- Three worked articles
/journal/… - What 6/6 actually means and why 20/20 is the same number; the cheapest instrument in the room; which varifocal upgrades are worth paying for.
- Terms & privacy
/terms/ · /privacy/ - Real legal routes, written.
- 404
/404 - Designed, not default. Keeps the navigation.
What is in the build
- Every font size in the build is a term of the logMAR chart’s own 0.1-log step — the type scale is an acuity chart
- Headings that snap between two lens states one ladder step apart, never scrubbed, because a trial lens set is discrete
- A declared control: the pinhole heading, whose two states are identical, so the flip changes nothing
- No accent colour at all — the CTA is a solid block of the chart’s white ink, which is the discipline this concept requires
- A children’s clinic route and an eye-health/OCT route, the two pages an independent practice uses to beat a chain
- Lexend with Reddit Mono, both self-hosted; a working booking form with a pre-filled mailto: fallback and a live tel:
- Vitest and Playwright suites included in the repository
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 62 different worlds reading as one design system in different paint.
- The world
- A dark-adapted acuity lane — a dim consulting room ground at C* 11.8, lit chart cards, and no accent at all: the CTA is a solid block of the chart's own white ink.
- The mechanic
- "Better One, or Two?": the subjective refraction performed in type. Every rendered font-size on every route is 17 × 1.2589254^n — the logMAR chart's own 0.1-log step — and each heading snaps between two lens states one ladder step apart, never scrubbed, because a trial lens set is discrete.
- Loud channel
- Display type
- Imagery. Contrast steps the chart
- Type & palette
- Lexend · Reddit Mono
-
#3c4939#f2f4f1#f2f4f1 - The control case
- The pinhole — one heading whose two states are the same line, so its flip changes nothing: acuity that does not improve through a pinhole is not refractive error, and we refer you.
Who it is for
Built for independent optometrists, opticians and eyecare practices competing against high-street chains. It suits a practice whose advantage is clinical equipment and continuity of care. The dental, orthodontist and chiropractor builds share the structure for neighbouring practices.
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
- 01 Accept the repository invite and clone it.
- 02 Run
npm install, thennpm run dev. - 03 Replace the content in
src/data/with your own — that is where the brand, the copy and every list live. - 04 Swap the images in
public/images/and the palette in the@themeblock. - 05 Run
npm run buildand deploydist/anywhere static.
Questions
Is a type scale based on an eye chart actually usable?
The logMAR step is 1.2589, which sits between the common 1.2 and 1.333 modular ratios — so it produces a perfectly normal, slightly generous scale. It is one of those rare cases where the conceptually correct number is also the practical one.
What is the pinhole heading for?
It is the clinical point made structurally. If acuity does not improve through a pinhole, the problem is not refractive and the patient needs referral rather than glasses. One heading on the site flips between two identical states to say exactly that.
There is almost no photography.
One image, by design — the build is carried by the chart cards and the type. For a practice without a professional shoot, that is a feature: you can launch without spending on photography and add it later.
What exactly do I get for $49?
Access to a private GitHub repository holding the complete Astro source of this template — every route you see in the preview, the content model, the images and the tests. Updates arrive in that same repository.
How many sites can I build with one licence?
As many as you like, for yourself or for clients. The licence is per buyer, not per project. The one thing you may not do is resell or redistribute the source as a template, theme or starter kit.
Do I need to know Astro?
It helps, but the common case is editing content and colour. Content lives in typed objects under src/data, colour lives in one @theme block, and npm run dev shows the result. Deploying is a static folder — Cloudflare Pages, Netlify and Vercel all take it as-is.
Is anything loaded from a third party?
No. Fonts are self-hosted woff2, there is no analytics, no tag manager, no CDN script and no external CSS. The build ships static HTML under a strict Content-Security-Policy.
More health & fitness templates
IRONCLAD
Boxing & strength gym
Loud
Display type
Hale
Hot yoga studio
Loud
Imagery
Terra & Still
Wellness coaching
Loud
Palette
Northlight Dental Co.
Dental practice
Loud
Palette
Havenoak Therapy
Counselling & psychotherapy
Loud
Palette