Free sauna website template

Live demo Download ZIP Build without code GitHub

Edit it by hand: it is one index.html with no build step, so you can open it in any text editor, change the words and photos, and upload it to any static host. Not a coder? Describe your business in one sentence to 8B's AI website builder and it designs a new site for you, with more pages when you need them. Designing is free; publishing with hosting is $9 a month, billed yearly. It also works inside Claude and ChatGPT.

MIT license · Made by 8B, an AI website builder · Plain text: brume.md, data: brume.json

Sauna website template: first screen on a phone

About this sauna website template

Sauna website template: one free HTML file for a bathhouse or lakeside day spa, with a three-step round, four rooms with temperatures, three timed passes and a request form. The look is near-black with copper and lake blue in a light serif, and fog rises over the first photo. AGENTS.md is included for Claude Code, Cursor or Codex.

At a glance, October 2026. One 92 KB index.html with its CSS and JavaScript inside, 13 sections, 20 Unsplash photos credited in CREDITS.md, Source Serif 4 from Google Fonts, GSAP 3.13.0 (ScrollTrigger, SplitText); Lenis 1.3.27 smooth scroll loaded from jsDelivr.

Spa websites have to sell time and calm in one scroll, and this one lays it out as a round of heat, cold and rest, four rooms with temperatures from the jetty to the smoke sauna, a lake section and passes drawn on an hours axis. It suits a lakeside sauna, a bathhouse, a cold-plunge club or a day spa selling morning, full-day and evening entry. In spa web design the dark ground and the serif set it apart.

Used as a sauna website template for Claude Code, Cursor or Codex, vibe coding goes fastest when you give the agent the facts only the venue has: room temperatures and seats, pass hours and prices, menu, opening days, rules and address. The demo invents all of them, along with the lake and the village. The agent should swap the name in every letter case, rewrite the five statement lines and reset each --len. Pass hours must stay inside the 08 to 22 axis.

As a sauna website template it fits one venue with water nearby, a few rooms of different character and entry sold by the hour. A coach selling a course or a studio with a teacher fits the studio and course template better. Booking is the thin part: the form is a request, with no calendar of free slots. If nobody on your team edits code, 8B's AI website builder is the no-code option.

Good for:

Sauna or bathhouseDay spa or wellness retreatLakeside or seaside cold-plunge clubAny venue sold in timed passes, with rooms of different character and a rhythm to the day

Turn the sauna website template into your site with an AI agent

With an AI coding agent

Files (PowerShell: curl.exe):

curl -LO https://raw.githubusercontent.com/8bsite/sauna-website-template/main/index.html
curl -LO https://raw.githubusercontent.com/8bsite/sauna-website-template/main/AGENTS.md
curl -LO https://raw.githubusercontent.com/8bsite/sauna-website-template/main/LICENSE
curl -LO https://raw.githubusercontent.com/8bsite/sauna-website-template/main/CREDITS.md

Prompt for the agent:

Read AGENTS.md, then edit index.html. Make this the site for <my bathhouse: name, place, water, rooms with temperatures and seats, passes with hours and prices, menu, opening days, house rules, address, phone, email>. Replace the name, the readings, the passes and the room facts. Keep the section ids, the classes AGENTS.md lists, pass data-from and data-to between 8 and 22, and temperature data values between 0 and 100. Set each --len to its line's character count. Ask for missing facts; never invent prices, hours, health advice, reviews or contacts.

In a terminal

npx degit 8bsite/sauna-website-template my-site

Sauna website design prompt for any AI tool

Paste this sauna website design prompt into Claude Code, Codex, Cursor, Lovable, v0 or Bolt to build a bathhouse or day spa site from scratch, or hand it to a designer. It is this template's design written as decisions; with the template itself, the short prompt above is enough.

Build a one-page website for a lakeside sauna or bathhouse that sells timed passes. Audience: city visitors who want a quiet half day by the water. Static HTML, CSS and a little GSAP; no framework.
Sections in order: navigation, opening, a three-step round of heat, cold and rest, four rooms with temperatures, a five-line statement, the lake, an hour-by-hour day, kitchen menu, house rules, three passes on an hours axis, questions, request form, footer.
Type: Source Serif 4 only; weight 300 for large headings stacked in two or three lines, 400 for body, 500 for small uppercase tracked labels.
Colours: #0b0906 near-black ground, #dcd8d1 text, #9a948a labels, #2b2620 hairlines, #d0703f copper for heat only, #8fb2b8 lake blue for cold only.
Motion: one idea, temperature. Each room's temperature line draws out as it arrives and the section ground shifts from blue-black to brown-black. Respect prefers-reduced-motion.
Avoid: purple gradients, three icon cards, a centred hero with two buttons, rounded corners, stock-photo smiles. Use a narrow left rail with vertical labels, square corners and ruled lists.
Copy: short and concrete. Ask me for temperatures, seats, pass hours and prices, menu, opening days, rules, address and phone; never invent them or any health claims. Mark every placeholder.
One action: Book a day, in the nav and the footer, leading to the request form.
Phone: check at 390 px, 44 px tap targets, no horizontal scroll.
Done when: no console errors, visible keyboard focus, and you list every placeholder.

Sauna website design and motion

Palette

#0b0906 page ground, the menu overlay, the solid header, text on a filled button when hovered#dcd8d1 body and heading text, button borders and hover fills, focus outlines, fog patches#9a948a section rails, field labels, captions, small notes, form field underlines#2b2620 hairlines between steps, dishes, questions and passes; borders of the form panel and menu button#d0703f copper for heat: hot readings and temperatures, step meta, line ends, the lit hour, open pass bands, the pass marker, the statement glow#8fb2b8 lake blue for cold: cold readings and temperatures, the start of the temperature lines, the cold and dawn tints, one fog patch#15120e the request form panel, photo placeholders and the dropdown option backgrounds#091114 cold end of the sauna section's ground, a blue-black#1b0d07 hot end of the sauna section's ground, a brown-black

Fonts

Source Serif 4: the only typeface, variable weights 300 to 600: light headings, regular body text, and medium uppercase tracked labels, buttons and rails

A narrow rail on the left carries a vertical uppercase label for most sections and stays in view while the section scrolls; content sits to its right. Headings are stacked in two or three lines with the second indented. Full-bleed scenes alternate with ruled lists: four sauna rows, five dishes, three passes and six questions, divided by hairlines. Corners are square throughout, and the photos are dark and warm.

The rooms section's ground warms down its four rows, from blue-black to copper-brown. Copper marks heat: the hot readings, the lit hour, the open pass band. Lake blue marks cold. Three small photos on the second screen rise by different distances, and headings stay light at weight 300.

Every value of this sauna website design, with the type scale, spacing and the motion rules, is in its DESIGN.md file (Google's format), ready for a coding agent or Stitch.

What is on the sauna website page

Navigation
Fixed bar with a three-bar mark and wordmark, five section links, a Book a day button and a menu button with an overlay
The bar turns solid after 80px of scroll, slides away when you scroll down past 160px and returns when you scroll up; under 1024px wide a menu button opens a full-screen overlay.
Heat, cold, and the quiet after.
Two screens: a lake under fog with the headline, intro, two actions and live-looking readings; then a warm rest room, a three-line heading and three floating photos
On load the lake photo settles from a slight zoom, three fog patches drift sideways in a loop and the headline rises in. On scroll the lake photo holds still while the text leaves, a fog veil climbs over it and a rest-room photo comes up from the dark, then the three heading lines slide into their indents and the three small photos rise at different speeds.
One round, three temperatures
Three steps of one round (heat, cold, rest) beside a held photo frame that opens into each in turn
A frame of three photos in thirds stays beside the steps: the heat photo widens over the others under a copper tint, wipes away to the cold photo under a blue tint, which wipes away to the rest photo, and the thirds return.
Four rooms, coldest to hottest
Four rooms coldest to hottest as rows, each with a temperature, a line that runs out to it, text, facts and a photo
Each row's temperature line draws out to its value as the row arrives, and the section ground shifts from blue-black to brown-black across the four rooms.
Water on the stones. A breath of heat rolls off the ceiling and the room goes quiet.
A five-line statement over a dark photo; a glow rises through it and the lines swell in weight
A copper glow rises through the five lines, and from the bottom line up each swells from weight 300 to 560 and turns copper before settling back.
The fifth room has no walls
A wide photo of the boardwalk into fog beside a heading, a paragraph and four facts
The wide photo slides down 10% of its height inside its frame as it scrolls into view, and the paragraph and four facts fade up in turn.
A day at Brume, mist to lanterns
Six hours of the day over a held lake photo that goes from morning mist to night; the hour at the middle of the screen lights up
Pinned: the held morning-mist photo cross-fades to a night cabin as the six hours pass, with a blue dawn tint fading out and a copper dusk tint fading in and out; the hour near the middle of the screen turns copper.
The long table by the stove
A menu of five dishes with prices drawn between hairlines, beside three photos
The five menu rules draw across when they arrive, the intro line fades up and the three photos slide down into their frames.
A house built for the weather
A photo of the bathhouse cut into vertical boards that slide into line, beside two paragraphs and a link
The photo is cut into ten vertical boards, six under 700px wide; alternate boards slide in from opposite directions and meet in line, and the two paragraphs fade up.
Choose your hours
Three timed passes on an 08-22 time axis with a marker that sweeps across and lights the pass it is inside
A copper marker sweeps across the 08 to 22 axis as you scroll, and each pass whose hours contain the marker lights its band and name in copper.
Before your first round
Six questions in native details elements beside a heading
The six questions fade up one after another when the list arrives, and each plus turns into a minus as its answer opens.
Forty minutes from the city
How to get there and contact details beside a day-request form, closed by a large name that condenses out of mist
The closing name is split into letters that start spread apart and faint, blurred on wide screens with a mouse, and gather into the word as you scroll.
Brume
A Book a day line, four columns (links, address, hours, contact), and a base line with readings, the copyright and a Top link
The rule beside the Book a day line draws across when it arrives.

Before you publish the sauna website site

Replace social preview image, favicon, phone number, email address, contact form (sends nothing yet) and social media links and the invented demo facts (prices, dates, addresses). AGENTS.md lists them.
Book a day buttons in the bar, the opening and the footer, the Come and see it link in the house section, and the pass links Book a morning, Book a full day and Book an evening lead to the #visit anchor (the request form) now; point them to your online booking page, or keep #visit once the form is connected.
Send request button in the form lead to does not send anything: the form action is #, and section-script:visit checks the required fields, shows the thank-you or error line and resets the form now; point them to a form service (Formspree, Netlify Forms), your own endpoint, or a link to your booking system.
Instagram link in the footer lead to https://instagram.com/ (the Instagram home page) now; point them to your Instagram profile, or remove it.
Phone and email links in the contact details and the footer lead to tel: and mailto: placeholders now; point them to your real phone number and email address.
The form does not send anything yet: the action is # and the thank-you line comes from a script.
The opening, the round and the day use sticky stages with scrubbed layers (fog, photos, tints) and a fixed 100vh stage, so on very short windows the held frame can crop its photo.
GSAP, ScrollTrigger, SplitText and Lenis load from jsDelivr; without them the scenes do not run.
The header hide-on-scroll and the hover states keep working with reduced motion; the scenes do not.

Questions about this sauna website template

Is this spa website template free to use for a client?

Yes. It is one index.html under the MIT license, so you can ship it for clients at no cost. GSAP, ScrollTrigger, SplitText and Lenis load from jsDelivr, with no build step and no CMS. Photos are Unsplash images and the typeface is Source Serif 4; CREDITS.md lists them. Each template is also a repository you can publish free from GitHub.

How do I turn the request form into real bookings?

As shipped it sends nothing. It needs a date, a name and an email, then shows a thank-you line and clears itself. Connect Formspree or Netlify Forms with the steps in AGENTS.md, or link the Book buttons to your booking system. Edit the thank-you line too: it promises confirmation by email within a few hours.

Can I get a site like this without editing code?

Yes, with 8B's AI website builder. You describe the site in a sentence and its engine designs a new one, not this template. Designing and restyling are free. Publishing with hosting and SSL, full HTML export and AI edits in chat are on Pro at $9 a month billed yearly. It also runs inside Claude and ChatGPT.

What sauna website design prompt should I give Claude Code, Cursor or Codex?

Put index.html and AGENTS.md in an empty folder with the curl lines at the start of AGENTS.md and tell the agent to read AGENTS.md first. Then paste the short prompt from this page, filled in with your venue's facts. Lovable, v0, Bolt and AI Studio Build mode take the full design prompt instead.

Which parts of the file break if I change them?

Keep the section ids and the data-8b-section, data-8b-motion and data-8b-part attributes, plus the classes AGENTS.md lists. Pass data-from and data-to must stay between 8 and 22, and temperature values between 0 and 100. Keep the header comment and the 8B meta tag in the head. Keep the Design: 8B footer link unless the site owner asks to remove it.

What happens on a phone, with reduced motion or with scripts off?

Under 1024px wide the nav links fold into a menu overlay. Reduced motion stops smooth scrolling and the scroll scenes, so the round shows three photos side by side; hover fills still run. Without JavaScript the menu fails, the form sends nothing, the temperature lines stay empty and every pass band fills the axis; questions and footer links work.

Not a sauna website? More free templates