Mesa Lantern

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

Great Vibes stays for the couple's names; EB Garamond is a warmer, sturdier classic serif for structure, and Open Sans keeps logistics clear.

• Great VibesHandwriting: couple names and monogram only, up to 128px
• EB GaramondHeadings: section heads 36px and date line
• Open SansBody: body 16px, tracked uppercase nav

Who it is for

• Couples planning destination weddings
• Wedding planners and small studios
• Traveling guests
• Agencies packaging event sites

Layout

1. Fixed header: script monogram left, HOME / TRAVEL & STAY / THINGS TO DO / REGISTRY centered with underline on active, outlined RSVP right; turns white on scroll
2. Full-screen ceremony photo hero with sage-gray wash: tracked 'Together with our families', script names, serif date | location, outlined RSVP NOW pill, scroll chevron
3. Countdown row (days, hours, minutes, seconds)
4. Our Story: text left, bouquet photo right; 'Our Journey Together' timeline
5. 'A Few Days Together' tabbed itinerary (brunch, ceremony, cocktails, dinner, late night)
6. Places to Rest hotel cards with booking links; Things to Do cards
7. Wedding party, masonry photo gallery, FAQ accordion, hashtag copy, 'Join Us' RSVP

Palette

Romantic, sun-washed, relaxed, elegant, adventurous. It feels like a boho desert weekend with golden-hour light.

• background (warm off-white)#f7f5f1
• text#333333
• primary (ink)#0f172a
• sage accent#8a9a7b
• desert terracotta#c07a55
• border#e2e8f0
• hero overlay text#ffffff

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

Great Vibes script for names (128px); EB Garamond 400 for section heads (36px) and date line

Body

Open Sans 16px; tracked uppercase nav and labels

Three-voice pairing: flourish script for the couple, classic serif for structure, clean sans for logistics.

Spacing and imagery

Long multi-section scroll (7000px), 1150px container, 50/50 story split, rounded 6px photo corners, pill outline buttons.

Outdoor ceremony aisles with florals, moody bouquet close-ups, desert landscapes and stargazing shots; masonry gallery.

Components

• Script monogram header
• Photo hero with script names
• Outlined pill RSVP button
• Countdown timer
• Story split block
• Journey timeline
• Tabbed itinerary
• Hotel cards with booking links
• Things-to-do cards
• Wedding party grid
• Masonry gallery
• FAQ accordion
• Copy-to-clipboard hashtag
• Validated RSVP form

Interactions

• Live ticking countdown
• Header transparent to white on scroll
• Tabs switch itinerary days
• Scroll-triggered reveals
• Accordion FAQ
• Hashtag copy with toast
• RSVP validation and success state
• Mobile menu

Data

• Event{day, title, time, location, dressCode, notes}
• TimelineEntry{year, title, text, photo}
• Hotel{name, distance, price, bookingUrl}
• Activity{name, description, image, url}
• PartyMember{name, role, photo, blurb}
• Photo{src, alt, orientation}
• FAQ{q, a}
• RSVP{name, email, attending, guests, events[], dietary}

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 **Mesa Lantern**, a destination-wedding website for fictional couple Rosa & Malik, who are hosting a three-day celebration in a desert town. Guests are traveling from far away and need a clear itinerary, lodging, activities and a way to RSVP per event. The site should feel sun-washed and romantic while working as a practical travel guide.

### Stack
React 18 + TypeScript + Vite, Tailwind CSS, shadcn/ui (Tabs, Accordion, Card, Form, Checkbox, Sheet, Toast), lucide-react, Framer Motion for reveals, date-fns for the countdown, React Day Picker if you add an arrival-date field, react-hook-form + zod. RSVP posts to a serverless function or Supabase insert-only table. React Router for Home, Travel & Stay, Things to Do, Registry and RSVP.

### Pages & layout
1. **Home** – fixed header (script monogram left, four tracked caps links centered with an active underline, outlined RSVP right), transparent over the hero and white after scroll. Hero: aisle photo with a soft warm wash, tracked "Together with our families", script names, serif date | place, outlined pill "RSVP now", animated chevron. Countdown (days/hours/minutes/seconds). Our Story: three paragraphs and a bouquet photo; "Our journey together" timeline. "A few days together" tabs per day with event cards (time, place, dress code). Wedding party grid, masonry gallery, FAQ accordion, hashtag with copy button, "Join us" CTA.
2. **Travel & Stay** – airports, rental cars, shuttle times, three hotel cards with booking links and group codes.
3. **Things to Do** – cards for hikes, a small town, stargazing, cafés.
4. **Registry** – store links and a fund.
5. **RSVP** – form with per-event checkboxes.

### Design system
- Tokens: `--background: #f7f5f1`, `--foreground: #333333`, `--primary: #0f172a`, `--sage: #8a9a7b`, `--terracotta: #c07a55`, `--border: #e2e8f0` (decorative), `--input-border: #767676`, `--link: #8c4f30`, `--radius: 0.375rem`; hero wash `rgb(40 44 36 / .65)`.
- Fonts: Great Vibes (names and monogram only), EB Garamond (headings, dates), Open Sans (body, nav caps at +0.2em). Scale: 12 / 14 / 16 / 18 / 24 / 36 / 48 / clamp(64px, 10vw, 128px) for the script names.
- Spacing: 8px base; sections 112px; story split 50/50 with 48px gap.
- Motion: reveals 600ms; countdown digits flip or fade 200ms; header transition 300ms.

### Components & interactions
Header (transparent/solid/mobile sheet), countdown (before, day-of "Today!", after "Thank you" states), timeline item, tabs (keyboard arrows), event card, hotel card (hover lift, external link icon), activity card, party member card, masonry gallery (lightbox optional), accordion, copy-hashtag (copied toast), RSVP form (per-guest fields, per-event checkboxes, dietary, validation, submitting, success, error).

### Data & state
`Event{id,day,title,start,end,location,dressCode,notes}`, `TimelineEntry{year,title,text,photo?}`, `Hotel{name,distance,price,url,code}`, `Activity{name,blurb,image,url}`, `PartyMember{name,role,photo,blurb}`, `Photo{src,alt,orientation}`, `Faq{q,a}`, `Rsvp{name,email,attending,guests[],eventIds[],dietary}`. All content in a typed config file. Use placeholder couple and landscape photos; invent fictional hotels.

### Accessibility
Script type is hard to read: always provide the names in plain text for screen readers and never use script for information. White text sits on a hero wash of `rgb(40 44 36 / .65)`, so even over a white pixel the backdrop is `#737671` (4.6:1) for the small tracked line. Countdown: `aria-live="off"` with a static sentence ("Wedding in 142 days") for assistive tech. Tabs follow the ARIA tabs pattern. Masonry keeps DOM order equal to visual order. Terracotta `#c07a55` and sage `#8a9a7b` are decorative accents only; links use `#8c4f30` (5.9:1). Inputs use `--input-border: #767676`. Reduced motion stops reveals and the chevron bounce.
Verified contrast: body text on off-white #333333 on #f7f5f1 = 11.6:1; ink primary text on off-white #0f172a on #f7f5f1 = 16.4:1; white label on ink primary button #ffffff on #0f172a = 17.85:1; terracotta link text on off-white #8c4f30 on #f7f5f1 = 5.89:1; white hero text on wash #ffffff on #737671 = 4.61:1.

### Security
Proportionate for a static site: shared zod schema for the RSVP on client and function, honeypot and rate limiting, optional household invite code, no keys in client code, insert-only RLS if Supabase is used, safe external booking links with `rel="noopener noreferrer"`, and no public listing of guests.

### Performance & SEO
Preload the hero image; lazy-load gallery and cards with explicit dimensions. `noindex` by default; OG image for link previews. Split each route. Lighthouse 95+.

### Guardrails
- Fictional couple, hotels and activities; placeholder photography only; no real business logos.
- No fabricated guest quotes.
- Minimal PII; purge RSVPs after the event.
- Small typed components, no `any`, visible errors.
- Done when: countdown shows correct values and end states; itinerary tabs work by keyboard; RSVP supports per-event selection and validates on both sides; header states switch cleanly; mobile layout is solid at 360px.

Open the builderAll templatesThis palette on its own