Template
Remembering Ruth Alvarez
a memorial site that shares Ruth’s life and the service details, lets people say they will attend or watch the livestream, collects memories for the family, and points to the charity in her name.
Family memorial 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
Garamond reads like a printed program and stays readable at length; Alegreya Sans keeps times and addresses unmistakable.
- EB GaramondHeadings: her name, headings and the obituary
- Alegreya SansBody: service details, forms and memories
Who it is for
- Family and friends, many hearing the news through this link
- People who cannot travel and will watch the livestream
- The family, who read every memory
Layout
- Simple header: her name, Her life, Memories, Service
- Centered hero: a portrait, her name and years, one line from the family
- Obituary text in a single column
- Service details cards: celebration of life, reception, livestream, with times and places
- Attending form for the service and reception
- Memories list: a few the family has chosen, and a link to share one
- Donations: the charity in her name, then a footer with a family contact
Palette
Quiet, warm and dignified, like a printed service program: soft stone, deep slate, and a single muted blue. Nothing bright, nothing animated beyond a breath.
- soft stone
#f5f3ef - slate
#2a2a28 - dusk blue
#4f5d6b - linen
#e8e2d6
Every checked pair, measured again
| Sample | Where | Ratio | Needs |
|---|---|---|---|
| Aa | body text on the page | 12.98:1 | 4.5:1 |
| Aa | text on cards | 11.64:1 | 4.5:1 |
| Aa | secondary text on muted surfaces | 5.21:1 | 4.5:1 |
| Aa | secondary text on the page | 6.03:1 | 4.5:1 |
| Aa | label on the primary action | 6.09:1 | 4.5:1 |
| Aa | label on secondary surfaces | 11.64:1 | 4.5:1 |
| Aa | label on the accent | 11.15:1 | 4.5:1 |
| Aa | error label | 5.46:1 | 4.5:1 |
| primary action against the page | 6.09: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
- EB Garamond, her name, headings and the obituary
- Body
- Alegreya Sans, service details, forms and memories
Spacing and imagery
Slow: a single column at a 60ch measure, 120px between sections.
Photos of Ruth across her life, chosen by the family, in a gentle sepia-free treatment; plenty of space around each.
Components
- Portrait with dates set in Garamond small caps
- Service card with an add-to-calendar link and a directions link
- Memory card: the words first, the name and relation after
Interactions
- The livestream card shows "Watch now" during the service and the recording link after, if the family adds one
- The memory form says plainly that the family reads every memory and chooses which to show
Data
timeline: a moment: year, title, photo, captionmemories: a memory the family chose to show: from (first name and relation), text, photoform attending: name, email, attending (service, reception, both, watching online), number of peopleform memory: name, how you knew Ruth, the memory, may we share it here (yes or no)
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 **Remembering Ruth Alvarez**: a memorial site that shares Ruth’s life and the service details, lets people say they will attend or watch the livestream, collects memories for the family, and points to the charity in her name.
### 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
- `/` Ruth: portrait and dates, obituary, service details, livestream, memories, donations
- `/life` Her life: a timeline of her life with photos
- `/memories` Memories: memories the family has shared, and the form to add one
Home, top to bottom:
1. Simple header: her name, Her life, Memories, Service.
2. Centered hero: a portrait, her name and years, one line from the family.
3. Obituary text in a single column.
4. Service details cards: celebration of life, reception, livestream, with times and places.
5. Attending form for the service and reception.
6. Memories list: a few the family has chosen, and a link to share one.
7. Donations: the charity in her name, then a footer with a family contact.
Copy to start from, in `content.ts`: headline "Ruth Alvarez, 1941 to 2026", subcopy "Teacher, gardener and the best listener any of us knew. We will celebrate her life on Saturday, November 14.", primary action "Service details".
### Design system
Mood: Quiet, warm and dignified, like a printed service program: soft stone, deep slate, and a single muted blue. Nothing bright, nothing animated beyond a breath.
Palette: soft stone `#f5f3ef`, slate `#2a2a28`, dusk blue `#4f5d6b`, linen `#e8e2d6`. Tokens: background `#f5f3ef`, foreground `#2a2a28`, primary `#4f5d6b` with `#f5f3ef` labels, cards `#e9e7e3`, accent `#e8e2d6`.
Type: EB Garamond for her name, headings and the obituary; Alegreya Sans for service details, forms and memories. Load both from https://fonts.googleapis.com/css2?family=EB+Garamond:wght@400;600&family=Alegreya+Sans:wght@400;600&display=swap.
Corners: 4px on controls, 8px on cards, 8px on large panels. Spacing: Slow: a single column at a 60ch measure, 120px between sections.
Imagery: Photos of Ruth across her life, chosen by the family, in a gentle sepia-free treatment; plenty of space around each. 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
- Portrait with dates set in Garamond small caps
- Service card with an add-to-calendar link and a directions link
- Memory card: the words first, the name and relation after
Motion:
- The livestream card shows "Watch now" during the service and the recording link after, if the family adds one
- The memory form says plainly that the family reads every memory and chooses which to show
The signature motion is: the portrait fades in slowly over two seconds on first load, and nothing else moves. 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/timeline.json`: a moment: year, title, photo, caption
- `src/content/memories.json`: a memory the family chose to show: from (first name and relation), text, photo
Forms:
- `attending`: Someone says they will come or watch. Fields: name, email, attending (service, reception, both, watching online), number of people.
- `memory`: Someone shares a memory with the family; it is shown only if the family adds it. Fields: name, how you knew Ruth, the memory, may we share it here (yes or no).
Linked tools:
- Livestream link (YouTube, Zoom or the funeral home’s stream), shown from an hour before.
- Donations: the charity’s own donation page for gifts in her name.
- Flowers: the funeral home’s flower page, if the family wants one.
### 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 #2a2a28 on #f5f3ef 12.97:1; text on cards #2a2a28 on #e9e7e3 11.64:1; secondary text on muted surfaces #5d5c5a on #e5e3df 5.21:1; secondary text on the page #5d5c5a on #f5f3ef 6.02:1; label on the primary action #f5f3ef on #4f5d6b 6.09:1; label on secondary surfaces #2a2a28 on #e9e7e3 11.64:1; label on the accent #2a2a28 on #e8e2d6 11.14:1; error label #ffffff on #c62f2f 5.45:1; primary action against the page #4f5d6b on #f5f3ef 6.09: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: Doves, candles or angel clip art, a guestbook that publishes posts without the family seeing them, ads, and cheerful color.
- 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.