Hotel Website Template

About this hotel website template

The 17 pages you get

Home /

The plaster set-piece, the house above the cove, the rooms and the booking close.

Rooms & rates /rooms/

The index with rates — the page that converts.

Five room pages /rooms/…

The Cove Suite, The Garden Room, The Harbour Double, The Lantern, The Snug. Each a full route with its own photography and rate, which is how a small hotel sells its best rooms rather than an average.

Dining /dining/

The restaurant. For a house hotel this is half the reason people book and often a separate revenue line.

The Bathhouse /spa/

The third revenue line, separately routed.

Visit & availability /book/

A working enquiry form with a pre-filled mailto: fallback and a live tel:.

Journal /blog/

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

Three worked articles /blog/…

The coast path in October, what the walled garden is giving, and why the whole house is finished in lime. Seasonal content that also earns off-season search.

Booking terms & privacy /terms/ · /privacy/

Real legal routes — required once you are taking bookings and deposits.

404 /404

Designed, not default. Keeps the navigation.

What is in the build

• A scrub-driven lime-plaster cure, from wet sheen to matte trowel, with a never-burnishing lime-wash swatch shipped beside it as the control
• One isotropic plaster tooth carried across every surface and pressed into all ten photographs, so interface and imagery share one material
• Five individual room routes with their own rates, which is how a small hotel sells the suite rather than the average room
• Separate dining and spa routes — the two revenue lines a house hotel most often under-sells
• Rooms, dining and rates as typed data in src/data
• Marcellus with Mulish, both self-hosted; a working enquiry form with a pre-filled mailto: fallback and a live tel:
• 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

Aged rose-clay lime plaster with one sea-glass accent. The whole house is finished in one hand-troweled, isotropic plaster tooth, carried on every surface and pressed into every photograph — texture is loud; type, palette and motion held quiet.

The mechanic

"The Finish Sets": a pinned, scrub-driven panel where scroll position is the cure of a fresh lime skim — a wet sheen recedes and the troweled wall resolves from soft to matte as the coat carbonates.

Loud channel

Texture

Imagery. Pressed into wet plaster

Type & palette

Marcellus · Mulish

#6e4a3f #f6efe6 #a6ddcf

The control case

A lime-wash swatch beside it that never burnishes — same scrub, matte at every position. Drawn, not labelled.

Who it is for

Built for small hotels, guest houses, inns and boutique properties of five to twenty rooms. It suits a property whose material and location do the selling. For a venue hired whole for events, the event-location build is the right one; for a restaurant with rooms, this one already has the dining route.

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