Recording Studio Website Template
Demo brand: Roomtone Recording · Recording studio · 8 routes · Astro 7 + Tailwind 4
Live preview
The demo is a full desktop site. Open it in a new tab ↗
About this recording studio website template
A complete site for a recording studio: eight built routes covering the rooms, the rates, the credits list, a booking page and a wired journal.
The register is the console room — a flat aubergine ground with bone type and a phosphor-mint accent that appears only on live and interactive elements. Type, palette and imagery are all held quiet; the set-piece is the only loud channel.
And the set-piece is the transport. The document is one pinned horizontal session timeline: a deterministic waveform is the layout spine, scroll scrubs a fixed playhead that prints the tape mint behind it, and the amplitude envelope decides where the content sits. Below 768px it resolves to a vertical tracklist, because a horizontal timeline on a phone is a gimmick.
The 8 pages you get
- Home
/ - The session timeline: what the studio is, the rooms, the credits, and the booking close.
- Rooms
/rooms/ - Live room, control room and booths with their gear — the page an engineer reads before enquiring.
- Rates
/rates/ - Day rates, block rates and what is included. Published prices, because studios that hide them lose the enquiry.
- Credits
/credits/ - What has been tracked here. The single strongest trust signal a studio has.
- Book time
/book/ - A working enquiry form plus live mailto: and tel: paths.
- Blog
/blog/ - A wired content collection — add an .mdx file and it appears here and in the sitemap.
- One worked article
/blog/example-post/ - How to spend two days in a studio and leave with four songs — carrying the full editorial component set.
- 404
/404 - Designed, not default. Keeps the navigation.
What is in the build
- A pinned horizontal session timeline with a scroll-scrubbed playhead that prints the tape behind it
- A deterministic waveform used as the actual layout spine — the amplitude envelope positions the content, it is not decoration behind it
- A declared control case: below 768px the whole thing resolves to a vertical tracklist rather than pretending to be a console
- Phosphor-mint reserved strictly for live and interactive elements, so the accent means something
- Rooms, rates and credits as typed data — update the gear list without touching a layout
- Cabinet Grotesk with IBM Plex Mono, both self-hosted; a working booking form plus 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 65 different worlds reading as one design system in different paint.
- The world
- Console-room flat aubergine with bone and phosphor-mint. Mint appears on live and interactive elements only.
- The mechanic
- The transport. The document is one pinned horizontal session timeline; a deterministic waveform is the layout spine, scroll scrubs a fixed playhead that prints the tape mint behind it, and the amplitude envelope decides where content sits.
- Loud channel
- Moving set-piece
- Imagery. Waveform as the spine
- Type & palette
- Cabinet Grotesk · IBM Plex Mono
-
#171320#e8e4dd#5ef2c0 - The control case
- Falls back to a vertical tracklist below 768px.
Who it is for
Built for recording and mixing studios, mastering houses, rehearsal rooms and producers who take outside bookings — and the designers who build for them. It suits a studio that wants to look like a working room rather than a lifestyle brand. Podcast studios and post houses fit the same 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
Is the waveform a picture of a real recording?
It is generated deterministically, so it is the same every load and costs nothing to fetch. You can substitute your own envelope data if you want the spine to be a specific track.
What happens on a phone?
The timeline becomes a vertical tracklist below 768px. That is a stated control case, not a fallback that was forgotten — a pinned horizontal scroll on a phone fights the device.
Can I take bookings and payment through it?
The book page takes an enquiry through a working form and a live tel: path. Payment is not wired, deliberately: studio bookings almost always involve a deposit conversation, and the template should not pretend otherwise.
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 studios & agencies templates
BRANTHOLM
Photographer / creative portfolio
Loud
Imagery
DUNARROW
Architecture studio
Loud
Imagery
VOLTA & CO.
Creative agency
Loud
Display type
HULVER STUDIO
Interior design studio
Loud
Palette