Template
Okafor Family Reunion
a site for a three-day family reunion that gives every branch of the family the schedule, takes RSVPs with headcount and T-shirt sizes, collects dues through a payment app, and keeps the family tree and photos in one place.
Three-day family reunion site with dues · Website · Events and bookings · 4 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
Shrikhand’s bold italic swash feels like a banner over the picnic tables; Signika is sturdy and easy for every generation to read.
- ShrikhandHeadings: the family name and headlines
- SignikaBody: schedule, forms and body
Who it is for
- Relatives of every generation, from teenagers to great-aunts
- Branch organizers collecting RSVPs for their households
- The reunion committee
Layout
- Top bar: Okafor Reunion, Schedule, Family, Photos, and RSVP
- Hero: the family name in Shrikhand over a stack of overlapping photos from different decades
- The weekend at a glance: three day cards (Friday welcome, Saturday picnic and banquet, Sunday service and brunch)
- RSVP form for a whole household with T-shirt sizes
- Dues stats: what dues cover and the amounts by age, with payment app buttons
- Hotel block card with the group code and the booking deadline
- Family tree preview and a footer with the committee contact
Palette
Joyful and generous, like a summer cookout banner: warm cream, a deep cocoa, burnt orange and a family-tree green.
- cookout cream
#fff4e3 - cocoa
#2b1d12 - burnt orange
#a8401a - tree green
#2f7d5b
Every checked pair, measured again
| Sample | Where | Ratio | Needs |
|---|---|---|---|
| Aa | body text on the page | 14.99:1 | 4.5:1 |
| Aa | text on cards | 13.34:1 | 4.5:1 |
| Aa | secondary text on muted surfaces | 5.86:1 | 4.5:1 |
| Aa | secondary text on the page | 6.84:1 | 4.5:1 |
| Aa | label on the primary action | 5.65:1 | 4.5:1 |
| Aa | label on secondary surfaces | 13.34:1 | 4.5:1 |
| Aa | label on the accent | 4.59:1 | 4.5:1 |
| Aa | error label | 5.46:1 | 4.5:1 |
| primary action against the page | 5.65: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
- Shrikhand, the family name and headlines
- Body
- Signika, schedule, forms and body
Spacing and imagery
Lively: 80px between sections, photos in overlapping stacks.
Family photos old and new side by side, a group photo from the last reunion, and a hand-drawn family tree in the palette.
Components
- Photo stack: three to five photos overlapping at slight angles
- Day card with the day’s events and a dress note
- Family tree drawn in SVG from branches.json, readable as a list for screen readers
Interactions
- Schedule days as tabs on phones
- Hotel card shows the days left on the room block
Data
events: a schedule item: day, start, end, title, place, what to bringbranches: a branch of the family: name (after its eldest), members by first name, organizeralbums: a photo album: year, place, photos with captionsform rsvp: household contact name, email, phone, branch (select), adults, children under 12, names attending, T-shirt sizes and counts, events attending (checkboxes), dietary needs
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 **Okafor Family Reunion**: a site for a three-day family reunion that gives every branch of the family the schedule, takes RSVPs with headcount and T-shirt sizes, collects dues through a payment app, and keeps the family tree and photos in one place.
### 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
- `/` Reunion: hero, the weekend at a glance, schedule, RSVP, dues, hotel, family tree, photos
- `/schedule` Schedule: each day hour by hour
- `/family` Family tree: the branches and who is in each
- `/photos` Photos: albums by year, each with its page
Home, top to bottom:
1. Top bar: Okafor Reunion, Schedule, Family, Photos, and RSVP.
2. Hero: the family name in Shrikhand over a stack of overlapping photos from different decades.
3. The weekend at a glance: three day cards (Friday welcome, Saturday picnic and banquet, Sunday service and brunch).
4. RSVP form for a whole household with T-shirt sizes.
5. Dues stats: what dues cover and the amounts by age, with payment app buttons.
6. Hotel block card with the group code and the booking deadline.
7. Family tree preview and a footer with the committee contact.
Copy to start from, in `content.ts`: headline "The Okafors are coming home", subcopy "July 9 to 11, 2027 in Charlotte. Three days, five generations, one very long table.", primary action "RSVP for your household".
### Design system
Mood: Joyful and generous, like a summer cookout banner: warm cream, a deep cocoa, burnt orange and a family-tree green.
Palette: cookout cream `#fff4e3`, cocoa `#2b1d12`, burnt orange `#a8401a`, tree green `#2f7d5b`. Tokens: background `#fff4e3`, foreground `#2b1d12`, primary `#a8401a` with `#fff4e3` labels, cards `#f2e7d6`, accent `#2f7d5b`.
Type: Shrikhand for the family name and headlines; Signika for schedule, forms and body. Load both from https://fonts.googleapis.com/css2?family=Shrikhand&family=Signika:wght@400;600&display=swap.
Corners: 8px on controls, 20px on cards, 32px on large panels. Spacing: Lively: 80px between sections, photos in overlapping stacks.
Imagery: Family photos old and new side by side, a group photo from the last reunion, and a hand-drawn family tree in the palette. 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
- Photo stack: three to five photos overlapping at slight angles
- Day card with the day’s events and a dress note
- Family tree drawn in SVG from branches.json, readable as a list for screen readers
Motion:
- Schedule days as tabs on phones
- Hotel card shows the days left on the room block
The signature motion is: the hero photo stack fans out a little as the page loads, like photos spread on a table. 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/events.json`: a schedule item: day, start, end, title, place, what to bring
- `src/content/branches.json`: a branch of the family: name (after its eldest), members by first name, organizer
- `src/content/albums.json`: a photo album: year, place, photos with captions; each has its page at `/photos/<slug>`
Forms:
- `rsvp`: A household replies. Fields: household contact name, email, phone, branch (select), adults, children under 12, names attending, T-shirt sizes and counts, events attending (checkboxes), dietary needs.
Linked tools:
- Hotel block: the hotel’s group booking link with the code.
- Dues: the committee’s payment app links, as gift fund buttons.
Gift funds: Gift funds are buttons to the owner's payment apps, from `content.ts`: Venmo (`https://venmo.com/u/<handle>`), PayPal (`https://paypal.me/<handle>`) and Zelle, which has no web link, so it shows the email or phone the owner gives with a copy button. Each fund has a name, a line on what it is for and an optional goal shown as words, not a progress bar the page cannot keep true. Leave out any app the owner has not filled in. The site never takes a card number itself.
### 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 #2b1d12 on #fff4e3 14.99:1; text on cards #2b1d12 on #f2e7d6 13.34:1; secondary text on muted surfaces #605346 on #eee3d2 5.86:1; secondary text on the page #605346 on #fff4e3 6.83:1; label on the primary action #fff4e3 on #a8401a 5.65:1; label on secondary surfaces #2b1d12 on #f2e7d6 13.34:1; label on the accent #fff4e3 on #2f7d5b 4.58:1; error label #ffffff on #c62f2f 5.45:1; primary action against the page #a8401a on #fff4e3 5.65: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: Generic stock family photos, African print clichés unless the family supplies their own, tiny type, and asking for children’s birthdates.
- 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.