An event page for a summer music festival: a full-bleed heat-haze gradient with film grain, a tall condensed headline, a date chip and a ticket button.
Music festival event page · Website · Events and bookings · single page: hero and one section
HeatwaveOur storyAboutContactGet tickets
HeatwaveThree days, two stages, one long summer weekend.Get tickets
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.
Anton is tall and tight, so a headline can fill the height of a poster; Lexend is wide and clear for dates and names.
AntonHeadings: the tall condensed headline in cream
LexendBody: chips, lineup and the ticket pill
Who it is for
Festival-goers
Artists and agents
Local press
Layout
The gradient itself is the hero and the page background
Tiny nav on top
Tall condensed headline on the left
Date chip and location chip, then a ticket pill
One supporting section: the lineup as large names in cream, ordered by day
Palette
Hot, loud, nostalgic.
crimson#9c0626
blaze#dd4f02
amber#f29900
cream#f2e5dd
Every checked pair, measured again
Sample
Where
Ratio
Needs
Aa
body text on the page
6.90:1
4.5:1
Aa
text on cards and chips
11.47:1
4.5:1
Aa
secondary text on muted surfaces
6.03:1
4.5:1
Aa
secondary text on the page
6.90:1
4.5:1
Aa
label on the primary action
6.90:1
4.5:1
Aa
label on secondary surfaces
11.47:1
4.5:1
Aa
label on the accent
11.47:1
4.5:1
Aa
error label
4.55:1
4.5:1
primary action against the page
6.90: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
Anton, the tall condensed headline in cream
Body
Lexend, chips, lineup and the ticket pill
Spacing and imagery
Full-bleed gradient at 100svh; tall headline spanning most of the height on the left; chips and pill on the right.
An abstract heat-haze gradient from deep crimson through orange to amber, with soft film grain and gentle wave distortion. No text in the frame.
Components
Date chip
Ticket pill
Lineup list
Grain overlay
Interactions
The gradient shifts slowly, like air above hot ground
Grain flickers subtly
Staggered reveal of headline letters
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 **Heatwave**: An event page for a summer music festival: a full-bleed heat-haze gradient with film grain, a tall condensed headline, a date chip and a ticket button. 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. The gradient itself is the hero and the page background.
2. Tiny nav on top.
3. Tall condensed headline on the left.
4. Date chip and location chip, then a ticket pill.
5. One supporting section: the lineup as large names in cream, ordered by day.
Copy to start from, all in `content.ts`: headline "Heatwave", subcopy "Three days, two stages, one long summer weekend.", primary action "Get tickets". 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: Hot, loud, nostalgic.
Palette: crimson `#9c0626`, blaze `#dd4f02`, amber `#f29900`, cream `#f2e5dd`. Tokens: background `#9c0626`, foreground `#f2e5dd`, primary `#f2e5dd` with `#9c0626` labels, cards `#5c0417`.
Type: Anton for the tall condensed headline in cream; Lexend for chips, lineup and the ticket pill. Load both from https://fonts.googleapis.com/css2?family=Anton&family=Lexend:wght@400;600&display=swap. Small labels in Lexend with 0.12em tracking.
Corners: 28px on the hero card, 16px on cards, pills fully round. Spacing: Full-bleed gradient at 100svh; tall headline spanning most of the height on the left; chips and pill on the right.
Hero image: An abstract heat-haze gradient from deep crimson through orange to amber, with soft film grain and gentle wave distortion. No text in the frame. The series made this image for the design: https://vibld.com/img/cinematic/heatwave.webp, 2688 by 1535, alt text "A heat-haze gradient from crimson through orange to amber, with film grain". Use it by that absolute URL, with `srcset="https://vibld.com/img/cinematic/heatwave-800.webp 800w, https://vibld.com/img/cinematic/heatwave-1600.webp 1600w, https://vibld.com/img/cinematic/heatwave.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
- Date chip
- Ticket pill
- Lineup list
- Grain overlay
Motion:
- The gradient shifts slowly, like air above hot ground
- Grain flickers subtly
- Staggered reveal of headline letters
The signature motion is: A breathing gradient. 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 #f2e5dd on #9c0626 6.90:1; text on cards and chips #f2e5dd on #5c0417 11.46:1; secondary text on muted surfaces #f2e5dd on #a51c38 6.03:1; secondary text on the page #f2e5dd on #9c0626 6.90:1; label on the primary action #9c0626 on #f2e5dd 6.90:1; label on secondary surfaces #f2e5dd on #5c0417 11.46:1; label on the accent #f2e5dd on #5c0417 11.46:1; error label #ffffff on #d93a3a 4.54:1; primary action against the page #f2e5dd on #9c0626 6.90: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: Rainbow gradients, crowd stock photos.
- 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.
