Template
Passcode Drop
A gate page for a limited streetwear release: visitors with the code get in early, everyone else joins the list. The page is loud, playful and one decision deep.
Password-gated streetwear drop · Website · Events and bookings · single page: hero and one section
A mock-up of the homepage, drawn from this design’s layout, palette and typefaces. A build follows the full prompt below.
Add app screens
Pick up to 6 screens, such as a dashboard, settings or an empty state. Each is built in this design’s own palette and typefaces, with its states and guardrails.
Start from this templateRead the build prompt
Typefaces
Tomorrow has the squared, technical cut a drop needs at heavy weights; Asta Sans is plain and legible at small sizes on bright lime.
- TomorrowHeadings: the headline in black weight and the repeated strap glyphs
- Asta SansBody: labels, helper text and the waitlist form
Who it is for
- Followers who received a drop code
- Collectors waiting for the next release
- Press previewing the collection
Layout
- Black page with two diagonal lime straps crossing behind the content, each repeating a small glyph
- Tiny nav: wordmark left, two links right
- Centered lime card: headline, mascot image, password field with a square GO button
- Waitlist link under the card for visitors without a code
- One supporting section: the release date and three product silhouettes on black with lime labels
Palette
Loud, cheeky, high-voltage. Acid lime on black with a mascot that looks like it knows the code.
- canvas
#000000 - strap lime
#b7f000 - card lime
#a8e000 - ink on lime
#0a0a0a
Every checked pair, measured again
| Sample | Where | Ratio | Needs |
|---|---|---|---|
| Aa | body text on the page | 21.00:1 | 4.5:1 |
| Aa | text on cards and chips | 12.56:1 | 4.5:1 |
| Aa | secondary text on muted surfaces | 9.46:1 | 4.5:1 |
| Aa | secondary text on the page | 11.42:1 | 4.5:1 |
| Aa | label on the primary action | 15.48:1 | 4.5:1 |
| Aa | label on secondary surfaces | 12.56:1 | 4.5:1 |
| Aa | label on the accent | 13.33:1 | 4.5:1 |
| Aa | error label | 4.55:1 | 4.5:1 |
| primary action against the page | 15.48:1 | 3:1 |
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
- Tomorrow, the headline in black weight and the repeated strap glyphs
- Body
- Asta Sans, labels, helper text and the waitlist form
Spacing and imagery
Black canvas with a centered card 520px wide on desktop and full width minus 16px on mobile; 32px card padding; straps cross the full viewport behind it.
A stylized 3D fluffy mascot creature in a backwards cap and dark sunglasses, soft studio light, visible fur strands, plain dark backdrop. No text in the frame; space above it for the headline.
Components
- Diagonal marquee straps
- Password field with GO button
- Waitlist form
- Blurred hero echo background
Interactions
- Straps scroll as slow marquees in opposite directions
- Mascot idles with a small up-and-down float, 3s loop
- Wrong code: the card shakes once and the field says why
- Right code: a short burst of confetti, then the shop opens
- Staggered reveal of headline, mascot and field
Data
Content{headline, subcopy, cta, section items}
Build prompt
The baseline every prompt in the catalog assumes, then this design’s own ten sections, from goal to guardrails.
The baseline
### How to use these prompts Each Cinematic Hero prompt describes one page: a full-bleed hero built around a single generated image, and one supporting section in the same style. The rules below apply to every one of them. ### Cinematic Hero principles - One full-bleed hero per page. The image is the subject, not decoration. - An oversized display headline of two to four words that runs past an edge or overlaps the subject. It is live text, never part of the image. - A tiny nav: a wordmark and three or four small links, one pill-shaped primary action, and at most one quiet secondary action. - The hero image returns as the page background, blurred 40 to 80px and darkened, so the hero sits in a card with 24 to 32px corners. - A tight palette: two or three colors taken from the image and one accent, used mostly on the primary action. - A distinct display face with a quiet body face. Small labels get wide tracking. - Small glass or chip details (a stat, a tag, an avatar row, a counter), never a wall of features. - One signature motion and a staggered text reveal. prefers-reduced-motion turns every loop off and shows still frames. - On phones the headline keeps its bleed at a clamp() size, the subject stays in frame, a video becomes its poster, and chips stack under the action. ### Engineering baseline - TypeScript strict mode, small typed components, and one source of truth for design tokens (CSS variables consumed by Tailwind). - All copy lives in one typed content file, so the owner can edit words without touching layout. - Every form validates on the client, says what went wrong in plain words beside the field, and never claims success it has not had. - No secrets in the bundle and no third-party scripts beyond Google Fonts.
### Goal Build **Passcode Drop**: A gate page for a limited streetwear release: visitors with the code get in early, everyone else joins the list. The page is loud, playful and one decision deep. It is one cinematic hero and one supporting section, in the Cinematic Hero series. ### Stack React + TypeScript + Vite and Tailwind CSS. Motion in CSS and the Web Animations API. No backend: the page is static, and any form keeps its result on the page until the owner connects an endpoint. ### Pages & layout 1. Black page with two diagonal lime straps crossing behind the content, each repeating a small glyph. 2. Tiny nav: wordmark left, two links right. 3. Centered lime card: headline, mascot image, password field with a square GO button. 4. Waitlist link under the card for visitors without a code. 5. One supporting section: the release date and three product silhouettes on black with lime labels. Copy to start from, all in `content.ts`: headline "Got the Code?", subcopy "Drop 07 opens early for code holders. No code, no problem: get on the list.", primary action "GO". On phones the headline keeps its bleed at a clamp() size, the subject stays in frame, and chips stack under the action. ### Design system Mood: Loud, cheeky, high-voltage. Acid lime on black with a mascot that looks like it knows the code. Palette: canvas `#000000`, strap lime `#b7f000`, card lime `#a8e000`, ink on lime `#0a0a0a`. Tokens: background `#000000`, foreground `#ffffff`, primary `#b7f000` with `#000000` labels, cards `#a8e000`. Type: Tomorrow for the headline in black weight and the repeated strap glyphs; Asta Sans for labels, helper text and the waitlist form. Load both from https://fonts.googleapis.com/css2?family=Tomorrow:wght@400;900&family=Asta+Sans:wght@400;600&display=swap. Small labels in Asta Sans with 0.12em tracking. Corners: 28px on the hero card, 16px on cards, pills fully round. Spacing: Black canvas with a centered card 520px wide on desktop and full width minus 16px on mobile; 32px card padding; straps cross the full viewport behind it. Hero image: A stylized 3D fluffy mascot creature in a backwards cap and dark sunglasses, soft studio light, visible fur strands, plain dark backdrop. No text in the frame; space above it for the headline. The series made this image for the design: https://vibld.com/img/cinematic/passcode-drop.webp, 2688 by 1535, alt text "A fluffy lime-green mascot in a black cap and dark sunglasses on a gray backdrop". Use it by that absolute URL, with `srcset="https://vibld.com/img/cinematic/passcode-drop-800.webp 800w, https://vibld.com/img/cinematic/passcode-drop-1600.webp 1600w, https://vibld.com/img/cinematic/passcode-drop.webp 2688w"`, unless the person has uploaded a hero image of their own, which then takes its place. Never a placeholder photo or a stock image of people. ### Components & interactions - Diagonal marquee straps - Password field with GO button - Waitlist form - Blurred hero echo background Motion: - Straps scroll as slow marquees in opposite directions - Mascot idles with a small up-and-down float, 3s loop - Wrong code: the card shakes once and the field says why - Right code: a short burst of confetti, then the shop opens - Staggered reveal of headline, mascot and field The signature motion is: Opposing marquee straps behind the card. Keep it to that one; everything else is a 150 to 300ms state change. With prefers-reduced-motion, loops stop, videos show their poster and reveals are instant. ### Data & state All copy and the supporting section's items live in one typed `content.ts`. Inputs validate as the visitor types and report a result inline; nothing is sent anywhere until the owner connects a form endpoint. ### Accessibility WCAG 2.2 AA. The headline is real text, not part of the image, and the image has alt text describing it. Every control has a visible focus ring and a 44px target. Verified contrast: body text on the page #ffffff on #000000 21.00:1; text on cards and chips #0a0a0a on #a8e000 12.56:1; secondary text on muted surfaces #bfbfbf on #1a1a1a 9.46:1; secondary text on the page #bfbfbf on #000000 11.41:1; label on the primary action #000000 on #b7f000 15.47:1; label on secondary surfaces #0a0a0a on #a8e000 12.56:1; label on the accent #000000 on #a8e000 13.32:1; error label #ffffff on #d93a3a 4.54:1; primary action against the page #b7f000 on #000000 15.47:1. ### Security No third-party scripts other than Google Fonts. Forms carry a hidden honeypot field and cap input length. ### Performance & SEO Serve the hero image as AVIF or WebP with its width and height, `fetchpriority="high"` and no lazy loading; the blurred echo reuses the same file with a CSS filter. Preconnect to Google Fonts. Title and meta description come from `content.ts`. Largest contentful paint under 2.5s on a mid-range phone. ### Guardrails - Avoid: Thin weights, muted colors, a real brand mascot. - One accent color, one primary action, at most four nav links. - No carousel or slider in the hero, no mega menu, no emoji or clip-art icons, no hard offset shadows. - No purple-to-blue gradient and no stock photos of people at desks. - The brand is invented. Use no real company's name, logo or trademark.