RSVPkit

A mock-up of the homepage, drawn from this design’s layout, palette and typefaces. A build follows the full prompt below.

Start from this templateRead the build prompt

Typefaces

Bricolage Grotesque and DM Sans already form the festive, friendly pairing this invitation tool needs, and few other templates use them together.

• Bricolage GrotesqueHeadings: hero 68px 700 at -3.5%, italic pink emphasis, section heads 48px
• DM SansBody: body 16px, 12px buttons, pink eyebrows

Who it is for

• Community organizers with recurring events
• Marketing teams running webinars and field events
• Founders hosting workshops and demo days
• Teams managing check-ins at scale

Layout

1. Marketing header: ticket logo + wordmark left, Log in and dark pill Sign up right
2. Hero: tilted event photo cards with category pills around the edges, confetti shapes, eyebrow pill, huge headline with italic pink last word, subcopy, dark pill 'Get started' CTA
3. Popular events row
4. 'Everything you need' feature section with pastel panels: registration page mock, live analytics bar chart, integrations, attendee hub
5. Testimonials 'Loved by organizers'
6. Final CTA band and footer
7. App: three-step event creation wizard, modular page builder, form field builder, tiers, attendee dashboard, email automations, promotion (UTM, QR), public company profile

Palette

Festive, friendly, energetic, polished, modern. It feels like a party invitation that also knows how to run the numbers.

• background#fafafa
• text (ink navy)#19192e
• primary (pink)#c9305f
• secondary surface#eeeef1
• mint panel/chart#34cdb3
• blush panel#fde4ec
• border#e8e8e8

Every checked pair, measured again

As vibld’s tokens

The palette on the fifteen colour tokens vibld styles a project with, each text colour 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

Bricolage Grotesque 700, 68px hero with -3.5% tracking, italic pink emphasis word; 48px section heads

Body

DM Sans 16px; 12px medium buttons; small letter-spaced uppercase eyebrows in pink

A characterful variable grotesk for personality with a friendly geometric body face.

Spacing and imagery

Spacious SaaS rhythm; centered 1100px content; 24px radius pastel panels; rounded-full buttons; floating tilted cards with soft shadows.

AI-styled neon event photos (hackathons, workshops, summits) as tilted polaroid-like cards; colorful confetti geometry; UI mockups of forms and charts.

Components

• Pill Sign up button
• Tilted event photo cards with category tags
• Confetti decoration
• Eyebrow pill
• Feature panels with product mocks
• Live analytics bar chart
• Testimonials
• Event creation wizard stepper
• Drag-and-drop page section builder
• Custom form field builder
• Ticket tier editor
• Attendee table with check-in
• Email automation settings
• UTM link + QR generator

Interactions

• Floating/parallax hero cards
• Wizard step validation
• Drag-and-drop reorder of page modules (dnd-kit)
• Add/remove custom form fields
• Capacity reached switches to waitlist
• Live registrations chart
• Copy link / download QR
• Invite co-hosts by email
• AI cover image generation with loading state

Data

• Organization{id, name, slug, logo, brand_color}
• Event{id, org_id, title, slug, template, cover_url, starts_at, ends_at, location, capacity, registration_deadline, waitlist_enabled, status}
• PageSection{id, event_id, type, position, content}
• FormField{id, event_id, label, type, required, options[]}
• TicketTier{id, event_id, name, price, quantity}
• Registration{id, event_id, tier_id, email, name, answers, status(confirmed/waitlist/cancelled), checked_in_at}
• Cohost{event_id, user_id, role}
• EmailJob{id, event_id, kind, send_at, status}

Build prompt

The baseline every prompt in the catalog assumes, then this design’s own ten sections, from goal to guardrails.

Copy the baseline and build prompt

### How to use these prompts
Paste a template's build prompt into your coding agent as the first message. Each prompt names its own stack, tokens and acceptance criteria; the rules below apply to all of them and can be prepended once per project.

### Engineering baseline
- TypeScript strict mode, no `any`, small typed components, feature folders, and one source of truth for design tokens (CSS variables consumed by Tailwind).
- Validate every input with a shared zod schema on the client and again on the server or edge function. Never trust client-side checks alone.
- Show loading, empty and error states for every async view. Surface errors in plain language with a retry, and log details to the console in development only.
- Keep secrets out of the bundle. Only publishable keys (for example a Supabase anon key) belong in client code; service-role keys, API keys and webhooks live in server or edge-function environment variables.

### Data and auth baseline (full-stack templates)
- Enable Row Level Security on every table before inserting data. Default-deny, then add owner-scoped policies (`auth.uid() = user_id`) and explicit role checks for admin views.
- Store roles in a separate table checked by a security-definer function, never in a user-editable profile field.
- Upload files to private storage buckets with size and MIME limits, and serve them through signed URLs.
- Rate-limit public endpoints (forms, auth, AI calls) and add a honeypot field or captcha to anonymous forms.
- Take payments through a hosted checkout and verify webhooks by signature. Never handle raw card data.

### Accessibility and UX baseline
- Target WCAG 2.2 AA: 4.5:1 contrast for normal text and 3:1 for large text, input borders, focus rings and meaningful icons or chart lines. Every palette in this catalog lists its verified pairs; re-check with a contrast tool after any colour change.
- Keep body text at 16px or larger with 1.5 line height, nothing below 12px, no light weights under 24px, and uppercase only for short labels.
- Give every interactive element a visible focus ring, full keyboard support, semantic landmarks, labelled form fields, and alt text on meaningful images.
- Respect `prefers-reduced-motion` for every animation. Give drag-and-drop and carousels keyboard and button alternatives.
- Build mobile-first and test at 375px, 768px and 1280px.

### Content guardrails
- Use original copy, fictional sample data and placeholder or licensed imagery. Do not reuse another product's name, logo, screenshots or marketing text.
- Label demo testimonials and metrics as samples. Collect the minimum personal data the feature needs.

### Goal
Build **RSVPkit**, a platform where organizers create branded registration pages for workshops, meetups, hackathons and conferences. Organizers use a three-step wizard, customize the page and form, set ticket tiers, capacity and waitlists, then manage attendees and automated emails. Attendees get a fast, mobile-friendly signup. Include a marketing homepage that sells the product.

### Stack
React 18 + TypeScript + Vite, Tailwind CSS, shadcn/ui (Form, Stepper-style Tabs, Dialog, Table, DropdownMenu, Switch, Toast), lucide-react, Framer Motion for hero cards and step transitions, dnd-kit for reordering page sections and form fields, Recharts for registration analytics, react-hook-form + zod, TanStack Query, date-fns, a QR library. **Supabase**: Postgres for all entities, Auth for organizers, Storage for covers and logos, Edge Functions for public registration, email sending (via a transactional email provider), scheduled reminders (cron), co-host invites and optional AI cover generation.

### Pages & layout
1. **Marketing home** – header (logo, Log in, dark pill Sign up); hero with tilted event photo cards pinned at the corners (each with a category pill), confetti shapes, pink eyebrow pill, big headline with an italic pink final word, subcopy, dark pill CTA. Popular events row; features grid with pastel panels (registration mock, live bar chart, integrations, attendee hub); testimonials labeled as sample; closing CTA; footer.
2. **Dashboard** – list of events with status, date, registrations, capacity bar.
3. **Create event wizard** – Basics (title, dates, location/online) → Page (choose one of three templates, reorder sections) → Registration (fields, tiers, capacity, deadline, waitlist).
4. **Event manage** – tabs: Overview (chart), Attendees (table, search, export CSV, check-in toggle), Emails (confirmation, reminders), Promote (UTM builder, QR), Co-hosts.
5. **Public event page** at `/:org/:event` and **org profile** page.

### Design system
- Tokens: `--background: #fafafa`, `--foreground: #19192e`, `--primary: #c9305f`, `--primary-foreground: #ffffff`, `--secondary: #eeeef1`, `--muted: #f4f4f6`, `--border: #e8e8e8`, `--mint: #34cdb3`, `--chart: #28a18d`, `--input-border: #919191`, `--blush: #fde4ec`, `--radius: 0.5rem`; panels 24px, buttons fully rounded.
- Fonts: Bricolage Grotesque (700 display, -0.035em) and DM Sans. Scale: 12 / 14 / 16 / 18 / 24 / 36 / 48 / 68.
- Spacing 8px base; sections 112px; soft shadows `0 12px 32px rgb(25 25 46 / .10)` on floating cards.
- Motion: hero cards float ±6px over 6s; wizard steps slide 250ms; chart bars grow 600ms.

### Components & interactions
Stepper (complete/current/upcoming, blocked until valid), section list with drag handles (keyboard reordering via dnd-kit sensors), field builder (text, select, checkbox, required toggle), tier editor (free/paid, quantity, sold-out), capacity switch to waitlist, attendee table (loading, empty, search no results, bulk actions), email template preview, copy-link and QR download buttons with toasts, invite dialog (pending/accepted), cover generator (prompt, generating spinner, error, retry).

### Data & state
Tables: `organizations`, `org_members(org_id,user_id,role)`, `events`, `page_sections(event_id,type,position,content jsonb)`, `form_fields`, `ticket_tiers`, `registrations(event_id,tier_id,email,name,answers jsonb,status,checked_in_at)`, `email_jobs`. Wizard draft in react-hook-form with autosave. Seed two fictional organizations with four events and ~80 invented attendees.

### Accessibility
Pink primary is `#c9305f`: white labels 5.2:1, pink links and eyebrows 4.9:1 on `#fafafa`; no pink text on blush. Chart bars use `--chart: #28a18d` (3:1+ on white); `#34cdb3` stays a panel fill with ink text. Inputs use `--input-border: #919191`. Drag-and-drop must have keyboard alternatives (move up/down buttons) and live-region announcements. Wizard steps use `aria-current="step"`. Public registration forms: labels, required markers in text, errors linked via `aria-describedby`. Charts have a table view. Reduced motion stops floating cards and confetti.
Verified contrast: body text on page background #19192e on #fafafa = 16.49:1; pink link and eyebrow text on page background #c9305f on #fafafa = 4.94:1; white label on pink primary button #ffffff on #c9305f = 5.16:1; ink text on mint panel #19192e on #34cdb3 = 8.63:1; ink text on blush panel #19192e on #fde4ec = 14.33:1.

### Security
RLS by organization membership: organizers access only rows whose `org_id` they belong to; co-hosts get scoped roles. Public registration goes through an Edge Function that validates answers with zod against the event's field schema, enforces capacity/deadline/waitlist in a transaction, rate-limits by IP and uses a honeypot. Registrant data is never readable publicly. Email and AI keys only in function env. Uploads: images only, 5 MB max. Escape custom field labels; sanitize any rich text with DOMPurify. Paid tiers use hosted checkout.

### Performance & SEO
Public event pages prerendered or SSR with Event JSON-LD and OG cover; dashboard code-split from marketing. Lazy-load hero images. Lighthouse 90+ on public pages.

### Guardrails
- Placeholder brand, fictional events and generated imagery; no real company logos.
- Testimonials clearly marked as samples.
- Collect minimal attendee PII; allow deletion on request.
- Small typed components, no `any`, visible errors.
- Done when: an organizer completes the wizard and publishes; a visitor registers and gets a confirmation email; capacity switches new signups to waitlist; sections reorder by mouse and keyboard; RLS blocks cross-org reads.

Open the builderAll templatesThis palette on its own