Template
Ember Route
A brand page for a premium same-day courier that wants to feel like a craft service, not a logistics portal. One autumn road photograph carries the story; a tracking field is the only tool on the page.
Premium courier brand hero · Website · Small business site · 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
Unbounded is wide and loud enough to bleed off a card and still read; Gabarito is a compact, friendly grotesk that keeps the small print calm beside it.
- UnboundedHeadings: the two-word headline, uppercase, 800, sized so it runs past both edges of the card
- GabaritoBody: nav links, subcopy and the tracking field
Who it is for
- Boutiques and galleries shipping fragile goods
- Agencies that send same-day proofs
- Customers checking on a parcel
Layout
- Page background: the hero photo again, blurred 60px and darkened to the umber tone
- Hero card with 24px corners holding the photo, a tiny nav on top: wordmark left, four small links and a pill CTA right
- Two-word uppercase headline that overflows both edges of the card, set behind the van but in front of the sky
- A tracking-number chip below the subcopy: an input and a small arrow button
- One supporting section in the same style: three short service notes on glass chips beside a second, smaller photo crop
Palette
Warm, confident, unhurried. Golden-hour light and a brand that takes care of things.
- accent ember orange
#d9601e - blurred background umber
#3a2418 - text
#ffffff - deep shadow
#1e120b
Every checked pair, measured again
| Sample | Where | Ratio | Needs |
|---|---|---|---|
| Aa | body text on the page | 18.32:1 | 4.5:1 |
| Aa | text on cards and chips | 14.53:1 | 4.5:1 |
| Aa | secondary text on muted surfaces | 8.03:1 | 4.5:1 |
| Aa | secondary text on the page | 10.56:1 | 4.5:1 |
| Aa | label on the primary action | 4.92:1 | 4.5:1 |
| Aa | label on secondary surfaces | 14.53:1 | 4.5:1 |
| Aa | label on the accent | 14.53:1 | 4.5:1 |
| Aa | error label | 4.55:1 | 4.5:1 |
| primary action against the page | 4.92: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
- Unbounded, the two-word headline, uppercase, 800, sized so it runs past both edges of the card
- Body
- Gabarito, nav links, subcopy and the tracking field
Spacing and imagery
Hero card inset 16px from the viewport on mobile and 24px on desktop, 24px radius; content on a 12-column grid with generous 96px section padding.
A white delivery van on a road carpeted with fallen leaves between blazing orange trees, low sun behind it, 35mm, shallow depth of field. No lettering on the van and no text in the frame; open sky on the left for the headline.
Components
- Tiny nav with pill CTA
- Tracking-number input chip
- Glass service chips
- Blurred hero echo background
Interactions
- Photo moves at 0.85x scroll speed for a gentle parallax
- Headline slides in from the left over 700ms on load
- A few leaves drift across the card on a slow loop
- Staggered reveal of subcopy, field and CTA, 80ms apart
- Tracking field validates the format and shows a status line
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 **Ember Route**: A brand page for a premium same-day courier that wants to feel like a craft service, not a logistics portal. One autumn road photograph carries the story; a tracking field is the only tool on the page. 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. Page background: the hero photo again, blurred 60px and darkened to the umber tone. 2. Hero card with 24px corners holding the photo, a tiny nav on top: wordmark left, four small links and a pill CTA right. 3. Two-word uppercase headline that overflows both edges of the card, set behind the van but in front of the sky. 4. A tracking-number chip below the subcopy: an input and a small arrow button. 5. One supporting section in the same style: three short service notes on glass chips beside a second, smaller photo crop. Copy to start from, all in `content.ts`: headline "Carried Well", subcopy "Same-day courier for things that matter. Handled by two people, from your door to theirs.", primary action "Book a pickup". 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: Warm, confident, unhurried. Golden-hour light and a brand that takes care of things. Palette: accent ember orange `#d9601e`, blurred background umber `#3a2418`, text `#ffffff`, deep shadow `#1e120b`. Tokens: background `#1e120b`, foreground `#ffffff`, primary `#d9601e` with `#1e120b` labels, cards `#3a2418`. Type: Unbounded for the two-word headline, uppercase, 800, sized so it runs past both edges of the card; Gabarito for nav links, subcopy and the tracking field. Load both from https://fonts.googleapis.com/css2?family=Unbounded:wght@400;800&family=Gabarito:wght@400;500;600&display=swap. Small labels in Gabarito with 0.12em tracking. Corners: 28px on the hero card, 16px on cards, pills fully round. Spacing: Hero card inset 16px from the viewport on mobile and 24px on desktop, 24px radius; content on a 12-column grid with generous 96px section padding. Hero image: A white delivery van on a road carpeted with fallen leaves between blazing orange trees, low sun behind it, 35mm, shallow depth of field. No lettering on the van and no text in the frame; open sky on the left for the headline. The series made this image for the design: https://vibld.com/img/cinematic/ember-route.webp, 2688 by 1535, alt text "A white delivery van on a leaf-covered road between orange autumn trees, the low sun behind it". Use it by that absolute URL, with `srcset="https://vibld.com/img/cinematic/ember-route-800.webp 800w, https://vibld.com/img/cinematic/ember-route-1600.webp 1600w, https://vibld.com/img/cinematic/ember-route.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 - Tiny nav with pill CTA - Tracking-number input chip - Glass service chips - Blurred hero echo background Motion: - Photo moves at 0.85x scroll speed for a gentle parallax - Headline slides in from the left over 700ms on load - A few leaves drift across the card on a slow loop - Staggered reveal of subcopy, field and CTA, 80ms apart - Tracking field validates the format and shows a status line The signature motion is: Drifting leaves over a slow photo parallax. 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 #1e120b 18.31:1; text on cards and chips #ffffff on #3a2418 14.52:1; secondary text on muted surfaces #c7c4c2 on #352a23 8.03:1; secondary text on the page #c7c4c2 on #1e120b 10.55:1; label on the primary action #1e120b on #d9601e 4.92:1; label on secondary surfaces #ffffff on #3a2418 14.52:1; label on the accent #ffffff on #3a2418 14.52:1; error label #ffffff on #d93a3a 4.54:1; primary action against the page #d9601e on #1e120b 4.92: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: A real carrier name or livery, warehouse or truck stock shots. - 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.