Orbital

OrbitalOur storyLatestBy the numbersStart building

Compute, ComposedGPUs on demand, scheduled like code.Start building

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

Onest is a compact, confident grotesk for a short headline; Inter keeps the technical small print neutral.

• OnestHeadings: the headline in 600 with tight tracking
• InterBody: subcopy, buttons and the marquee captions

Who it is for

• ML engineers
• Platform teams
• Technical founders

Layout

1. Background: the monolith blurred into deep fog
2. Tiny nav on top with a ghost Sign in and a pill Start building
3. Headline bottom-left over the dark corner
4. Logo marquee of invented customer wordmarks along the bottom edge
5. One supporting section: a single code sample beside three numbers on cost and speed

Palette

Quiet power, cold light, restraint.

• void#07080b
• frost#e9ecf1
• signal violet#7c8bff

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

Onest, the headline in 600 with tight tracking

Body

Inter, subcopy, buttons and the marquee captions

Spacing and imagery

100svh hero; headline anchored bottom-left with 6vw padding; marquee strip 64px tall along the bottom.

A slow-rotating chrome monolith of stacked data plates in fog, darkened by about 40%, vignette at the edges. No text in the frame; lower left kept dark.

Components

• Ghost Sign in
• Pill CTA
• Logo marquee
• Code sample panel
• Blurred hero echo background

Interactions

• Headline rises word by word
• Marquee loops every 40 seconds and pauses on hover
• The monolith turns slowly on a loop

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 **Orbital**: A homepage for an AI compute platform: a chrome data monolith turning in fog, a headline in the bottom-left and a logo marquee pinned to the bottom edge. 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 monolith blurred into deep fog.
2. Tiny nav on top with a ghost Sign in and a pill Start building.
3. Headline bottom-left over the dark corner.
4. Logo marquee of invented customer wordmarks along the bottom edge.
5. One supporting section: a single code sample beside three numbers on cost and speed.

Copy to start from, all in `content.ts`: headline "Compute, Composed", subcopy "GPUs on demand, scheduled like code.", primary action "Start building". 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: Quiet power, cold light, restraint.

Palette: void `#07080b`, frost `#e9ecf1`, signal violet `#7c8bff`. Tokens: background `#07080b`, foreground `#e9ecf1`, primary `#e9ecf1` with `#07080b` labels, cards `#14161c`.

Type: Onest for the headline in 600 with tight tracking; Inter for subcopy, buttons and the marquee captions. Load both from https://fonts.googleapis.com/css2?family=Onest:wght@400;600&family=Inter:wght@400;500&display=swap. Small labels in Inter with 0.12em tracking.

Corners: 28px on the hero card, 16px on cards, pills fully round. Spacing: 100svh hero; headline anchored bottom-left with 6vw padding; marquee strip 64px tall along the bottom.

Hero image: A slow-rotating chrome monolith of stacked data plates in fog, darkened by about 40%, vignette at the edges. No text in the frame; lower left kept dark. The series made this image for the design: https://vibld.com/img/cinematic/orbital.webp, 2688 by 1535, alt text "A tower of stacked chrome plates in cold fog". Use it by that absolute URL, with `srcset="https://vibld.com/img/cinematic/orbital-800.webp 800w, https://vibld.com/img/cinematic/orbital-1600.webp 1600w, https://vibld.com/img/cinematic/orbital.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
- Ghost Sign in
- Pill CTA
- Logo marquee
- Code sample panel
- Blurred hero echo background

Motion:
- Headline rises word by word
- Marquee loops every 40 seconds and pauses on hover
- The monolith turns slowly on a loop

The signature motion is: A slow logo marquee. 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 #e9ecf1 on #07080b 16.91:1; text on cards and chips #e9ecf1 on #14161c 15.27:1; secondary text on muted surfaces #b1b3b8 on #1e1f22 7.85:1; secondary text on the page #b1b3b8 on #07080b 9.54:1; label on the primary action #07080b on #e9ecf1 16.91:1; label on secondary surfaces #e9ecf1 on #14161c 15.27:1; label on the accent #07080b on #7c8bff 6.66:1; error label #ffffff on #d93a3a 4.54:1; primary action against the page #e9ecf1 on #07080b 16.91: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: People stock, more than one primary action.
- 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