Afterglow

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

Epilogue is a neutral grotesk with a slightly cinematic, wide-set rhythm that stays quiet so the posters provide the drama.

• EpilogueHeadings: wordmark ~30px in gold, review titles 56px
• EpilogueBody: body 16px light grey, 12px meta

Who it is for

• Independent film critics
• Movie bloggers and podcasters
• Film students building portfolios
• Festival reviewers

Layout

1. Sticky blurred black header: gold wordmark left, Reviews/About (active gold underline) and social icons right
2. Poster wall: 6-column grid of portrait posters, each with title and 'Genre · Year' caption; last row centered
3. Footer: centered links, social icons, copyright and tagline
4. Review page: backdrop hero, title, rating, metadata sidebar (director, runtime, cast), body, two-column still gallery, related reviews
5. About page and contact form
6. Full-screen mobile menu

Palette

Moody, cinematic, immersive, sleek, focused. Like browsing a dark theater lobby lined with one-sheets.

• background#000000
• text#d9d9d9
• accent gold#fbcf4b
• card#0f0f0f
• secondary surface#1a1a1a
• border#262626
• muted text#8a8a8a
• input border#6b6b6b

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

Switzer 400 ~30px for wordmark in gold; review titles large (56px; light weights only at ≥ 32px) (Switzer is not on Google Fonts; a vibld project loads Epilogue)

Body

Switzer 400 16px light grey (line-height 1.6), 12px minimum meta captions (Switzer is not on Google Fonts; a vibld project loads Epilogue)

One neutral grotesk throughout; color and poster art provide drama

Spacing and imagery

Full-width 1200px grid, 6 columns with ~20px gaps, 2:3 poster ratio, tight caption spacing; minimal radius; hairline dark borders

Full-color generated film posters as the main visual, unframed on pure black; review pages use wide stills.

Components

• Sticky blurred header
• Gold wordmark
• Active nav underline
• Social icon links
• Poster card with caption
• Responsive poster grid
• Review hero
• Film metadata sidebar
• Star/score rating
• Two-column image gallery
• Related reviews row
• Contact form
• Full-screen mobile menu

Interactions

• Poster hover lift and slight brighten
• Caption color shifts to gold on hover
• Sticky header with backdrop blur on scroll
• Full-screen mobile menu fade
• Gallery lightbox
• Contact form validation with toast

Data

• Review{slug, title, year, genre, poster, backdrop, rating, director, runtime, cast[], body_md, stills[], published_at}
• Genre{name}
• ContactMessage{name, email, 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 **Afterglow**, a dark, cinematic film criticism blog for one critic or a small team. The home page is a wall of posters; each opens a long-form review with film facts and stills. The job: make browsing reviews feel like walking past a lobby of one-sheets, and make each review page feel authoritative.

### Stack
React 18 + TypeScript + Vite, Tailwind CSS, shadcn/ui (Radix), lucide-react. Reviews from local markdown/JSON; Embla for gallery lightbox navigation; cmdk for a quick search palette (⌘K) over titles; Sonner for toasts; react-hook-form + zod for the contact form. Backend only for contact: an Edge Function (Supabase) or a form service.

### Pages & layout
1. **Home** – sticky black header with blur, gold wordmark, links (Reviews, About) with gold active underline, social icons. A 6-column poster grid (2:3) with title and "Genre · Year" beneath each; responsive to 4/3/2 columns; final partial row centered. Footer centered with links, icons, copyright, small tagline.
2. **Review** – wide backdrop with a gradient to black (at least `rgb(0 0 0 / .7)` behind all text), title, year, score; two-column body: long-form review left, sticky metadata sidebar right (director, writers, runtime, cast, genre, where to watch placeholder); two-column stills gallery; related reviews row.
3. **About** – critic bio, approach, contact form.
4. **Search palette** (⌘K).

### Design system
Pure black cinema theme. `--background: #000000`, `--foreground: #d9d9d9`, `--primary: #fbcf4b` (marquee gold), `--card: #0f0f0f`, `--secondary: #1a1a1a`, `--border: #262626`, `--muted-foreground: #8a8a8a`, `--input-border: #6b6b6b` (form fields; `--border` is decorative only). Font: Switzer or Epilogue (400/500/600); wordmark 30px gold; review title 56px; captions 12px. Spacing 4-pt, grid gap 20px. Radius 4–8px (posters square-ish). Shadows none; use brightness shifts. Motion 200ms ease-out; poster hover translateY(-4px).

### Components & interactions
Header (transparent → blurred on scroll), NavLink (active gold underline), PosterCard (hover lift, focus ring gold, loading skeleton), PosterGrid, ReviewHero, MetaSidebar, ScoreBadge, StillsGallery + Lightbox (keyboard arrows, Esc), RelatedRow, CommandSearch (empty "No matches"), ContactForm (validating/sending/sent/error), MobileMenu (full-screen).

### Data & state
`Review` records as typed files; derived genre list for filtering. No global state beyond UI. Seed ~24 reviews of **fictional** films with invented titles and generated poster art -- do not use real studio posters or actor names.

### Accessibility
Grey #d9d9d9 on black passes easily; muted caption grey must be ≥ #8a8a8a (≈ 6:1). Gold on black is fine for text; black text on gold buttons and score badges measures 14.1:1. Poster cards are links with the film title as accessible name; poster images have alt ("Poster for …"). Lightbox is a dialog with focus trap. Reduced motion disables hover lifts and fades. Skip link to main content. Verified contrast: body text #d9d9d9 on #000000 = 14.8:1; muted caption text #8a8a8a on #000000 = 6.0:1; gold wordmark/link text #fbcf4b on #000000 = 14.1:1; black text #000000 on #fbcf4b = 14.1:1; light text #ffffff on #4d4d4d = 8.4:1.

### Security
Proportionate: contact form validated with zod on client and server, honeypot + rate limit, no secrets in client. Sanitize rendered markdown. External links (social, trailers) `rel="noopener noreferrer"`. Only embed video from allowlisted hosts via nocookie variants.

### Performance & SEO
Posters as responsive WebP/AVIF with explicit aspect ratio to avoid layout shift, lazy-load below the fold. Pre-render review routes. Structured data (`Review` schema with rating), per-review meta/OG using the poster. Lighthouse 90+ on the poster wall.

### Guardrails
- Fictional films and generated/placeholder posters only; no studio logos or real actor names.
- No fake pull-quotes attributed to publications.
- Contact messages stored only as long as needed.
- Typed small components, no `any`, visible errors.
- Done when: the grid reflows at 4 breakpoints without CLS, every poster is keyboard reachable, review pages show sidebar metadata and gallery lightbox, ⌘K finds a title, and the contact form rejects spam and confirms success.

Open the builderAll templatesThis palette on its own