Template
Noa’s Bat Mitzvah
a site for a bat mitzvah that gives the Shabbat service and party details, takes RSVPs per event, explains Noa’s Torah portion and mitzvah project, and links the tzedakah fund for that project.
Bat mitzvah site with a mitzvah project · 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
Frank Ruhl Libre is a classic Hebrew text face with a matching Latin; Assistant covers both scripts for body text so they sit evenly together.
- Frank Ruhl LibreHeadings: headlines and the portion name, in Hebrew and English
- AssistantBody: details, forms and body, in Hebrew and English
Who it is for
- Family and family friends, some new to a synagogue service
- Noa’s friends, invited to the party
- The family, who need counts for each event
Layout
- Header: Noa in Hebrew and English, Service, Party, Project, RSVP
- Hero: a geometric star pattern in tallit blue and gold, the headline, date and place
- Event cards: Shabbat service, kiddush lunch, evening party, each with time and place
- RSVP form per event
- Noa’s portion: its name in Hebrew and English and a few lines in her words
- Mitzvah project card with the tzedakah fund link
- Hotel block and footer with family contact
Palette
Bright and thoughtful, like morning light in a sanctuary: pale sky, deep blue and a warm gold, with type that sets Hebrew and English side by side.
- morning sky
#f2f6fb - deep ink
#14243b - tallit blue
#2f5fa7 - warm gold
#e6b84a
Every checked pair, measured again
| Sample | Where | Ratio | Needs |
|---|---|---|---|
| Aa | body text on the page | 14.38:1 | 4.5:1 |
| Aa | text on cards | 12.81:1 | 4.5:1 |
| Aa | secondary text on muted surfaces | 5.63:1 | 4.5:1 |
| Aa | secondary text on the page | 6.56:1 | 4.5:1 |
| Aa | label on the primary action | 5.84:1 | 4.5:1 |
| Aa | label on secondary surfaces | 12.81:1 | 4.5:1 |
| Aa | label on the accent | 8.41:1 | 4.5:1 |
| Aa | error label | 5.46:1 | 4.5:1 |
| primary action against the page | 5.84: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
- Frank Ruhl Libre, headlines and the portion name, in Hebrew and English
- Body
- Assistant, details, forms and body, in Hebrew and English
Spacing and imagery
Clear and calm: 88px between sections, two-column bilingual headings.
Noa’s own photos, a simple geometric pattern drawn from a star, and the colors of the tallit she chose.
Components
- Bilingual heading: Hebrew right-to-left beside English, set with dir attributes
- Event card with a dress note for the service
- Geometric pattern drawn in SVG, decorative and hidden from screen readers
Interactions
- Add to calendar for each event
- A plain-words guide to the service opens from the service card
Data
form rsvp: names, email, service (yes or no), kiddush lunch (yes or no), evening party (yes or no), number attending each, dietary needs (kosher, vegetarian, allergies)
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 **Noa’s Bat Mitzvah**: a site for a bat mitzvah that gives the Shabbat service and party details, takes RSVPs per event, explains Noa’s Torah portion and mitzvah project, and links the tzedakah fund for that project.
### 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
- `/` Bat mitzvah: hero, service, party, RSVP, Noa’s portion, mitzvah project, hotel
- `/service` The service: what happens at the service, for guests new to it
- `/project` Mitzvah project: what Noa is doing and how to help
Home, top to bottom:
1. Header: Noa in Hebrew and English, Service, Party, Project, RSVP.
2. Hero: a geometric star pattern in tallit blue and gold, the headline, date and place.
3. Event cards: Shabbat service, kiddush lunch, evening party, each with time and place.
4. RSVP form per event.
5. Noa’s portion: its name in Hebrew and English and a few lines in her words.
6. Mitzvah project card with the tzedakah fund link.
7. Hotel block and footer with family contact.
Copy to start from, in `content.ts`: headline "Noa is becoming a bat mitzvah", subcopy "Please join us for Shabbat morning services on Saturday, May 8 at Temple Beth Shalom, and the celebration that evening.", primary action "RSVP".
### Design system
Mood: Bright and thoughtful, like morning light in a sanctuary: pale sky, deep blue and a warm gold, with type that sets Hebrew and English side by side.
Palette: morning sky `#f2f6fb`, deep ink `#14243b`, tallit blue `#2f5fa7`, warm gold `#e6b84a`. Tokens: background `#f2f6fb`, foreground `#14243b`, primary `#2f5fa7` with `#f2f6fb` labels, cards `#e5e9ef`, accent `#e6b84a`.
Type: Frank Ruhl Libre for headlines and the portion name, in Hebrew and English; Assistant for details, forms and body, in Hebrew and English. Load both from https://fonts.googleapis.com/css2?family=Frank+Ruhl+Libre:wght@500;700&family=Assistant:wght@400;600&display=swap.
Corners: 6px on controls, 14px on cards, 22px on large panels. Spacing: Clear and calm: 88px between sections, two-column bilingual headings.
Imagery: Noa’s own photos, a simple geometric pattern drawn from a star, and the colors of the tallit she chose. 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
- Bilingual heading: Hebrew right-to-left beside English, set with dir attributes
- Event card with a dress note for the service
- Geometric pattern drawn in SVG, decorative and hidden from screen readers
Motion:
- Add to calendar for each event
- A plain-words guide to the service opens from the service card
The signature motion is: the star pattern in the hero turns very slowly, a full turn every minute. 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 household replies for each event. Fields: names, email, service (yes or no), kiddush lunch (yes or no), evening party (yes or no), number attending each, dietary needs (kosher, vegetarian, allergies).
Linked tools:
- Tzedakah: the charity’s donation page for Noa’s mitzvah project.
- Hotel block booking link.
- The synagogue’s livestream, if the family adds it.
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 #14243b on #f2f6fb 14.38:1; text on cards #14243b on #e5e9ef 12.81:1; secondary text on muted surfaces #4c596b on #e0e5ec 5.62:1; secondary text on the page #4c596b on #f2f6fb 6.56:1; label on the primary action #f2f6fb on #2f5fa7 5.83:1; label on secondary surfaces #14243b on #e5e9ef 12.81:1; label on the accent #14243b on #e6b84a 8.41:1; error label #ffffff on #c62f2f 5.45:1; primary action against the page #2f5fa7 on #f2f6fb 5.83: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: Cartoon Torah scrolls, a "party theme" taking over the service details, photos on the service page during Shabbat if the family asks, and Hebrew set in a font without Hebrew.
- 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.