Form // Function

Form // FunctionOur storyAboutContactMeet the hand

Form // FunctionHands that pick, place and inspect at human speed.Meet the hand

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

Syne has an engineered, slightly wide stance that suits a split headline; Hind is a plain sans that keeps technical copy quiet.

• SyneHeadings: the split headline either side of "//"
• HindBody: tags, counter and subcopy

Who it is for

• Manufacturing leads
• Robotics engineers
• Investors

Layout

1. Background: the hand blurred into soft gray
2. Tiny nav on top
3. Headline split by "//" either side of the hand
4. Outline pill tags for four capabilities and a counter reading 01/04
5. One supporting section: one capability at a time, stepped by the counter, with a short clip poster

Palette

Clinical, sculptural, calm. Monochrome only.

• black#0e0e0e
• gray#9a9a9a
• white#f2f2f2

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

Syne, the split headline either side of "//"

Body

Hind, tags, counter and subcopy

Spacing and imagery

Monochrome hero at 100svh; headline split either side of the hand; tags and counter along the bottom.

A chrome robotic hand reaching toward the camera, monochrome studio light, soft reflections, black backdrop. No text in the frame; space either side of the hand.

Components

• Outline pill tags
• Step counter
• Capability panel
• Blurred hero echo background

Interactions

• Fingers articulate in a short loop
• Counter steps 01 to 04 as the page scrolls
• Staggered reveal of the two headline halves

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.

Copy the baseline and build prompt

### 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 **Form // Function**: A homepage for a robotics company: a chrome hand reaching toward the viewer in monochrome, a headline split by a double slash and a counter stepping through four capabilities. 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. Background: the hand blurred into soft gray.
2. Tiny nav on top.
3. Headline split by "//" either side of the hand.
4. Outline pill tags for four capabilities and a counter reading 01/04.
5. One supporting section: one capability at a time, stepped by the counter, with a short clip poster.

Copy to start from, all in `content.ts`: headline "Form // Function", subcopy "Hands that pick, place and inspect at human speed.", primary action "Meet the hand". 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: Clinical, sculptural, calm. Monochrome only.

Palette: black `#0e0e0e`, gray `#9a9a9a`, white `#f2f2f2`. Tokens: background `#0e0e0e`, foreground `#f2f2f2`, primary `#f2f2f2` with `#0e0e0e` labels, cards `#1c1c1c`.

Type: Syne for the split headline either side of "//"; Hind for tags, counter and subcopy. Load both from https://fonts.googleapis.com/css2?family=Syne:wght@500;700&family=Hind:wght@400;500&display=swap. Small labels in Hind with 0.12em tracking.

Corners: 28px on the hero card, 16px on cards, pills fully round. Spacing: Monochrome hero at 100svh; headline split either side of the hand; tags and counter along the bottom.

Hero image: A chrome robotic hand reaching toward the camera, monochrome studio light, soft reflections, black backdrop. No text in the frame; space either side of the hand. The series made this image for the design: https://vibld.com/img/cinematic/form-function.webp, 2688 by 1535, alt text "A chrome robotic hand reaching forward on black". Use it by that absolute URL, with `srcset="https://vibld.com/img/cinematic/form-function-800.webp 800w, https://vibld.com/img/cinematic/form-function-1600.webp 1600w, https://vibld.com/img/cinematic/form-function.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
- Outline pill tags
- Step counter
- Capability panel
- Blurred hero echo background

Motion:
- Fingers articulate in a short loop
- Counter steps 01 to 04 as the page scrolls
- Staggered reveal of the two headline halves

The signature motion is: A counter that steps on scroll. 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 #f2f2f2 on #0e0e0e 17.24:1; text on cards and chips #f2f2f2 on #1c1c1c 15.22:1; secondary text on muted surfaces #b9b9b9 on #252525 7.81:1; secondary text on the page #b9b9b9 on #0e0e0e 9.83:1; label on the primary action #0e0e0e on #f2f2f2 17.24:1; label on secondary surfaces #f2f2f2 on #1c1c1c 15.22:1; label on the accent #f2f2f2 on #1c1c1c 15.22:1; error label #ffffff on #d93a3a 4.54:1; primary action against the page #f2f2f2 on #0e0e0e 17.24: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: Blue glow, humanoid robot faces.
- 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.

Open the builderAll templatesThis palette on its own