Long Take

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

Geologica is a stark, precise grotesk that reads like a high-end print magazine when set large and tight in monochrome.

• GeologicaHeadings: review headlines 500-700, tight; wordmark 18px
• GeologicaBody: body 16-18px

Who it is for

• Film critics and cinephile writers
• Entertainment editors
• Review podcasts needing a web home
• Film club organizers

Layout

1. Minimal white header: small wordmark left, Reviews (underlined) / About centered, social icons right
2. Edge-to-edge 3-column masonry of posters separated by thin white gutters, columns scrolling at different parallax speeds
3. Review detail: hero image, title, metadata, body, related movies
4. Two-column About page
5. Contact form
6. Mobile navigation menu

Palette

Editorial, stark, confident, exhibition-like, cinematic. A high-end print magazine translated to the web.

• background#ffffff
• text / primary#1a1a1a
• card#fafafa
• secondary#f5f5f5
• border#e6e6e6
• muted text#707070
• input border#949494

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

Geologica 500–700, large tight headlines on review pages; 18px wordmark

Body

Geologica 400 16–18px

Single Geologica family; monochrome chrome so posters provide all color

Spacing and imagery

Full-bleed gallery with 2px white gutters; 0 radius; header 90px tall; reading pages use ~720px column with sidebar

Full-color posters filling masonry tiles edge to edge; no framing, no rounded corners; the white chrome makes them pop.

Components

• Minimal header with underline active state
• Social icon links
• Parallax masonry gallery
• Poster tile with hover overlay
• Review hero
• Metadata panel (from API)
• Related movies strip
• Skeleton loaders
• Offline/fallback notice
• Two-column about
• Contact form with validation
• Mobile menu

Interactions

• Columns move at different speeds on scroll (parallax)
• Tile hover reveals title/score overlay
• Skeletons while metadata loads
• Graceful fallback when API fails
• Form inline validation and success toast
• Mobile menu slide

Data

• Review{slug, title, year, poster, hero, rating, body_md, external_id, published_at}
• MovieMeta{external_id, director, genre, runtime, release_date, preview_url} (fetched, cached)
• ContactMessage{name, email, subject, 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 **Long Take**, a monochrome film-criticism magazine. The home page is an edge-to-edge poster masonry with gentle parallax; each tile opens a review with hero art, the critique, metadata fetched from a public movie/media API, and related titles. The job: showcase a critic's body of work with print-magazine polish.

### Stack
React 18 + TypeScript + Vite, Tailwind CSS, shadcn/ui (Radix), lucide-react. Framer Motion (`useScroll`/`useTransform`) for column parallax; TanStack Query to fetch and cache external metadata with retries; react-hook-form + zod for contact; Embla for related-title rail. Supabase optional: a `reviews` table if editors want a CMS, and an Edge Function for the contact form. Otherwise content lives in local markdown.

### Pages & layout
1. **Home** – white header (wordmark left, Reviews/About centered with underline on active, social icons right). Below, a full-bleed 3-column masonry of poster tiles with 2px white gutters; middle column scrolls slightly slower than outer columns. Hover shows title, year and score over a dark gradient.
2. **Review** – full-width hero still, title (64px), year/genre/runtime line, score; body in a 720px column; right sidebar with fetched metadata (skeletons while loading, "Details unavailable" on failure); related films rail.
3. **About** – two columns: portrait placeholder + bio; approach and scoring explanation.
4. **Contact** – form (name, email, subject, message).

### Design system
Monochrome. `--background: #ffffff`, `--foreground: #1a1a1a`, `--primary: #1a1a1a`, `--card: #fafafa`, `--secondary: #f5f5f5`, `--border: #e6e6e6` (decorative), `--input-border: #949494`, `--muted-foreground: #707070`. Font: Geologica (400/500/700); scale 12/14/16/18/24/40/64 (body 16-18px/1.6, ~70ch column), headline tracking -0.02em. Radius 0. No shadows; overlays `linear-gradient(transparent, rgb(0 0 0 / .7))`. Motion: parallax offset ±80px max, hover overlay 200ms ease.

### Components & interactions
Header (active underline), MasonryGallery (3/2/1 columns), PosterTile (idle/hover overlay/focus visible/loading), ReviewHero, MetaPanel (loading skeleton/loaded/error fallback), ScoreDisplay, RelatedRail (prev/next buttons), AboutColumns, ContactForm (inline errors, submitting, success toast, failure), MobileMenu.

### Data & state
Reviews typed and stored locally or in Supabase; each has an `external_id` to look up metadata. Cache API responses (TanStack Query, 24h staleTime) and fall back to local fields. Seed 18 reviews of **fictional** films with generated poster art; mock the API in development.

### Accessibility
Parallax disabled when `prefers-reduced-motion` is set, and never moves text. Tiles are links with the film title as accessible name; overlay info also available on focus. Poster alt text describes the film title. Gray #707070 is 4.9:1 on white and 4.5:1 on #f5f5f5 -- don't go lighter. Skeletons have `aria-busy`. Form fields labeled with errors tied by `aria-describedby`. Verified contrast: body text #1a1a1a on #ffffff = 17.4:1; muted text #707070 on #ffffff = 4.9:1; muted text #707070 on #f5f5f5 = 4.5:1; white #ffffff on #1a1a1a = 17.4:1; white overlay text #ffffff on #4d4d4d = 8.4:1.

### Security
Proportionate: validate contact input with zod client and server, honeypot + rate limit. External API called either directly (public, keyless) or via an Edge Function if a key is needed -- never ship keys to the client. Treat API text as untrusted (render as text). Social links `rel="noopener noreferrer"`. Content-Security-Policy friendly: no inline scripts.

### Performance & SEO
Responsive poster images with fixed aspect ratio, lazy-loaded; limit initial masonry to ~12 tiles then load more on scroll. Pre-render reviews; add meta, OG, Twitter card tags and `Review` structured data. Lighthouse 90+.

### Guardrails
- Fictional films and generated posters only; no studio artwork, logos or real actor names.
- No fabricated critic quotes from real outlets.
- Contact data minimal and not exposed publicly.
- Typed small components, no `any`, visible errors and fallbacks.
- Done when: masonry parallax runs smoothly and turns off with reduced motion, tiles are keyboard accessible, metadata shows skeleton → data or a graceful fallback offline, OG tags render per review, and the contact form validates and confirms.

Open the builderAll templatesThis palette on its own