Bakery Website Template

About this bakery website template

The 13 pages you get

Home /

The lamination set-piece, the bakehouse, the breads and the order close.

Breads /breads/

The range — the page that sells.

Four bread pages /breads/…

Calder Country, Seeded Hearth, Dark Malthouse Rye and the Laminated Croissant. Each a full route with its own flour, method and schedule.

Wholesale /wholesale/

The B2B line — cafés and restaurants are a different buyer from the counter customer, and they are the volume.

Visit /visit/

Where the bakehouse is and when it opens. For a bakery this is the highest-traffic page after the home page.

Order & enquiries /order/

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/…

Milling our own three mornings a week, and why the crumb opens. Craft content that justifies a £6 loaf.

404 /404

"Sold out" — designed in the same language, carrying the navigation.

What is in the build

• A scroll-driven lamination that triples butter layers at each fold — 1, 3, 9, 27 — by the actual lamination law rather than a generic reveal
• A pinned control: a straight no-butter block that stays at one layer through every fold
• A palette walked from raw flour to crust scorch, with one accent spent only on offer, price and CTA
• Four individual bread routes with their own flour and method, which is how a bakery earns search for what it actually bakes
• A wholesale route for the café and restaurant trade, which is usually the larger half of the business
• Vollkorn with Public Sans, both self-hosted; a working order 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

Toasted-oat crumb to deep-bake mahogany — a stone-milled sourdough bakehouse walked from raw flour to the scorch of the crust, one scorch accent spent on the offer, price and CTA and nothing else.

The mechanic

"The Turn": scroll is the fold count — a laminated dough block triples its butter layers at each letter-fold, 1→3→9→27 by the lamination law 3ⁿ, with a straight no-butter block pinned at one layer as the control.

Loud channel

Palette

Imagery. Oven-warmed, gently muted

Type & palette

Vollkorn · Public Sans

#e6cfa6 #2e1a0f #8f3c0d

The control case

The straight block — no butter, so nothing to laminate: pinned at one layer through every fold. Drawn, not labelled.

Who it is for

Built for bakeries, bakehouses, patisseries and cafés with a retail counter and a wholesale round. It suits a baker whose premium rests on method and milling. For a coffee roastery, the coffee build has the same shape with a roast curve instead of a lamination; for a restaurant, fine-dining.

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