Template
Ellen and Walt, Fifty Years
a site for a fiftieth wedding anniversary party, organized by the children, that tells the couple’s story in pictures, takes RSVPs, and collects letters and memories for a keepsake book.
Fiftieth anniversary party site · Website · Events and bookings · 3 pages
A mock-up of the homepage, drawn from this design’s layout, palette and typefaces. A build follows the full prompt below.
Add app screens
Pick up to 6 screens, such as a dashboard, settings or an empty state. Each is built in this design’s own palette and typefaces, with its states and guardrails.
Start from this templateRead the build prompt
Typefaces
Gilda Display has the poise of an engraved invitation; Cabin at 20px is plain and easy for older eyes.
- Gilda DisplayHeadings: names, decade headings and headlines
- CabinBody: details, forms and captions, set large
Who it is for
- Family and longtime friends, many in their seventies and eighties
- Grandchildren helping relatives reply
- The couple’s children organizing
Layout
- Header: E & W monogram, Their story, Letters, Reply
- Split hero: their 1977 wedding photo and a recent photo side by side, the headline beneath
- Their story timeline: one line and a photo per decade
- The lunch details: time, place, parking and an accessible entrance note
- RSVP form with large fields
- Letters for the keepsake book: an invitation card linking to the form
- Footer with the children’s contact phone numbers
Palette
Golden and gracious, like a cream-and-gilt invitation in a keepsake box: warm ivory, deep walnut and an old-gold accent.
- ivory
#fbf7ee - walnut
#3a2e1c - old gold
#7e5f17 - champagne
#ecdcb1
Every checked pair, measured again
| Sample | Where | Ratio | Needs |
|---|---|---|---|
| Aa | body text on the page | 12.37:1 | 4.5:1 |
| Aa | text on cards | 11.11:1 | 4.5:1 |
| Aa | secondary text on muted surfaces | 5.01:1 | 4.5:1 |
| Aa | secondary text on the page | 5.77:1 | 4.5:1 |
| Aa | label on the primary action | 5.55:1 | 4.5:1 |
| Aa | label on secondary surfaces | 11.11:1 | 4.5:1 |
| Aa | label on the accent | 9.73:1 | 4.5:1 |
| Aa | error label | 5.46:1 | 4.5:1 |
| primary action against the page | 5.55:1 | 3:1 |
As vibld’s tokens
The palette on the 15+ color tokens vibld styles a project with, each text color on the fill it is read on. Marked tokens are solved from the palette, because no swatch held that role at 4.5:1.
- background
- card *
- muted *
- primary
- secondary *
- accent
- destructive *
Type scale
- Display
- Gilda Display, names, decade headings and headlines
- Body
- Cabin, details, forms and captions, set large
Spacing and imagery
Large and easy: 20px body text, 112px between sections, nothing small.
Their wedding photo from 1977 next to a recent one, and photos from the decades between in a simple timeline.
Components
- Then-and-now photo pair with years beneath each
- Decade timeline with gold year markers
- Large-field form with a phone option for people who do not use email
Interactions
- Text size control in the header (normal, larger)
- The letter form says the book is printed after the party and nothing is posted online
Data
story: a decade: years, title, photo, captionform rsvp: names attending, email or phone, attending (yes or no), lunch choice (chicken, fish, vegetarian), needs (wheelchair access, hearing loop, other)form letter: your name, how you know them, your letter
Build prompt
The baseline every prompt in the catalog assumes, then this design’s own ten sections, from goal to guardrails.
The baseline
### How to use these prompts
Each niche site prompt describes a whole small site for one kind of owner: its pages, the records it keeps, the forms it collects and the tools it links to. The rules below apply to every one of them.
### Niche site principles
- The site does the one job its owner needs most (a sign-up, an RSVP, a request, a visit) on the first screen, and every page leads back to it.
- Records the owner adds often (sermons, events, listings, galleries, menus, tour dates) are content collections in `src/content/`, each record with a slug, so a new record gets its page with no code change.
- Tools the owner already pays for or uses (giving, tickets, booking, listing search, ordering) are linked, or framed in an `<iframe>` whose address is in `content.ts`, never rebuilt. With no address, a plain button links out instead, and nothing pretends to work.
- Copy is written for the owner's visitors, specific and plain. Dates, times and places are real fields, never baked into prose.
- The design is this site's own. Its layout, type and motion follow the brief, not a shared template.
### Forms
Every form is a plain HTML form, `<form method="post" action="/__vibld/forms/<name>">`, named as the brief names it (lowercase letters, digits and hyphens). Fields are ordinary named inputs; checkboxes repeat their name; no file uploads. Add a hidden `_next` input with the path to land on, and show a thank-you there when the address has `?submitted=<name>`. Add an empty hidden `_gotcha` input. A script may post it instead with `fetch(form.action, { method: 'POST', body: new FormData(form), headers: { accept: 'application/json' } })`, which answers `{ ok: true }` or `{ ok: false, error }`. A form with limited places lists them in `public/vibld.forms.json` (`{"forms":{"<name>":{"slots":{"field":"<field>","options":{"<value>":<places>}}}}}`), the field a select or radio whose values match those keys exactly; `GET /__vibld/forms/<name>/slots` returns `{ field, options: [{ value, capacity, taken, left }] }`, which the page reads to show what is left and disable full options. vibld adds bot protection when the page is served.
### Engineering baseline
- TypeScript strict mode, small typed components, and one source of truth for design tokens (CSS variables consumed by Tailwind).
- All copy lives in typed content files, so the owner can edit words without touching layout.
- Every form validates on the client, says what went wrong in plain words beside the field, and never claims success it has not had.
- No secrets in the bundle and no third-party scripts beyond Google Fonts; an owner's tool comes in only as a link or a framed page.### Goal
Build **Ellen and Walt, Fifty Years**: a site for a fiftieth wedding anniversary party, organized by the children, that tells the couple’s story in pictures, takes RSVPs, and collects letters and memories for a keepsake book.
### Stack
React + TypeScript + Vite, Tailwind CSS and React Router, one route per page. Content collections in `src/content/`, forms posting to vibld (see Forms in the baseline). No backend of its own.
### Pages & layout
- `/` Celebration: hero with then and now photos, their story, the lunch, RSVP, letters for the book
- `/story` Their story: a timeline by decade with photos
- `/letters` Letters: what to write and the letter form
Home, top to bottom:
1. Header: E & W monogram, Their story, Letters, Reply.
2. Split hero: their 1977 wedding photo and a recent photo side by side, the headline beneath.
3. Their story timeline: one line and a photo per decade.
4. The lunch details: time, place, parking and an accessible entrance note.
5. RSVP form with large fields.
6. Letters for the keepsake book: an invitation card linking to the form.
7. Footer with the children’s contact phone numbers.
Copy to start from, in `content.ts`: headline "Fifty years of Ellen and Walt", subcopy "Their children invite you to a lunch in their honor on Sunday, August 22, at the Oakmont Grange.", primary action "Reply".
### Design system
Mood: Golden and gracious, like a cream-and-gilt invitation in a keepsake box: warm ivory, deep walnut and an old-gold accent.
Palette: ivory `#fbf7ee`, walnut `#3a2e1c`, old gold `#7e5f17`, champagne `#ecdcb1`. Tokens: background `#fbf7ee`, foreground `#3a2e1c`, primary `#7e5f17` with `#fbf7ee` labels, cards `#efebe1`, accent `#ecdcb1`.
Type: Gilda Display for names, decade headings and headlines; Cabin for details, forms and captions, set large. Load both from https://fonts.googleapis.com/css2?family=Gilda+Display&family=Cabin:wght@400;600&display=swap.
Corners: 2px on controls, 6px on cards, 10px on large panels. Spacing: Large and easy: 20px body text, 112px between sections, nothing small.
Imagery: Their wedding photo from 1977 next to a recent one, and photos from the decades between in a simple timeline. Use the owner's photos where the project has them. Without them, use the project's stock photos, or shapes and color from the palette; never a stock photo of people at desks.
### Components & interactions
- Then-and-now photo pair with years beneath each
- Decade timeline with gold year markers
- Large-field form with a phone option for people who do not use email
Motion:
- Text size control in the header (normal, larger)
- The letter form says the book is printed after the party and nothing is posted online
The signature motion is: a thin gold line draws down the story timeline as the reader scrolls, joining the decades. Keep it to that one; everything else is a 150 to 300ms state change. With prefers-reduced-motion, it and every reveal are still.
### Data & state
Collections:
- `src/content/story.json`: a decade: years, title, photo, caption
Forms:
- `rsvp`: A guest replies, often on behalf of a couple. Fields: names attending, email or phone, attending (yes or no), lunch choice (chicken, fish, vegetarian), needs (wheelchair access, hearing loop, other).
- `letter`: A guest writes a letter or memory for the keepsake book. Fields: your name, how you know them, your letter.
Linked tools:
- None.
### Accessibility
WCAG 2.2 AA. Every control has a visible focus ring and a 44px target, every form field a visible label, and errors are announced. Dates and times are written out ("Sunday, March 8, 10:30 AM"), not only shown in a grid. Images have alt text that says what is in them. Verified contrast: body text on the page #3a2e1c on #fbf7ee 12.37:1; text on cards #3a2e1c on #efebe1 11.11:1; secondary text on muted surfaces #6a6051 on #ece7dd 5.00:1; secondary text on the page #6a6051 on #fbf7ee 5.76:1; label on the primary action #fbf7ee on #7e5f17 5.55:1; label on secondary surfaces #3a2e1c on #efebe1 11.11:1; label on the accent #3a2e1c on #ecdcb1 9.72:1; error label #ffffff on #c62f2f 5.45:1; primary action against the page #7e5f17 on #fbf7ee 5.55:1.
### Security
No third-party scripts other than Google Fonts. Framed tools are `<iframe>`s from the owner's own address with a `title`, `loading="lazy"` and `referrerpolicy="strict-origin-when-cross-origin"`. Forms cap input length and carry the empty `_gotcha` field.
### Performance & SEO
Images as AVIF or WebP with width and height, the first one eager and the rest lazy. Preconnect to Google Fonts. Each page has its own title and description from content, and records' pages take theirs from the record. Structured data where it fits: Event.
### Guardrails
- Avoid: Wedding-bell clip art, a registry (gifts are discouraged unless the family adds a note), small gray text, and cursive body type.
- One primary action per screen, one accent color, at most six top-level links.
- No carousel in the hero, no mega menu, no emoji or clip-art icons, no hard offset shadows, no purple-to-blue gradient.
- The names in it are invented. Use no real organization's or person's name, logo or trademark.