Template
Garden Party for Priya
a site for a bridal shower garden party that gives the plan for the afternoon, takes RSVPs with tea or sparkling choice, links to the couple’s registry and asks guests for a recipe for the family cookbook.
Garden bridal shower site · Website · Events and bookings · 2 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
Bodoni’s fine hairlines suit a printed garden-party invitation; Jost’s geometric calm balances it.
- Bodoni ModaHeadings: names, headlines and the itinerary times
- JostBody: details, forms and the registry list
Who it is for
- Guests invited by the maid of honor
- The bride’s family organizing food
- The hosts keeping the headcount
Layout
- Top bar with Priya’s initial in a wreath and three links
- Centered hero: an oval-framed photo, the headline and date in Bodoni
- The afternoon: a short timeline of the plan (arrival, tea, games, gifts) with times
- RSVP form with tea or sparkling choice
- Registry list of store links
- Cookbook invitation card with a link to the recipe form
- Footer with hosts and directions link
Palette
Fresh and botanical, like a pressed-flower garden table: celadon, a sage-olive green and a peony blush, with fine serif lettering.
- celadon paper
#f3f1ea - garden ink
#2f3a2f - sage olive
#5e6f41 - peony
#f2cfc1
Every checked pair, measured again
| Sample | Where | Ratio | Needs |
|---|---|---|---|
| Aa | body text on the page | 10.51:1 | 4.5:1 |
| Aa | text on cards | 9.50:1 | 4.5:1 |
| Aa | secondary text on muted surfaces | 9.15:1 | 4.5:1 |
| Aa | secondary text on the page | 10.51:1 | 4.5:1 |
| Aa | label on the primary action | 4.86:1 | 4.5:1 |
| Aa | label on secondary surfaces | 9.50:1 | 4.5:1 |
| Aa | label on the accent | 8.19:1 | 4.5:1 |
| Aa | error label | 5.46:1 | 4.5:1 |
| primary action against the page | 4.86: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
- Bodoni Moda, names, headlines and the itinerary times
- Body
- Jost, details, forms and the registry list
Spacing and imagery
Airy and symmetrical: centered blocks, 96px between sections.
Botanical line drawings in olive and blush, a table set outdoors, or the couple’s own photo in an oval frame.
Components
- Oval photo frame with a hand-drawn botanical border in SVG
- Itinerary timeline with times in Bodoni and steps in Jost
- Registry store row with an Open registry button
Interactions
- Add to calendar for the afternoon
- Recipe form saves a draft in the browser while it is being typed
Data
form rsvp: name, email, attending (yes or no), drink (tea, sparkling, neither), dietary needs, message for Priyaform recipe: name, recipe title, ingredients, method, the story behind it
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 **Garden Party for Priya**: a site for a bridal shower garden party that gives the plan for the afternoon, takes RSVPs with tea or sparkling choice, links to the couple’s registry and asks guests for a recipe for the family cookbook.
### 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
- `/` Shower: hero, the afternoon, RSVP, registry, recipe cookbook, hosts
- `/cookbook` Family cookbook: what to send and the recipe form
Home, top to bottom:
1. Top bar with Priya’s initial in a wreath and three links.
2. Centered hero: an oval-framed photo, the headline and date in Bodoni.
3. The afternoon: a short timeline of the plan (arrival, tea, games, gifts) with times.
4. RSVP form with tea or sparkling choice.
5. Registry list of store links.
6. Cookbook invitation card with a link to the recipe form.
7. Footer with hosts and directions link.
Copy to start from, in `content.ts`: headline "Tea in the garden for Priya", subcopy "Saturday, April 18, from 2 to 5 at the Linwood house. Wear something you can sit on the grass in.", primary action "Reply by April 1".
### Design system
Mood: Fresh and botanical, like a pressed-flower garden table: celadon, a sage-olive green and a peony blush, with fine serif lettering.
Palette: celadon paper `#f3f1ea`, garden ink `#2f3a2f`, sage olive `#5e6f41`, peony `#f2cfc1`. Tokens: background `#f3f1ea`, foreground `#2f3a2f`, primary `#5e6f41` with `#f3f1ea` labels, cards `#e7e6df`, accent `#f2cfc1`.
Type: Bodoni Moda for names, headlines and the itinerary times; Jost for details, forms and the registry list. Load both from https://fonts.googleapis.com/css2?family=Bodoni+Moda:wght@400;700&family=Jost:wght@400;500&display=swap.
Corners: 999px on controls, 18px on cards, 999px on large panels. Spacing: Airy and symmetrical: centered blocks, 96px between sections.
Imagery: Botanical line drawings in olive and blush, a table set outdoors, or the couple’s own photo in an oval frame. 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
- Oval photo frame with a hand-drawn botanical border in SVG
- Itinerary timeline with times in Bodoni and steps in Jost
- Registry store row with an Open registry button
Motion:
- Add to calendar for the afternoon
- Recipe form saves a draft in the browser while it is being typed
The signature motion is: the botanical border draws itself around the oval frame once, stroke by stroke. 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:
- None: every page reads `content.ts`.
Forms:
- `rsvp`: A guest replies. Fields: name, email, attending (yes or no), drink (tea, sparkling, neither), dietary needs, message for Priya.
- `recipe`: A guest sends a recipe for the family cookbook. Fields: name, recipe title, ingredients, method, the story behind it.
Linked tools:
- None.
Registry: The registry section is a list of links to the stores where the registry lives, each one the store's name and the registry's own address, from `content.ts`. Wrap the section in an element with the attribute `data-vibld-registry`. Write each link exactly as the owner gives it, opening in a new tab with `rel="noopener"`, and add no tracking or referral parameters: vibld handles those. Start the owner's list with the stores people most often register at: Amazon, Target, Walmart, Babylist, Zola, Crate & Barrel, Williams Sonoma, Pottery Barn, REI, Etsy and MyRegistry, each with an empty address the owner fills in, and leave out any store whose address is empty.
### 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 #2f3a2f on #f3f1ea 10.51:1; text on cards #2f3a2f on #e7e6df 9.49:1; secondary text on muted surfaces #2f3a2f on #e3e2db 9.14:1; secondary text on the page #2f3a2f on #f3f1ea 10.51:1; label on the primary action #f3f1ea on #5e6f41 4.85:1; label on secondary surfaces #2f3a2f on #e7e6df 9.49:1; label on the accent #2f3a2f on #f2cfc1 8.18:1; error label #ffffff on #c62f2f 5.45:1; primary action against the page #5e6f41 on #f3f1ea 4.85: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: Lingerie or bachelorette jokes, a cost-split section, glitter textures, and script fonts for body text.
- 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.