Glossbound

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

Noto Serif Display is a dramatic high-contrast serif with italics for a bridal cover, and Jost is a tidy geometric sans for details.

• Noto Serif DisplayHeadings: hero names 128px 400, section titles 60px, italic year
• JostBody: body 16px, tracked uppercase labels

Who it is for

• Wedding planners serving couples
• Couples with multi-part wedding days
• Photographers justifying premium packages
• Guests needing clear schedule details

Layout

1. Transparent header: serif initials monogram left, OUR STORY / DETAILS / RSVP tracked caps right; becomes light on scroll
2. Full-screen dark photo hero: tracked 'Together with their families', huge white serif names with ampersand, thin rule, spelled-out date and italic year, venue and region in tracked caps
3. Marquee band repeating names, date and location
4. Our Story: alternating photo/text rows with a year tab pinned to each photo, headings like First Glance, First Date, Adventures, Proposal, Forever Begins
5. 'The Big Day' countdown
6. Event Details: interactive cards for ceremony, cocktail hour, reception & dinner
7. 'Kindly Respond' RSVP form; footer

Palette

Moody, romantic, luxurious, editorial, warm. It feels like the opening spread of a bridal magazine.

• background (ivory)#f8f6f1
• text/primary (espresso)#2a2622
• accent (blush)#e4d1cd
• ring/rose#b58178
• secondary#f0ebe6
• border#e7e1da
• hero overlay#141210

Every checked pair, measured again

As vibld’s tokens

The palette on the 15+ color tokens vibld styles a project with, each text color 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

Noto Serif Display 400, 128px white hero names with -2.5% tracking; 60px section titles with +1.5px tracking

Body

Jost 16px; tracked uppercase labels; italic serif for the spelled-out year

Magazine cover logic: dramatic serif scale on a dark photo, tidy sans for details.

Spacing and imagery

Editorial rhythm, ~1030px content, 50/50 alternating story rows with 64px gutters, year tabs overlapping photo edges, 4px radius.

Dark, warm, shallow-depth-of-field wedding photography (bouquets, hands, cakes) in large rectangles with light frame insets and year tabs.

Components

• Transparent-to-light header
• Full-screen dark photo hero
• Spelled-out date lockup
• Names/date marquee
• Alternating story row with year tab
• Countdown timer
• Event detail cards
• RSVP form
• Mobile navigation menu
• Footer

Interactions

• Header background change on scroll
• Framer Motion scroll reveals
• Live countdown
• Event cards expand on hover/click
• RSVP validation and confirmation
• Smooth mobile menu

Data

• StoryChapter{year, title, text, image, align}
• EventCard{title, time, location, description, dressCode}
• Countdown{targetISO}
• RSVP{name, email, attending, guests, mealChoice, 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 color 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, labeled 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 **Glossbound**, a magazine-style wedding site for fictional couple Clara & Julian, marrying at a vineyard estate. The day has three parts (ceremony, cocktail hour, reception) and guests need a clear schedule. The site should open like a glossy bridal-magazine cover, tell the couple's story in photo spreads, count down to the day and collect detailed RSVPs.

### Stack
React 18 + TypeScript + Vite, Tailwind CSS, shadcn/ui (Card, Collapsible, Form, RadioGroup, Select, Sheet), lucide-react, Framer Motion for reveals and card expansion, date-fns for the countdown, react-hook-form + zod. RSVP posts to a serverless function or a Supabase insert-only table. Theme tokens as CSS variables so planners can adjust colors and fonts per client.

### Pages & layout
Single page with anchors:
1. **Header** – serif monogram left, three tracked caps links right; transparent over the hero, ivory with espresso text after scroll.
2. **Hero** – full-screen dark, warm photo with a heavy vignette; tracked "Together with their families"; first name, ampersand, second name in a very large white serif; a thin rule; month and day spelled out in caps; the year in italic serif; venue • region in small tracked caps.
3. **Marquee** – thin ivory band repeating names • date • place.
4. **Our story** – five alternating rows: photo (with a thin inner frame) and text; a small ivory year tab overlaps the bottom edge of each photo.
5. **The big day** – countdown (days, hours, minutes, seconds) on a blush background.
6. **Event details** – three cards (ceremony, cocktail hour, reception & dinner) with time, place and an expandable section for dress code, parking and notes.
7. **Kindly respond** – RSVP form; footer with monogram.

### Design system
- Tokens: `--background: #f8f6f1`, `--foreground: #2a2622`, `--primary: #2a2622`, `--primary-foreground: #f8f6f1`, `--secondary: #f0ebe6`, `--accent: #e4d1cd`, `--ring: #b58178`, `--border: #e7e1da` (decorative), `--input-border: #a28a6f`, `--radius: 0.25rem`; hero overlay `radial-gradient(ellipse at center, rgb(20 18 16 / .6), rgb(20 18 16 / .85))`.
- Fonts: Noto Serif Display (400, italic) and Jost (400/500). Scale: 12 (caps, +0.25em) / 14 / 16 / 20 / 28 / 40 / 60 / clamp(72px, 11vw, 128px).
- Spacing: 8px base; sections 144px; story rows 50/50 with 64px gutter.
- Motion: reveal 700ms ease-out; year tab slides up 300ms after its photo; card expansion 250ms; header transition 300ms.

### Components & interactions
Header (transparent/solid/mobile sheet with focus trap), hero lockup, marquee (pausable), story row (left/right image variants), year tab, countdown (pre-event, day-of, past states), event card (collapsed/expanded with `aria-expanded`), RSVP form (name, email, attending, guest count, meal per guest, dietary, message; validation; submitting; confirmation panel; error with retry).

### Data & state
`StoryChapter{year,title,text,image{src,alt},align}`, `EventPart{id,title,time,location,dressCode,notes}`, `Wedding{names,dateISO,venue,region}`, `Rsvp{name,email,attending,guests:[{name,meal}],dietary,message}`. One typed config; placeholder photography only (bouquets, table settings, landscapes, models).

### Accessibility
The hero vignette is at least `rgb(20 18 16 / .6)` at its center, so even over a white pixel the backdrop is `#727170` and white names and small-caps lines reach 4.9:1; hero text stays pure white rather than a tinted off-white. The focus ring is deepened to `#b58178` (3:1 on ivory); inputs use `--input-border: #a28a6f`. Blush `#e4d1cd` is a background only; text on it stays espresso (~11:1). Year tabs are real text, associated with their row heading. Countdown exposes a single static sentence for screen readers. Event cards are buttons with `aria-expanded`. Marquee `aria-hidden` and stopped under reduced motion. Meal selections use labeled selects per guest.
Verified contrast: espresso body text on ivory #2a2622 on #f8f6f1 = 13.9:1; ivory label on espresso button #f8f6f1 on #2a2622 = 13.9:1; espresso text on blush accent #2a2622 on #e4d1cd = 10.22:1; espresso text on secondary surface #2a2622 on #f0ebe6 = 12.68:1; white hero text on vignette #ffffff on #727170 = 4.87:1.

### Security
Proportionate: shared zod schema client/server, honeypot, rate limit, optional invite code, no secrets in the client, insert-only RLS if Supabase, no public guest list, external map links with `rel="noopener noreferrer"`.

### Performance & SEO
Hero photo preloaded at 1600w AVIF with a dark placeholder color; story photos lazy with fixed aspect ratios. `noindex` default, OG image from the hero. Lighthouse 95+.

### Guardrails
- Fictional couple, estate and placeholder imagery; no real venues or vendor logos.
- No fabricated guest quotes.
- Minimal RSVP data, removable on request.
- Small typed components, no `any`, visible errors.
- Done when: header states switch; story rows alternate on desktop and stack on mobile; countdown handles all states; event cards expand by keyboard; RSVP collects per-guest meals with validation on both sides.

Open the builderAll templatesThis palette on its own