Hollowlight Stories

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

Crimson Pro is a classic book serif with a full weight range and italics, so a single literary face can carry the whole wedding album.

• Crimson ProHeadings: hero 72px 500 at +0.01em, second line italic
• Crimson ProBody: body 16px at 1.7, 12px uppercase nav at 0.2em

Who it is for

• Wedding and elopement photographers
• Couples researching photographers
• Small studios with several shooters
• Agencies building photographer sites

Layout

1. Transparent fixed header over the hero: name wordmark left, uppercase spaced links (Home, Work, About, Contact) right
2. Full-viewport auto-advancing hero slideshow with Ken Burns zoom, centered serif headline with an italic second line, subcopy, 'scroll to explore' cue and slide-progress dashes bottom right
3. 'Approach' section: three chapters (before the day, the day itself, afterwards) with a short philosophy paragraph
4. 'Recent stories' featured list: large landscape photos, couple names in serif at left, location in italics at right
5. Closing CTA band with a one-line invitation linking to contact
6. Work index, story detail pages with galleries, About page with bio and values cards, Contact page with an underline-input inquiry form
7. Floating pill navigation on desktop plus full-screen overlay menu on mobile

Palette

romantic, cinematic, warm, quiet, premium. It feels like a printed wedding album or a slow film opening.

• background#faf8f5
• text#3b3b3b
• primary#3b3b3b
• accent (soft gold)#c7ab6b
• secondary surface#efebe7
• muted#e9e6e2
• border#e7e2da
• gold text / focus ring#8a6d2f
• input border#a18d6e

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

Literary serif (for example Crimson Pro), weight 500, 72px hero with slight positive tracking (0.01em); second line set in italic

Body

Same serif at 16px, #3b3b3b, line-height 1.7, measure capped at about 65ch

A single literary serif drives everything; nav and eyebrow labels (one to three words) switch to 12px uppercase with 0.2em tracking for contrast rather than adding a sans.

Spacing and imagery

Airy editorial spacing, ~1024px image container, full-bleed hero, tall section padding (120px+), near-square corners (4px radius, 0px buttons).

Large natural-light couple photography, full-bleed with a dark gradient overlay in the hero and slow zoom; story covers are wide landscape crops with no frames or shadows.

Components

• Transparent-to-solid fixed header
• Auto-advancing Ken Burns hero slideshow
• Slide progress indicator dashes
• Scroll-to-explore cue
• Three-chapter approach strip
• Featured story cards (image, couple name, location)
• Story detail gallery grid
• Values cards on About page
• Underline-only inquiry form with wedding date
• Toast confirmation
• Floating pill nav (desktop)
• Full-screen mobile menu overlay
• Closing CTA band

Interactions

• Hero slides crossfade every few seconds with slow scale-up zoom
• Header text over image, then fades to solid background on scroll
• Fade-up scroll reveals with staggered delays
• Story card hover: image scale, darkening overlay and caption slide-in
• Mobile menu opens full-screen with staggered link animation
• Inquiry form validation and success toast
• Pause slideshow on hover/focus and for reduced motion

Data

• Story{slug, couple, location, date, cover, gallery[images{src, alt, orientation}], excerpt}
• Inquiry{name, email, weddingDate, message}
• Value{title, description}
• HeroSlide{image, alt}

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 "Hollowlight Stories", a cinematic portfolio site for an independent wedding photographer. Visitors are engaged couples comparing photographers; they should feel the photographer's storytelling style within seconds, browse complete wedding narratives, and send an inquiry that includes their wedding date.

### Stack
React 18 + TypeScript + Vite, Tailwind CSS, shadcn/ui (Radix) for Sheet, Toast and form primitives, lucide-react icons. Framer Motion for the hero Ken Burns effect, scroll reveals and menu staggering. Embla Carousel for the hero slideshow and optional gallery lightbox swiping. react-hook-form + zod for the inquiry form. React Router for pages. The only backend is one edge function that emails inquiries.

### Pages & layout
1. **Home**: transparent fixed header (wordmark left, uppercase spaced links right). Full-viewport hero slideshow of 4 images with a centered two-line serif headline (second line italic), one sentence of subcopy, a "scroll to explore" cue and thin progress dashes bottom right. Next come an "Approach" section with three chapters, "Recent stories" (wide photos with couple names left and an italic location right) and a CTA band.
2. **Work**: responsive grid of all stories that respects portrait vs landscape orientation.
3. **Story detail**: title, date, location, intro paragraph, then a masonry-like gallery grouped into chapters.
4. **About**: portrait, bio, pull quote, three values cards, regions served.
5. **Contact**: four-field inquiry form (name, email, wedding date, message) with underline-only inputs.

### Design system
Warm light theme only. Tokens: `--background: #faf8f5`, `--foreground: #3b3b3b`, `--accent: #c7ab6b` (soft gold), `--secondary: #efebe7`, `--muted: #e9e6e2`, `--border: #e7e2da` (decorative), `--input-border: #a18d6e`, `--gold-text: #8a6d2f` (gold text, active underline, focus), optional `--rose: #c9a0a0` (decorative). Fonts: a literary serif for everything, such as Crimson Pro from Google Fonts; nav and eyebrows in 12px uppercase with 0.2em tracking. Type scale: 72/48/32/20/16px (body 16px/1.7, 65ch), display weight 500 with 0.01em tracking. Spacing on an 8px base with 128px section padding on desktop. Radius 4px, buttons square. Motion: 700ms reveals with `cubic-bezier(0.22,1,0.36,1)`, a 6s slide interval and an 8s zoom from scale 1 to 1.08.

### Components & interactions
- Header: transparent over the hero, then solid `--background` with a border once scrolled; the active link is underlined in `--gold-text`.
- Hero slideshow: autoplay, pause on hover and focus, and pause/play and dot controls with visible focus.
- Story card: on hover the image scales 1.03, a 30% dark overlay appears and a "View story" caption slides up.
- Mobile menu: full-screen Sheet with links that stagger in, closes on Escape and on route change.
- Floating pill nav on desktop after scrolling past the hero.
- Form: states for default, focus (2px `--gold-text` underline), error (inline message), submitting (disabled button with spinner) and success (toast).

### Data & state
Keep content in typed TS files: `Story{slug, couple, location, date, cover, excerpt, chapters: {title, images: {src, alt, orientation}[]}[]}`, `Value{title, body}`. Local component state only. Seed 4 to 6 fictional couples with invented first names and varied locations, using royalty-free placeholder photos.

### Accessibility
White hero text sits on a black gradient at least 60% opaque behind the text. Gold `#c7ab6b` fails as text on cream, so use it for lines and icons only and use `#8a6d2f` for any gold text. The slideshow needs a pause control (WCAG 2.2.2), `aria-roledescription="carousel"` and labelled slides. Honor `prefers-reduced-motion` by disabling zoom and autoplay. Give every photo meaningful alt text. The date input needs a visible label rather than a placeholder. Focus rings: 2px `#8a6d2f` outline with offset. Verified contrast: body #3b3b3b on #faf8f5 = 10.57:1; gold text #8a6d2f on #faf8f5 = 4.6:1; input border #a18d6e on #faf8f5 = 3.02:1; hero text on scrim #ffffff on #666666 = 5.74:1.

### Security
Validate the inquiry with zod on the client and again in the edge function. Add a honeypot field and per-IP rate limiting, keep email API keys only in function environment variables, and escape user text in outbound emails. External links use `rel="noopener noreferrer"`.

### Performance & SEO
Preload only the first hero image and lazy-load the rest with `srcset` in AVIF or WebP. Code-split the story pages. Give each story unique title, meta and OG tags using its cover image. Use one H1 per page. Target Lighthouse 90+ and set aspect ratios to avoid layout shift.

### Guardrails
- Use original copy and placeholder imagery only, with no trademarked names or logos.
- Do not present invented client quotes as real testimonials.
- Collect only the inquiry fields and do not store them beyond delivery.
- Keep components small and typed, with no `any`, and show errors visibly.
- Done when: the slideshow autoplays and can be paused; story pages render from data; the form validates and shows a toast; reduced motion is respected; all pages are responsive from 360px to 1440px.

Open the builderAll templatesThis palette on its own