Sunfade

Who it is for

• Couples on a budget
• Wedding photographers
• Boutique wedding vendors
• Agencies building quick wedding sites

Layout

1. Full-screen beach sunset background with a translucent cream invitation card: flower glyph, tracked 'Together with their families', huge burgundy serif names split by an ampersand ornament, invitation line, rose date panel with weekday, date and time
2. Our Story: tagline and vertical timeline of framed cards (double border, corner brackets) with circular emoji-and-year medallions
3. Closing quote in italic serif with ornament
4. Event Details: Ceremony and Reception cards plus a Day Schedule
5. Polaroid photo gallery
6. RSVP form section
7. Footer

Palette

Nostalgic, warm, sweet, retro, romantic. It feels like a vintage printed invitation found in a sunlit drawer.

• background (peach cream)#fff2e5
• text (cocoa)#4a281c
• primary (burgundy)#7a2936
• secondary (mustard)#d39e17
• accent (olive)#7c9640
• card#fff9f0
• border (rose tan)#e0ccb8

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

Display

Playfair Display 400, 96px names, 48px section heads, italic for quotes

Body

Nunito 16px; 12px tracked uppercase labels

Soft serif with a rounded sans and dingbat ornaments evokes 70s stationery.

Spacing and imagery

Centered single column (~900px cards), generous padding, framed double borders, 12px radius, pill buttons.

Hazy beach-sunset couple photo behind a frosted card; emoji icons in timeline medallions; polaroid gallery.

Components

• Frosted invitation card over photo
• Ampersand ornament divider
• Date panel
• Timeline framed card
• Year medallion with emoji
• Italic quote with ornament
• Ceremony/Reception detail cards
• Day schedule list
• Polaroid gallery
• RSVP form

Interactions

• Fade-in on scroll for timeline cards
• Polaroid hover tilt
• RSVP validation and success message
• Smooth scroll between sections
• Lazy-loaded images

Data

• Couple{partnerA, partnerB, date, time}
• StoryMilestone{year, icon, title, text}
• EventDetail{kind, venue, address, time}
• ScheduleItem{time, label}
• Photo{src, caption}
• RSVP{name, email, attending, guests, meal, message}

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 **Sunfade**, a retro-inspired single-page wedding site for fictional couple Ivy & Marcus. The look should feel like 1970s stationery: warm peach paper, burgundy serif type, mustard and olive accents, little dingbat ornaments. Guests should see the invitation, read the couple's story, get the event details and RSVP, all in one scroll.

### Stack
React 18 + TypeScript + Vite, Tailwind CSS, shadcn/ui (Card, Form, RadioGroup, Select, Textarea, Button), lucide-react, react-hook-form + zod for the RSVP, Embla Carousel for the gallery on mobile, IntersectionObserver-based fade-ins (or Framer Motion). RSVP posts to a serverless function or Supabase insert-only table. Theme via HSL CSS variables so colors can be swapped.

### Pages & layout
1. **Invitation hero** – full-screen hazy beach-sunset photo; centered frosted cream card (backdrop blur, 12px radius, thin border) with a small flower glyph, tracked caps "Together with their families", first name, an ampersand flanked by thin rules, second name (very large burgundy serif), a line of invitation text, and a rose-tinted date panel (weekday caps, large date, time in words).
2. **Our story** – heading and tagline; vertical list of framed milestone cards (double border; the last card has corner brackets) each with a circular medallion holding an icon and year, a serif title and one sentence. Italic closing quote with an ornament.
3. **Event details** – ceremony and reception cards (venue, address, time, map link) and a day schedule (time/label rows).
4. **Gallery** – polaroid grid with slight rotations and captions.
5. **RSVP** – form in a card; footer with date and a small ornament.

### Design system
- Tokens (HSL-ready): `--background: #fff2e5`, `--foreground: #4a281c`, `--primary: #7a2936`, `--primary-foreground: #fff9f0`, `--secondary: #d39e17`, `--accent: #7c9640`, `--muted: #eae0d7`, `--card: #fff9f0`, `--border: #e0ccb8` (decorative), `--input-border: #b48353`, `--radius: 0.75rem`.
- Fonts: Playfair Display (400, italic) and Nunito (400/600). Scale: 12 (caps, +0.25em) / 14 / 16 / 18 / 24 / 32 / 48 / clamp(56px, 9vw, 96px).
- Spacing: 8px base; sections 120px; cards max 900px wide, 48px padding.
- Decoration: double borders (`outline` + `border` with 4px gap), medallions 80px circles in `#f3dcd8`.
- Motion: fade-up 600ms on cards; polaroid hover rotate to 0° in 250ms.

### Components & interactions
Invitation card, ornament divider, date panel, milestone card (default and "featured" with corner brackets), medallion, quote block, detail card with map link, schedule list, polaroid (hover), RSVP form (name, email, attending yes/no, number of guests, meal preference, message; inline errors; submitting; thank-you state; failure message with retry), pill button (burgundy fill, hover darken, focus ring).

### Data & state
`Couple{a,b,dateISO,timeText,city}`, `Milestone{year,icon,title,text,featured?}`, `Detail{kind,venue,address,time,mapUrl}`, `ScheduleItem{time,label}`, `Photo{src,alt,caption}`, `Rsvp{name,email,attending,guests,meal,message}`. One typed config drives the page. Use lucide icons or simple SVG in medallions instead of emoji so they render consistently; placeholder photos only.

### Accessibility
Burgundy on peach is ~9:1 and cocoa on peach ~12:1. Mustard `#d39e17` and olive `#7c9640` are ornaments only (they fail as text). The frosted card is `#fff9f0` at 85% or more opacity, so cocoa text stays at 8.8:1 even over the darkest photo area. Inputs use `--input-border: #b48353` (3:1+); `#e0ccb8` frames are decorative. Emoji or icons in medallions are decorative (`aria-hidden`) because the year and title carry meaning. The two names form one `h1` ("Ivy and Marcus"). RSVP uses fieldsets, labels and announced errors. Reduced motion disables fades and tilts.
Verified contrast: cocoa body text on peach #4a281c on #fff2e5 = 11.84:1; burgundy heading/link text on peach #7a2936 on #fff2e5 = 8.68:1; burgundy text on card #7a2936 on #fff9f0 = 9.13:1; cream label on burgundy button #fff9f0 on #7a2936 = 9.13:1; cocoa text on frosted card over dark photo #4a281c on #d9d4cc = 8.84:1.

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

### Performance & SEO
Compress and preload the hero photo; lazy-load gallery images. Fonts with `display=swap` and only needed weights. `noindex` by default, OG image for sharing. Lighthouse 95+.

### Guardrails
- Fictional couple and placeholder imagery; no real people or venues.
- No invented guest testimonials.
- Minimal RSVP data, deletable after the event.
- Small typed components, no `any`, visible errors.
- Done when: the invitation card is legible over the photo at all widths; timeline and details render from config; RSVP completes with validation both sides; mustard is never used for text; theme colors can be swapped via variables alone.

Open the builderAll templatesThis palette on its own