Hollerday

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

Bodoni Moda's black weight gives a sharper, louder didone for gig-poster caps, and Rubik's slightly rounded grotesk keeps the jokes cheerful and readable.

• Bodoni ModaHeadings: names 128px 900 uppercase at -2.5%, italic ampersand, two-tone section heads
• RubikBody: body 16px, red tracked uppercase eyebrows

Who it is for

• Couples wanting a standout, funny site
• Wedding planners
• Photographers presenting portfolios
• Agencies reusing one design for many clients

Layout

1. Full-width red marquee bar with 'FINALLY • YES • FOREVER • LET'S GO' repeating
2. Navy date label box above giant black serif stacked names with a red ampersand between rules
3. Playful subline and 'Scroll' cue with red arrow
4. Curved pink section: 'Our Story' with photo left, story text right, and stat counters (4 years, infinity adventures, 1 forever)
5. Wavy divider into 'Save the date -- The Details' with two-tone headline
6. Offset block-shadow cards for ceremony ('The I Do's') and party
7. 'Moments' interactive photo gallery
8. 'We Can't Wait to Celebrate With You' RSVP and footer; dark mode toggle

Palette

Bold, cheeky, graphic, joyful, loud. It feels like a gig poster announcing a wedding.

• background (warm white)#fbf7f4
• text (ink navy)#18212b
• primary (poster red)#c42130
• secondary (blush)#f7dee2
• accent (navy)#183559
• card#f7f2ed
• border#e4d9cd

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

Bodoni Moda 900, 128px uppercase names with -2.5% tracking; two-tone section headlines

Body

Rubik 16px; tracked uppercase eyebrows in red

Black-weight didone in caps gives poster drama; the plain sans keeps jokes readable.

Spacing and imagery

Centered hero with lots of air, full-bleed curved/wavy section edges, offset hard shadows on cards, 8px radius.

Warm golden-hour couple photos with rounded corners; strong color blocks and curved dividers instead of ornaments.

Components

• Red marquee banner
• Date label box
• Stacked poster names with red ampersand
• Scroll cue
• Curved section divider
• Story split with photo
• Stat counters
• Wavy divider
• Two-tone section headline
• Block-shadow detail cards
• Interactive gallery
• RSVP form
• Dark mode toggle

Interactions

• Infinite marquee
• Counters animate on view
• Scroll-triggered animation library (fade, slide, pop)
• Gallery lightbox/carousel
• Card hover shift of hard shadow
• RSVP validation and toast
• Dark mode toggle

Data

• Couple{a, b, date, tagline}
• Stat{value, label}
• Detail{title, time, venue, address, notes}
• Photo{src, alt, caption}
• RSVP{name, email, attending, guests, dietary, songRequest}

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 **Hollerday**, a loud, funny, poster-style wedding site for fictional couple Priya & Leo. Guests should grin at the first screen, learn the story in a few punchy lines, find the details quickly and RSVP. The look is a gig poster: big black serif caps, poster red, navy labels, blush color fields and curved section edges.

### Stack
React 18 + TypeScript + Vite, Tailwind CSS, shadcn/ui (Form, RadioGroup, Input, Dialog, Switch), lucide-react, Embla Carousel for the gallery, Sonner for toasts, Vaul for a mobile menu, react-hook-form + zod, a small CSS animation library (fade-up, pop, slide) driven by IntersectionObserver. Theme tokens as CSS variables with a dark mode. RSVP posts to a serverless function or Supabase insert-only table.

### Pages & layout
1. **Marquee** – full-width poster-red bar with a repeating four-word chant in white bold caps.
2. **Hero** – navy rectangle label with the date in tracked caps; the two names stacked in a black-weight serif, with a red italic ampersand between two red rules; a cheeky one-line invitation; "Scroll" with a red arrow. The bottom of the hero curves into a blush section.
3. **Our story** – split: rounded photo left; right, a heading in two tones, three short paragraphs and three stat counters (years together, an infinity symbol for adventures, "1 forever").
4. **The details** – wavy divider; red eyebrow "Save the date"; headline with the second word in red; two cards with hard offset shadows (navy and red blocks), one for the ceremony and one for the party, each with time, venue, address, dress code.
5. **Moments** – gallery carousel with captions and a lightbox.
6. **RSVP** – "We can't wait…" headline, form, footer with a dark-mode switch.

### Design system
- Tokens: `--background: #fbf7f4`, `--foreground: #18212b`, `--primary: #c42130`, `--primary-foreground: #fbf7f4`, `--secondary: #f7dee2`, `--accent: #183559`, `--card: #f7f2ed`, `--border: #e4d9cd` (decorative), `--input-border: #a98660`, `--radius: 0.5rem`. Dark: background `#11161d`, foreground `#f5efe9`, secondary `#2a1d22`, primary `#e95360`, primary-foreground `#11161d`.
- Fonts: Bodoni Moda (900 caps, italic for ampersand) and Rubik. Scale: 12 (eyebrows, +0.25em) / 16 / 18 / 24 / 40 / 64 / 96 / clamp(72px, 12vw, 128px).
- Spacing: 8px base, sections 128px; hard shadows `8px 8px 0 var(--accent)`.
- Motion: marquee 25s linear; counters 1s ease-out; card hover moves shadow to 4px/4px over 150ms; pop-in 400ms spring.

### Components & interactions
Marquee (pause control), date label, poster name block, scroll cue, curved and wavy SVG dividers, stat counter, two-tone heading, block-shadow card (hover/focus), gallery (arrows, swipe, keyboard, lightbox), RSVP form (attending, guest count, names, dietary, song request; errors; submitting; success toast plus confetti-free thank-you; error), dark mode switch (persisted, no flash).

### Data & state
`Couple{a,b,dateISO,tagline}`, `Stat{value,label}`, `Detail{title,time,venue,address,dressCode}`, `Photo{src,alt,caption}`, `Rsvp{name,email,attending,guests,guestNames[],dietary,song}`. One typed config; swapping names, colors and fonts should rebrand the whole site. Placeholder couple photos only.

### Accessibility
Poster red is set to `#c42130` so eyebrows and links pass on warm white (5.5:1), blush (4.6:1) and cards (5.2:1), and white marquee text on the red bar reaches 5.8:1. Dark mode uses primary `#e95360` (5.1:1 on `#11161d`). Inputs use `--input-border: #a98660`; `#e4d9cd` borders are decorative. Marquee is decorative (`aria-hidden`) and stops under reduced motion. Infinity counter needs a text alternative ("countless adventures"). Hard-shadow cards remain readable in dark mode. Form uses labels and announced errors.
Verified contrast: ink body text on warm white #18212b on #fbf7f4 = 15.27:1; red eyebrow text on warm white #c42130 on #fbf7f4 = 5.46:1; red text on blush section #c42130 on #f7dee2 = 4.57:1; white marquee text on red bar #ffffff on #c42130 = 5.82:1; warm-white label on navy date box #fbf7f4 on #183559 = 11.65:1.

### Security
Proportionate: zod schema on client and function, honeypot, rate limit, optional invite code, no secrets shipped, insert-only storage, `rel="noopener noreferrer"` for map links, no public guest list.

### Performance & SEO
Only a few photos: responsive and lazy except the first story photo. Inline the SVG dividers. Font subsets for the black weight. `noindex` default, OG image that looks like the poster. Lighthouse 95+.

### Guardrails
- Fictional couple and placeholder photos; no real venues or brands.
- Keep humor original; no copied jokes or quotes from real people.
- Minimal RSVP data.
- Small typed components, no `any`, visible errors.
- Done when: marquee, hero, story, details, gallery and RSVP render from config; red text meets AA where small; dark mode has no flash and keeps contrast; reduced motion disables marquee and pops.

Open the builderAll templatesThis palette on its own