Restaurant Website Template
Demo brand: SÖL — Kitchen & Fire · Restaurant · 7 routes · Astro 7 + Tailwind 4
Live preview
The demo is a full desktop site. Open it in a new tab ↗
About this restaurant website template
A complete site for a restaurant: seven built routes covering the tasting menu, the cellar and pairings, private dining, and a wired blog.
A near-black cinematic stage with one cold ember accent and Instrument Serif for display against Space Grotesk. The set-piece is the loud channel; the palette is two colours and a highlight, and the photography is plated on black so the food is the only bright thing on the page.
The signature move is the service. A pinned, course-by-course plating sequence runs as you scroll — each dish unmasks as ingredient cutouts arrive from the screen edges and settle into the plate. It is the thing the kitchen does, performed by the page, rather than a slideshow of finished dishes.
The 7 pages you get
- Home
/ - The plating sequence, the kitchen’s position, and the reservation close.
- The Card
/menu/ - The autumn tasting menu. The page every restaurant visit is really looking for.
- The Cellar
/cellar/ - Wine and garden pairings — the route that raises the average spend and that most restaurant sites never build.
- Private dining
/private-dining/ - The pass and the whole room. The highest-margin enquiry, given its own page and its own mailto: path.
- Blog
/blog/ - A wired content collection — add an .mdx file and it appears here and in the sitemap.
- One worked article
/blog/example-post/ - A long-form post carrying the full editorial component set.
- 404
/404 - Designed, not default. Keeps the navigation.
What is in the build
- A pinned course-by-course plating sequence where ingredient cutouts arrive from the screen edges and the dish assembles
- Fourteen images all plated on near-black, so a mixed food shoot reads as one service
- A cellar route for wine and pairings, and a private-dining route with its own enquiry path — the two pages that move revenue
- Instrument Serif at display scale against Space Grotesk, both self-hosted
- Pre-filled mailto: reservation and enquiry paths plus a live tel:, so the site takes bookings the day it deploys
- Static output with no third-party requests — a restaurant site that loads on a phone with one bar of signal
- 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
- Dark cinematic. Near-black stage, one cold ember accent, a serif display face.
- The mechanic
- The service. A pinned course-by-course plating sequence — each dish unmasks as ingredient cutouts arrive from the screen edges.
- Loud channel
- Moving set-piece
- Imagery. Plated on near-black
- Type & palette
- Instrument Serif · Space Grotesk
-
#0a0908#f2ede4#e2603a
Who it is for
Built for tasting-menu restaurants, chef-led kitchens and dining rooms selling an evening rather than a meal. It suits a place where the food photography is genuinely good. For a café, bakery or roastery where the product is sold over a counter, the bakery and coffee builds are the better fit.
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
Does it take reservations?
Through a pre-filled mailto: path and a live tel: link, yes — and for a small dining room that is often the correct interface. Connecting a booking provider is a single href change on the CTA.
The menu changes every few weeks. Is that painful?
No — the card is content, not layout. Edit the courses and the page is updated. There is no CMS to log into and no build step you need to understand beyond npm run build.
Will the plating animation work on a phone?
Yes, and it degrades to the plated stills under reduced motion. The images are the substance; the sequence is how they are introduced.
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 food & drink templates
KELDMOOR HONEY HOUSE
Apiary / honey house
Loud
Imagery
Lowfield Salt
Solar saltworks
Loud
Imagery
QUARLOW ROASTING CO.
Coffee roastery
Loud
Imagery
MARLEDON ESTATE
Winery / vineyard estate
Loud
Imagery
MALTGARTH BAKEHOUSE
Bakery / bakehouse
Loud
Imagery