Template
Little Fig
a site for a baby shower that tells guests when and where, takes RSVPs (in person or joining by video), points to the registries and a diaper fund, and shares a few games ahead of the day.
Baby shower site with a diaper fund · 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
Gluten is round and bouncy like frosting lettering; Nunito Sans keeps the address and times easy to read.
- GlutenHeadings: the baby’s nickname, headlines and game titles
- Nunito SansBody: details, RSVP and registry list
Who it is for
- Guests, many on a phone from a text message
- Out-of-town family joining by video
- The hosts, who need a headcount
Layout
- Small top bar: Little Fig, Details, RSVP, Registry
- Centered hero: a drawn fig mobile, the headline, date, time and place
- Details cards: when, where (with a map link), parking, video link for remote guests
- RSVP form band with the reply-by date
- Registry list of store links, then the diaper fund buttons
- Games: two short games guests can try ahead (baby photo guess, name the song), as cards
- Footer with hosts’ names and a contact email
Palette
Soft, sunny and a little silly, like a hand-lettered card on a nursery shelf: blush, mint and a fig-purple ink.
- blush cream
#fff6ef - fig ink
#3b2a30 - fig
#9a4560 - mint
#cfe9dc
Every checked pair, measured again
| Sample | Where | Ratio | Needs |
|---|---|---|---|
| Aa | body text on the page | 12.62:1 | 4.5:1 |
| Aa | text on cards | 11.35:1 | 4.5:1 |
| Aa | secondary text on muted surfaces | 5.06:1 | 4.5:1 |
| Aa | secondary text on the page | 5.84:1 | 4.5:1 |
| Aa | label on the primary action | 5.80:1 | 4.5:1 |
| Aa | label on secondary surfaces | 11.35:1 | 4.5:1 |
| Aa | label on the accent | 10.48:1 | 4.5:1 |
| Aa | error label | 5.46:1 | 4.5:1 |
| primary action against the page | 5.80: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
- Gluten, the baby’s nickname, headlines and game titles
- Body
- Nunito Sans, details, RSVP and registry list
Spacing and imagery
Roomy and centered: one column on phones, 72px between sections.
Simple drawn shapes in the palette (a fig, a moon, a mobile), or the parents’ own photo. No ultrasound images unless the parents add one.
Components
- Detail card with an icon drawn in the palette (calendar, pin, video)
- Registry store row: store name, a one-line note, Open registry button
- Fund button group for Venmo, PayPal and Zelle
Interactions
- Add to calendar button that downloads an .ics file for the shower
- After the RSVP deadline the form says replies are closed and gives the hosts’ email
Data
form rsvp: name, email, attending (in person, by video, can’t make it), number of guests, dietary needs, a note for the parents
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 **Little Fig**: a site for a baby shower that tells guests when and where, takes RSVPs (in person or joining by video), points to the registries and a diaper fund, and shares a few games ahead of the day.
### 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 with date and place, details, RSVP, registries, diaper fund, games, hosts
- `/rsvp` RSVP: the RSVP form and the deadline
Home, top to bottom:
1. Small top bar: Little Fig, Details, RSVP, Registry.
2. Centered hero: a drawn fig mobile, the headline, date, time and place.
3. Details cards: when, where (with a map link), parking, video link for remote guests.
4. RSVP form band with the reply-by date.
5. Registry list of store links, then the diaper fund buttons.
6. Games: two short games guests can try ahead (baby photo guess, name the song), as cards.
7. Footer with hosts’ names and a contact email.
Copy to start from, in `content.ts`: headline "A shower for Little Fig", subcopy "Join us to celebrate Maya and Sam before the baby arrives in June. Brunch, a few games, and a lot of tiny socks.", primary action "RSVP".
### Design system
Mood: Soft, sunny and a little silly, like a hand-lettered card on a nursery shelf: blush, mint and a fig-purple ink.
Palette: blush cream `#fff6ef`, fig ink `#3b2a30`, fig `#9a4560`, mint `#cfe9dc`. Tokens: background `#fff6ef`, foreground `#3b2a30`, primary `#9a4560` with `#fff6ef` labels, cards `#f3eae4`, accent `#cfe9dc`.
Type: Gluten for the baby’s nickname, headlines and game titles; Nunito Sans for details, RSVP and registry list. Load both from https://fonts.googleapis.com/css2?family=Gluten:wght@500;700&family=Nunito+Sans:wght@400;700&display=swap.
Corners: 14px on controls, 24px on cards, 40px on large panels. Spacing: Roomy and centered: one column on phones, 72px between sections.
Imagery: Simple drawn shapes in the palette (a fig, a moon, a mobile), or the parents’ own photo. No ultrasound images unless the parents add one. 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
- Detail card with an icon drawn in the palette (calendar, pin, video)
- Registry store row: store name, a one-line note, Open registry button
- Fund button group for Venmo, PayPal and Zelle
Motion:
- Add to calendar button that downloads an .ics file for the shower
- After the RSVP deadline the form says replies are closed and gives the hosts’ email
The signature motion is: the drawn mobile above the headline sways gently, as if a window were open. 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 (in person, by video, can’t make it), number of guests, dietary needs, a note for the parents.
Linked tools:
- Video call link for remote guests (Zoom, Google Meet or FaceTime), shown on the page.
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.
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 #3b2a30 on #fff6ef 12.61:1; text on cards #3b2a30 on #f3eae4 11.34:1; secondary text on muted surfaces #6c5d60 on #efe6e0 5.06:1; secondary text on the page #6c5d60 on #fff6ef 5.83:1; label on the primary action #fff6ef on #9a4560 5.79:1; label on secondary surfaces #3b2a30 on #f3eae4 11.34:1; label on the accent #3b2a30 on #cfe9dc 10.47:1; error label #ffffff on #c62f2f 5.45:1; primary action against the page #9a4560 on #fff6ef 5.79: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: Pink-or-blue stereotypes, stork and diaper-pin clip art, gender guessing in the copy unless the parents ask for it, and asking guests for their home address.
- 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.