Wedding Website Template
Demo brand: HARRIET & IVO · Couple's wedding site · 13 routes · Astro 7 + Tailwind 4
Live preview
The demo is a full desktop site. Open it in a new tab ↗
About this wedding website template
A complete wedding site for a couple, not a landing page: thirteen built routes covering the day, the story, travel and stay, RSVP, gifts, a nine-question FAQ, a three-post notes feed and a privacy page.
The materials are two papers and their two inks — a sage card stock with a warm sand enclosure, an engraved display serif and one deep green. Five rendered colours in the whole build, no ornament but a single rule.
The signature move is Set to the Card. On a real engraved suite the wording is fixed and the card is fixed, so the only free variable is the size of each line — which is why an invitation has no type scale. No display size is authored anywhere in this build: every line is broken at sense and then set to the size that fills its measure. The control case is the monogram, cut once and used at one size on every piece, so it never re-sets while every line around it does.
The 13 pages you get
- The invitation
/ - The card itself — names, date, place, set to fill. The page everyone opens first and screenshots.
- The day
/day/ - The running order, hour by hour, rendered from a typed schedule array.
- Our story
/story/ - The long read, for the guests who want it and the grandparents who will print it.
- Travel & stay
/travel/ - Getting there and where to sleep — the page that saves you forty identical text messages.
- Reply
/rsvp/ - A working RSVP form plus a live mailto: reply path.
- Gifts
/registry/ - Handled with the tone the rest of the suite sets, rather than as a shop.
- Questions
/faq/ - Dress code, children, parking, timings — answered once, publicly.
- Notes
/notes/ - A wired content collection for updates as the date approaches.
- Three worked notes
/notes/… - The invitations are printed, both taxi firms are holding cars, and what happens if it rains — the running updates a wedding site is actually for.
- Privacy
/privacy/ - A real route — you are collecting guest names and dietary requirements.
- 404
/404 - "Not a card in this suite" — designed in the same language.
What is in the build
- Type set to fill its measure rather than to a scale — no display size is authored anywhere in the build
- A monogram as the declared control case: one mark, one size, on every piece, while every line around it re-sets
- Two papers and two inks, five rendered colours total, one rule and no ornament
- A working RSVP form plus a live mailto: reply path
- A notes collection for pre-wedding updates, which is what turns a static invitation into a page guests return to
- Italiana with Cabin, both self-hosted; thirty-six images running one tipped-in, deckle-edged treatment
- 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
- A sage card stock with a warm sand enclosure paper, an engraved display serif and one deep green ink. Two papers and their two inks, five rendered colours, no ornament but a single rule.
- The mechanic
- "Set to the Card": on an engraved suite the wording is fixed and the card is fixed, so the one free variable is the SIZE of each line. No display size is authored anywhere — every line is broken at sense and then set to the size that fills its measure, which is why a real invitation has no type scale.
- Loud channel
- Display type
- Imagery. Tipped in, deckle edged
- Type & palette
- Italiana · Cabin
-
#59705f#fefffb#2f4636 - The control case
- The monogram. A mark is cut once and used at one size on every piece in the suite, so it never re-sets while every line of type around it does. Drawn, not labelled.
Who it is for
Built for couples who would rather own their wedding site than rent a slot on a platform, and for the designers and stationers who make suites for them. It suits a wedding with an engraved, restrained visual identity. It is a static site: fast, permanent, no subscription, and yours after the day.
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 RSVP form collect replies somewhere?
The form is built and validated; the submit target is yours to point at — any form endpoint or an Astro action. A live mailto: reply path works with no setup at all. We do not ship a guest database, because that is personal data and where it lives should be your decision.
Why is there no type scale?
Because engraved stationery does not have one. The wording and the card are both fixed, so the size of each line is the only thing a printer can move. Every line here is broken at sense and set to fill its measure, which is what makes it read as printed rather than as a web page.
Can I use it for something other than a wedding?
The set-to-fill mechanic suits any invitation-shaped event — a launch, a private view, an anniversary. The routes are wedding-specific but they are ordinary pages; rename them and the suite holds.
What exactly do I get for free?
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.
