Winery Website Template
Demo brand: MARLEDON ESTATE · Winery / vineyard estate · 16 routes · Astro 7 + Tailwind 4
Live preview
The demo is a full desktop site. Open it in a new tab ↗
About this winery website template
A complete site for a vineyard estate: sixteen built routes covering seven individual wine pages, the estate, visiting, contact and a two-post journal.
English still and sparkling wine on the chalk of the Ledbourne Vale, in Source Serif 4 against DM Sans. The rendered colour set is the estate’s wine itself — every colour is a computed point on the wine-ageing arc, six wine stops plus ink and hairline furniture, and nothing coloured lives outside the arc. The palette is the loud channel and it is entirely derived.
The signature move is the vintage turning. As each wine enters the viewport its swatch fills from the top to the true colour its age produces, while a marker advances along a drawn hue arc from nouveau at 344° toward amber at 55° as chroma decays. It happens in flow, and no numeral animates. The control is the estate white: Bacchus has no anthocyanins, so it never enters the arc at all — a fixed straw at a chroma far below every red stop.
The 16 pages you get
- Home
/ - The ageing arc, the estate’s position, the wines and the visit close.
- The Wines
/wines/ - The range — the page that does the selling.
- Seven wine pages
/wines/… - Ledbourne Nouveau, Vale Pinot Noir, Marledon Claret, Old Vine Reserve, Solera Tawny, Library 1998, and Chalk Bacchus. Each a full route with its own age and colour position. Bacchus is the off-arc control.
- The Estate
/estate/ - The land, the chalk and the growing. In wine this is the provenance that carries the price.
- Visit
/visit/ - Cellar door, tastings and tours — the second revenue line and the one that creates direct customers.
- Contact
/contact/ - A working form with a pre-filled mailto: fallback and a live tel:.
- Journal
/journal/ - A wired content collection — add an .mdx file and it appears here and in the sitemap.
- Two worked articles
/journal/… - Reading a wine by its colour, and the 2024 harvest in one long week. The first explains the set-piece; the second is the vintage report customers actually read.
- 404
/404 - Designed, not default. Keeps the navigation.
What is in the build
- Wine swatches that fill to the true colour their age produces, with a marker advancing along a drawn hue arc from 344° to 55° as chroma decays
- A declared control: the estate white, with no anthocyanins, held off the arc entirely at a far lower chroma — and the test harness requires it to stay off
- Every colour in the build computed as a point on the ageing arc — six wine stops plus ink and hairlines, nothing outside it
- Seven individual wine routes, which is how an estate accumulates pages a merchant or writer can link
- A visit route for cellar door and tastings, the line that turns a wine customer into a direct one
- Low-chroma cellar-lit photography across nine images; Source Serif 4 with DM Sans, both self-hosted
- 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
- English still and sparkling wine on the chalk of the Ledbourne Vale. The rendered colour set is the estate's wine — every colour is a computed point on the wine-ageing arc, six wine stops plus ink and hairline furniture, nothing coloured living outside the arc.
- The mechanic
- "The Vintage Turns": as each wine enters the viewport its swatch fills from the top to the true colour its age produces, while a marker advances along a drawn hue-arc from nouveau (344°) toward amber (55°) as chroma decays. In-flow, no numeral animates.
- Loud channel
- Palette
- Imagery. Low-chroma, cellar-lit
- Type & palette
- Source Serif 4 · DM Sans
-
#3f0829#f1e6e0#90294a - The control case
- The estate white (Bacchus) — no anthocyanins, so it never enters the arc: a fixed straw at a chroma far below every red stop. The harness requires it off the arc while every red stop sits on it.
Who it is for
Built for vineyards, wineries and estates selling both wine and visits — and for cider, spirits and any producer whose product ages visibly. It suits an estate whose story is the land. For a bar or restaurant wine list, the fine-dining build has that page already.
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 the colour arc need real data?
An age and a wine type per bottle, which every estate has. The colour is computed from that rather than picked, which is why the white genuinely cannot be placed on the arc — and why the page teaches something instead of decorating.
Can I sell wine through it?
The contact and visit routes take orders and bookings through a working form and a pre-filled mailto:. Wine sales carry duty, age verification and shipping restrictions that vary by country, so no checkout is wired in — that decision is yours. For a full shop, start from the ecommerce build.
We are a cidery, not a winery. Does it work?
Yes, provided your product ages. The arc is a colour-over-time model; cider, sherry, whisky and vinegar all fit it. The estate and visit structure is unchanged.
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
Ground
QUARLOW ROASTING CO.
Coffee roastery
Loud
Imagery
SÖL — Kitchen & Fire
Restaurant
Loud
Moving set-piece
MALTGARTH BAKEHOUSE
Bakery / bakehouse
Loud
Palette