Template
Valentina’s Quinceañera
a bilingual site for a quinceañera that gives the mass and reception details, introduces the court and padrinos, takes RSVPs for the whole family, and shares the registry and gift fund.
Quinceañera site in English and Spanish · 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
Yeseva One is a high-contrast display face with a ballroom flourish; Asap has full Spanish accents and reads cleanly in both languages.
- Yeseva OneHeadings: her name, headlines and section titles
- AsapBody: details, the court list and forms, in both languages
Who it is for
- Family across two countries, reading in Spanish or English
- Padrinos and the court checking their roles
- The family, who need numbers for the hall
Layout
- Header: V in a papel picado frame, Details, Court, Gallery, the language switch, and RSVP
- Centered hero: portrait in an arched frame, her name in Yeseva One, the date
- Mass and reception cards with times, addresses and dress code
- RSVP form for a family with number of adults and children
- Court and padrinos grid of portraits with names and roles
- Registry list of store links and the gift fund buttons
- Gallery strip and footer with the family’s contact
Palette
Celebratory and elegant, like a ball gown and a cathedral door: rose blush, a deep berry and marigold gold.
- rose blush
#fff5f8 - berry ink
#3a0f24 - deep berry
#a3134f - marigold
#f2c14e
Every checked pair, measured again
| Sample | Where | Ratio | Needs |
|---|---|---|---|
| Aa | body text on the page | 15.44:1 | 4.5:1 |
| Aa | text on cards | 13.69:1 | 4.5:1 |
| Aa | secondary text on muted surfaces | 6.18:1 | 4.5:1 |
| Aa | secondary text on the page | 7.22:1 | 4.5:1 |
| Aa | label on the primary action | 7.12:1 | 4.5:1 |
| Aa | label on secondary surfaces | 13.69:1 | 4.5:1 |
| Aa | label on the accent | 9.82:1 | 4.5:1 |
| Aa | error label | 5.46:1 | 4.5:1 |
| primary action against the page | 7.12: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
- Yeseva One, her name, headlines and section titles
- Body
- Asap, details, the court list and forms, in both languages
Spacing and imagery
Formal and centered: 96px between sections, symmetrical columns.
Valentina’s portrait session, the church, papel picado shapes drawn in the palette; no generic tiara clip art.
Components
- Papel picado garland drawn in SVG in berry and marigold
- Event card with an add-to-calendar link
- Court card with a round portrait and role
Interactions
- Language switch keeps the reader on the same section
- Countdown to the day in the hero
Data
court: a member of the court: name, role (chambelán, dama), photopadrinos: padrinos: names, role (de velación, de pastel, de muñeca and others)form rsvp: family name, contact name, email or phone, attending (mass, reception, both, neither), adults, children, dietary needs, message for Valentina
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 **Valentina’s Quinceañera**: a bilingual site for a quinceañera that gives the mass and reception details, introduces the court and padrinos, takes RSVPs for the whole family, and shares the registry and gift fund.
### 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
- `/` Quinceañera: hero, mass and reception, RSVP, court and padrinos, registry, gift fund, gallery
- `/court` Court and padrinos: the court with photos, and the padrinos with their roles
- `/gallery` Gallery: portrait session photos
Home, top to bottom:
1. Header: V in a papel picado frame, Details, Court, Gallery, the language switch, and RSVP.
2. Centered hero: portrait in an arched frame, her name in Yeseva One, the date.
3. Mass and reception cards with times, addresses and dress code.
4. RSVP form for a family with number of adults and children.
5. Court and padrinos grid of portraits with names and roles.
6. Registry list of store links and the gift fund buttons.
7. Gallery strip and footer with the family’s contact.
Copy to start from, in `content.ts`: headline "Mis XV años: Valentina", subcopy "Acompáñanos el sábado 12 de junio. Misa a las 2:00 PM en San José y recepción a las 6:00 PM en el Salón Las Palmas.", primary action "Confirma tu asistencia".
The site is written in English and Spanish, with a language switch in the header; every page and form exists in each language.
### Design system
Mood: Celebratory and elegant, like a ball gown and a cathedral door: rose blush, a deep berry and marigold gold.
Palette: rose blush `#fff5f8`, berry ink `#3a0f24`, deep berry `#a3134f`, marigold `#f2c14e`. Tokens: background `#fff5f8`, foreground `#3a0f24`, primary `#a3134f` with `#fff5f8` labels, cards `#f3e7eb`, accent `#f2c14e`.
Type: Yeseva One for her name, headlines and section titles; Asap for details, the court list and forms, in both languages. Load both from https://fonts.googleapis.com/css2?family=Yeseva+One&family=Asap:wght@400;700&display=swap.
Corners: 999px on controls, 24px on cards, 48px on large panels. Spacing: Formal and centered: 96px between sections, symmetrical columns.
Imagery: Valentina’s portrait session, the church, papel picado shapes drawn in the palette; no generic tiara clip art. 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
- Papel picado garland drawn in SVG in berry and marigold
- Event card with an add-to-calendar link
- Court card with a round portrait and role
Motion:
- Language switch keeps the reader on the same section
- Countdown to the day in the hero
The signature motion is: the papel picado garland at the top sways lightly, as if a breeze had come through the hall doors. 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/court.json`: a member of the court: name, role (chambelán, dama), photo
- `src/content/padrinos.json`: padrinos: names, role (de velación, de pastel, de muñeca and others)
Forms:
- `rsvp`: A family replies in either language. Fields: family name, contact name, email or phone, attending (mass, reception, both, neither), adults, children, dietary needs, message for Valentina.
Linked tools:
- Directions links to the church and the hall.
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 #3a0f24 on #fff5f8 15.44:1; text on cards #3a0f24 on #f3e7eb 13.69:1; secondary text on muted surfaces #6b4959 on #efe3e7 6.17:1; secondary text on the page #6b4959 on #fff5f8 7.22:1; label on the primary action #fff5f8 on #a3134f 7.11:1; label on secondary surfaces #3a0f24 on #f3e7eb 13.69:1; label on the accent #3a0f24 on #f2c14e 9.82:1; error label #ffffff on #c62f2f 5.45:1; primary action against the page #a3134f on #fff5f8 7.11: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: Tiara and slipper clip art, Disney-princess styling, sombrero or cactus clichés, and English-only forms.
- 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.