Therapist Website Template
Demo brand: Havenoak Therapy · Counselling & psychotherapy · 11 routes · Astro 7 + Tailwind 4
Live preview
The demo is a full desktop site. Open it in a new tab ↗
About this therapist website template
A complete site for a counselling or psychotherapy practice: eleven built routes covering what you help with, how therapy works, an about page, a first-session booking route, a privacy-and-confidentiality page and a three-post journal.
A calm periwinkle stage holding the full Plutchik spectrum in seven soft-saturated emotion hues, one keyed to each section, in Lora against Mulish. The palette is the loud channel — and it is a palette with a reason, not a mood board.
The signature move is the feelings wheel. Seven emotion wedges ease in hue by hue as their section scrolls into view, each section’s accent keyed to its emotion. It gives a therapy site something to look at that is neither a stock photograph of someone staring out of a window nor an abstract gradient — and it is quiet enough not to alarm the reader, who is quite possibly having a bad day.
The 11 pages you get
- Home
/ - The feelings wheel, the practice’s position, and the first-session close.
- What we help with
/services/ - Presenting issues, named plainly. The page someone searches for at 2am.
- How therapy works
/approach/ - The modality and the process. This is what reduces the fear of booking.
- About the therapist
/about/ - Who you are, your training and your registration. The trust page, and non-negotiable in this field.
- Book a first session
/contact/ - A working form plus live tel: and mailto: paths — including a crisis line number, which a responsible therapy site carries.
- Privacy & confidentiality
/privacy/ - A real route covering both. In therapy these are clinical commitments, not boilerplate.
- The journal
/blog/ - A wired content collection — add an .mdx file and it appears here and in the sitemap.
- Three worked articles
/blog/… - A small practice for anxious mornings; nervous about the first session, good, that is human; how do you know when it is time for therapy. Written for the reader who has not booked yet.
- 404
/404 - Designed, not default. Keeps the navigation.
What is in the build
- A seven-hue feelings wheel blooming section by section, with each section accent keyed to its emotion
- A privacy-and-confidentiality route treated as a clinical page rather than as legal boilerplate
- A crisis line carried in the contact path alongside the practice number — the responsible default for a therapy site
- Three finished articles aimed at the pre-booking reader, which is the audience a therapy site actually converts
- A warm wash at half chroma across five images, so photography stays calm rather than clinical
- Lora with Mulish, both self-hosted; a working booking 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
- Calm periwinkle stage for a feelings wheel. A low-chroma ground holds the full Plutchik spectrum in seven soft-saturated emotion hues, one keyed to each section.
- The mechanic
- The feelings wheel blooms. Seven emotion wedges ease in hue-by-hue as their section scrolls into view, each section accent keyed to its emotion.
- Loud channel
- Palette
- Imagery. Warm wash, half chroma
- Type & palette
- Lora · Mulish
-
#ccd0f2#26283a#453a8c
Who it is for
Built for counsellors, psychotherapists, clinical psychologists and small therapy practices. It suits a practitioner whose website has to reassure before it informs. For wellness and life coaching, which is a different regulatory and tonal world, the wellness-coach build is the warmer sibling.
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
Can I add my registration and accreditation bodies?
Yes, and you should — the about and footer areas are ordinary content. Professional body registration is the single most important trust signal on a therapy site, and the build assumes you will display it.
Is the colour system going to feel clinical or cold?
It is deliberately low-chroma: seven soft-saturated hues on a calm periwinkle ground. The emotion keying gives each section its own identity without the page ever becoming bright. That balance is the reason the palette is the loud channel here rather than the type.
Does the contact form store client information?
No, and that is intentional. The form is built and validated; where submissions go is your decision, and for therapy that decision has confidentiality implications no template should make for you. The live mailto: and tel: paths work with no backend at all.
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
APLOMB
Chiropractic & spine clinic
Loud
Moving set-piece