Quillmoor

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

The display Garamond with Lora is already a quiet, bookish all-serif pair; the notes name "display Garamond", so it stays.

• Cormorant GaramondHeadings: names 72px 300 at +1.8px, section heads 48px, italic seasons and quotes
• LoraBody: centered prose 16-17px

Who it is for

• Couples wanting a personal, understated site
• Wedding planners on a budget
• Stationery and event designers
• Small event businesses bundling sites

Layout

1. Centered hero with thin vertical line ornament, tracked 'Together with their families', light serif names with small italic ampersand, dot-and-rules divider, date spelled out with wide tracking, year, italic venue, 'Our Story' cue with chevron
2. Couple's quote in italic with attribution
3. 'How it all began -- Our Story': centered narrative chapters with italic season headings (Spring 2019, The First Year) separated by thin vertical rules
4. 'The Celebration': ceremony and reception detail cards
5. 'Kindly Respond' RSVP form
6. Minimal footer

Palette

Poetic, tender, calm, literary, timeless. It feels like a letterpress invitation you read slowly.

• background (ivory)#f8f6f1
• text (warm gray-brown)#464039
• primary (taupe)#67594c
• decorative rule (not for text)#a39a90
• accent (blush)#ede0de
• card#fcfbf8
• border#e7e1da

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, 72px names with +1.8px tracking, 48px section heads; italic for seasons and quotes

Body

Lora 16-17px, centered prose, generous line height

All-serif pairing (display Garamond + text Lora) keeps it bookish and quiet.

Spacing and imagery

Very airy single column (~680px text), centered alignment throughout, thin rules and dot dividers, 4px radius.

Minimal: a few soft photos only; the design leans on type, ornaments and whitespace.

Components

• Vertical line ornament
• Invitation lockup
• Dot-and-rules divider
• Italic quote block
• Story chapter with season heading
• Vertical rule separator
• Ceremony card
• Reception card
• RSVP form
• Section eyebrow labels

Interactions

• Smooth scroll from the Our Story cue
• Gentle fade-in on scroll
• RSVP validation, success toast
• Mobile drawer if navigation is added

Data

• Couple{a, b, dateText, yearText, venue, quote}
• StoryChapter{label, text}
• Celebration{kind, time, venue, address, notes}
• RSVP{name, email, attending, guests, dietary, 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 **Quillmoor**, a quiet, literary one-page wedding site for fictional couple Hazel & Owen. It should read like fine letterpress stationery: ivory paper, light Garamond type, lots of air. Guests read the invitation, a short story told in seasons, the ceremony and reception details, and reply on the same page.

### Stack
React 18 + TypeScript + Vite, Tailwind CSS, shadcn/ui (Card, Form, RadioGroup, Input, Textarea, Button), lucide-react (chevron only), react-hook-form + zod, Sonner for a confirmation toast, Vaul only if you add a mobile menu. Gentle reveals with IntersectionObserver and CSS. RSVP posts to a serverless function or a Supabase insert-only table. Theme variables so the palette and fonts can be swapped.

### Pages & layout
Single page:
1. **Invitation** – thin vertical line ornament at the top; tracked caps "Together with their families" in muted taupe; first name, a small italic ampersand, second name in a light Garamond; a divider of two short rules with a dot; the date spelled out with wide letter spacing; the year in words; the venue in italic; an "Our story" cue with a chevron that scrolls down.
2. **Quote** – a one-sentence italic line from the couple with an em-dash attribution in tracked caps.
3. **Our story** – eyebrow "How it all began", heading, dot divider; three or four chapters centered at ~680px, each with an italic season label (e.g., "Autumn 2018") and one paragraph; thin vertical rules between chapters.
4. **The celebration** – two cards side by side (ceremony, reception): time, venue, address, a short note, map link.
5. **Kindly respond** – RSVP card with a reply-by date; footer with initials and date.

### Design system
- Tokens: `--background: #f8f6f1`, `--foreground: #464039`, `--primary: #67594c`, `--primary-foreground: #f8f6f1`, `--secondary: #f1ece4`, `--accent: #ede0de`, `--muted-foreground: #6d6459`, `--card: #fcfbf8`, `--border: #e7e1da` (decorative), `--input-border: #a28a6f`, `--radius: 0.25rem`.
- Fonts: Cormorant Garamond (300 display, 400 italic) and Lora (400, italic). Scale: 12 (caps, +0.3em) / 15 / 17 (body, line-height 1.8) / 20 / 28 / 48 / clamp(52px, 8vw, 72px), names tracked +0.025em.
- Spacing: 8px base; sections 160px; prose max 680px; cards 40px padding with 1px border and no shadow.
- Motion: fade-in 900ms ease-out with 12px rise; chevron gentle bob 2s (disabled under reduced motion).

### Components & interactions
Ornament line, invitation lockup, dot divider, quote block, story chapter, vertical rule, celebration card (hover lifts border color only), map link, RSVP form (name, email, attending radio, guest count, dietary, message; inline errors; submitting; thank-you panel replacing the form; toast; error with retry), scroll cue button.

### Data & state
`Couple{a,b,dateText,yearText,dateISO,venue,quote}`, `StoryChapter{label,text}`, `Celebration{kind,time,venue,address,notes,mapUrl}`, `Rsvp{name,email,attending,guests,dietary,message}`. One typed config drives all copy; write original prose for the story.

### Accessibility
The palette is intentionally soft, so check it: body `#464039` on ivory is 9.5:1; muted text uses `#6d6459` (5.4:1 on ivory, 4.5:1 on the blush accent); the lighter `#a39a90` is only for decorative rules and ornaments. Inputs use `--input-border: #a28a6f`. Light 300-weight type is only used at 48px+. The names form one `h1`. The scroll cue is a real button with a label. RSVP uses fieldsets and legends for radios; errors announced. Reduced motion removes fades and the chevron bob.
Verified contrast: body text on ivory #464039 on #f8f6f1 = 9.47:1; muted label text on ivory #6d6459 on #f8f6f1 = 5.38:1; muted label text on card #6d6459 on #fcfbf8 = 5.61:1; muted label text on blush accent #6d6459 on #ede0de = 4.51:1; ivory label on taupe primary button #f8f6f1 on #67594c = 6.25:1.

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

### Performance & SEO
Mostly text, so keep it tiny: two font families with only needed weights (`display=swap`), no heavy libraries, any photos lazy-loaded. `noindex` by default; a typographic OG image. Lighthouse 100 target.

### Guardrails
- Fictional couple and venue; original prose; no real people.
- No fabricated guest quotes.
- Minimal RSVP data, deleted after the event.
- Small typed components, no `any`, visible errors.
- Done when: the page reads beautifully at 360px and 1440px; all muted text passes AA; RSVP validates on both sides and shows the thank-you state; the palette and fonts can be swapped from variables alone.

Open the builderAll templatesThis palette on its own