Yoga Studio Website Template

About this yoga studio website template

The 14 pages you get

Home /

The studio in one read: what it is, the four practices, the teachers, and the first-class close.

Classes index /classes/

The four practices side by side, with what each is for and who it suits.

Four class pages /classes/…

Foundations, Slow Flow, Yin, and Breath & Restore — each a full route, so a beginner can read about one practice without wading through four.

Timetable & pricing /schedule/

The weekly schedule and what it costs. Rendered from a typed week array, not hand-built HTML.

The studio /studio/

The room, the ethos and the teachers — the page that decides whether a nervous first-timer books.

Contact & find us /contact/

A working enquiry form plus live tel: and mailto: paths.

Journal /blog/

A wired content collection — add an .mdx file and it appears here and in the sitemap.

Three worked articles /blog/…

First hot class, what to bring, and why the hardest part is last — carrying the full editorial component set.

404 /404

Designed, not default. Keeps the navigation.

What is in the build

• The One Breath contour: a single continuous SVG path drawn with pathLength and stroke-dashoffset as each section enters — one line, never lifted
• Four individual class routes rather than four accordion panels, so each practice has a page that can rank and be linked
• Weekly timetable rendered from a typed week array — change a time, not a table
• A working contact form plus live tel: and mailto: paths
• Hedvig Letters Serif and Manrope installed via Fontsource and served from your own domain
• Single-contour imagery treatment across all eight photographs, so the line and the pictures read as one hand
• 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

Warm cream and clay in the Anthropic register — a near-white ground, a soft clay-coral accent and generous whitespace. Calm is the whole surface; nothing shouts.

The mechanic

"One Breath": a single continuous SVG contour draws itself as each section enters — pathLength 1 with stroke-dashoffset, the line never lifting the pen from a single starting point.

Loud channel

Imagery

Imagery. Single continuous contour line

Type & palette

Hedvig Letters Serif · Manrope

#faf9f5 #1a1a18 #cc785c

Who it is for

Built for yoga studios, pilates and barre studios, breathwork and meditation teachers, and small wellness practices — plus the designers who serve them. It suits a studio whose promise is slowness. If your class is high-intensity and your pitch is effort, the boxing-gym build is the same quality in the opposite register.

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