Orthodontist Website Template
Demo brand: ARLOWAY ORTHODONTICS · Specialist orthodontic practice · 19 routes · Astro 7 + Tailwind 4
Live preview
The demo is a full desktop site. Open it in a new tab ↗
About this orthodontist website template
A complete site for a specialist orthodontic practice: nineteen built routes including five treatment pages organised by fault, an appliances page, a retention page, fees, a consultation booking route, terms, privacy and a three-post journal.
A quiet mauve-lilac ground at C* 11.8 — the pink of gum tissue seen through aligner frost — with one derived green ligature accent sitting 172° opposite it. Faustina against Gabarito. Palette, texture and set-piece are all held quiet; type carries the whole idea.
The signature move is the arch aligning. Every heading is set with a per-glyph malocclusion — crowding as negative tracking, rotation, tipping as shear, over-eruption as baseline offset, midline shift as an off-centre axis — and is drawn onto one arch line across the scroll. The type is the treatment, and by the time you have read the page it has been corrected.
The 19 pages you get
- Home
/ - The arch aligning, the practice’s position, the treatments and the consultation close.
- Treatments
/treatments/ - Organised by fault rather than by brand name — which is how a patient describes the problem.
- Five fault pages
/treatments/… - Crowding, spacing and diastema, rotated teeth, deep bite, midline discrepancy. Each a full route, and each one is the malocclusion the type scale is demonstrating.
- Appliances
/appliances/ - Braces, aligners and what each is for. The product page, kept separate from the diagnosis pages.
- Retention
/retention/ - The part patients do not know about until afterwards. Publishing it up front is both honest and a differentiator.
- Fees
/fees/ - Published figures. Orthodontics is a four-figure decision and price opacity loses the enquiry.
- The practice
/practice/ - The specialists and their registration.
- Book a consultation
/book/ - A working form plus live tel: and mailto: paths.
- Journal
/journal/ - A wired content collection — add an .mdx file and it appears here and in the sitemap.
- Three worked articles
/journal/… - Braces or aligners, the fault decides; what a consultation actually involves; why retainers never really end.
- Terms of treatment & privacy
/terms/ · /privacy/ - Real legal routes, written.
- 404
/404 - Designed, not default. Keeps the navigation.
What is in the build
- Headings set with real per-glyph malocclusions — crowding as negative tracking, rotation, tipping as shear, over-eruption as baseline offset, midline shift as an off-centre axis — drawn onto one arch line across the scroll
- Treatments organised by fault, matching the five malocclusions the type is demonstrating
- A retention route, which most orthodontic sites omit and every patient eventually needs
- Published fees, in a category where price opacity costs consultations
- A ground colour derived at a measured C* 11.8 with a ligature accent placed 172° opposite it, rather than picked
- Faustina with Gabarito, both self-hosted; a working consultation form plus live tel: and mailto:
- 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 quiet mauve-lilac ground at C* 11.8 — the pink of gum tissue seen through aligner frost — with one derived green ligature accent 172° opposite it. Palette, texture and set-piece held quiet; type carries the whole idea.
- The mechanic
- "The Arch Aligns": every heading is set with a per-glyph malocclusion — crowding as negative tracking, rotation, tipping as shear, over-eruption as baseline offset, midline shift as an off-centre axis — and is drawn onto one arch line across the scroll. The type is the treatment.
- Loud channel
- Display type
- Imagery. Veiled in aligner frost
- Type & palette
- Faustina · Gabarito
-
#ceb8c8#221b20#075539
Who it is for
Built for specialist orthodontic practices and dental practices with a significant orthodontic line. It suits a practice that wants to explain the diagnosis rather than sell a brand of aligner. The dental build is the general-practice sibling; chiropractor and optometrist share the structure.
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
Why organise treatments by fault rather than by braces and aligners?
Because a patient searches "gap between my front teeth", not "fixed appliance therapy". Five fault routes match five real searches, and the appliances page still exists for the people who arrive knowing the product name.
Is the type effect legible?
The malocclusions are applied to headings, not to body copy, and they resolve onto the arch as you scroll. It is a display treatment with a resolution, not permanently distorted text.
Should I publish fees?
Orthodontic treatment is a four-figure decision made over weeks, and price opacity loses the enquiry to the practice down the road that published a range. The fees route is built for it.
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