Fernhollow

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

An airy high-contrast Garamond with a geometric sans in tracked caps is exactly this wedding magazine spread, and the pairing appears nowhere else.

• Cormorant GaramondHeadings: names 128px at 300, section heads 72px, 500 italic accents
• MontserratBody: body 16px, 12-14px uppercase labels at 0.2em

Who it is for

• Engaged couples
• Wedding planners
• Guests needing logistics in one place
• Agencies producing wedding sites

Layout

1. Transparent header over hero: Our Story / Travel & Stay / Registry links left, monogram and date centered, outlined RSVP button right (turns solid on scroll)
2. Full-screen photo hero with small caps 'We're getting married!', huge light serif names, spaced date
3. Ceremony and Reception columns with time, venue, address and Map link
4. 'See how it all started' block with dark OUR STORY button
5. Full-bleed photograph band
6. Footer with three columns: Questions? email, Quick links, Share hashtag
7. Pages: Our Story narrative, Travel & Stay lodging cards, Registry, RSVP multi-field form

Palette

Romantic, natural, refined, cinematic, understated. It feels like a destination-wedding magazine spread in sage and cream.

• background (cream)#f6f5f3
• text#2e2e2e
• primary (sage)#9eb493
• accent (antique gold)#c3a36f
• muted#e8e6e3
• border#dcd9d6
• button dark#2e2e2e

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

Cormorant Garamond 300, 128px names in hero, 72px section heads

Body

Montserrat 16px; 12-14px uppercase labels and buttons with 0.2em tracking

Airy high-contrast serif for romance, geometric sans in tracked caps for modern structure.

Spacing and imagery

Editorial and sharp-edged (0 radius buttons), centered content ~1100px, full-bleed photo bands, large vertical gaps.

Moody, warm-graded engagement photography in nature (waterfalls, forest) used full-bleed with dark overlays.

Components

• Transparent-to-solid header
• Monogram + date
• Full-screen photo hero
• Event detail columns with map links
• Story teaser with button
• Full-bleed photo band
• Lodging recommendation cards
• Registry links
• Multi-field RSVP form
• Footer with hashtag share
• Mobile hamburger menu

Interactions

• Header turns solid on scroll
• Hero parallax
• Scroll-triggered fade-ins
• Animated RSVP form steps and confirmation
• Map links open external maps
• Mobile menu toggle

Data

• Wedding{couple, date, hashtag, contactEmail}
• Venue{kind(ceremony/reception), name, time, address, mapUrl}
• Hotel{name, distance, priceRange, bookingUrl, code}
• RegistryLink{store, url}
• RSVP{name, email, attending, guests, meal, dietary, song, 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 **Fernhollow**, a wedding website for a fictional couple, Mara & Theo, marrying in a mountain town. Guests are friends and family of all ages, mostly on phones. The site must set an elegant tone at first glance, then answer the practical questions (when, where, where to stay, what to give) and collect RSVPs.

### Stack
React 18 + TypeScript + Vite, Tailwind CSS, shadcn/ui (Form, RadioGroup, Select, Textarea, Sheet), lucide-react, Framer Motion for parallax and scroll fades, react-hook-form + zod for the RSVP, TanStack Query only if you post RSVPs to an API. Store RSVPs via a serverless function into a Google Sheet or a Supabase `rsvps` table (insert-only). React Router for five pages.

### Pages & layout
1. **Home** – header over the hero: three text links left, monogram with date centered, outlined RSVP button right; header becomes solid cream with dark text after 80px of scroll. Full-screen engagement photo with a dark gradient, small tracked caps ("We're getting married"), the names very large in a light serif, and the date spaced out. Ceremony and Reception side by side (time, venue, address, "Map" link). Story teaser with a dark "Our story" button. Full-bleed photo band. Footer with Questions (email), Quick links, Share (hashtag).
2. **Our story** – alternating photo/text rows.
3. **Travel & stay** – airport and driving notes, lodging cards (name, distance, price range, group code, booking link).
4. **Registry** – two or three store cards plus a honeymoon fund note.
5. **RSVP** – multi-step form: find your name → attending? → meal choice and dietary notes per guest → song request and message → confirmation screen.

### Design system
- Tokens: `--background: #f6f5f3`, `--foreground: #2e2e2e`, `--primary: #9eb493`, `--accent: #c3a36f`, `--muted: #e8e6e3`, `--border: #dcd9d6` (decorative), `--input-border: #968c83`, `--link: #56704b`, `--radius: 0` for buttons, `0.5rem` for cards.
- Fonts: Cormorant Garamond (300 display, 500 italic accents) and Montserrat (400/500). Scale: 12 (caps, +0.2em) / 14 / 16 / 20 / 32 / 48 / 72 / clamp(64px, 10vw, 128px).
- Spacing: 8px base; sections 128px; content column 720px for prose.
- Motion: fade-up 700ms `cubic-bezier(0.16,1,0.3,1)`; hero parallax at 0.3 speed; header color transition 300ms.

### Components & interactions
Header (transparent/solid, mobile sheet), RSVP button (outline over photo, solid on cream, focus ring), venue block, map link (external), lodging card (hover lift), registry card, RSVP stepper (validation per step, back/next, submitting, success with add-to-calendar file, duplicate submission message, network error with retry), footer copy-hashtag button (copied state).

### Data & state
`Wedding{names,date,city,hashtag,email}`, `Venue{kind,name,time,address,mapUrl}`, `Hotel{name,distanceMiles,price,code,url}`, `Registry{store,url,note}`, `Rsvp{partyName,email,attending,guests:[{name,meal,dietary}],song?,message?}`. Wedding content in one typed config file so a couple can edit it. Use placeholder engagement photos of models, not real people you know.

### Accessibility
White names and the small-caps line over the hero sit on a `rgb(0 0 0 / .6)` gradient behind the text (worst case over white = `#666666`, 5.7:1). Sage `#9eb493` and gold `#c3a36f` are decorative only on cream; text is `#2e2e2e` (12.5:1), links use a darker sage `#56704b` (5.05:1). Light 300-weight Cormorant Garamond is reserved for 48px+ display type. Fields use `--input-border: #968c83`. RSVP: explicit labels, fieldsets with legends for radio groups, errors announced, step changes move focus to the step heading. Parallax and fades disabled under reduced motion. Photos get descriptive alt text; decorative bands `alt=""`.
Verified contrast: body text on cream #2e2e2e on #f6f5f3 = 12.46:1; sage link text on cream #56704b on #f6f5f3 = 5.05:1; cream label on dark button #f6f5f3 on #2e2e2e = 12.46:1; white hero text on gradient #ffffff on #666666 = 5.74:1; input border on cream #968c83 on #f6f5f3 = 3.02:1.

### Security
Proportionate: zod validation on the client and in the function, honeypot plus rate limiting, and a simple per-party invite code (not a password) so strangers can't flood the list. No API keys in client code; Supabase RLS allows anon insert only and the couple reads via an authenticated dashboard or the sheet. Don't publish the couple's personal phone numbers. External links `rel="noopener noreferrer"`.

### Performance & SEO
Hero image preloaded at the right size, others lazy; AVIF/WebP. Add `noindex` by default (private event) with an option to allow indexing; OG image and title for nice link previews when shared by text message. Lighthouse 95+.

### Guardrails
- Fictional couple, venues and placeholder photography; no real people or venue logos.
- No invented quotes from guests.
- Collect only RSVP essentials; delete data after the event.
- Small typed components, no `any`, visible errors.
- Done when: header switches states on scroll; all five pages route; RSVP completes end to end with validation; the site is comfortable on a 360px phone; reduced motion is respected.

Open the builderAll templatesThis palette on its own