# Taste Vault — full text
> A curated library of web design references — each one captured as screenshots, analysed down to its palette, typefaces and motion, and published with the build-ready prompt that rebuilds it. Every prompt is free to take.
- Source: https://ai-taste-vault.vercel.app/
- References: 62
- Generated: 2026-10-20
Below is every reference as published: what it is, what it is made of, the
notes taken on it, and the complete prompts that rebuild it. The prompts are
free to take and to adapt.
---
## Halftone statue AI hero
- Page: https://ai-taste-vault.vercel.app/r/x-2
- Original: https://x.com/yasirahmadnoori/status/2106254142704390157/photo/2
- Type: Section
- Tags: AI, Editorial, Generous whitespace, Glassmorphism, Gradient mesh, Hero, Light mode, Logo wall, Marquee, Minimal, Monochrome, Nav bar, Tight tracking, Variable font
- Palette: #FDFDFD, #D8D8D8, #B8B8B7
- Typefaces: TwitterChirp, Apple Color Emoji
- Captured: 2026-10-19
- Rebuilt with: Claude Code · Opus 5.5 · High · skills: frontend-design, emil-design-eng, transitions-dev, gsap, humanizer
- Rebuild: https://ai-taste-vault.vercel.app/v/demo/x-2/index.html
### Prompt — Rebuild
_rebuild · html-css · opus_
#### Halftone statue editorial hero: build spec
A light, monochrome AI landing hero. A serif display headline sits top-left and a short sans paragraph with a dark button sits top-right. Underneath, a grey halftone photo of a classical marble bust rises from the bottom edge of the hero. A faint field of small square dots fills the background, most visible along the bottom. A slightly darker band with a short statement and a row of grey partner wordmarks closes the section. Grey is the only colour, and everything stays quiet, with a lot of empty space.
##### Structure
- Viewport reference: 1440px wide, full-bleed. The page itself has no outer margin, no rounded corners and nothing behind it.
- Content edges: the nav uses 28px side padding. Hero content uses 84px on the left, and the right column starts at x≈907px. The logo band uses 66px on the left and 54px on the right. There is no centred max-width container: everything is placed relative to the 1440 viewport and should scale with it, so use a fluid `max-width: 1440px; margin: 0 auto`.
- Columns: the hero uses a two-column split. The left column (≈84px → ≈600px) holds the headline. The right column (≈907px → ≈1360px, about 450px of text measure) holds the paragraph and button. The large empty gap between them is deliberate.
Sections, top to bottom:
1. **Nav bar.** 90px tall on a tinted band with a 1px bottom hairline. From left to right: a logo glyph with a wordmark, five centred text links, and a dark CTA button on the far right.
2. **Hero.** About 1010px tall on a near-white surface. The headline sits top-left and the paragraph and button top-right. A halftone statue bust is centred horizontally and bleeds off the hero's bottom edge. A masked square-dot grid fills the background. The section ends with a 1px bottom hairline.
3. **Statement and logo wall.** About 200px tall on the same tinted band as the nav. A two-line muted statement sits on the left and four grey partner wordmarks run in a row on the right, all vertically centred.
##### Scroll map
The live page was not motion-captured, so these numbers are read from the still. A 900px-tall viewport is assumed.
1. Nav bar: 90px (0.10 vp). Consumes 90px of scroll. Kind: static. It scrolls away and is not sticky (inferred).
2. Hero: 1010px (1.12 vp). Consumes 1010px of scroll. Kind: entrance (on load), plus an ambient loop on the dots (inferred).
3. Statement and logo wall: about 200px (0.22 vp). Consumes about 200px of scroll. Kind: static, with an optional marquee loop on the logos (inferred).
Total page height: about 1300px (≈1.44 viewports). Nothing pins or stacks.
##### Spacing
**Nav (1).**
- Height 90px, side padding 28px, with the logo and CTA vertically centred.
- Links sit in one row with a 36px gap. The link group is centred on the page's centre line, not between the logo and the CTA.
- CTA button: 50px tall, about 178px wide, 24px horizontal padding.
**Hero (2).**
- The headline starts 86px below the nav hairline, with its left edge at 84px.
- The right-column paragraph's top sits about 34px lower than the headline's top. It does not align to the headline's cap line.
- The paragraph is followed by a 30px gap, then the button. The button is 62px tall, about 190px wide, with 28px horizontal padding.
- The statue's top (where its feathered edge fades in) sits about 330px below the nav hairline, which leaves about 120px of empty space between the headline's last line and the statue. The statue is about 600px wide by 685px tall and is cut flat by the hero's bottom hairline.
- Dot grid pitch: 18px horizontally and 24px vertically, edge to edge across the hero.
**Logo band (3).**
- The statement text starts about 70px below the band's top, with its left edge at 66px.
- The four wordmarks are right-aligned, ending 54px from the right edge, with about 54px between them. They are vertically centred on the statement's two lines.
- The band has about 70px of padding at the bottom.
**Rhythm.** The page uses two surface tones instead of spacing to separate sections: tinted band, then white hero, then tinted band. Each change of surface also gets a 1px hairline. There are no section titles or eyebrows.
##### Type
**Families.**
- Display: a transitional or text serif with moderate contrast, sharp bracketed serifs and a fairly large x-height. Free stand-in: **Newsreader** or **Source Serif 4** (both variable). Use weight 400; do not use bold.
- UI and body: a neo-grotesk sans with slightly rounded, humanist proportions and a single-storey "g". Free stand-in: **Inter** (variable), or Geist.
Body anchor: **17px**.
| Level | Family | Size | Line-height | Letter-spacing | Weight | Notes |
|---|---|---|---|---|---|---|
| Hero headline | Serif | 4.25× → 72px | 1.02 | −0.035em | 400 | 3 lines, max ~520px; tight tracking is essential |
| Hero paragraph | Sans | 1.15× → 20px | 1.55 | −0.005em | 400 | 2 lines, max ~460px (≈55 characters per line) |
| Statement (band 3) | Sans | 1.15× → 20px | 1.55 | −0.005em | 400 | 2 lines, max ~470px |
| Nav links | Sans | 1.06× → 18px | 1.2 | −0.01em | 400 | |
| Buttons | Sans | 1.0× → 17px (nav), 1.06× → 18px (hero) | 1 | −0.005em | 500 | |
| Wordmark (logo) | Sans | 1.6× → 27px | 1 | −0.03em | 500 | Two-part name: first part ink, second part mid-grey |
**Headline treatment.** The first word is set in mid-grey (#7A7A7A) and the rest in near-black ink, all in the same weight and family. Placeholder copy: about 7 words over 3 lines. Line 1 holds 2 words, the first one grey. Line 2 holds 3 words and line 3 holds 2. The text is ragged right and nothing is italic.
**Placeholder copy.**
- Paragraph: one sentence of about 18 words.
- Statement: one sentence of about 15 words.
- Nav links: 1–3 words each.
- Buttons: 2–3 words each.
##### Colour
Strictly monochrome. There is no hue anywhere.
| Hex | Role |
|---|---|
| #FDFDFD | Hero surface. The largest area on the page. |
| #F5F5F4 | Nav and logo-band surface, one step darker than the hero. |
| #E6E6E6 | 1px hairlines under the nav and under the hero. |
| #D8D8D8 | Default colour of the background dot grid. |
| #B8B8B7 | Mid dots in the grid and the light tones of the halftone statue. |
| #6E6E6E | Halftone statue dots at full tone. Also the colour of the partner wordmarks (use about #5E5E5E). |
| #7A7A7A | First word of the headline. |
| #5F5F5F | Paragraph, statement and nav link text. Nav links can go a touch darker (#333). |
| #111111 | Headline ink, logo ink and logo glyph. |
| #2A2A2A → #3C3C3C | Button fill, as a subtle vertical gradient (lighter at the top). |
| #FFFFFF | Button label. |
**Accent.** The only accent is the charcoal button fill. It may appear in exactly three places: the nav CTA, the hero CTA, and 4–6 individual dots scattered in the grid (dark #4A4A4A "pixels"). It appears nowhere else.
##### Surface
- **Borders.** The page uses only 1px #E6E6E6 hairlines, and only horizontally at section boundaries. Cards, links and logos have no borders.
- **Radii.** The nav CTA uses 8px and the hero CTA 10px. Background dots use 1px, so they read as almost-square. Nothing else on the page is rounded.
- **Buttons.**
- Fill: the vertical gradient from the Colour section.
- Highlight: an inset 1px top edge in rgba(255,255,255,0.12).
- Outer shadow: `0 4px 10px rgba(0,0,0,0.18), 0 1px 2px rgba(0,0,0,0.2)`.
- This soft, glossy, slightly glassy depth is the page's only skeuomorphic touch.
- **Shadows.** Nothing else on the page has a shadow.
##### Imagery
1. **Halftone statue bust.** There is one. Medium: **photo**, a photograph of a classical marble portrait bust that has been halftone-processed.
- Subject: a Roman-style male head and shoulders in three-quarter view, gazing slightly off-camera to the left, with short curled hair and a toga draped over one shoulder.
- Treatment: rebuilt as a regular halftone of round dots on about a 4–5px pitch. Dot size carries the tone, from about #B8B8B7 in the highlights to #5A5A5A in the shadows, on a transparent or white ground.
- Edges: the top and sides feather out softly into white, with no hard silhouette.
- Size and position: about 600 × 685px (≈0.88:1). Its centre sits about 30px left of the page centre. The bottom is cropped flat by the hero's bottom edge. It sits behind the text layer but above the dot grid.
- Build: if you are generating it, use a grayscale bust photo, apply a CSS/SVG halftone (or pre-process it to dots), and mask it with a radial plus top linear gradient to feather the edges.
2. **Background dot grid.** There is one field. Medium: **vector**.
- Dots: 3.5px squares with a 1px radius, on an 18 × 24px pitch, in #D8D8D8. About 15% of grid cells are randomly left empty, and a few dots step up to #B8B8B7 or #4A4A4A.
- Visibility: masked with a vertical gradient. It is at full strength across the bottom 45% of the hero, almost invisible through the middle band where the text and the statue's face sit, and faint (about 25%) in the top 100px under the nav.
- Build: an SVG pattern or a `radial`/`conic`-free `background-image` with a `mask-image` linear gradient.
3. **Logo glyph.** There is one, at the start of the nav. Medium: **vector**. Five solid dots in an X arrangement (four corners plus centre), about 20px square, in ink.
4. **Partner wordmarks.** There are four, in band 3. Medium: **vector**. Generic grey wordmarks, each about 26–30px cap height and 110–190px wide, in #5E5E5E. Mix the styles: one has a small pill or dot mark before it, one is a lighter rounded lowercase, one a bold geometric lowercase, one a semibold title case. Use placeholder names; do not use real brands.
##### Motion
No motion report exists for this page. Everything below is **(inferred)**, and every timing is not measured.
**1. Nav bar**
- kind: static (inferred)
- what moves: nothing on scroll
- from → to: none
- range: none
- reduced motion: no change
**2. Hero**
- kind: entrance (inferred), plus an ambient loop on the grid
- what moves:
- (a) Headline lines.
- (b) Paragraph, then the button.
- (c) The statue.
- (d) A few grid dots that twinkle.
- from → to:
- (a) Opacity 0 → 1, translateY 16px → 0.
- (b) Opacity 0 → 1, translateY 12px → 0.
- (c) Opacity 0 → 1 and scale 1.02 → 1. Optionally the halftone resolves from a coarse dot pitch to a fine one.
- (d) Grid dots: randomly selected dots swap between #D8D8D8 and #4A4A4A, one at a time.
- range:
- Entrance plays once on page load.
- Duration not measured; use 600–900ms.
- Easing: an ease-out curve such as cubic-bezier(0.2, 0.7, 0.2, 1).
- Stagger not measured; use 60–100ms between headline lines. The right column starts about 200ms in, and the statue about 300ms in.
- The dot twinkle loops indefinitely. Each dot holds for 1.5–3s (not measured).
- reduced motion: everything appears at its final state with no translate, scale or twinkle. The scattered dark dots stay fixed.
**3. Statement and logo wall**
- kind: static (inferred). An optional marquee may loop the wordmarks horizontally.
- what moves: if you use the marquee, the wordmark row only.
- from → to: translateX 0 → −50% of a duplicated track, linear.
- range: continuous. One cycle takes 30–45s (not measured). The row's left edge is masked with a 60px fade.
- reduced motion: no marquee. Show the four wordmarks static and right-aligned, as described in Spacing.
**Interaction transitions** (not part of the scroll choreography):
- Nav links: on hover, colour goes #5F5F5F → #111 over 150ms. No underline.
- Buttons:
- Hover: fill lightens one step (#333 → #444) and the shadow grows slightly, over 180ms ease-out.
- Press: translateY 1px and the shadow tightens.
- Focus: a visible 2px #111 outline offset by 2px.
- Wordmarks: on hover, opacity 0.7 → 1 over 200ms. Only when they are static.
##### Responsive (below 640px)
**Nav**
- Keep the logo and the CTA, and shrink the CTA to 40px tall with 15px text.
- Collapse the five links into a 2-line hamburger icon.
- Nav height becomes 64px and side padding 20px.
**Hero**
- Becomes a single column with 20px side padding.
- The headline drops to 2.5× → about 42px with a 1.05 line-height and keeps its tight tracking. It wraps to 3–4 lines.
- The paragraph (17px) and button follow underneath, with 24px above the paragraph and 20px between the paragraph and the button. The button goes full width or stays inline at 52px tall.
- The statue scales to about 92vw wide, stays centred and still bleeds off the bottom edge. Hero height becomes auto, and the statue takes the bottom about 55% of it.
- The dot grid keeps its 18 × 24px pitch and does not scale down.
**Logo band**
- Stacks: the statement goes on top at 17px, with the wordmarks below as a 2×2 grid or a marquee, at about 22px cap height. Use 48px vertical padding.
##### Don'ts
- **Mat.** Don't add the presentation mat. No grey frame around the page, no rounded page corners, no drop shadow around a "browser". The design is edge to edge.
- **Colour.** Don't introduce any hue: no blue links, no purple AI gradient, no glow, no coloured accent. The page works because it is entirely grey.
- **Headline weight and family.** Don't set the headline in bold or in a sans. It is a regular-weight serif with very tight tracking (about −0.035em) and a near-1.0 line-height. Loose tracking or a 1.2 line-height kills the editorial feel.
- **Headline grey word.** Don't colour the whole headline grey, and don't make the grey word italic or a different font. Only the first word is grey, and it is the same face and weight.
- **Statue.** Don't use a regular grayscale photo, a duotone, an outline illustration or an AI-glow render. It must be a visible dot halftone with feathered edges, and it must be cut off by the section's bottom edge. Don't float it with a margin under it, and don't put it in a card or frame.
- **Dot grid.** Don't make the dots round blobs, don't make them dense, and don't run them at even opacity across the hero. They are tiny near-square dots on a slightly non-square pitch (wider vertically), heavily masked so the middle of the hero stays almost clean. Don't animate the whole grid; only a handful of dots change.
- **Centring.** Don't centre the hero text. The headline sits hard left, the paragraph and button sit in the right column, and the space between them stays empty.
- **Buttons.** Don't make them pill-shaped, outlined or flat black. They are charcoal rectangles with an 8–10px radius, a faint top highlight and a soft drop shadow.
- **Extra UI.** Don't add an eyebrow, a badge, a "New" chip, gradient text, card grids, stats or a second CTA. The hero has exactly one headline, one paragraph and one button.
- **Logo wall.** Don't put the logos in boxes, don't give them a "Trusted by" heading, and don't use full-colour brand logos. They are flat mid-grey, bare and right-aligned beside a plain two-line statement.
- **Separators.** Don't separate sections with big padding or shadows. Use the change of surface tone (#FDFDFD vs #F5F5F4) plus a single 1px hairline.
- **Text size.** Don't shrink the body or nav text below 16px to make it look elegant. The paragraph text is 20px, and the elegance comes from the restrained palette and the whitespace.
### Imagery — already generated
These pictures were made for this design and are hosted at the URLs below.
Use them as the `src` exactly as written, and keep the alt text. Do not
generate your own, do not reach for a stock library or a placeholder
service, and do not feed the Imagery section above back to an image model —
that work is done. Size and crop them with CSS (`object-fit: cover`) rather
than assuming their dimensions, and download them into the project if you
would rather not hotlink.
- https://ai-taste-vault.vercel.app/v/demo/x-2/images/01-halftone-statue-bust.webp — Grey dot-halftone image of a classical Roman marble bust, head and draped shoulders, fading softly into white
### Image prompts
What each picture above was generated from, for anyone changing one.
**Grey dot-halftone image of a classical Roman marble bust, head and draped shoulders, fading softly into white** (`01-halftone-statue-bust`)
MEDIUM AND FINISH: A black-and-white photograph of a classical marble portrait bust, turned into a coarse, regular mechanical halftone. The whole image is made of round grey dots on one even, square grid. Each dot's size sets the tone, as in a newspaper print enlarged under a loupe. The grid is visible everywhere across the figure, about 130 dots across the frame width, so each dot is clearly separate at full size. There is no continuous-tone shading between the dots and no paper texture. It is a flat, clean, digital halftone. COLOUR AND VALUE: Strictly neutral grey with no hue and no warm or cool tint. The ground is flat near-white #FDFDFD. The darkest dots are mid-dark grey #5A5A5A, and nothing in the frame is darker than #5A5A5A. There are no blacks, no solid dark areas and no deep shadows. Shadow areas are just larger grey dots that nearly touch. Highlights are tiny pale dots around #C8C8C8 that fade toward white. Most of the figure sits in the middle range, #8A8A8A to #B8B8B7, so the image reads as soft, quiet and low-contrast. EDGES: The top of the head and both sides feather out gradually into the flat #FDFDFD ground. The dots shrink and thin out over a wide soft band, so there is no hard silhouette or outline anywhere. The outer quarter of the frame on the left and right, and the top fifth, are empty #FDFDFD. The bottom edge is different: the drapery and chest run at full tone straight off the bottom of the frame, as if cut flat by the bottom border. SUBJECT: A Roman-style marble portrait bust of a clean-shaven man with short, tightly curled hair, shown from the top of the head down to the upper chest. The face is almost frontal, turned very slightly, with the gaze directed a little off-camera to the viewer's left and slightly upward. His expression is calm and serious, with a strong nose and a firm mouth. A toga is draped in heavy diagonal folds over his left shoulder and across his chest. The folds are rendered as bands of denser and lighter dots. Behind the bust there is nothing but the flat white ground. COMPOSITION: The bust is centred horizontally. The crown of the head sits about 15% down from the top, and the face lies in the upper-middle of the frame. The shoulders and drapery widen toward the bottom and fill about 80% of the frame width at the bottom edge. The space around the head stays clean and white. AVOID: a continuous-tone grayscale photo, a duotone or any colour tint, sepia, black backgrounds, vignettes, dramatic rim light, deep black shadows, high-contrast chiaroscuro, a hard cut-out silhouette, an outline or line-art illustration, glitch or neon AI glow effects, scanlines, square pixels, a visible pedestal or plinth, any frame or border, paper grain, and text taken from the reference screenshot. Use the reference only for its grey palette, its soft dot-halftone finish and its feathered edges. Output a square 1:1 frame, 1024x1024. No text, no lettering, no logos, no watermarks, no UI.
---
## Timso hybrid team scheduling landing
- Page: https://ai-taste-vault.vercel.app/r/timso-hybrid-team-scheduling-landing
- Original: https://br.pinterest.com/pin/621004236126320000/
- Type: Landing page
- Tags: CTA band, Feature callout, Footer, Glassmorphism, Hero, High contrast, Integrations, Light mode, Logo wall, Nav bar, Pastel, Restrained motion, SaaS
- Palette: #EDEEE9, #020202, #C9C9C7, #DBF689, #461A46
- Captured: 2026-10-16
- Rebuilt with: Claude Code · Opus 5.5 · Extra high · skills: frontend-design, emil-design-eng, transitions-dev, gsap, humanizer
- Rebuild: https://ai-taste-vault.vercel.app/v/demo/timso-hybrid-team-scheduling-landing/index.html
### Prompt — Rebuild
_rebuild · html-css · opus_
#### Light pastel SaaS landing: line-art crowds, lime glow, floating UI cards
Build a 1440px-wide, light-mode B2B landing page. The page is calm and quiet: an off-white grey-green background, near-black ink, white cards with large radii, and one acid-lime accent. The lime mostly appears as soft blurred glows behind black-and-white hand-drawn crowds of people. Every headline is lowercase at regular weight, and the type hierarchy is flat. Product features are shown as overlapping fragments of app UI built in HTML/CSS. Feature rows alternate text-left and text-right. Only the hero and the closing call to action are centred. Motion is limited to one-time entrances.
No motion report exists for this page. Every motion value below and every scroll-map number is **(inferred)** from a single full-page still.
##### Structure
- **Canvas:** 1440px design width. The page background `#EDEEE9` runs edge to edge. There is no outer margin, no frame, and no rounded page corners.
- **Nav gutter:** 80px left and right.
- **Content container:** 1240px, centred (100px gutters at 1440). It uses a 12-column grid with 24px gutters. Cards and panels span the full 1240px.
- **Inner text line:** cards have 72px side padding, so card text starts at x = 172. The footer aligns to the same x = 172 / x = 1268 lines.
- **Feature rows:** two columns. The text column is about 450–540px wide. The UI composite takes the rest. The side alternates from row to row.
Sections, top to bottom:
1. **Nav bar** (y 0–112)
- Left: a bold lowercase wordmark, 5–6 letters.
- About 80px to its right: two one-word text links, about 60px apart. They sit next to the logo, not centred and not right-aligned.
- Far right: a black primary button, 4–5 words (an offer).
- Background is transparent over the page. No border, no shadow.
2. **Hero** (y 112–805)
- Centred stack. Starting about 110px below the nav: H1, two lines, 7–9 words.
- 32px below: a toggle row with a short label (2–3 words) and a switch shown in the off state.
- About 110px below that: a row of 4 white speech bubbles, each holding a 1–2 line question of 6–10 words. They sit at heights that vary by 0–20px, and each tail points down at a head.
- Directly under the bubbles: **crowd A**, about 15 line-art people standing shoulder to shoulder, about 1100 × 285px, centred. The crowd's bottom runs about 30px *behind* the top of card 3.
- A lime radial glow sits behind the lower half of the crowd.
- One extra figure sits on the top-right corner of card 3 (x ≈ 1250–1350) with a laptop on its knees and its legs hanging over the card's face.
3. **Coordination feature card** (y 805–1320)
- White card, 1240 × 515, padding 88px top and 72px sides.
- Left column (x 172–620):
- H2, 3 lines, 6–8 words.
- 32px gap, then body text, 2 lines (about 20 words).
- 32px gap, then a muted caption, 2 lines (about 10 words).
- 16px gap, then two chat-app integration marks (icon + wordmark, about 22px tall, 32px apart).
- Right side (x 753–1200): an app-mock composite anchored to the card bottom.
- A plum desktop window, about 440 × 360, runs nearly flush to the card's bottom edge.
- A white phone screen, 232 × 450, overlaps the window's right third. The phone's top is 60px below the card top and its right edge is at x = 1200.
4. **Integrations strip** (y 1320–1520)
- Centred: a muted one-line caption, 6–8 words.
- 24px below: a row of 4 partner wordmarks in their own colours, about 24px tall, 48px apart.
- No box and no divider.
5. **Custom statuses feature** (y 1520–2060). UI on the left, text on the right.
- **Left composite** (x 120–741, about 400px tall):
- A white status-list card, 250 × 320.
- A white request-modal card, 376 × 400, overlapping the list's right edge by about 10px.
- The list's second item is lifted out as a white floating pill. It pokes 20px past the list's left edge and sits above both cards.
- **Right column** (x 805–1340), vertically centred:
- H2, 3 lines, 5–7 words.
- 40px gap, then a lead line of 4–6 words.
- 24px gap, then body text, 2 lines (about 16 words).
- 32px gap, then a black button, 4–5 words.
6. **Social-proof + office-space panel** (section y 2060–3260; panel y 2099–3205, 1240 × 1106)
- A translucent white "glass" panel: padding 84px top, 72px sides, 96px bottom.
- A lime glow behind its bottom-right half bleeds through the panel and slightly past its bottom edge.
- **6a:**
- H2, 2 lines, 8–10 words, wide, at most about 36 characters per line.
- 28px gap, then body text, 2 lines (about 14 words, max 460px).
- 48px gap, then a **logo wall** of 12 client wordmarks in 2 rows of 6, spaced evenly (space-between) across 1096px. Logos are about 26–30px tall, in their native brand colours, with about 100px from row to row.
- **6b** starts about 140px lower. Text on the left, UI on the right.
- Left:
- H2, 2 lines, 4–6 words.
- 28px gap, then body text, 3 lines, narrow (max 300px, about 16 words).
- 32px gap, then a black button, 2–3 words.
- Right, part 1 (x 703–923): a two-line label pair (zone name + "n free of m" meta) above a 2×2 grid of 96px tiles. Three tiles show people; the bottom-right tile is a lime "+".
- Right, part 2: a white booking-form card, 365 × 455, at x 908–1273. Its top sits about 30px above the grid, and it overlaps the grid by about 16px.
7. **Analytics feature** (y 3260–3920). UI on the left, text on the right.
- **Cluster** (x 100–812, about 470px tall):
- Card A, "workload", 265 × 265, at top-left, in front.
- Card B, a bar chart, 440 × 280. It starts about 95px right of and 190px below A's top-left corner, so it sits partly behind A.
- Card C, a profile/score card, 345 × 240, at top-right, about 25px down. It overlaps B's top-right.
- A lime area-chart blob sits on C's bottom-right and spills outside it.
- **Text** (x 894–1340): H2 (3 lines, 5–6 words), lead line, 2-line body, black button. Same spacing as section 5.
8. **Two-up capability cards** (section y 3920–4580; cards y 3993–4514, 521px tall)
- Grid of 7fr / 5fr (about 705 + 511) with a 24px gap.
- White cards, padding 64px.
- Each card, top to bottom:
- An outline device illustration, about 120 × 100.
- About 60px gap, then H2, 2 lines, 4–6 words.
- 28px gap, then 3 bullets of 4–7 words each, with "•" markers.
9. **Closing CTA** (y 4580–5234)
- Centred H2, 2 lines, 7–9 words. 24px gap, then a black button, 2–3 words.
- About 80px below: one speech bubble (a 4–6 word question) above one head.
- Then **crowd B**: about 12 figures, some holding laptops, phones or mugs, about 1100 × 340. Their feet stand on the top edge of panel 10.
- A lime glow sits behind the crowd's lower half.
10. **Signup panel** (y 5234–5661)
- Black panel, 1240 × 427, padding 94px top and bottom, 72px sides.
- Crowd B's rightmost figure sits on the panel's top edge (x ≈ 1100–1290), legs hanging over the black face.
- Content, top to bottom:
- White H2, 2 lines, 6–8 words.
- 20px gap, then a muted caption, 1 line (about 10 words).
- 28px gap, then a form row, all fields 64px tall with 16–20px gaps: an email input (400px), a select (385px, placeholder is a 6–7 word question, chevron on the right), and a lime submit button (126px, 1 word).
11. **Footer** (y 5661–5833)
- 40px top padding, 48px bottom.
- Left, at x = 172: a one-word text link. 12px below it, a muted line of 8–10 words ending in a bolder contact email.
- Right, ending at x = 1268: a small wordmark. 12px below it, a language switcher of three two-letter codes, 24px apart.
##### Scroll map
All values are (inferred), using a 900px viewport. No section pins or stacks, so the scroll each section consumes equals its height.
1. Nav: 112px · 0.12 vp · consumes 112px · static
2. Hero: 693px · 0.77 vp · consumes 693px · entrance
3. Coordination card: 515px · 0.57 vp · consumes 515px · entrance
4. Integrations strip: 200px · 0.22 vp · consumes 200px · entrance
5. Custom statuses: 540px · 0.60 vp · consumes 540px · entrance
6. Social-proof + office panel: 1200px · 1.33 vp · consumes 1200px · entrance
7. Analytics: 660px · 0.73 vp · consumes 660px · entrance
8. Two-up cards: 660px · 0.73 vp · consumes 660px · entrance
9. Closing CTA + crowd: 654px · 0.73 vp · consumes 654px · entrance
10. Signup panel: 427px · 0.47 vp · consumes 427px · entrance
11. Footer: 172px · 0.19 vp · consumes 172px · static
**Total page height ≈ 5830px ≈ 6.5 viewports.**
##### Spacing
- **Between sections:** 96–160px, typically 120px.
- Card 3 bottom → caption 4: 85px.
- Logos 4 → section 5: 110px.
- Section 5 → panel 6: 95px.
- Panel 6 → cluster 7: 150px.
- Section 7 → cards 8: 160px.
- Cards 8 → CTA 9 headline: 125px.
- Panel 10 → footer: 40px.
- **Inside a text column:**
- H2 → body: 28–32px.
- H2 → lead line: 40px.
- Lead → body: 24px.
- Paragraph → paragraph: 16px.
- Body → button: 32px.
- Caption → logo row: 16–24px.
- **Card padding:** 88/72px on card 3, 84/72/96px on panel 6, 64px on cards 8, 94/72px on panel 10.
- **Overlap offsets** inside UI composites: −10 to −40px. Cards always overlap each other; they never sit side by side with a gap.
- **Buttons:** 56px tall, 24px horizontal padding.
- **Form fields:** 64px tall, 20px horizontal padding.
- **Mock-card internal padding:** 20–24px. Rows inside mocks: 10–14px apart.
- **Logo wall:** spaced evenly (space-between) across the full inner width; about 70px vertical gap between rows.
##### Type
- **Family class:** a neutral grotesk with geometric leanings, open apertures and a double-storey "a". Free stand-in: **Manrope** (400/500/700). Fallback: Inter.
- **One family only.**
- **Case:** all copy is lowercase, including the nav, buttons, labels and headlines. The only exception is the logos.
| Level | Ratio to body | Size | Line-height | Letter-spacing | Weight | Notes |
|---|---|---|---|---|---|---|
| H1 (hero) | 2.8× | 48px | 1.08 | −0.01em | 400 | centred, 2 lines, max-width 640px (≈26 characters per line) |
| H2 (sections, cards, panels) | 2.6× | 44px | 1.08 | −0.01em | 400 | 2–3 lines; 20–24 characters per line in feature columns (max 540px), up to 36 in the panel-6 headline (max 800px) |
| Body / lead | 1× | 17px | 1.6 | 0 | 400 | max-width 460px (≈48 characters); narrow variant 300px |
| Bullet list | 0.94× | 16px | 1.6 | 0 | 400 | "•" markers, no icons |
| Nav link | 0.94× | 16px | 1 | 0 | 400 | |
| Button label | 0.94× | 16px | 1 | 0 | 500 | |
| Caption / meta / placeholder | 0.82× | 14px | 1.45 | 0 | 400 | muted colour |
| Mock card title | 0.88× | 15px | 1.3 | 0 | 500 | inside UI fragments |
| Mock score numeral | 1.65× | 28px | 1 | −0.01em | 500 | the number in the ring |
| Micro (mocks, bubbles, chart labels) | 0.7× | 12px | 1.35 | 0 | 400/500 | the floor, never smaller |
| Wordmark (nav) | 1.9× | 32px | 1 | −0.03em | 700 | footer wordmark is 24px |
| Language codes | 0.82× | 14px | 1 | 0 | 400 / 600 (active) | |
The hierarchy is deliberately flat: headlines are only about 2.6× the body. The page gets its drama from the illustrations and whitespace, not from type size.
##### Colour
| Hex | Role | Coverage / where |
|---|---|---|
| `#EDEEE9` | Page background | ≈65% of the surface, everywhere behind cards |
| `#FFFFFF` (read from stills) | Card and mock surfaces | Card 3, cards 8, all UI fragments, speech bubbles, signup inputs; panel 6 at about 50% opacity |
| `#020202` | Ink | All text, line-art strokes and black fills, every primary button, the signup panel fill, toggle knob outline |
| `#C9C9C7` | Neutral grey | Toggle track (off), skeleton bars in mocks, chart tracks, field icons, hairlines inside mocks |
| `#7C7D78` (inferred) | Muted text | Captions, meta, placeholders, inactive language codes; `#8C8C88` on the black panel |
| `#DBF689` | **The single accent (lime)** | Allowed: radial glows behind crowds A and B and behind panel 6; fills of in-mock action buttons; the signup submit button; the phone header bar and date chips; chart fills, the ring arc and the area chart; the "+" tile; fills inside the section-8 device illustrations. Never on text, the nav CTA, section buttons, or as a full card background. |
| `#461A46` | Deep plum | Only the desktop app window in section 3. Use a lighter plum `#5E335E` (inferred) for its skeleton bars. Nowhere else. |
| Data pastels (inferred): cyan `#8EE3F5`, pink `#F7A8CF`, peach `#FFC08A`, butter `#F6E27A` | Chart and status-icon colours | Only inside the analytics cards and the small status icons, at small sizes |
Glow recipe:
- `radial-gradient(ellipse at center, #DBF689 0%, rgba(219,246,137,.55) 40%, transparent 70%)` on an element with `filter: blur(40px)`.
- Hero glow: about 1300 × 220, spanning y ≈ 650–860, centred.
- Crowd B glow: spanning y ≈ 5030–5240.
- Panel-6 glow: x 575–1370, y 3030–3240, placed behind the panel.
##### Surface
- **Borders:** none on cards, panels or buttons. Fields inside mocks are filled `#F3F4F0` with no stroke; signup inputs are plain white on black.
- **Radii:**
- Section cards and panels (3, 6, 8, 10): 32px.
- UI mock cards: 20–24px.
- Phone screen: 22px.
- Desktop window: 16px.
- People tiles: 16px.
- Buttons and inputs: 14px. These are rounded rectangles, not full pills.
- Date chips: 8px.
- Speech bubbles: 10px.
- Toggle and avatars: fully round.
- **Shadows:**
- Section cards: a faint ambient shadow, `0 20px 60px rgba(2,2,2,.05)`.
- Floating mock cards and the phone: `0 16px 40px rgba(2,2,2,.10)`.
- The lifted list pill: `0 8px 24px rgba(2,2,2,.12)`.
- No hard or offset shadows.
- **Glass:** panel 6 is `rgba(255,255,255,.5)` with `backdrop-filter: blur(24px)` over its lime glow. This is the only translucent surface.
##### Imagery
- **Crowd A (hero) and crowd B (closing):**
- Monochrome, hand-drawn line-art people. Roughly 2px black strokes with flat solid black or white fills: black hair and clothes, white skin. No greys and no colour.
- Diverse bodies, casual clothes, relaxed poses. In crowd B, several figures hold laptops, phones or mugs.
- Crowd A is about 3.9:1 (1100 × 285). Crowd B is about 3.2:1 (1100 × 340).
- Each crowd has one figure sitting on the edge of the card or panel below it.
- Free stand-in: Open Peeps (CC0), composed into a row. Colour comes only from the glow behind them.
- **Speech bubbles:** CSS. White, 10px radius, 8 × 12px padding, 12px text, a small downward tail. No shadow.
- **Desktop window mock** (section 3):
- Plum, 16px radius, with three traffic-light dots (`#FF5F57` / `#FEBC2E` / `#28C840`, 10px) at top-left.
- The left half is a list of rounded skeleton bars, 10px tall.
- One highlighted row has a 32px avatar, a white name at 13px, and a lime status dot with a muted 12px status.
- **Phone mock** (section 3):
- White.
- A lime header bar holding a tiny wordmark and 2 icons.
- A strip of 5 lime-tint date chips (day numeral + weekday).
- A notice pill with an avatar stack.
- Three status groups, each with a 12px label. The first group has rows of a 24px avatar, a name and a status line. The other two groups show overlapping stacks of 5 avatars.
- **Status list + request modal** (section 5):
- The list has 5 rows, each a 16px pastel icon plus a 13px grey label.
- The modal has, in order:
- an icon + 15px title;
- two column labels over two date fields joined by an arrow, each field with a calendar glyph;
- a label above a field holding an avatar chip, a name and a "×" clear control;
- a full-width lime button, 48px tall, with a black label.
- **People tiles** (section 6b):
- Real headshot photos cropped to 56px circles, on neutral backgrounds.
- Under each photo: a name (12px, 600) and a role (12px, muted).
- The fourth tile is lime-tinted with a 40px lime circle holding a black "+".
- **Booking card** (section 6b): three labelled fields (location with a pin glyph, date with a calendar glyph, duration with a clock glyph plus a small option text above), then a full-width lime button.
- **Analytics cards** (section 7):
- **A:** title, a legend row of tiny coloured dots, then a bubble chart. A large lime circle carries a percentage, with smaller cyan and peach circles overlapping it, softly glowing.
- **B:** title and legend, then 5 month groups of vertical rounded bars, about 10px wide, in lime, butter, pink, cyan and grey, with 12px month labels.
- **C:** a 40px avatar, a 17px name and a 12px role. A ring gauge with a lime arc on a grey track, about 82% full, holds the 28px numeral and a micro caption. A smooth lime area chart bleeds out of the bottom-right corner.
- **Device illustrations** (section 8): black 2px outline drawings, about 120 × 100. Card 1 shows a laptop with a phone beside it. Card 2 shows a tablet or phone with a toggle/lock motif. The screens are filled with lime blocks.
- **Wordmarks:** placeholder SVG wordmarks in their native colours, about 22–30px tall, never boxed.
- **Build all UI fragments in HTML/CSS**, not as raster screenshots.
##### Motion
Section order matches Structure. Nothing is scroll-linked and nothing reverses on scroll-up. Every entrance plays once.
**1. Nav bar**
- kind — static
- what moves — nothing
- from → to — none
- range — none
- reduced motion — identical
**2. Hero**
- kind — entrance (inferred)
- what moves — H1 lines, toggle row, crowd A, its glow, speech bubbles
- from → to:
- H1 and toggle: opacity 0 → 1, translateY 16px → 0.
- Crowd: opacity 0 → 1, translateY 24px → 0.
- Glow: opacity 0 → 1, scale 0.92 → 1.
- Bubbles: opacity 0 → 1, scale 0.85 → 1, with the transform origin at the tail.
- range — once, on page load.
- Duration: not measured (500–800ms). Easing: not measured; use a soft ease-out.
- Stagger: H1 → toggle → crowd + glow → bubbles at 80–120ms steps; 60–100ms between bubbles.
- reduced motion — everything renders at its end state with no transforms (an opacity fade of ≤150ms at most)
**3. Coordination card**
- kind — entrance (inferred)
- what moves — the card with its text, then the phone mock. The sitting figure moves with the card.
- from → to:
- Card: opacity 0 → 1, translateY 32px → 0.
- Phone: opacity 0 → 1, translateY 24px → 0.
- range — once, when the card's top reaches 85% of the viewport. Duration not measured (600–800ms), ease-out. The phone follows 100–150ms after the card.
- reduced motion — static, fully visible
**4. Integrations strip**
- kind — entrance (inferred)
- what moves — caption, then the 4 wordmarks
- from → to — opacity 0 → 1, translateY 12px → 0
- range — once, when the strip's top reaches 90% of the viewport. Duration not measured (400–600ms), ease-out. Wordmarks stagger 50–80ms.
- reduced motion — static
**5. Custom statuses**
- kind — entrance (inferred)
- what moves — status list card, request modal, lifted pill, then the right-column text children
- from → to:
- List and modal: opacity 0 → 1, translateY 24px → 0.
- Lifted pill: opacity 0 → 1, translateX −12px → 0, last.
- Text children: opacity 0 → 1, translateY 16px → 0.
- range — once, when the section's top reaches 80% of the viewport. Duration not measured (500–700ms), ease-out. Stagger 80–120ms.
- reduced motion — static
**6. Social-proof + office panel**
- kind — entrance (inferred)
- what moves — the panel, the 6a text, the logo-wall rows, then the 6b text, people tiles and booking card
- from → to:
- Panel: opacity 0 → 1, translateY 32px → 0.
- Logo rows: opacity 0 → 1, translateY 12px → 0, row by row.
- Tiles: opacity 0 → 1, scale 0.95 → 1.
- Booking card: opacity 0 → 1, translateY 24px → 0.
- range:
- The panel and 6a play once when the panel's top reaches 80% of the viewport.
- 6b plays once when its own top reaches 80%.
- Duration not measured (500–700ms), ease-out. Stagger 60–100ms.
- reduced motion — static
**7. Analytics**
- kind — entrance (inferred)
- what moves — cards A, B and C, the area-chart blob, then the text column
- from → to — cards: opacity 0 → 1, translateY 24px → 0. Chart internals (bars, ring, area) stay static; nothing in the still suggests they animate.
- range — once, when the cluster's top reaches 80% of the viewport. Duration not measured (500–700ms), ease-out. Stagger A → B → C at 100ms, then the text at 80ms steps.
- reduced motion — static
**8. Two-up cards**
- kind — entrance (inferred)
- what moves — the two cards
- from → to — opacity 0 → 1, translateY 24px → 0
- range — once, when the row's top reaches 85% of the viewport. Duration not measured (500–700ms), ease-out. Stagger 100ms, left then right.
- reduced motion — static
**9. Closing CTA**
- kind — entrance (inferred)
- what moves — H2 and button, crowd B with its glow, the speech bubble
- from → to:
- H2 and button: opacity 0 → 1, translateY 16px → 0.
- Crowd: opacity 0 → 1, translateY 24px → 0.
- Glow: opacity 0 → 1.
- Bubble: opacity 0 → 1, scale 0.85 → 1, last.
- range — once, when the H2's top reaches 80% of the viewport. Duration not measured (500–800ms), ease-out. Stagger 100ms.
- reduced motion — static
**10. Signup panel**
- kind — entrance (inferred)
- what moves — the panel (the sitting figure moves with it), then the form fields
- from → to:
- Panel: opacity 0 → 1, translateY 24px → 0.
- Fields: opacity 0 → 1, translateY 8px → 0.
- range — once, when the panel's top reaches 85% of the viewport. Duration not measured (500–700ms), ease-out. Fields stagger 60ms.
- reduced motion — static
**11. Footer**
- kind — static
- what moves — nothing
- from → to — none
- range — none
- reduced motion — identical
###### Interaction transitions (not scroll choreography)
- **Black buttons:**
- Hover: background → `#2A2A2A`, 150–200ms ease.
- Press: scale 0.98.
- Focus-visible: 2px `#020202` outline with a 3px offset.
- **Lime buttons:**
- Hover: background → `#CDEE6A`.
- Press: scale 0.98.
- Focus-visible on the black panel: 2px lime outline.
- **Nav and footer links:** hover shows a 1px underline at a 4px offset, 150ms.
- **Hero toggle:**
- On click, the knob slides translateX by the track width minus the knob, and the track goes `#C9C9C7` → `#DBF689` (inferred), 200–250ms ease-in-out.
- Anything else it changes on the page: not measured. Keep the effect to the switch.
- **Signup inputs:** on focus, a 2px lime ring and no layout shift.
- **Select:** native list. The chevron rotates 180° on open (inferred), 150ms.
- **Language switcher:** hover changes muted → black in 150ms. The active code stays black at weight 600.
- **Logos and mock cards:** no hover effects.
##### Responsive (below 640px)
- **Layout:**
- Side padding 20px, fluid container.
- Cards and panels: 24px radius, padding 28px top/bottom and 24px sides.
- Section gaps: 64–80px.
- **Type:**
- Body 16px.
- H1 34px (2.1×), line-height 1.12.
- H2 30px (1.9×), line-height 1.12.
- Captions 13px, micro text 12px.
- Buttons 44px tall with 14px labels.
- **Nav:**
- 64px tall, wordmark 24px.
- Drop the two text links.
- Keep the CTA, shortened to 2–3 words.
- **Crowds A and B:**
- Render each at about 900px wide inside an `overflow: hidden` band, centred, so 7–8 figures show (about 240px tall).
- Keep the figure sitting on the edge, at a smaller size, at the right edge of the card or panel.
- Hero speech bubbles drop to 2.
- **Card 3:** stack text first, then the mock composite, scaled to about 0.7 and centred, with the plum window peeking out behind the phone.
- **Feature rows 5, 6b and 7:**
- Stack text first, then the UI composite.
- Halve the overlap offsets and scale the composite to fit 100% of the width.
- In section 5, drop the lifted pill's leftward overhang.
- **Logos:**
- Integrations strip: 2×2.
- Logo wall: 3 columns × 4 rows, logos 20px tall, 32px row gap.
- **Section 8:** single column, 16px gap.
- **Signup form:** fields stack full width, 56px tall, 12px gap. The submit button goes full width.
- **Footer:** stacks. The left block comes first; the wordmark and language switcher follow, left-aligned, 24px below.
##### Don'ts
- **Type**
- Don't capitalise anything. No Title Case or Sentence case in headlines, buttons or nav. All copy is lowercase.
- Don't bold headlines or enlarge the hero. H1 stays at about 48px and weight 400. A 72–96px hero ruins the quiet tone.
- Don't add eyebrow labels, kicker tags, gradient text, stat counters, testimonials or a pricing table. None exist here.
- Don't mix in a serif, a mono or a second sans.
- **Colour**
- Don't use lime on text, on the nav CTA or on section buttons. Primary buttons are black. Lime belongs to glows, in-mock actions, charts and the single signup submit.
- Don't put the plum anywhere except the desktop window mock.
- Don't add a blue or purple SaaS gradient, a mesh background or a coloured hero. The only gradients are the blurred lime glows.
- Don't use pure white as the page background. The page is `#EDEEE9`; white is reserved for cards.
- Don't grey out or box the logo walls. Show the logos small, in their own colours, floating on the surface.
- **Imagery and surfaces**
- Don't colour the illustrations or swap them for 3D renders, stock photos or flat vector "corporate Memphis" people in colour. Crowds are strictly black-and-white line art.
- Don't let the crowds float free. They stand on, or tuck behind, the top edge of the next card or panel, and one figure sits on the edge.
- Don't put borders on cards or use hard drop shadows. Use white on off-white, 32px radii and a whisper of ambient shadow.
- Don't make buttons full pills or outline/ghost buttons. They are solid 56px rounded rectangles with a 14px radius.
- Don't render UI mocks as single flat screenshots in a browser frame. They are 2–3 separate white or plum fragments overlapping at offsets, each with its own shadow.
- Don't round the page or add a margin or background around it. The design is full-bleed.
- **Layout**
- Don't centre the feature rows or put them in equal 50/50 grids with text and image aligned to the same top. Text columns are narrow and vertically centred against larger overlapping composites, and they alternate sides.
- **Motion**
- Don't add parallax, pinned sections, scroll-jacking, marquee logo strips or looping animations.
- Motion is limited to one-time fade-ups of 12–32px.
### Imagery — already generated
These pictures were made for this design and are hosted at the URLs below.
Use them as the `src` exactly as written, and keep the alt text. Do not
generate your own, do not reach for a stock library or a placeholder
service, and do not feed the Imagery section above back to an image model —
that work is done. Size and crop them with CSS (`object-fit: cover`) rather
than assuming their dimensions, and download them into the project if you
would rather not hotlink.
- https://ai-taste-vault.vercel.app/v/demo/timso-hybrid-team-scheduling-landing/images/01-crowd-hero.webp — Hand-drawn black-and-white line art of about fifteen diverse people standing shoulder to shoulder
- https://ai-taste-vault.vercel.app/v/demo/timso-hybrid-team-scheduling-landing/images/02-crowd-closing.webp — Hand-drawn black-and-white line art of about twelve people holding laptops, phones and mugs
- https://ai-taste-vault.vercel.app/v/demo/timso-hybrid-team-scheduling-landing/images/03-edge-sitters.webp — Two hand-drawn black-and-white figures sitting on a ledge with their legs dangling, one with a laptop on their knees
### Image prompts
What each picture above was generated from, for anyone changing one.
**Hand-drawn black-and-white line art of about fifteen diverse people standing shoulder to shoulder** (`01-crowd-hero`)
MEDIUM AND FINISH: a clean hand-drawn ink illustration in the loose marker-doodle style of the black-and-white crowd in the attached reference. Take only its line quality, fills and body proportions from it, and ignore all of its text, cards, UI and layout. Strokes are even and rounded, about 3px wide at this resolution, with a slight hand-drawn wobble and round line caps. The finish is crisp and vector-clean, with no pencil or paper texture. COLOUR AND VALUE: use exactly two values, ink #020202 and pure white #FFFFFF. Hair, many shirts and sweaters, several pairs of trousers and most shoes are solid flat #020202 fills. Skin and the remaining garments are left pure #FFFFFF inside their outlines. There are no greys, no mid-tones, no shading, no hatching, no gradients, no skin tones and no colour of any kind, including no lime or green. The lime glow is added separately behind the image. EDGES: the background is flat pure #FFFFFF out to all four edges, with nothing drawn on it: no ground line, no floor shadow, no halo. The image is laid over the page with multiply blending, so every background pixel must be exactly white. Leave a small white margin at the far left and far right so no figure is cropped. The lowest fifth of the figures (shins and feet) will be hidden behind a card, so nothing important happens below the knees. SUBJECT: a row of about fifteen diverse adults standing shoulder to shoulder, facing the viewer, in calm, casual poses: hands in pockets, arms folded, a hand on a hip, one holding a phone, one with a tote bag over a shoulder, one giving a small wave. Bodies, heights and ages vary. Hair varies too: afro, top bun, ponytail, long straight, curly, short crop, bald, beanie. Some wear glasses and some have beards. Clothes are hoodies, t-shirts, sweaters, one dress, wide trousers and sneakers. Faces are minimal: dot eyes, a small line nose, a tiny mouth, friendly neutral expressions. Neighbouring figures overlap slightly where their shoulders and arms meet. COMPOSITION: the crowd forms one continuous horizontal band across the full width, about 400px tall and centred vertically. All feet stand on one invisible shared baseline, and the heads sit at nearly the same height with gentle variation. The space above the heads stays empty white because speech bubbles go there. Leave flat white above and below the band so it can be cropped to a 3.9:1 strip. AVOID: any colour or skin tone, grey wash, cross-hatching, cast or ground shadows, a floor line, gradients or glows, 3D or clay renders, photographic people, flat colourful 'corporate Memphis' characters with stretched limbs, chibi or big-head cartoon proportions, sketchy pencil texture, halftone dots, speech bubbles. Output a wide 3:2 landscape frame, 1536x1024. No text, no lettering, no logos, no watermarks, no UI.
**Hand-drawn black-and-white line art of about twelve people holding laptops, phones and mugs** (`02-crowd-closing`)
MEDIUM AND FINISH: a clean hand-drawn ink illustration in the loose marker-doodle style of the black-and-white crowds in the attached reference. Take only their line quality, fills and body proportions from it, and ignore all of its text, cards, UI and layout. Strokes are even and rounded, about 3px wide at this resolution, with a slight hand-drawn wobble and round line caps. The finish is crisp and vector-clean, with no pencil or paper texture. COLOUR AND VALUE: use exactly two values, ink #020202 and pure white #FFFFFF. Hair, many tops, several pairs of trousers and most shoes are solid flat #020202 fills. Skin, the remaining garments, laptop lids, phone backs and mugs are left pure #FFFFFF inside their outlines. There are no greys, no mid-tones, no shading, no hatching, no gradients, no skin tones and no colour of any kind, including no lime or green. The lime glow is added separately behind the image. EDGES: the background is flat pure #FFFFFF out to all four edges, with nothing drawn on it: no ground line, no floor shadow, no halo. The image is laid over the page with multiply blending, so every background pixel must be exactly white. Leave a small white margin at the far left and far right so no figure is cropped. The feet are fully visible because they stand exactly on the top edge of a panel. SUBJECT: a row of about twelve diverse adults standing close together, facing the viewer, relaxed and casual. Several hold everyday work objects: one cradles an open laptop in one arm, one looks at a phone, one holds a coffee mug, one carries a closed laptop under an arm, one wears over-ear headphones round the neck. Bodies, heights and ages vary. Hair varies too: afro, bun, ponytail, long straight, curly, short crop, bald, cap. Some wear glasses and some have beards. Clothes are hoodies, t-shirts, cardigans, a skirt, wide trousers and sneakers. Faces are minimal: dot eyes, a small line nose, a tiny mouth, friendly calm expressions. Neighbouring figures overlap slightly where they meet. COMPOSITION: the crowd forms one continuous horizontal band across the full width, about 480px tall and centred vertically. Every foot rests on one perfectly flat invisible baseline. The heads sit at nearly the same height with gentle variation. The space above the heads stays empty white because a speech bubble goes there. Leave flat white above and below the band so it can be cropped to a 3.2:1 strip. AVOID: any colour or skin tone, grey wash, cross-hatching, cast or ground shadows, a floor line, gradients or glows, 3D or clay renders, photographic people, flat colourful 'corporate Memphis' characters with stretched limbs, chibi or big-head cartoon proportions, sketchy pencil texture, halftone dots, speech bubbles, screens showing content. Output a wide 3:2 landscape frame, 1536x1024. No text, no lettering, no logos, no watermarks, no UI.
**Two hand-drawn black-and-white figures sitting on a ledge with their legs dangling, one with a laptop on their knees** (`03-edge-sitters`)
MEDIUM AND FINISH: a clean hand-drawn ink illustration in the loose marker-doodle style of the black-and-white people in the attached reference, drawn as a two-character sheet. Take only the line quality, fills and body proportions from the reference, and ignore all of its text, cards, UI and layout. Strokes are even and rounded, about 4px wide at this resolution, with a slight hand-drawn wobble and round line caps. The finish is crisp and vector-clean, with no texture. COLOUR AND VALUE: use exactly two values, ink #020202 and pure white #FFFFFF. Hair, tops and some shoes are solid flat #020202 fills. Skin and other garments are pure #FFFFFF inside their outlines. There are no greys, no shading, no hatching, no gradients, no skin tones and no colour of any kind. EDGES: the background is flat pure #FFFFFF out to all four edges, with nothing drawn on it: no ledge, no box, no ground line, no shadow. Each figure must be enclosed by a continuous, unbroken outer outline so the surrounding white can be cut away cleanly while the white fills inside the figure stay opaque. SUBJECT: two separate adults, each sitting on the edge of an invisible ledge with their legs dangling down over its front. LEFT FIGURE: sits upright with an open laptop balanced on their knees, typing. Their lower legs hang straight down, ankles loosely crossed. They wear a black sweater and white trousers. RIGHT FIGURE: leans back slightly on one hand and holds a phone in the other. Their legs dangle and swing a little apart. They wear a black top, white trousers and white sneakers outlined in black, so the legs read clearly when they later hang over a solid black surface. Both have minimal faces (dot eyes, a small nose line, a tiny mouth) and relaxed expressions, and they are drawn at the same scale and style as each other. COMPOSITION: the two figures sit side by side, each centred in its own half of the frame, with wide empty white space between them so nothing touches. For both figures, the underside of the thighs and seat rests on the same perfectly flat, invisible horizontal line at exactly half the frame height. The legs hang below that line and the torso and head rise above it. Each figure is about 70% of the frame height from the top of the head to the feet. AVOID: drawing the ledge or any surface, any colour, grey shading, cross-hatching, cast shadows, gradients, 3D renders, photographic people, colourful 'corporate Memphis' stretched-limb characters, chibi proportions, pencil texture, outlines with gaps, figures touching or overlapping each other, screens showing content. Output a wide 3:2 landscape frame, 1536x1024. No text, no lettering, no logos, no watermarks, no UI.
---
## Dark developer ecosystem landing page
- Page: https://ai-taste-vault.vercel.app/r/dark-developer-ecosystem-landing-page
- Original: https://br.pinterest.com/pin/969118413584068736/
- Type: Landing page
- Tags: Bento grid, Dark mode, Developer tools, Feature grid, Glassmorphism, Hero, Nav bar, Restrained motion, Technical / Developer
- Palette: #020202, #1B3517, #2D6722, #693214, #193267
- Captured: 2026-10-16
- Rebuilt with: Claude Code · Opus 5.5 · High · skills: frontend-design, emil-design-eng, transitions-dev, gsap, humanizer
- Rebuild: https://ai-taste-vault.vercel.app/v/demo/dark-developer-ecosystem-landing-page/index.html
### Prompt — Rebuild
_rebuild · html-css · opus_
#### Dark bento developer landing page — build prompt
A near-black landing page for a developer framework. A thin structural frame runs around the page: 1px vertical rails, a hairline under the nav, and small square nodes where lines meet. Under the nav sits a centred hero with a condensed serif headline. Below it is a three-card bento grid. Each card has its own hue (green, orange, blue) and a glowing isometric wireframe illustration. Treat everything as one full-bleed 1440px viewport with no outer margin and no page-level rounding. All neutral tones should feel deliberate, and the only colour on the page sits inside the cards.
No motion report was supplied. Every motion value and every height below the first viewport is **(inferred)**.
##### Structure
- **Frame:** the page is a 1440px column with a 1px vertical rail (`#1C1C1C`) on its left and right edges. At 1440 the rails sit exactly on the viewport edges. On wider screens the column is centred, the rails stay on its edges and the background continues outside.
- **Nav inner width:** 1264px, centred (88px side inset).
- **Bento inner width:** 1360px, centred (40px side inset). It is deliberately wider than the nav.
- **Hero text column:** max 720px, centred.
Sections, top to bottom:
1. **Nav bar.** The bar has three zones:
- logo mark on the left;
- four text links centred on the page, with the first one active;
- a quiet "Sign in" text link and a small glass button with a right arrow on the right.
Under the bar a full-width 1px hairline runs rail to rail, with an 8×8px square node where it meets each rail.
2. **Hero:** centred stack, top to bottom:
- an eyebrow pill (radio-dot icon plus a 2-word label);
- a serif headline of 2–3 words on one line, with a hyphenated compound allowed;
- a two-line lead paragraph of about 20–24 words;
- one large glass button with a 2-word label.
3. **Bento feature grid:** two equal columns, 16px gap.
- **Left (green, "forms"):** one tall card spanning both rows.
- **Right top (orange, "frontend"):** a short card.
- **Right bottom (blue, "backend"):** a short card.
- **Card content:** each card has a title (2 words), a 2-line description (about 12–16 words) and a "Get Started" corner-bracket button. An isometric illustration fills the remaining area and bleeds to the card's bottom or right edge.
4. **Hairline barcode band.** A 1px horizontal line rail to rail, then a band filled with vertical 1px hairlines every 8px. It works as a textured section break.
5. **Footer (inferred).** The capture ends inside section 4. Close the page with a minimal footer:
- left: the logo mark, plus a 1-line muted caption;
- right: 3–4 small muted link columns;
- bottom: a closing hairline, then a copyright line in 13px muted text.
Use the same rails and nodes. No colour.
##### Scroll map
Viewport is 1440×900. All values are inferred from the still. There is no pinning or stacking anywhere.
1. Nav: 126px, 0.14vh, consumes 126px. Static, not sticky (inferred).
2. Hero: 403px (126 → 529), 0.45vh, consumes 403px. Entrance.
3. Bento: 827px (529 → 1356, including 78px bottom padding), 0.92vh, consumes 827px. Entrance.
4. Barcode band: about 160px, 0.18vh, consumes 160px. Static.
5. Footer: about 240px, 0.27vh, consumes 240px. Static.
Total page height is about 1756px (about 1.95 viewports).
##### Spacing
**Nav (section 1)**
- Height 126px, content vertically centred.
- Links are spaced 40px apart.
- "Sign in" sits 16px from the button.
- The logo mark is 32px.
**Hero (section 2)**
- Padding-top: 40px from the nav hairline to the eyebrow.
- Eyebrow → headline: 32px.
- Headline → lead: 24px.
- Lead → button: 44px.
- Button → bento top: 64px.
**Bento (section 3)**
- Grid 1360px wide, gap 16px. Columns are 672px each.
- Left card: 672×750. Right cards: 672×367 each.
- Card padding: 36px on top and left. The right and bottom edges have no padding because the illustrations bleed there.
- Inside a card:
- title → description: 16px;
- description → button: 40px;
- button → illustration top: about 40px in the tall card. In the short cards the illustration sits beside or under the text block at the right.
- Section bottom padding: 78px down to the band's top line.
**Band (section 4):** about 160px tall, hairlines at an 8px pitch.
**Rhythm:** sections are separated by full-width hairlines, not by big empty gaps. Vertical spacing stays tight (40–80px), and the rails keep the page feeling engineered.
##### Type
Body anchor is **17px**.
Families:
- **Display:** a condensed, high-contrast serif in a light weight, used only for the hero headline. Free stand-in: **Instrument Serif** 400.
- **UI and body:** a neutral grotesk. Free stand-in: **Inter**.
- **Mono:** a monospace for labels inside illustrations. Free stand-in: **JetBrains Mono** or **Geist Mono**.
| Level | Ratio | Size | Line-height | Tracking | Weight | Colour |
|---|---|---|---|---|---|---|
| Hero headline (serif) | 3.8× | 64px | 1.1 | -0.01em | 400 | `#EDEDED` |
| Card title | 1.4× | 24px | 1.3 | -0.01em | 400 | `#F2F2F2` |
| Hero lead | 1.18× | 20px | 1.6 | 0 | 400 | `#A6A6A6` |
| Card description / body | 1× | 17px | 1.6 | 0 | 400 | `#C4C4C4` |
| Hero button label | 1.12× | 19px | 1 | 0 | 400 | `#E6E6E6` |
| Nav links | 0.94× | 16px | 1 | 0 | 400 | active `#F5F5F5`, others `#7E7E7E` |
| Nav button / Sign in | 0.88× | 15px | 1 | 0 | 400 | `#E6E6E6` / `#7E7E7E` |
| Eyebrow label | 0.88× | 15px | 1 | 0 | 500 | `#F0F0F0` |
| Card button label | 0.88× | 15px | 1 | 0 | 500 | card hue, bright |
| Illustration mono labels | 0.82× | 14px | 1 | 0.06em, uppercase or lowercase filenames | 500 | card hue, light |
| Footer caption | 0.76× | 13px | 1.5 | 0 | 400 | `#6A6A6A` |
**Line length:**
- The headline stays on one line (about 22 characters).
- The hero lead is capped at 620px, which gives about 60 characters per line and exactly 2 lines.
- Card descriptions are capped at 300px, about 36 characters per line, in 2–3 lines.
##### Colour
**Neutrals**
- `#020202`: page background. It covers about 85% of the surface.
- `#1C1C1C`: rails, the nav hairline, the band's hairlines and the square nodes (nodes are filled `#262626`).
- Text greys run `#F5F5F5` → `#C4C4C4` → `#A6A6A6` → `#7E7E7E`.
Card hues, each confined strictly to its own card:
| Card | Card background | Card border | Bright tone |
|---|---|---|---|
| Green (forms) | `#1B3517` at a low-opacity gradient over black, roughly `#0C160A` → `#132611` | 1px `#2D6722` | `#5BD13A` for the button text, corner brackets, glowing illustration edges and chevrons; `#C9E83A` for the tiny rivet dots |
| Orange (frontend) | roughly `#1A0E08` → `#120A06` | 1px `#693214`, brighter at `#A24A1E` along the lit edges | `#F06A24` for the button text and outlines; `#F59A5C` for the filename tabs |
| Blue (backend) | roughly `#0A0F1F` → `#070A14` | 1px `#193267`, lit to `#2E55C8` | `#2F6BFF` for the button text and hex outlines; white for the framework glyphs |
**Rule:** there is no global accent. Hue appears only inside its card: the border, the tinted fill, the button and the illustration. The nav, the hero and everything below the bento stay pure neutral.
##### Surface
**Cards**
- 1px solid borders in the card's hue.
- Corner radius 0–2px.
- No drop shadows.
- A faint inner glow (`inset 0 0 80px` at the hue's colour, about 6% alpha) is allowed.
**Card background texture, at 4–8% opacity**
- Green: diagonal dashed isometric floor lines.
- Blue: a faint dot grid.
- Orange: plain.
**Glass buttons (nav and hero)**
- Fill: a vertical gradient from `#3A3A3A` to `#1A1A1A`.
- Border: 1px `#5A5A5A`, with a 1px inner top highlight (`inset 0 1px 0 rgba(255,255,255,.18)`).
- Radius 3px.
- Size: the hero button is 270×56. The nav button is 165×44 and has a trailing → arrow.
**Card buttons (corner-bracket style)**
- Size 144×56, radius 2px.
- Fill: the hue at about 10% alpha.
- Border: 1px in the hue at about 40%.
- At each corner, a bright 6px L-shaped bracket drawn in the full bright hue.
**Eyebrow:** a 14px circle (1px white ring with a 6px white dot inside), then the label. No pill background.
**Frame details**
- 8×8px square nodes at rail/hairline intersections.
- No other shadows anywhere.
##### Imagery
All three illustrations are line-art isometric renders of translucent glass slabs. Each uses a thin 1–1.5px bright edge in the card hue, a semi-transparent tinted face (10–30% alpha) and a soft glow on the edges. Build them as SVG. There are no photos.
**Green card (tall)**
- **Subject:** a stack of 3–4 rounded-corner square slabs in isometric view, seen from above at 30°.
- **Faces:** the top face has a bright translucent green fill.
- **Rivets:** small yellow-green rivet dots at the corners and edge midpoints.
- **Labels:** three mono labels run along the front-right edges of the layers, one per layer (validation / file uploads / error handling style, rotated to the isometric angle).
- **Chevrons:** a row of pixel-dotted `>>>>>` chevrons on the front-left face.
- **Floor:** faint dashed diagonal lines.
- **Placement:** about 1:1, centred horizontally in the lower 60% of the card, about 300px wide.
**Orange card (short)**
- **Subject:** three code-editor "window" panels, receding diagonally from the upper right toward the lower left, each offset 50px.
- **Tabs:** each window has a tab carrying a mono filename (a component file in three framework extensions).
- **Window content:** rounded grey-orange skeleton bars, like code lines, in the front window.
- **Placement:** anchored to the right half of the card, cropped by the card's right and bottom edges, about 4:3.
**Blue card (short)**
- **Subject:** a honeycomb of 3D hexagonal tiles in isometric view, about 12 visible.
- **Tiles:** each has a blue outline, a dark face and a white framework-style glyph in the centre. Use generic abstract glyphs, not real logos.
- **Detail:** tiny blue sparkle dots between the tiles.
- **Placement:** fills the right 55% and bleeds off the right and bottom edges.
##### Motion
Motion is restrained throughout and all of it is **(inferred)**. Nothing is scroll-linked or pinned.
**1. Nav**
- kind: static
- what moves: nothing
- from → to: n/a
- range: n/a
- reduced motion: identical
**2. Hero**
- kind: entrance
- what moves: the eyebrow, headline, lead and button
- from → to: opacity 0 → 1, translateY 12px → 0
- range: plays once on page load. About 600ms each (not measured, 500–800ms range), ease-out, staggered 80ms in DOM order.
- reduced motion: render at the end state with no fade
**3. Bento**
- kind: entrance
- what moves: the three cards, then each card's illustration
- from → to:
- cards: opacity 0 → 1, translateY 24px → 0
- illustrations: opacity 0 → 1, translateY 16px → 0, starting 150ms after their card
- range: plays once, when the grid's top reaches 80% of the viewport. About 700ms (not measured, 600–900ms range), ease-out. Cards are staggered 100ms in the order left, right-top, right-bottom.
- An optional idle loop: the glow on the green slab edges pulses in opacity between 0.6 and 1 over 3s. Keep it subtle or omit it.
- reduced motion: render at the end state, with no idle loop
**4. Barcode band**
- kind: static
- what moves: nothing
- from → to: n/a
- range: n/a
- reduced motion: identical
**5. Footer**
- kind: static
- what moves: nothing
- from → to: n/a
- range: n/a
- reduced motion: identical
**Interaction transitions**
All of these run over 150–200ms with ease-out.
- **Nav links:** hover changes the colour from `#7E7E7E` to `#F5F5F5`.
- **Glass buttons:**
- hover: the border lightens to `#7A7A7A` and the top highlight rises to 0.28 alpha;
- press: translateY 1px and the gradient darkens.
- **Card buttons:**
- hover: the fill goes from 10% to 18% alpha and the corner brackets extend from 6px to 10px;
- press: the fill goes to 24%.
- **Cards:** on hover the border brightens to the lit tone of the hue. There is no lift, no scale and no shadow.
##### Responsive (<640px)
- **Rails:** move inward to a 16px inset, and the nodes are kept.
- **Nav:** the links and "Sign in" are dropped. The logo stays on the left, and the right side shows the glass button plus a 44px square hamburger made of hairline strokes. Nav height becomes 72px.
- **Hero:**
- headline 40px (it may wrap to 2 lines, line-height 1.1);
- lead 18px;
- the button goes full width up to 320px;
- padding-top 32px.
- **Bento:**
- stacks to one column with a 12px gap and 16px side inset;
- the green card becomes about 560px tall and its illustration scales to 240px wide;
- the orange and blue cards become about 380px tall, with the illustrations moved below the text and still bleeding off the bottom-right;
- card padding becomes 24px.
- **Band:** 96px tall.
- **Footer:** the link columns stack into a 2-column grid.
##### Don'ts
- **Mat:** don't render the presentation mat. No outer margin, no rounded page corners, and no `#000` frame around the page. The rails are the page's own edges.
- **Hue placement:** don't let green, orange or blue leak outside their cards. No coloured headline, no gradient text, no coloured hero glow, and no aurora blobs behind the hero.
- **Headline font:** don't set the headline in the grotesk or in bold. It must be a light, condensed serif at about 64px on one line. That contrast with the plain grotesk is the whole personality.
- **Card corners:** don't round the cards to 16–24px. They are square-cornered technical panels.
- **Effects:** no drop shadows, no backdrop-blur frosted cards and no noise overlays. The "glass" lives in the illustrations and the button sheen only.
- **Pill buttons:** don't use filled pill CTAs or a bright primary button. The hero CTA is a dim chrome-grey rectangle. The card buttons are tinted rectangles with bright corner brackets.
- **Illustrations:** don't use stock 3D blobs, gradient meshes or emoji icons. They are thin-line isometric SVG with mono labels and must bleed off the card edges, not float centred with padding all around.
- **Real logos:** don't use real framework logos or brand names. Use abstract glyphs.
- **Section spacing:** don't add 160px section paddings. The page is dense and framed: hairlines, nodes and the barcode band do the separating.
- **Background:** don't make the page `#111` or `#0A0A0A` grey. It is `#020202`, effectively black, so the hued cards glow against it.
- **Motion:** don't add parallax, scroll-scrubbed transforms, tilt-on-hover or glow-following cursors. Motion stops at one gentle entrance.
### Imagery — already generated
These pictures were made for this design and are hosted at the URLs below.
Use them as the `src` exactly as written, and keep the alt text. Do not
generate your own, do not reach for a stock library or a placeholder
service, and do not feed the Imagery section above back to an image model —
that work is done. Size and crop them with CSS (`object-fit: cover`) rather
than assuming their dimensions, and download them into the project if you
would rather not hotlink.
- https://ai-taste-vault.vercel.app/v/demo/dark-developer-ecosystem-landing-page/images/01-forms-slab-stack.webp — Glowing green isometric stack of translucent glass slabs with rivet dots and dotted chevrons
- https://ai-taste-vault.vercel.app/v/demo/dark-developer-ecosystem-landing-page/images/02-frontend-editor-windows.webp — Three translucent orange code-editor windows receding diagonally in isometric view
- https://ai-taste-vault.vercel.app/v/demo/dark-developer-ecosystem-landing-page/images/03-backend-hex-honeycomb.webp — Isometric honeycomb of blue-outlined hexagonal tiles with abstract white glyphs
### Image prompts
What each picture above was generated from, for anyone changing one.
**Glowing green isometric stack of translucent glass slabs with rivet dots and dotted chevrons** (`01-forms-slab-stack`)
MEDIUM AND FINISH: a clean vector-style digital illustration, thin glowing line art in strict isometric projection, like a precise technical SVG diagram with a soft bloom on the lines. It is not a photograph and not a glossy 3D render: no camera, no lens, no realistic reflections. COLOUR AND VALUE: the background is a flat, near-black, very dark green, between #0A1208 and #0F1D0D, with no gradient brighter than that. Only greens and one yellow-green appear. Edges are thin 1–1.5px lines in bright green #5BD13A with a faint soft glow. Slab faces are semi-transparent green tints between #1B3517 and #2D6722. The top face is the brightest fill, around #3E8A2A, fading toward its centre. Tiny rivet dots are yellow-green #C9E83A. Nothing is lighter than #C9E83A and nothing is darker than #0A1208. There are no pure blacks, no whites and no other hues. EDGES: the whole background is the same flat dark green as the card it sits in, so every edge of the frame vanishes into #0E170C with no visible seam, vignette or border. The top third of the frame is empty background, because a card title and button sit above it. SUBJECT: a stack of four thin, rounded-corner square slabs, like translucent glass trays, in isometric view seen from above at about 30 degrees. The layers sit evenly spaced and slightly separated, each one a glowing outline with a faint tinted face. The top slab has a recessed inner square, a tray within a tray. Small hollow yellow-green ring rivets sit at each corner and edge midpoint of every layer. On the front-left side face of the stack is a row of seven pixel-dotted chevrons (>>>>>>>) made of small bright green square dots. The front-right side faces carry three plain, empty horizontal bands, one per layer, kept blank so labels can be added later. Very faint, sparse, dashed diagonal lines run across the floor around the stack at the isometric angle, at about 5% visibility. COMPOSITION: the stack is centred horizontally and sits in the lower two thirds of the frame. It is about 45% of the frame width, with generous empty dark green around it. AVOID: any text, letters or numbers on the bands; neon cyberpunk glow; heavy bloom or lens flare; glossy plastic or realistic glass refraction; perspective distortion (keep it strictly isometric); a gradient spotlight or vignette behind the stack; blue, cyan or teal tints; a black background. Output a wide 3:2 landscape frame, 1536x1024. No text, no lettering, no logos, no watermarks, no UI.
**Three translucent orange code-editor windows receding diagonally in isometric view** (`02-frontend-editor-windows`)
MEDIUM AND FINISH: a clean vector-style digital illustration, thin glowing orange line art in isometric projection, like a precise technical SVG diagram. It is not a photograph and not a glossy 3D render. COLOUR AND VALUE: the background is a flat, very dark brown-black, between #120A06 and #1A0E08. Only oranges and burnt browns appear. Window outlines are thin 1–1.5px lines in #F06A24 with a faint soft glow. Window faces are semi-transparent burnt orange, around #693214 at low opacity, and get slightly brighter toward the front window. Tab shapes are filled a muted orange around #A24A1E, with their outline at #F59A5C. Skeleton code bars are rounded grey-orange, around #8A4A26. Nothing is lighter than #F59A5C and nothing is darker than #120A06. There are no whites, no pure blacks and no other hues. EDGES: the windows bleed off the right and bottom edges of the frame and are cropped there. The top edge and the whole left half are empty background in #160C07, so they blend invisibly into the card, where a title, a description and a button sit on the left. SUBJECT: three tall rectangular code-editor window panels, standing upright in isometric view. They are stacked one behind the other and recede diagonally from the upper right toward the lower left, each offset by an equal step. Each panel has a small rectangular tab on its top edge. The tabs are empty, with no text, so that filenames can be added later. The frontmost, lower-left window shows a column of six to eight short, rounded horizontal skeleton bars of varying lengths, like lines of code. The rear windows are plain translucent panes with overlapping outlines visible through them. COMPOSITION: the group occupies the right 55% of the frame, starts about 15% down from the top, and runs off the right and bottom edges. AVOID: any text or letters in the tabs or bars; realistic browser chrome or traffic-light dots; heavy neon bloom or lens flare; glossy glass refraction; strong perspective (keep it isometric); red or yellow shifts; a gradient glow behind the windows. Output a wide 3:2 landscape frame, 1536x1024. No text, no lettering, no logos, no watermarks, no UI.
**Isometric honeycomb of blue-outlined hexagonal tiles with abstract white glyphs** (`03-backend-hex-honeycomb`)
MEDIUM AND FINISH: a clean vector-style digital illustration, thin glowing blue line art in isometric projection, like a precise technical SVG diagram. It is not a photograph and not a glossy 3D render. COLOUR AND VALUE: the background is a flat, very dark navy, between #070A14 and #0A0F1F, with a barely visible dot grid at about 5% opacity. Tile outlines are thin 1.5px lines in electric blue #2F6BFF with a faint soft glow, and the side faces are dimmer, around #193267. Tile top faces are dark navy, around #0B1430. Glyphs are flat pure white #FFFFFF. Tiny sparkle dots between the tiles are #2F6BFF. White glyphs are the only light values, and nothing is darker than #070A14. There are no purples, cyans or other hues. EDGES: the honeycomb bleeds off the right and bottom edges and is cropped there. The upper-left area is empty dark navy #0A0F1F, so it blends invisibly into the card, where a title, a description and a button sit. SUBJECT: a honeycomb of about twelve shallow 3D hexagonal tiles, like thick hex coins, laid flat in isometric view with small gaps between them. Each tile has a visible thin side wall and a blue-outlined top. In the centre of each top face is one small, simple, flat white abstract glyph. Use generic geometric pictograms such as a crescent, a swoosh, a hooked spiral or a knotted loop. None of them are real brand logos and none are letters. Scattered tiny blue sparkle dots fill the gaps. COMPOSITION: the cluster fills the right 55% of the frame and rises diagonally from the bottom-left toward the upper right. Its top-most tile is about 10% from the top-right corner, and it runs off the right and bottom edges. AVOID: real framework logos; letters or numbers on the tiles; glossy bevels or metallic shine; heavy neon bloom or lens flare; strong perspective (keep it isometric); a purple or cyan cast; a radial glow behind the cluster. Output a wide 3:2 landscape frame, 1536x1024. No text, no lettering, no logos, no watermarks, no UI.
---
## Neon — Postgres Homepage
- Page: https://ai-taste-vault.vercel.app/r/neon-postgres-homepage
- Original: https://br.pinterest.com/pin/268527196528740315/
- Type: Landing page
- Tags: CTA band, Dark mode, Developer tools, Feature callout, Feature grid, Footer, Glassmorphism, Hero, High contrast, Logo wall, Muted palette, Restrained motion, Stats band
- Palette: #020303, #E5F2EB, #262727, #6DB799
- Captured: 2026-10-16
- Rebuilt with: Claude Code · Opus 5.5 · Extra high · skills: frontend-design, emil-design-eng, transitions-dev, gsap, humanizer
- Rebuild: https://ai-taste-vault.vercel.app/v/demo/neon-postgres-homepage/index.html
### Prompt — Rebuild
_rebuild · html-css · opus_
#### Build prompt: dark developer-platform landing page with a muted mint accent
You are building a long, quiet, high-contrast landing page for a developer database product. The page is near-black, set in a tight grotesk, and almost every section opens with the same move: one statement in two tones (first sentence near-white, the rest grey) indented one column from the left. The pictures are drawn as product UI and data graphics (an IDE, charts, a branch diagram, a timeline), never photographs. There is one muted mint accent and one pale-mint section in the page. Motion is restrained: content enters once on arrival, and two streak fields loop gently. Nothing pins and nothing is scroll-jacked.
Reference viewport: 1440 × 900. All numbers are CSS px at 1440 wide. Heights were measured from the full-page still (1 CSS px ≈ 0.83 image px). No motion report or motion strips were supplied, so every motion value below is marked (inferred).
##### Structure
**Frames**
- **Wide frame:** full width with 32px side padding (1376px of content). Used by the nav, the footer, the final display headline, the agents status strip, full-bleed charts and timelines.
- **Content container:** max-width 1280px, centred (80px margins at 1440), 12 columns, 24px gutter. One column plus its gutter is about 108px.
- **Statement headings** start at **column 2** (about 108px in from the container edge) and span about 7 columns (max 760px). A small section glyph or stat sits at **column 1**, level with or above the heading. This offset is the signature of the page's layout.
**Sections, top to bottom**
1. **Announcement bar**: 32px, full-bleed, page background, 1px #262727 bottom rule. One centred line: an announcement of 8–12 words in 14px grey, followed by a 2–3 word link in the accent with a → arrow.
2. **Nav**: 56px, wide frame, sticky.
- Left: a placeholder wordmark (20px square glyph plus a word, near-white). 40px after it come 5 links (14px/500, grey). Four of them have 10px chevrons. Links are 28px apart.
- Right, 16px gaps: a small "repo stars" chip (icon plus "NNk", 14px grey), a "log in" text link, and a primary button (32px tall, near-white fill, black text).
3. **Hero**: 628px.
- The top ~280px is a **streak field** (see Imagery). It covers the right three-quarters of the width, brightest around 45–70% across, and fades into the background at the left and bottom.
- Below it, all at column 1 and left-aligned:
- Eyebrow: a 12px glyph plus 2–3 words, mono uppercase.
- 20px gap, then the H1: 2 lines of 3–4 words each, with a forced break, max 640px.
- 72px gap (inferred), then the button row:
- Primary: "start"-role, 40px tall, padding 0 18px, near-white fill.
- Secondary: "docs"-role, 40px, #1A1B1B fill, 1px #262727 border.
- 12px between the buttons.
- Nothing else: no subtitle paragraph and no product shot.
4. **Logo wall**: 134px. One row of 7 monochrome placeholder wordmarks across the container, spaced with `space-between`, 24–28px tall, grey at about 70% opacity.
5. **AI-workflow showcase**: 1200px.
- **Statement heading** (column 2, 3 lines): a white sentence of 5–6 words, then a grey continuation of 10–12 words.
- **Callout labels**, 80px below: two mono pill labels of 4–6 words each. Each has a 1px vertical connector line dropping into the mockup below. The left one points at the editor, the right one at the assistant pane.
- **IDE mockup**, 16px below: 1120 × 660, centred over columns 2–11.
- **Main window** (about 760px wide):
- A 32px title bar with three grey dots.
- A 180px file tree.
- About 14 lines of syntax-coloured mono code.
- A bottom terminal panel: a tab row of 5 mono labels, the active one underlined, and about 6 output lines with accent ✓ glyphs.
- **Assistant pane** (about 400 × 520): overlaps the right side of the main window, 24px lower, with its own border and a higher z-index. It holds:
- A 3–4 word header.
- A 2-line instruction.
- A 4–5 item checklist with accent ticks.
- A code chip.
- An input field at the bottom with an accent send icon.
- **CTA row**, 48px below: centred. A grey sentence of 7–9 words, then a **command pill**: 40px tall, #0B0C0C fill, 1px #262727 border, mono 14px, an accent "$", a 3-word command, and a copy icon.
6. **Compatible-clients row**: 164px, with a hairline on top.
- Column 1: a 2-line label of 4–5 words, 14px grey.
- Columns 3–12: 6 grey client wordmarks, evenly spread.
7. **Autoscaling: the only light section**: 1031px, full-bleed #E5F2EB, with all colours inverted.
- A 24px dark line icon at column 1, 44px from the top.
- The statement heading at column 2, 110px from the top, 3 lines, in dark plus muted grey-green.
- 30px below: two **tab chips**, 28px tall, 13px.
- Active: white fill, 1px rgba(2,3,3,.15) border.
- Inactive: transparent.
- 40px below: the **chart band**, 546px tall, edge to edge, split at 47%.
- Left panel ("fixed capacity"):
- A grey load area chart with a dashed horizontal capacity line.
- One red spike breaking through the capacity line.
- A small white tooltip card anchored to the spike: red dot, 2 short lines.
- Right panel ("autoscaled"):
- A slightly lighter fill with a 1px border.
- A stepped accent-green area that hugs the load line.
- Directly below: a 36px full-width band of accent diagonal hatching at about 25%, carrying a mono uppercase caption of 5–8 words.
- 24px below that, a final row:
- Columns 1–6: a legend of 3 items (8px swatches: accent, grey, dashed), 13px.
- Columns 8–11: a 15px paragraph of about 3 lines.
8. **Branching**: 1365px.
- **Stat** at column 1, about 30px from the top: a number of 6–7 characters plus a 12px mono caption of 1–3 words.
- **Dotted guide lines** behind the upper ~1000px, across the wide frame:
- Vertical lines every 48px, made of 1px #262727 dots at a 6px pitch.
- Masked so they fade out at top and bottom.
- **Statement heading** at column 2, about 395px from the top, 3 lines.
- **Branch diagram**, 90px below: 370px tall, wide frame.
- The primary line runs across the lower third in the accent at 60%, with a "main"-role pill at column 1: mono 12px, accent text, 1px accent border, radius 4, 24px tall.
- 3–4 child branches leave the primary line through rounded 90° elbows (radius 8), rise 40–120px, then run right.
- Child lines are grey at 40%. Each has a mono branch-name chip (2–3 words) and a muted timestamp.
- 6px node dots mark each fork.
- **Three feature columns**, 90px below (columns 1–4 / 5–8 / 9–12), with a hairline above the row (inferred). Each column has, top to bottom:
- A 20px accent line icon.
- 16px gap, then a title (16px/500, white).
- 8px gap, then a description: 15px grey, 2–3 lines, max 34ch.
9. **Auth**: 850px.
- **Statement heading** at column 2, 60px from the top.
- **Blurred user table**, 96px below: 1280 × 516.
- About 11 rows at a 44px pitch.
- Each row is a set of rounded placeholder bars in #1A1B1B–#262727: a 20px avatar circle, then bars of 120, 200, 80 and 60px.
- The panel is masked by a radial gradient (solid in the centre, transparent at the edges) and blurred 1–2px, so it reads as data but cannot be read.
- **Frosted pill**, centred on the table: 44px tall, padding 0 20px, fully rounded.
- Fill rgba(229,242,235,.10), `backdrop-filter: blur(12px)`, 1px rgba(229,242,235,.25) border.
- A 16px icon plus a 2-word "enable"-role label, 14px/500 near-white.
- Outer glow `0 0 40px rgba(109,183,153,.25)`.
10. **Fees feature grid**: 1060px.
- A 24px dotted-ring glyph at column 1, 150px from the top.
- The statement heading at column 2, 290px from the top, 3 lines.
- 150px below: a **2 × 3 grid** (columns 1–4 / 5–8 / 9–12) with a 56px row gap. Each item, top to bottom:
- A 20px accent icon.
- 12px gap, then a 16px/500 title of 2–4 words.
- 6px gap, then a 15px grey description, 2–3 lines.
- No cards and no borders.
11. **Agents**: 2155px.
- **Status strip** at the top: 48px, wide frame, hairlines top and bottom, 5 cells divided by vertical hairlines. Each cell holds a mono 12px uppercase label (the first with an accent dot), and some cells carry short counters (inferred).
- 200px below, at column 1:
- Eyebrow: accent dot plus 2 words, mono.
- 16px gap, then the **display-2 headline**: 2 lines (4 words, then 3), max 800px.
- 24px gap, then a sub line: 2 lines, 17px grey, max 520px.
- 24px gap, then an outline button: 40px, 1px #262727, accent dot, 3–4 words.
- **Row 1**, 90px below:
- Text at columns 2–5, vertically centred: a two-tone H4 (5–7 white words plus 10–14 grey words, about 5 lines, max 380px), then 24px, then a "learn more →" link (14px/500 white).
- **Panel 1** at columns 7–12 (698 × 534), a fleet dashboard: a mono title, 2 region chips, a field of about 60 tiny vertical activity bars (active ones in the accent, idle ones #262727) and a mono legend.
- **Row 2**, 240px below, mirrored:
- **Panel 2** at columns 1–6 (516 × 365), an API console: an accent "$" prompt with a 2-line command, then JSON response lines in grey and near-white.
- Text at columns 8–11.
12. **Checkpoints**: 697px.
- **H3 statement**: a 720px block centred on the page, text left-aligned, 3 lines, about 130px from the top.
- 100px below: a **full-bleed timeline**, 180px tall.
- A hairline across the middle, with 8px ticks every 16px (#262727) and 16px ticks every 5th.
- Small mono timestamps under some ticks.
- 4–6 accent checkpoint dots, each with a mono chip of 1–2 words.
13. **Proof and stats band**: 668px.
- A container hairline, with two mono eyebrows (accent dot plus 2–3 words) just under it, at columns 1 and 7.
- **Left (columns 1–6)**:
- 40px below the eyebrows: a two-tone H3 of 4 lines (a 5-word white sentence plus 20–25 grey words), max 600px.
- 64px below: two stats, 64px apart. Each is a number in white plus a 14px grey caption of 2 lines, max 200px.
- **Right (columns 7–12)**:
- A mono pull quote of 5–6 lines in near-white. Two phrases are highlighted with an accent background at 22%, padded 0 4px.
- 40px below: the attribution, name in 14px/500 white and role in 14px grey.
14. **Final CTA band**: 503px, with a top hairline.
- The **display headline** at the wide frame's left edge: 2 lines (4 words, then 3), near-white.
- A 200px **streak field** behind the second line, continuing below it.
- 24px below the headline, a bottom row:
- Left: an 18px two-line lede. The first line is white (5–6 words), the second grey (7–9 words).
- Right-aligned, 12px gaps: primary button, secondary button, command pill.
15. **Footer**: 1587px, wide frame, with a top hairline.
- **Top block** (about 550px), starting 40px from the top:
- A logo column (about 300px): wordmark plus a 2-word mono sub-label.
- 5 link columns of about 180px each:
- 3 plain columns: a mono 12px uppercase title in #5E6361, then 8–10 links at 14px #8C918F with 12px row gaps.
- 1 social column: 16px icon plus label per row.
- 1 compliance column: 16px badge plus label per row.
- About **770px of empty #020303**. Keep it empty.
- **Bottom row**:
- An 8px accent dot plus a 3-word "systems status"-role line, 13px grey.
- A copyright line beneath it, 12px #5E6361.
- 40px bottom padding.
##### Scroll map
| # | Section | Height | Viewports | Scroll consumed | Kind |
|---|---|---|---|---|---|
| 1 | Announcement bar | 32px | 0.04 vp | 32px | static |
| 2 | Nav | 56px | 0.06 vp | 56px | static (sticky; no extra scroll) |
| 3 | Hero | 628px | 0.70 vp | 628px | entrance, plus an ambient loop |
| 4 | Logo wall | 134px | 0.15 vp | 134px | static |
| 5 | AI showcase | 1200px | 1.33 vp | 1200px | entrance |
| 6 | Clients row | 164px | 0.18 vp | 164px | static |
| 7 | Autoscaling (light) | 1031px | 1.15 vp | 1031px | entrance |
| 8 | Branching | 1365px | 1.52 vp | 1365px | entrance |
| 9 | Auth | 850px | 0.94 vp | 850px | entrance |
| 10 | Fees grid | 1060px | 1.18 vp | 1060px | entrance |
| 11 | Agents | 2155px | 2.39 vp | 2155px | entrance |
| 12 | Checkpoints | 697px | 0.77 vp | 697px | entrance |
| 13 | Proof and stats | 668px | 0.74 vp | 668px | entrance |
| 14 | Final CTA | 503px | 0.56 vp | 503px | entrance, plus an ambient loop |
| 15 | Footer | 1587px | 1.76 vp | 1587px | static |
**Total page height: about 12,130px (about 13.5 viewports).** Nothing pins or stacks, so scroll consumed always equals height. All kinds are inferred.
##### Spacing
- **Base unit** is 8. The gaps that recur are 6, 8, 12, 16, 20, 24, 32, 40, 48, 56, 64, 72, 80, 90, 96 and 150px.
- **Section rhythm**:
- Dark sections sit about 120px apart (bottom content of one to the top content of the next).
- Within a section, a statement heading sits **80–100px above its visual**, and a visual sits **about 90px above its feature row**.
- The two sections that open with a glyph (10 and 7) leave **about 140–150px** between the glyph and the heading or grid.
- The page breathes. Do not compress it.
- **Text groups**:
- Eyebrow to headline: 16–20px.
- Headline to sub line: 24px.
- Sub line to button: 24px.
- Button to button: 12px.
- **Feature items**: icon to title 12–16px, title to description 6–8px. Grid column gap 24px (spans of 4 columns), row gap 56px.
- **Agents rows**: 240px between the zig-zag rows.
- **Panels**: inner padding 16–20px, header rows 40px, table and terminal rows at a 24–28px pitch.
- **Footer**: 48px between columns, 12px between links.
##### Type
- **Sans:** a neutral grotesk with tight tracking. Use **Inter** (free).
- **Mono:** **Geist Mono** or **JetBrains Mono** (free). Mono is for eyebrows, chips, code, the pull quote and footer titles, and nothing else.
- **Body anchor:** 17px.
| Level | × body | px | Line-height | Letter-spacing | Weight |
|---|---|---|---|---|---|
| Display (section 14) | 6.3× | 107 | 1.0 | −0.045em | 500 |
| Display-2 (agents headline) | 4.7× | 80 | 1.0 | −0.04em | 500 |
| H1 (hero) | 3.0× | 51 | 1.02 | −0.035em | 500 |
| Stat number | 3.0× | 51 | 1.0 | −0.03em | 500, tabular numerals |
| H2 statement (two-tone) | 2.35× | 40 | 1.15 | −0.025em | 500, both tones |
| H3 statement (sections 12, 13) | 2.0× | 34 | 1.2 | −0.02em | 500 |
| H4 row heading (agents rows) | 1.65× | 28 | 1.25 | −0.02em | 500 |
| Pull quote (mono) | 1.4× | 24 | 1.5 | −0.02em | 400 |
| Lede | 1.06× | 18 | 1.45 | −0.01em | 400 |
| Body | 1.0× | 17 | 1.55 | −0.005em | 400 |
| Feature title | 0.94× | 16 | 1.4 | −0.01em | 500 |
| Feature description | 0.88× | 15 | 1.5 | 0 | 400 |
| Nav, buttons, links | 0.82× | 14 | 1.0 | −0.005em | 500 |
| Code in mockups (mono) | 0.76× | 13 | 1.6 | 0 | 400 |
| Eyebrow, chip, footer title (mono, uppercase) | 0.72× | 12 | 1.2 | +0.08em | 500 |
**Max line length**
- H1: about 23 characters per line, max 640px.
- H2: max 760px, about 40 characters per line, 3 lines.
- H3: max 720px.
- H4: max 380px.
- Feature descriptions: 34ch.
- Ledes and sub lines: 520px.
**Two-tone rule:** a statement is **one paragraph**. The lead sentence is set in the primary colour, and the rest runs on in secondary grey at the **same size and weight**.
##### Colour
| Hex | Role | Where it may appear |
|---|---|---|
| #020303 | Page background, about 85% of the surface | Everywhere; also the text colour on the light section |
| #F5F7F6 (inferred) | Primary text, primary button fill | Headlines, lead sentences, button fills |
| #8C918F (inferred) | Secondary text | Statement continuations, descriptions, nav and footer links, logo walls |
| #5E6361 (inferred) | Tertiary and meta text | Footer titles, timestamps, comments |
| #262727 | Hairlines, borders, dots | Dotted guide lines, idle bars, placeholder rows |
| #0B0C0C, #1A1B1B (inferred) | Raised surfaces | Panels, mockups, secondary buttons, command pill |
| #E5F2EB | Light surface | Section 7's full-bleed background only. Its own secondary text is #66736C (inferred) and its borders rgba(2,3,3,.12) |
| #6DB799 | **The single accent**, muted mint | See the list below |
**The accent is allowed in exactly these places:** eyebrow and status dots, the "$" prompts and ✓ glyphs, feature icons, the main branch line and pill, checkpoint dots, chart fills, the hatched band, quote highlights, the streak fields, and the auth pill glow.
**The accent is never allowed on:** button fills, headline text, or any panel surface.
**Data-only red** (about #E5484D, inferred) appears once: the incident spike and its tooltip dot in section 7.
##### Surface
- **Borders:** 1px #262727 on dark, 1px rgba(2,3,3,.12) on light. No thicker strokes.
- **Radii:**
- Buttons, chips, tabs and the command pill: 6px.
- The "main" pill and tooltips: 4–6px.
- Mockup windows and panels: 8px.
- The auth pill: fully rounded.
- Feature items: no container at all.
- **Shadows:** none. Depth comes from a lighter fill plus a hairline, and from the overlap of the assistant pane.
- **Glow:** only the auth pill glow, and an optional accent radial wash of 6% or less behind the IDE.
- **Glass:** only two places:
- The sticky nav after scrolling: rgba(2,3,3,.72) with `blur(12px)`.
- The auth pill.
##### Imagery
There are no photographs, people or illustrations. Every picture is drawn UI or data, built in HTML/SVG/canvas.
- **Streak fields** (sections 3 and 14):
- Size: 1440 × about 280 (hero) and 1440 × about 200 (final CTA).
- Columns of vertical bars, 4–6px wide with 2px gaps. Each bar is built from 4px segments, which gives it a pixel-stepped look.
- Heights vary from 40 to 280px. Colour runs from #0E2A20 through #2F6E55 to #6DB799, and a few columns are tipped in #E5F2EB.
- The field is densest and brightest at 45–70% across. It falls to almost nothing in the left 20%, and a linear mask fades its bottom 40% into the background.
- **Logo walls** (sections 4 and 6): flat grey placeholder wordmarks, all at the same height.
- **IDE mockup** (section 5): about 17:10, centred. Its contents are described in Structure.
- **Autoscaling charts** (section 7): about 2.5:1 overall, edge to edge.
- **Branch diagram** (section 8): about 3.7:1 over the dotted grid.
- **Blurred user table** (section 9): about 2.5:1, with a radial mask.
- **Fleet dashboard** (section 11, about 1.3:1) and **API console** (section 11, about 1.4:1).
- **Checkpoint timeline** (section 12): about 8:1, full-bleed.
##### Motion
None of these values were measured; everything is inferred from the still and the restrained character of the page. Defaults for every entrance:
- Trigger: once, when the element's top reaches about 80% of the viewport.
- Duration: not measured, 400–700ms.
- Easing: ease-out (inferred).
**1 · Announcement bar**
- **kind:** static
- **what moves:** nothing
- **from → to:** n/a
- **range:** n/a
- **reduced motion:** same
**2 · Nav**
- **kind:** static (sticky; consumes no scroll)
- **what moves:** the background state only
- **from → to:** transparent → glass after about 8px of scroll (inferred)
- **range:** a state change at the threshold, not scroll-linked
- **reduced motion:** the state is applied without a fade
**3 · Hero**
- **kind:** entrance, plus an ambient loop
- **what moves:** the eyebrow, H1 and button row; the streak columns
- **from → to:**
- Text: opacity 0→1, translateY 16→0px (inferred).
- Streak bars: an independent loop on each bar, with opacity and height flickering between about 30% and 100% and segments drifting downward. This runs on a timer, not on scroll.
- **range:**
- Text plays once on load, 500–800ms, with a 60–100ms stagger from eyebrow to H1 to buttons (not measured).
- The streak loop is continuous.
- **reduced motion:** text appears in place; the streak field renders as a single still frame
**4 · Logo wall**
- **kind:** static
- **what moves:** nothing
- **from → to:** n/a
- **range:** n/a
- **reduced motion:** same
**5 · AI showcase**
- **kind:** entrance
- **what moves:** the heading, callout labels and connectors, the IDE windows, and the terminal and checklist lines
- **from → to:**
- Heading: opacity 0→1, y 16→0.
- Connectors: scaleY 0→1 from the top.
- Main window: opacity 0→1, y 24→0.
- Assistant pane: the same, 120–200ms later.
- Lines: opacity 0→1 one by one (inferred).
- **range:** the default trigger, 500–700ms per element; lines staggered 80–150ms
- **reduced motion:** everything is shown at its final state
**6 · Clients row**
- **kind:** static
- **what moves:** nothing
- **from → to:** n/a
- **range:** n/a
- **reduced motion:** same
**7 · Autoscaling**
- **kind:** entrance
- **what moves:** the heading, the chart lines and areas, the spike tooltip, and the legend
- **from → to:**
- Charts: clip-path inset(0 100% 0 0) → inset(0 0 0 0), drawn left to right.
- Tooltip: opacity 0→1, scale 0.96→1 once the draw passes the spike.
- Heading and legend: fade up 12px (inferred).
- **range:** triggers when the chart band's top reaches 75% of the viewport; draw 800–1200ms (not measured); tooltip 200–300ms after the draw
- **reduced motion:** charts are fully drawn and the tooltip is visible
**8 · Branching**
- **kind:** entrance
- **what moves:** the stat number, the branch lines, the chips, and the feature columns
- **from → to:**
- Stat: counts up 0 → final value.
- Primary line, then each child line: stroke-dashoffset 100% → 0.
- Chips and node dots: opacity 0→1.
- Feature columns: y 12→0 with opacity (inferred).
- **range:** the default trigger; count-up and line draws 600–1000ms each; children staggered 120–200ms; columns staggered 80ms
- **reduced motion:** final numbers and fully drawn lines
**9 · Auth**
- **kind:** entrance
- **what moves:** the heading, the placeholder rows, and the frosted pill
- **from → to:**
- Rows: opacity 0→1, staggered from the centre outward.
- Pill: opacity 0→1, scale 0.96→1 (inferred).
- No pulsing loop.
- **range:** the default trigger, 400–600ms; rows staggered 30–50ms
- **reduced motion:** static panel
**10 · Fees grid**
- **kind:** entrance
- **what moves:** the glyph, the heading, and the 6 items
- **from → to:** opacity 0→1, y 12→0 (inferred)
- **range:** the default trigger; items staggered 60ms, row by row
- **reduced motion:** shown in place
**11 · Agents**
- **kind:** entrance
- **what moves:** the headline group, both panels, the activity bars, and the console lines. The status strip stays still.
- **from → to:**
- Headline group: y 16→0 with opacity.
- Panels: y 24→0 with opacity.
- Bars: scaleY 0→1 from the bottom.
- Console lines: typed in.
- **range:** the default trigger for each row; bars staggered 10–20ms; console lines 100–150ms apart (not measured)
- **reduced motion:** final state
**12 · Checkpoints**
- **kind:** entrance
- **what moves:** the timeline hairline, the ticks, and the checkpoint markers
- **from → to:** the line draws left to right (scaleX 0→1 from the left); markers go opacity 0→1, scale 0.8→1 in sequence (inferred)
- **range:** triggers when the timeline's top reaches 80% of the viewport; draw 800–1200ms; markers staggered 150ms
- **reduced motion:** fully drawn
**13 · Proof and stats**
- **kind:** entrance
- **what moves:** the stat numbers and the quote highlights
- **from → to:**
- Stats: count up to their values.
- Highlights: background-size 0% → 100%, sweeping left to right.
- Text: fades up 12px (inferred).
- **range:** the default trigger; 600–900ms; highlights staggered 150ms
- **reduced motion:** final values with the highlights already filled
**14 · Final CTA**
- **kind:** entrance, plus an ambient loop
- **what moves:** the display headline, the bottom row, and the streak field
- **from → to:** headline opacity 0→1, y 20→0; bottom row follows; streaks run the same timer loop as the hero (inferred)
- **range:** the default trigger, 600–800ms; 100ms stagger
- **reduced motion:** static frame
**15 · Footer**
- **kind:** static
- **what moves:** nothing; the status dot does not pulse
- **from → to:** n/a
- **range:** n/a
- **reduced motion:** same
**Interaction transitions** (all inferred, not part of the scroll choreography)
- Primary button hover: fill #F5F7F6 → #E5F2EB, 150–200ms. Press: scale 0.98.
- Secondary button and command pill hover: border #262727 → #3A3C3B, fill #1A1B1B → #222323.
- Nav and footer links: #8C918F → #F5F7F6, 150ms.
- Nav dropdown open: opacity 0→1, y −4→0, 150–200ms. Close: reversed, faster.
- "Learn more →" hover: the arrow moves translateX 0→3px.
- Copy icon click: swaps to an accent ✓ for about 1.5s.
- Autoscaling tab change: the active chip swaps and the charts crossfade, 200–300ms.
- Auth pill hover: the border brightens to 40% and the glow strengthens slightly.
- Logo hover: opacity 0.7 → 1.
##### Responsive (below 640px)
- **Layout:** wide-frame and container padding drop to 20px. The column-2 heading indent goes to 0, and every block is left-aligned at the edge.
- **Type:**
- Display: 3.1× (52px). Display-2: 2.8× (48px).
- H1: 2.1× (36px). H2: 1.65× (28px). H3: 1.4× (24px). H4: 1.25× (21px).
- Stats: 2.3× (40px). Pull quote: 1.1× (18px).
- Body stays 17px; descriptions 15px.
- **Nav:** collapses to wordmark plus a menu button (from 1024px down). The announcement bar truncates to one line.
- **Logo walls:** become a 3 × 2 grid; extra logos are dropped.
- **IDE mockup:** drop the file tree and the callouts. The assistant pane stacks under the editor at full width. The CTA row stacks, with the command pill at full width.
- **Section 7:** the charts stack (fixed, then autoscaled, each about 280px tall). The legend wraps, and the paragraph moves below it.
- **Branch diagram and timeline:** cropped with `overflow: hidden` to show the left 600px.
- **Feature grids:** 1 column with 40px gaps.
- **Auth table:** 360px tall.
- **Agents rows:** stack text first, then the panel, with 96px between rows.
- **Section 13:** stacks heading, stats (still 2 across), then quote.
- **Final CTA:** the bottom row stacks and the buttons go full width.
- **Footer:** link columns become a 2-column grid. The empty runway shrinks to about 160px.
##### Don'ts
- Don't use the saturated "neon" greens (#00E599-type), gradients on text, purple or blue glows, or a second accent. The accent is the muted #6DB799 and it never fills a button.
- Don't centre the statement headings. Don't split a two-tone statement into a big heading plus a smaller paragraph: it is one paragraph, one size, two colours.
- Don't drop the column-2 indent. Glyph at column 1, heading at column 2 is the system.
- Don't add a hero subtitle, a product screenshot or a 3D object to the hero. It is eyebrow, H1, two small buttons and the streak field.
- Don't put feature items in cards. No background tiles, no `rounded-2xl`, no drop shadows, no hover lift.
- Don't use big pill CTAs or 48–56px buttons. Buttons are 40px tall (32px in the nav) with 14px text and a 6px radius.
- Don't use stock photos, people, blobs, isometric illustrations or emoji icons. All visuals are drawn UI and data in greys plus the one accent.
- Don't give section 7 its own look. It is the same grid and type, only with the colours inverted.
- Don't use pure #000 or pure #FFF, and don't add colour to the logos.
- Don't use a geometric or rounded sans (Poppins, Montserrat, Nunito). It must be a neutral grotesk with negative tracking. Mono never sets a headline.
- Don't add parallax, pinning, scroll-jacking, spring bounces, endless pulses or scroll-linked scrubbing. Entrances play once and are short, and only the two streak fields loop.
- Don't spread glass around. It belongs only to the scrolled nav and the auth pill.
- Don't tighten section spacing, and don't fill the footer's empty runway with extra content. The quiet ending is intentional.
---
## Sigil — AI agent control plane
- Page: https://ai-taste-vault.vercel.app/r/sigil-ai-agent-control-plane
- Original: https://br.pinterest.com/pin/788763322288388583/
- Type: Landing page
- Tags: AI, Feature callout, Glassmorphism, Grid heavy, Hero, High contrast, Logo wall, Nav bar, Neon accent, Restrained motion, Stats band, Technical / Developer
- Palette: #121212, #F6F6F2, #FF6605, #FD8A56, #F4CBB7
- Captured: 2026-10-16
- Rebuilt with: Claude Code · Opus 5.5 · High · skills: frontend-design, emil-design-eng, transitions-dev, gsap, humanizer
- Rebuild: https://ai-taste-vault.vercel.app/v/demo/sigil-ai-agent-control-plane/index.html
### Prompt — Rebuild
_rebuild · html-css · opus_
#### Gridded light-to-dark developer landing page with an orange pixel accent
Build a 1440px-wide technical landing page that looks like an engineering drawing. The whole page sits on a fixed three-column frame of 1px hairlines. Section numbers in mono run down the left gutter. The upper half of the page is off-white paper. The lower half switches to near-black, full bleed. The only colour is a signal orange, mostly set in a pixel/bitmap font, square pixel dithering and pale peach node fills. Every corner is square. There are no shadows and no rounded pills. Motion is restrained.
No motion report was supplied. Every motion value below is read from the still and marked (inferred). Section heights come from the still's proportions, with 1 image px ≈ 1.28 CSS px across the 1440 design width.
##### Structure
**Frame (applies to every section):** full-bleed page, no outer margin. Three columns run the full height of the page and are separated by 1px vertical hairlines that never break:
- Left gutter: 184px. It holds the section index only.
- Main column: 1072px. All content goes here.
- Right gutter: 184px. It is always empty.
Every section boundary is a 1px horizontal hairline across the full 1440px width, gutters included. The hairlines keep going through the dark section in a dark grey.
The main column of section 03 is subdivided into a square cell grid: 14 columns × 5 rows of ≈76.5px cells.
Sections, top to bottom. The numbers match the gutter labels on the page:
- **00 Nav bar.** Unlabelled in the gutter. Contents, left to right inside the main column:
- A logo mark (16px pixel glyph) and a wordmark.
- A centred, boxed group of 5 mono uppercase links.
- A boxed mono uppercase CTA on the right.
- **01 Announcement strip.** The main column cell only is pure white. It holds one centred mono uppercase line, about 5 words, containing a big number ("ROUTED 12M+ …" pattern). The gutter cells stay off-white.
- **02 Hero.** Left-aligned, never centred. Contents:
- A tiny orange pixel "corner bracket" sits exactly on the top-left corner of the main column: a 16×16 orange square with an 8×8 notch cut out of its bottom-right, so it reads as an L.
- Headline on two lines.
- Line 1: a pixel asterisk glyph in #121212, about 0.45× the cap height and vertically centred on the line, then 2 words ending in a period.
- Line 2: one sans word, then two words set in the orange pixel-mono face, then a black sans period.
- Below the headline, a 2-column row:
- Left, about 520px wide: a 3-line body paragraph of 30–35 words.
- Right, starting about 690px into the main column:
- A black primary button: orange pixel asterisk + 3-word label.
- 24px to its right, a text link: 3 words + a ↗ arrow, with a 1px dashed underline.
- 12px under the button, a mono install command line with a tiny copy icon.
- **03 Agent-flow diagram.** A 14×5 hairline cell grid filling the main column. Node tiles are placed on the grid. A procedural orange pixel-dither mound rises from the bottom edge. A mono run counter sits top right.
- **04 Logo wall.** 5 placeholder customer wordmarks in grey on one row, evenly distributed. Each has its own small icon and its own type style: pixel, wide mono, sans, thin rounded mono. They are vertically centred in the cell.
- **05 Problem / proof (dark).** The background flips to #121212 across the full 1440px. Content is inset 32px inside the main column. It contains three blocks:
- **5a Header.**
- A boxed eyebrow chip: a 6px orange square bullet + 2 mono uppercase words.
- An H2 below it, 4 words, one line.
- **5b Stats grid.** A bordered 2×2 grid with asymmetric splits.
- Row 1 is split 59% / 41%.
- Row 2 is mirrored, 41% / 59%.
- Each cell holds a boxed big pixel numeral, a 3-word label and a 6-word grey caption.
- The fourth stat, "0", is the only one whose numeral is orange.
- **5c Feature callout row.** Same border system, split 53% / 47%.
- Left cell:
- An orange mono eyebrow, 2 words.
- An H2 on two lines, 5–6 words, ending in a number + unit in orange sans.
- A white button with black text, orange pixel asterisk and a 3-word label.
- Right cell: an isometric wireframe illustration.
- **06 Continuation.** It is beyond the capture (inferred). Close the page in the same dark system:
- One more bordered row, or a footer of 4 link columns of mono uppercase 12px items.
- A bottom hairline.
- The gutters keep going.
##### Scroll map
Viewport is assumed to be 1440×900. All sections are static or entrance only. Nothing pins.
- 00 Nav: 68px / 0.08 vh. Consumes 68px. Static. It is not sticky in the still. A sticky version is optional; if you make it sticky, keep the off-white background and the bottom hairline.
- 01 Strip: 54px / 0.06 vh. Consumes 54px. Static.
- 02 Hero: 432px / 0.48 vh. Consumes 432px. Entrance.
- 03 Diagram: 384px / 0.43 vh. Consumes 384px. Entrance, then a looping ambient flicker (inferred).
- 04 Logo wall: 168px / 0.19 vh. Consumes 168px. Entrance (inferred).
- 05 Problem/proof: ≈1250px / 1.39 vh. Consumes ≈1250px. Entrance per block. The breakdown:
- Header: 266px
- Stats: 384px
- Callout: ≈480px (inferred, cut off in the capture)
- Bottom padding: 120px
- 06 Continuation: ≈320px / 0.36 vh (inferred). Static.
- **Total page height ≈ 2680px (≈2.98 viewports).** The capture itself ends at ≈2050px, partway through 5c.
##### Spacing
- **Frame:** gutters 184px, main column 1072px. All dividers are 1px.
- **00 Nav:** height 68px.
- Logo starts 20px inside the main column.
- The link group box is 38px tall with 14px horizontal padding and 28px between links. It is centred on the main column.
- The CTA box is 38px tall with 0 16px padding and sits 20px from the main column's right edge.
- **01 Strip:** height 54px, text vertically centred.
- **02 Hero:**
- Padding: 72px top, 64px bottom, 16px left, 20px right.
- Headline last baseline to paragraph top: 56px.
- The paragraph and the CTA column are top-aligned.
- Button is 210×52px with 0 22px padding and a 10px gap between icon and label.
- Install line sits 12px below the button.
- **03 Diagram:**
- 0 padding. The grid touches all four section edges.
- Inside a cell: labels are vertically centred and the icon-to-label gap is 10px.
- The latency number sits 6px from the bottom of its cell, aligned under the diagonal.
- **04 Logo wall:** height 168px. Logos are distributed across the main column with ≈70px side inset and auto gaps of ≈80px.
- **05 Dark section:**
- Top padding 124px to the eyebrow chip.
- Chip is 24px tall with 0 8px padding and a 6px gap between bullet and text.
- Chip to H2: 32px. H2 to stats grid: 40px.
- The grid is inset 32px from both main-column edges, which gives a 1008px grid width.
- Stat cells are 192px tall with 30px horizontal padding and content vertically centred.
- Numeral boxes are 124×74px for 2–3 glyphs, or 66×74px for 1 glyph.
- Numeral box to label: 28px. Label to caption: 8px.
- Callout left cell: 44px horizontal padding, 84px top padding to the eyebrow.
- Eyebrow to H2: 24px.
- H2 to button: 40px.
- The white button is 210×52px.
- **Rhythm:** the light sections butt directly against each other with only a hairline between them. There are no margins between sections. The vertical rhythm comes from cell heights and padding, not from gaps.
##### Type
Three families:
- **Grotesk sans** for headlines, body and labels. Use Inter Tight or Geist.
- **Mono** for UI chrome, labels and indices. Use Geist Mono or JetBrains Mono.
- **Pixel/bitmap mono** for the accent words and big numerals. Use Departure Mono (free, OFL). Pixelify Sans is a fallback.
The body anchor is **18px**.
| Level | Family | Size (× body) | Line-height | Tracking | Weight |
|---|---|---|---|---|---|
| H1 hero | grotesk | 5.0× = 90px | 0.98 | −0.045em | 500 |
| H1 accent words | pixel mono | same box, set at 0.95em so x-heights match | 0.98 | −0.01em | 400 |
| H2 (dark section, callout) | grotesk | 3.1× = 56px | 1.05 | −0.035em | 500 |
| Stat numeral | pixel mono | 2.6× = 46px | 1.0 | 0 | 400 |
| Stat label | grotesk | 1.1× = 20px | 1.3 | −0.01em | 500 |
| Body (hero paragraph) | grotesk | 1.0× = 18px | 1.6 | −0.005em | 400 |
| Stat caption | grotesk | 0.72× = 13px | 1.5 | 0 | 400 |
| Primary button | grotesk | 0.83× = 15px | 1 | 0 | 500 |
| Nav links, nav CTA | mono, uppercase | 0.78× = 14px | 1 | 0.04em | 400–500 |
| Strip text, node labels, eyebrows, chip | mono, uppercase | 0.67× = 12px | 1.2 | 0.08em | 500 |
| Latency values, run counter, install line | mono | 0.67× = 12px | 1.2 | 0.02em | 400 |
| Gutter section index ("01"…) | mono | 12px | 1 | 0.04em | 400 |
| Logo wordmarks | mixed (pixel / wide mono / sans) | ≈1.0–1.1× | 1 | varies | 400–500 |
Line lengths:
- Hero paragraph: about 520px, 55–60ch.
- H1: no more than about 14 characters per line.
- H2 on one line: about 25 characters.
- Callout H2: wraps to two lines at about 16 characters each, inside a 440px measure.
##### Colour
| Hex | Role |
|---|---|
| #F6F6F2 | Paper. Covers every light section (00, 02, 03, 04) and all light gutter cells. This is about 45% of the page. |
| #FFFFFF | Used only in the main-column cell of the 01 strip. |
| #121212 | Ink. Light-mode text, the primary button fill, and the full dark-section background (05–06). This is about 50% of the page. |
| #FF6605 | **The single accent.** |
| #FD8A56 | Lighter orange. Used for the dither mound's sparse outer pixels and the lit top face of the cube. |
| #F4CBB7 | Peach. Fills active node tiles at 60% opacity over paper, which reads as about #F5D8CA. |
Neutrals, derived:
- Light hairlines: #E2E2DC. Fainter internal diagram grid: #EAEAE4.
- Boxed UI borders on light: #CFCFC8.
- Muted text on light: #55554F for the paragraph, #8A8A84 for logos, gutter indices and inactive latencies.
- Dark hairlines and grid borders: #262626.
- Dark muted text: #8C8C88. Dark-section white text: #F6F6F2, never pure #FFF.
**#FF6605 may appear only on:**
- the H1 pixel accent words
- the hero corner bracket
- the asterisk glyphs inside buttons
- the nav active-link dot
- active node labels and their latency values
- the dither mound
- the eyebrow chip bullet and the callout eyebrow
- the single "failure" stat numeral
- the callout's number + unit
- the central cube
Never use it as a section background, a large fill, a text-link colour or the hover colour of everything.
##### Surface
- **Borders:** 1px hairlines everywhere. Boxed UI elements (nav link group, nav CTA, eyebrow chip, numeral boxes) get a 1px border:
- #CFCFC8 on light
- rgba(246,246,242,0.12) on dark
- **Radius:** 0 on everything: buttons, chips, boxes, tiles, images and the page itself.
- **Shadows:** none.
- **Glassmorphism:** restrained, dark section only. Numeral boxes get:
- background rgba(255,255,255,0.035)
- backdrop-filter: blur(8px)
- the 1px translucent border above
This is the only "glass" on the page. Do not frost cards or the nav.
- **Diagram tiles:** an active tile is a 3-cell × 1-row rectangle filled with #F4CBB7 at 60%. Grid lines are hidden inside the tile. There is no border beyond the grid itself.
##### Imagery
All imagery is built in code (SVG, or canvas for the dither). There are no photos.
1. **Agent-flow diagram nodes (section 03).**
- **Node anatomy:** a 3-cell-wide tile.
- Cell 1: a 1px diagonal stroke from bottom-left to top-right, plus the latency value at the bottom edge.
- Cells 2–3: a 16px pixel icon + an uppercase mono label.
- **Placement:** 0-indexed column, row on the 14×5 grid.
- Retrieve: diagonal at c4 r0, label at c5, inactive. Latency "2.31" in grey.
- Router: tile c1–c3 r1, active. Diagonal inside c1, latency "0.349" in orange.
- Verify: diagonal at c9 r1, label at c10, inactive. Latency "1.39".
- Tool call: tile c6–c8 r2, active. Latency "1.778" in orange.
- Respond: diagonal at c11 r3, label at c12, inactive. Latency "2.268".
- **Colours:** inactive labels and icons are #121212. Active labels and icons are #FF6605.
- **Run counter:** top-right in r0, right-aligned with 18px inset. It reads "RUNS" in grey followed by an 8-digit comma-grouped number in ink.
2. **Pixel dither mound (section 03).**
- Bottom-anchored to the section's bottom hairline. It spans about 63% of the main column (≈680px), centred slightly right of the column centre, and rises about 130px.
- Pixels are 9px squares on a 12px pitch.
- Density follows a bell curve in x and a falloff in y: solid #FF6605 at the bottom centre, a checkerboard and ordered dither through the middle, and sparse lone pixels at the top and outer edges. Some outer pixels are #FD8A56.
- Seed it so the pattern is deterministic.
3. **Logo wall (section 04).** 5 invented wordmarks, each with a 16–18px glyph to its left.
- Each uses a different style: pixel, spaced uppercase mono, grotesk, thin rounded mono, slab.
- All are flat #8A8A84.
4. **Isometric illustration (5c right cell).**
- Fills the cell edge to edge, about 1:1 (inferred). The background is #121212 with a faint isometric grid of 1px #1E1E1E lines.
- Four large wireframe cubes sit near the corners, partly cropped by the cell edges. They have 1px #CFCFC8 strokes and faces of #141414 / #181818.
- A ring of 8 small clusters of dotted/pixel-outlined mini-cubes in #6A6A66 surrounds the centre.
- At the centre is one solid cube: top face #FD8A56, left face #FF6605, right face #C94F04. A soft orange radial glow (≈60px, about 25% opacity) sits behind it. This is the page's only glow.
5. **Icons.** 16px pixel-grid glyphs, drawn as SVG rects:
- asterisk/spark
- stacked bars (retrieve)
- plus (tool call)
- boxed check/envelope (verify)
- up-left arrow (respond)
- copy squares (install line)
##### Motion
No values were measured. Everything below is (inferred). Durations are "not measured, 400–700ms", and nothing scroll-jacks.
**00 Nav**
- kind: static
- what moves: nothing on scroll
- from → to: —
- range: —
- reduced motion: same
**01 Strip**
- kind: static
- what moves: nothing. A number tick-up is optional (inferred).
- from → to: —
- range: —
- reduced motion: static text
**02 Hero**
- kind: entrance
- what moves: H1 line 1, H1 line 2, paragraph, CTA column, corner bracket
- from → to:
- Text: opacity 0 → 1, translateY 16px → 0.
- Corner bracket: opacity 0 → 1, no translate.
- The pixel accent words additionally reveal with a stepped clip-path `inset(0 100% 0 0)` → `inset(0 0 0 0)` in 8 steps (inferred).
- range: on page load, once. Duration not measured (500–700ms), ease-out (cubic-bezier(0.2,0.7,0.2,1)), 80ms stagger in the order listed.
- reduced motion: everything visible immediately, no transforms
**03 Agent-flow diagram**
- kind: entrance, then an ambient loop
- what moves:
- node tiles and labels
- diagonal strokes
- latency numbers
- dither pixels
- run counter
- from → to:
- Diagonals draw: stroke-dashoffset from full length → 0.
- Tiles: opacity 0 → 1.
- Latency values count up from 0.
- Dither pixels appear bottom-up in rows, opacity 0 → 1.
- After the entrance, about 3% of the outer dither pixels toggle on and off every 600–900ms. The run counter increments by 1–3 every 1–2s.
- range: once, when the section top reaches 80% of the viewport. Node sequence: router → retrieve → tool call → verify → respond, 120ms stagger, each 400–600ms (not measured), ease-out. The dither row cascade takes 600–900ms total.
- reduced motion: the final state is drawn immediately, with no flicker and a static counter
**04 Logo wall**
- kind: entrance (inferred)
- what moves: the 5 wordmarks
- from → to: opacity 0 → 1, translateY 8px → 0
- range: once, when the section top reaches 85% of the viewport. 400–500ms, ease-out, 60ms stagger left to right.
- reduced motion: visible, static
**05 Problem / proof**
- kind: entrance, per block
- what moves:
- 5a: chip, H2
- 5b: the 4 stat cells and their numerals
- 5c: callout text, illustration
- from → to:
- Chip and H2: opacity 0 → 1, translateY 16px → 0.
- Stat cells: opacity 0 → 1. Numerals count up to their value in pixel font over 600–900ms; the "0" counts down from 9 to 0.
- Callout text: opacity 0 → 1, translateY 16px → 0.
- Illustration: opacity 0 → 1, and the central cube translates 12px up → 0. Afterwards its glow breathes between 20% and 30% opacity on a 3s loop.
- range: each block plays once when its top reaches 80% of the viewport. 500–700ms, ease-out, 80ms stagger across the 4 stat cells in reading order.
- reduced motion: final values shown, no count-up, no glow loop
**06 Continuation**
- kind: static
- what moves: nothing
- from → to: —
- range: —
- reduced motion: same
**Interaction transitions** (separate from scroll; all inferred, 150–200ms ease-out):
- **Nav links:** grey → #121212 on hover. The 4px orange active dot moves to the hovered link (transform only).
- **Nav CTA and boxed buttons:** the border darkens to #121212 and the background goes to #FFFFFF.
- **Primary black button:**
- Hover: background #121212 → #262626, and the asterisk rotates 90°.
- Press: translateY 1px.
- **White callout button:** hover background #F6F6F2 → #E9E9E4, asterisk rotates 90°.
- **Text link:** the dashed underline becomes solid and the arrow nudges 2px up-right.
- **Copy icon:** on click the icon swaps to a check for 1.2s.
- **Diagram tiles:** an inactive node on hover gets the 60% peach fill and an orange label. That is the only hover inside the diagram.
##### Responsive (below 640px)
- **Gutters:** drop both gutters and their vertical hairlines. Move each section index into the top-left of its section as a 12px mono label with 16px inset. Horizontal section hairlines stay.
- **Nav:** logo plus a boxed square menu button. Links go into a full-width dropdown list of bordered rows. The nav CTA is hidden.
- **02 Hero:**
- Padding 48px 16px.
- H1 at 2.7× body = 48px, still two lines.
- Body 17px.
- CTA column stacks under the paragraph: the full-width button, then the docs link, then the install line.
- **03 Diagram:**
- Re-grid to 6 columns × 8 rows of square cells.
- Nodes stack in a zigzag down the grid, keeping their 3-cell anatomy.
- The dither mound scales to 100% width at 90px tall.
- The counter stays top right.
- **04 Logo wall:** wraps to rows of 3 + 2, centred, with 32px row gap.
- **05 Dark section:**
- Inset 16px. H2 at 2.2× = 40px.
- The stats grid becomes 1 column of 4 cells, each about 150px tall.
- The callout stacks: text cell first, then the illustration at 1:1, full width.
- **Drop:** the dither flicker loop and the cube glow loop.
##### Don'ts
- **Don't round anything.** No 8px buttons, no pill chips, no rounded tiles, and no rounded frame around the page. Square corners are the identity.
- **Don't drop the hairline frame.** The gutters with their section numbers and the full-width hairlines are the design. Without them it becomes a generic dark/light SaaS page. Don't give sections margins or gaps that break the lines.
- **Don't spread the orange.** No orange section backgrounds, no orange headings beyond the specified words, no orange text links, and no orange-to-pink gradients. In the light sections the accent works because 95% of the surface is paper and ink.
- **Don't set the accent words in the sans.** The pixel/bitmap mono is the only playful note. Likewise, don't set the stat numerals in the grotesk.
- **No purple, blue or teal "AI" gradients, no glowing orbs, no mesh blobs, no neon outlines.** The single glow is the small one behind the central cube.
- **No drop shadows, and no heavy frosted-glass cards.** The glass is a 3.5% white fill with a hairline on the numeral boxes, nothing more.
- **Don't centre the hero.** The headline, paragraph and CTAs sit on a left-aligned asymmetric 2-column row.
- **Don't make the dark section an inset card.** It runs edge to edge at 1440px, and the gutter hairlines keep going through it in #262626.
- **Don't use pure #000 or #FFF for the dark sections or their text.** Use #121212 and #F6F6F2. Pure white is reserved for the 01 strip cell and the callout button.
- **Don't make the stats grid four equal cards.** The rows split 59/41 and then 41/59, and the cells share borders instead of floating with gaps.
- **Don't use an illustration library, emoji or Heroicons-style line icons.** Icons are drawn on a pixel grid. The diagram is cells, diagonals and labels, not a node graph with curved bezier edges.
- **Don't add bouncy, springy or parallax motion, scroll pinning or scroll-jacking.** Everything is a short fade with a 16px rise, once, plus two tiny ambient loops.
- **Don't let mono uppercase labels go below 12px or lose their 0.08em tracking.** Don't set the H1 at default tracking; it needs −0.045em to look engineered.
### Imagery — already generated
These pictures were made for this design and are hosted at the URLs below.
Use them as the `src` exactly as written, and keep the alt text. Do not
generate your own, do not reach for a stock library or a placeholder
service, and do not feed the Imagery section above back to an image model —
that work is done. Size and crop them with CSS (`object-fit: cover`) rather
than assuming their dimensions, and download them into the project if you
would rather not hotlink.
- https://ai-taste-vault.vercel.app/v/demo/sigil-ai-agent-control-plane/images/01-isometric-cube-field.webp — Isometric wireframe illustration on near-black: four large outlined cubes at the corners, a ring of small dotted cube clusters, and one solid orange cube glowing at the centre
### Image prompts
What each picture above was generated from, for anyone changing one.
**Isometric wireframe illustration on near-black: four large outlined cubes at the corners, a ring of small dotted cube clusters, and one solid orange cube glowing at the centre** (`01-isometric-cube-field`)
MEDIUM AND FINISH: a flat, precise vector-style isometric technical illustration, like a clean SVG line drawing from an engineering diagram. Use crisp 1px-weight hairline strokes, flat-filled faces and true 30° isometric projection with no perspective. It is not a 3D render and not a photograph. There is no texture, no noise, no grain and no material shading beyond flat face tones. COLOUR AND VALUE: the background is a flat, uniform near-black #121212 across the whole frame. Nothing is darker than #121212 and there are no pure blacks. Large cube faces are only barely lifted off the background, at #141414 and #181818. Their outline strokes are a light warm grey #CFCFC8, which is the lightest neutral in the frame. Nothing is pure white. The small cube clusters are drawn in a mid grey #6A6A66 with dotted or pixel-stepped outlines. The only colour is the central cube: top face #FD8A56, left face #FF6605, right face #C94F04. Behind it is a small, soft orange radial glow about one eighth of the frame wide at roughly 25% opacity. Everything else in the frame is neutral grey on near-black. EDGES: all four edges are the same flat #121212 as the background, with no vignette and no fade. The image drops edge to edge into a #121212 page cell bordered by hairlines, so the seam must be invisible. A faint isometric diamond grid of 1px #1E1E1E lines covers the whole background evenly and runs off every edge. SUBJECT: an abstract 'agent network' made of cubes. Four large hollow wireframe cubes sit near the four corners, each about a quarter of the frame wide, and each is partly cropped by the frame edges. Between them, a loose ring of eight small clusters circles the centre. Each cluster is a short diagonal row of three to four tiny cubes outlined in dotted or pixel-stepped grey lines, and the rows follow the isometric axes. At the exact centre is one small solid orange cube, about one eighth of the frame wide, with its faint glow. It is the single point of colour and the focal point. COMPOSITION: square, symmetrical around the centre, with generous dark negative space between the corner cubes, the ring and the centre cube. It should read calm, sparse and diagrammatic. AVOID: perspective or vanishing points, glossy or metallic 3D rendering, reflections, bevels, ambient occlusion, a floor plane or shadows, lens flare, bloom beyond the one small glow, neon outlines, purple, blue or teal tints, gradients in the background, a vignette, a coloured grid, extra orange elements, rounded cubes, and clutter. Output a square 1:1 frame, 1024x1024. No text, no lettering, no numbers, no logos, no watermarks, no UI.
---
## Agency hero with motion-blur photo
- Page: https://ai-taste-vault.vercel.app/r/agency-hero-with-motion-blur-photo
- Original: https://dribbble.com/shots/27757320-Creative-Digital-Agency-Website-UI-UX-Design
- Type: Section
- Tags: Agency / Studio, Earth tones, Editorial, Full bleed, Hero, High contrast, Nav bar, Overlapping elements
- Palette: #D6E8E8, #1A261C, #384638, #876846
- Captured: 2026-10-10
- Rebuilt with: Claude Code · Opus 5.5 · High · skills: frontend-design, emil-design-eng, transitions-dev, gsap, humanizer
- Rebuild: https://ai-taste-vault.vercel.app/v/demo/agency-hero-with-motion-blur-photo/index.html
### Prompt — Rebuild
_rebuild · html-css · opus_
#### Agency hero with motion-blur crowd photo
A single full-bleed hero section for a creative studio. One photograph fills the whole section. It shows a crowd blurred by a long exposure, with one person in sharp focus at the centre, standing against a pale mint wall that darkens to near-black green at the bottom. A very large two-line grotesk headline sits on the light upper half, set in deep forest green. An oversized white marquee line runs across the dark lower half. Smaller elements overlap the headline and the photo: a rating badge, a dark circular CTA, an award mark, a thin orbit line and a sparkle. The page has no outer margin, no rounded page corners and no colour behind it. The section's top-left corner is the viewport's top-left corner.
##### Structure
- **Viewport reference:** 1440 CSS px wide. The section is 1440 × 1110 (`height: max(100svh, 77vw)`), so the aspect is about 1.3 : 1.
- **Container:** full bleed. Content sits inside 80px side gutters, which leaves a 1280px content width. Use a 12-column grid with 24px gaps for placement. Most elements are absolutely positioned on top of the photo, at the coordinates below (measured from the section's top-left at 1440).
- **Sections, top to bottom:**
1. **Hero.** This is the only section. Its layers, back to front:
- **1a. Background photo:** fills the full 1440 × 1110.
- **1b. Legibility overlays:** gradients over the photo.
- **1c. Nav bar:** centred vertically at y = 48.
- Logo at the left, x = 80: a small oval mark made of horizontal stripes, plus a wordmark of about 8 characters with a tiny superscript ™-style mark.
- Three uppercase links centred on the page: the first starts at x ≈ 524, the last ends at x ≈ 902, with 80px between them.
- A text CTA at the right ending at x = 1360: uppercase label (3 words) plus a ↗ arrow, underlined with a 1px rule.
- **1d. Headline:** two words, set in two lines.
- Line 1 starts at x = 80. Cap top is at y ≈ 150, baseline at y ≈ 277, and the line is about 740px wide.
- Line 2 is indented to x ≈ 443, with its baseline at y ≈ 425. Its right edge lands near x ≈ 1020.
- The stepped indent is essential.
- **1e. Intro paragraph:** top-right. It starts at x ≈ 924, top at y ≈ 170, about 430px wide, 3 lines.
- **1f. Rating badge:** a 237 × 97 rectangle at x 195–432, y 295–392. It sits in the empty space left of headline line 2 and just under line 1. It touches neither line.
- **1g. Circular CTA:** a 164px disc centred at x ≈ 1152, y ≈ 403. It sits right of headline line 2 and below the paragraph.
- **1h. Orbit line and sparkle:** a 1px elliptical line around the central figure, plus a four-point sparkle about 32px across at x ≈ 978, y ≈ 530, with a smaller twin offset down-right.
- **1i. Award block:** a laurel-wreath award mark (about 124 × 82) at x ≈ 981, y ≈ 716. To its right, starting at x ≈ 1138, is a 3-line uppercase statement (about 6 words).
- **1j. Marquee line:** a single huge uppercase line, cap top at y ≈ 859 and baseline at y ≈ 957. Content: two service names separated by a long em-dash, e.g. "SERVICE ONE — SERVICE TWO — …". It bleeds off both edges: the first letter is cut by the left edge and the last word is cut mid-word by the right edge.
- **1k. Bottom-left tagline:** 3 centred uppercase lines (about 8 words total), centred on x ≈ 228, top at y ≈ 997, block about 250px wide.
##### Scroll map
No motion report was supplied. Everything here is read from a single still (inferred).
1. **Hero:** 1110px tall, 1.23 viewports at 1440 × 900. It consumes 1110px of scroll. Kind: entrance on load, plus a continuous marquee loop (time-based, not scroll-linked).
Total page height: 1110px. This artifact is one section.
##### Spacing
- **Side gutters:** 80px. Use the same value for the logo, headline line 1 and the right end of the nav CTA.
- **Nav:** 32px top padding. The nav row is 32px tall, so its centre is at y = 48. Links are spaced 80px apart. The text CTA's underline sits 6px below the baseline.
- **Nav to headline:** about 100px from the nav's centre line to the headline's cap top.
- **Headline:** the gap between line 1's baseline and line 2's cap top is about 20px, because line-height is 0.84. Line 2 is indented about 363px (roughly 3.5 columns).
- **Rating badge:** 18px internal padding. Two columns inside: a stacked label and wordmark on the left, stars over a rating line on the right, with 20px between the columns.
- **Paragraph:** its top aligns roughly with line 1's cap top plus 20px. The gap from the paragraph to the CTA disc is about 70px.
- **Award block:** laurel and text are 32px apart. The text's first line aligns with the laurel's top.
- **Marquee:** the gap between marquee items (word, dash, word) is about 0.45em on each side of the dash.
- **Bottom spacing:** marquee baseline to tagline top is about 40px, and tagline bottom to section bottom is about 30px. The tagline sits very low, nearly touching the bottom edge.
- **Rhythm:** there is no vertical rhythm between sections because there is one section. The composition is weighted dark-heavy at the bottom and light-heavy at the top.
##### Type
All type is one grotesk family: a neo-grotesk with a straight-legged R and tight apertures (in the Neue Montreal / Aeonik family). Free stand-in: **Inter Tight** for display sizes and **Inter** for text sizes. Never use a serif.
Body anchor: **17px**.
| Level | Ratio | Size | Line-height | Letter-spacing | Weight | Case / notes |
|---|---|---|---|---|---|---|
| Headline (1d) | 10.5× | 178px | 0.84 | −0.045em | 600 | Uppercase, 2 lines, one word each |
| Marquee (1j) | 8× | 136px | 1.0 | −0.03em | 500 | Uppercase, single line, never wraps |
| Award statement (1i) | 1.35× | 23px | 1.3 | −0.005em | 600 | Uppercase, 3 lines, max about 14ch |
| Logo wordmark | 1.3× | 22px | 1 | −0.02em | 600 | Mixed case |
| Body / intro paragraph (1e) | 1× | 17px | 1.47 | 0 | 400 | Sentence case, max 48ch (about 430px) |
| Tagline (1k) | 1× | 17px | 1.55 | 0.01em | 500 | Uppercase, centred, max about 22ch |
| CTA disc label (1g) | 0.94× | 16px | 1.15 | 0.02em | 600 | Uppercase, 2 lines, centred |
| Nav links, text CTA | 0.88× | 15px | 1 | 0.08em | 500 | Uppercase |
| Badge rating line | 0.82× | 14px | 1.2 | 0 | 500 | Uppercase |
| Badge micro-label | 0.71× | 12px | 1.1 | 0.04em | 500 | Uppercase, "REVIEWED ON"-style, 2 words |
| Badge wordmark | 1.5× | 26px | 1 | −0.03em | 700 | A short review-platform wordmark |
The headline's two words should each be 5–6 letters, and line 2 must be the wider of the two. The marquee must be long enough to overflow 1440 at least twice over.
##### Colour
| Hex | Role |
|---|---|
| `#D6E8E8` | Pale mint-grey. Dominant colour of the upper ~55%: the photo's wall plus the top overlay. This is the surface the headline, nav and paragraph sit on. Also the page background behind the photo while it loads. |
| `#1A261C` | Deep forest near-black. All dark text: headline, nav, paragraph, badge text. Fill of the CTA disc. The colour the photo fades to in the bottom ~40%. Never use `#000`. |
| `#384638` | Moss grey-green. Secondary dark: the badge's 1px border, the inner highlight of the CTA disc's radial gradient, mid-tones. |
| `#876846` | Warm bronze, the single accent. Allowed in only three places: the five rating stars, the keyboard focus ring, and the hover tint on the text CTA's arrow. Nowhere else. |
| `#F1F5F1` (derived) | Off-white for all type on the dark half: marquee, award text, tagline, CTA label, orbit line, sparkle. Never use `#FFF`. |
Overlays (1b):
- **Top:** a linear gradient from `#D6E8E8` at 70% opacity at y = 0 to transparent at y ≈ 45%. It keeps the headline crisp.
- **Bottom:** a linear gradient from transparent at y ≈ 50% to `rgba(26,38,28,0.88)` at y = 100%. It guarantees contrast for the off-white type.
##### Surface
- **Borders:**
- **Rating badge:** a 1px solid border in `#384638` at about 35% opacity. Its fill is `rgba(241,245,241,0.55)` with `backdrop-filter: blur(6px)`. It has square corners (radius 0).
- **Text CTA:** a 1px underline in `#1A261C`.
- Nothing else has a border.
- **Radii:**
- **CTA disc:** a full circle.
- **Everything else:** 0. No rounded cards, chips or buttons.
- **Shadows:**
- **None** anywhere.
- **CTA disc depth:** the disc gets its depth only from a radial gradient. `#384638` sits at the top-left (30% / 25%) and fades to `#1A261C` at the edge, at 94% opacity, so a hint of the photo shows through.
- **Orbit line:** a 1px stroke in `#F1F5F1` at 70% opacity. No fill.
##### Imagery
**1a. Background photo.** Full bleed, 1440 × 1110 (about 1.3 : 1), `object-fit: cover`, focal point at 52% / 55%.
- **Subject:** a long-exposure interior shot of a crowd of people walking. Everyone except one person is smeared horizontally into ghostly motion trails.
- **Central figure:** one young adult stands still, dead centre-right of the frame and in sharp focus, looking straight at the camera.
- Chin-length bob, oversized plain white or ecru crew-neck tee.
- Face centred at about x = 710, head top at about y = 437. The figure spans about x 570–934 and is cropped at the bottom edge around the hips.
- **Background:** the wall behind is flat pale mint-grey. The blurred crowd is dressed in dark greens, charcoals and browns, which makes the lower half fall naturally towards `#1A261C`.
- **Grade:** cool, slightly desaturated, and a little hazy. The warm bronze in the hair and skin is where the accent comes from.
- **Composition:** the sharp figure overlaps the marquee line. The marquee is drawn in front of the figure, so the dash in the marquee crosses the white tee in low contrast. That is intended.
**Other graphics:**
- **Award mark (1i):** a small monochrome laurel-wreath award badge in off-white, made of two curved laurel branches around 3 tiny centred lines ("AWARD WINNING / BEST AGENCY / year"). Draw it as inline SVG.
- **Logo (1c):** a small horizontal-striped oval glyph, about 30 × 18, in `#1A261C`.
- **Orbit line (1h):** one ellipse, about 500 × 640, rotated about 22° clockwise, centred on about (720, 760). Its upper-right arc passes just left of the sparkle and its lower-left arc swings out under the tagline. Draw it as SVG, absolutely positioned. It sits in front of the photo and behind the marquee.
- **Sparkle (1h):** a four-point concave star with a smaller twin, filled `#F1F5F1`.
##### Motion
No motion report was measured. Every value below is inferred from the still, and durations are given as ranges.
**1. Hero**
- **kind:** entrance, plus one continuous time-based loop (the marquee).
- **what moves:**
- Background photo.
- Headline lines 1 and 2.
- Nav, paragraph and badge.
- CTA disc.
- Orbit line.
- Award block and tagline.
- Marquee.
- **from → to:**
- **Photo:** scale 1.08 → 1.0, opacity 0 → 1.
- **Headline lines:** each line is clipped by its own overflow-hidden mask. translateY 100% → 0 (inferred).
- **Nav, paragraph, badge, award, tagline:** opacity 0 → 1, translateY 16px → 0.
- **CTA disc:** scale 0.6 → 1, opacity 0 → 1, rotation −20° → 0.
- **Orbit line:** stroke-dashoffset from full length → 0, so the line draws on.
- **Marquee:** continuous translateX 0 → −50% over a duplicated track, looping linearly, moving right-to-left.
- **range:**
- **Trigger:** once, on page load. This is not scroll-linked and does not reverse.
- **Photo:** 1.2–1.6s, ease-out (cubic-bezier(0.16, 1, 0.3, 1)).
- **Headline:** lines staggered 80–120ms, each 0.8–1.0s with the same ease, starting about 200ms after the photo.
- **Secondary elements:** fade in after the headline, staggered 60–80ms, 0.5–0.7s each.
- **CTA disc:** 0.6–0.8s with a slight overshoot.
- **Orbit draw:** 1.2–1.8s, ease-in-out.
- **Marquee:** one full loop takes 25–40s (not measured). Speed is constant.
- **reduced motion:**
- Everything appears at its final state with no transforms.
- The marquee stops in the position shown: the first word starting at the left edge, cut by the right edge mid-word.
- The orbit is drawn fully.
**Interaction transitions** (separate from the entrance choreography):
- **Nav links:** on hover, a 1px underline in `#1A261C` grows from left to right, scaleX 0 → 1 over 250ms with an ease-out curve.
- **Text CTA:** on hover, the arrow moves 3px up and 3px right and tints to `#876846` over 200ms.
- **CTA disc:**
- **Hover:** scales to 1.06, and the label and arrow rotate a further 8° over 300ms with an ease-out curve.
- **Press:** scales to 0.97 over 100ms.
- **Marquee:** on hover, slows to 25% speed (optional). It never stops dead.
- **Rating badge:** on hover, the fill opacity rises from 0.55 to 0.75 over 200ms.
- **Focus:** all interactive elements get a 2px `#876846` outline at 3px offset.
##### Responsive (below 640px)
- **Section:** height becomes `min(100svh, 760px)`. Gutters become 20px.
- **Nav:** the three centre links collapse into a "MENU" text button (15px, uppercase). Logo and text CTA stay, but the text CTA is dropped if it would collide with the logo.
- **Headline:** about 76px (`clamp(64px, 19vw, 178px)`), line-height 0.86. Line 2 keeps a smaller indent of about 18vw. The stepped offset must survive.
- **Intro paragraph:** moves below the headline. Full width minus gutters, 16px, max 34ch.
- **Rating badge:** shrinks to about 180 × 76 and moves below the paragraph, left-aligned.
- **CTA disc:** 112px, placed bottom-right above the marquee, overlapping the photo.
- **Award block:** dropped.
- **Marquee:** about 72px (`clamp(56px, 18vw, 136px)`). It still bleeds off both edges.
- **Tagline:** stays bottom-left, left-aligned instead of centred, 15px.
- **Orbit and sparkle:** the orbit scales down to stay around the figure. The smaller sparkle twin is dropped.
- **Photo focal point:** moves to 55% / 50% so the face stays clear of the headline.
##### Don'ts
- **Edges and corners:** don't put the hero in a card, frame or rounded container, and don't add any margin or colour around it. The photo touches all four viewport edges.
- **Photo:** don't use a sharp crowd photo, a studio portrait on a plain backdrop, or a dark-all-over image. The idea is a still sharp figure among a horizontally smeared crowd, light at the top and dark at the bottom.
- **Headline layout:** don't centre the headline, put it on one line, or right-align line 2. It is left-set with line 2 stepped in about 363px, and its line-height stays below 0.9.
- **Headline weight:** don't use a light, thin or condensed headline, and don't use a geometric face like Futura or Poppins. It is a heavy, wide-ish neo-grotesk with tight negative tracking.
- **Marquee width:** don't fit the marquee to the viewport or let it wrap. It must be cut by both edges, including mid-word at the right.
- **Pure black and white:** don't use `#000` or `#FFF`. The darks are forest green `#1A261C` and the lights are mint `#D6E8E8` and off-white `#F1F5F1`.
- **Accent:** don't use the bronze accent on the headline, the CTA disc or any large area. It only appears on the stars, the focus ring and the arrow hover. Don't make the stars red or yellow.
- **CTA shape:** don't replace the circular CTA with a pill or rectangle button, and don't give it a shadow or glossy highlight beyond the subtle radial gradient. Its label is slightly rotated.
- **Rating badge:** don't round it or add a shadow. It is a square-cornered, hairline-bordered, frosted rectangle.
- **Extra content:** don't add a scroll-down indicator, a hero sub-CTA button row, social icons, a gradient blob or a grain overlay. None of these exist here.
- **Overlap:** don't keep elements in tidy, non-overlapping boxes. The badge sits between the headline lines, the disc sits beside line 2, the marquee crosses the figure, and the orbit wraps the figure. The layering is the design.
- **Motion:** don't make the entrance scroll-linked or replay it on scroll-back. Don't add parallax that wasn't measured.
### Imagery — already generated
These pictures were made for this design and are hosted at the URLs below.
Use them as the `src` exactly as written, and keep the alt text. Do not
generate your own, do not reach for a stock library or a placeholder
service, and do not feed the Imagery section above back to an image model —
that work is done. Size and crop them with CSS (`object-fit: cover`) rather
than assuming their dimensions, and download them into the project if you
would rather not hotlink.
- https://ai-taste-vault.vercel.app/v/demo/agency-hero-with-motion-blur-photo/images/01-hero-motion-blur-crowd.webp — A young woman with a chin-length brown bob and a white tee stands still and looks at the camera while a crowd streams past her as horizontal motion blur, against a pale mint wall
### Image prompts
What each picture above was generated from, for anyone changing one.
**A young woman with a chin-length brown bob and a white tee stands still and looks at the camera while a crowd streams past her as horizontal motion blur, against a pale mint wall** (`01-hero-motion-blur-crowd`)
MEDIUM AND FINISH: a real long-exposure editorial photograph shot indoors. It has a soft, slightly hazy, low-clarity finish with a gentle matte fade and no visible grain. The one still person is tack sharp. Everyone else is smeared sideways into translucent ghost trails by a slow shutter. COLOUR AND VALUE: a cool, slightly desaturated mint and grey-green grade. The lightest value is the wall at about #D9EAEA. Nothing is brighter than the subject's tee at about #E8EEE9, and there is no pure white. The darkest value is a deep forest near-black of about #18241A, found only in the bottom corners and lower edge. There is no neutral black anywhere. Mid-tones are muted sage and grey-green (#8FA6A0, #5E6F64, #384638). The only warmth is in skin and hair: muted bronze-brown hair around #6A4A32 and soft skin tones around #C9A58E. Keep everything else cool. EDGES: the photo fills a full-bleed hero edge to edge. The top 38% is an almost flat, featureless pale mint-grey wall (#D6E8E8 to #DCEBEB) with only the faintest soft falloff, because a huge dark headline sits there. From about 45% down, the frame steadily darkens. The blurred crowd is dressed in dark greens, charcoals and browns, so the bottom 30% sinks to deep forest green #1A261C, where large off-white type sits. The sides stay dark through the lower half. SUBJECT: one young adult woman stands perfectly still at the horizontal centre of the frame and looks straight into the lens with a calm, neutral expression. She has a chin-length straight brown bob and wears an oversized plain ecru-white crew-neck tee with no print. All around her, a dense crowd of walking people passes left and right. They are rendered as long horizontal motion streaks: semi-transparent heads, shoulders and dark clothing dragged into soft horizontal smears, with a few faint thin light streaks. Their heads sit at about her height or slightly lower, so they cluster in the middle band and stay below the top 40%. COMPOSITION: wide frame. Her face is at the horizontal centre and about 45% down from the top. The top of her head is at about 38% of frame height. Her figure spans roughly the middle quarter of the width and is cropped by the bottom edge at hip level. The outer 10% on each side can be cropped later, so nothing important sits there. The wall above her and the band above the crowd stay empty and calm. AVOID: a sharp crowd, a studio portrait on a seamless backdrop, a dark-all-over or moody night image, warm or golden lighting, saturated colour, neon, strong rim light or a dramatic spotlight, a black vignette, lens flare, shallow-depth-of-field bokeh balls, HDR clarity, a city street or outdoor scene, a busy architectural background, and graphic prints on the shirt. Take only the palette, value range, haze and motion-blur treatment from the reference screenshot, and ignore all of its text, badges, buttons, lines and layout. Output a wide 3:2 landscape frame, 1536x1024. No text, no lettering, no logos, no watermarks, no UI.
---
## Cinematic agency landscape hero
- Page: https://ai-taste-vault.vercel.app/r/cinematic-agency-landscape-hero
- Original: https://br.pinterest.com/pin/841891724129192715/
- Type: Section
- Tags: Agency / Studio, Asymmetric, Full bleed, Gallery, Hero, Luxury, Nav bar, Organic, Restrained motion
- Palette: #040903, #273707, #7A9796, #687607, #DBF7E7
- Captured: 2026-10-08
- Rebuilt with: Claude Code · Opus 5.5 · High · skills: frontend-design, emil-design-eng, transitions-dev, gsap, humanizer
- Rebuild: https://ai-taste-vault.vercel.app/v/demo/cinematic-agency-landscape-hero/index.html
### Prompt — Rebuild
_rebuild · html-css · opus_
#### Meadow monolith agency hero
A single full-viewport hero for a creative studio. One cinematic photograph fills the whole frame: rolling green hills under an overcast sky, with a mirrored monolith standing in the meadow. A thin, quiet UI layer floats on top of it. It has a hairline nav, a small "offering" cluster at top left, a frosted-glass work-preview card at top right, a huge light-weight two-line headline at bottom left, a pill CTA and a short paragraph at bottom right. Hairline rules marked with small "pulse" glyphs hold the composition together. The look comes from the image and the restraint: thin type, thin lines, translucent surfaces and no coloured buttons.
All measurements are CSS px at a 1440 × ~880 viewport.
##### Structure
- **Frame:** full bleed, `100vw × 100vh` (min-height 820px, max-height 1000px). Background image covers the whole frame.
- **Container:** full width with 56px side margins, so content is 1328px wide. Use a 12-column grid with 24px gutters (each column ≈ 88.7px).
- **Columns:** the left group (offering, headline, CTA) uses columns 1–6. The right group (glass card, paragraph) uses columns 9–12, from x≈954 to x≈1384, about 428px wide. Columns 7–8 stay empty, and the monolith in the photo stands there (x≈672–802).
- **Layout is asymmetric and anchored to the corners.** Nav and offering/card hang from the top. Headline, CTA and paragraph sit on the bottom. The middle of the frame is left open for the photograph.
Sections, top to bottom:
1. **Hero.** It's the only section and holds these layers, back to front:
- 1a. Background photograph plus gradient overlays.
- 1b. Nav bar: wordmark, three links and a full-width hairline underneath.
- 1c. Offering cluster at top left: a label and three tag chips.
- 1d. Glass preview card at top right: two thumbnails, two tab labels and a two-line caption.
- 1e. Decorative hairlines with pulse glyphs: one vertical on the left, one vertical on the right, one horizontal at the bottom.
- 1f. Headline at bottom left.
- 1g. CTA pill at bottom left, and the horizontal hairline running from it.
- 1h. Body paragraph at bottom right.
##### Scroll map
- **1. Hero:** ~880px, 1.0 viewport, consumes 1.0 viewport of scroll. Kind: entrance on load, plus an optional scroll-linked background drift as it exits (inferred).
- **Total page height:** ~880px (1 viewport). This reference is a single section. Don't invent further sections.
##### Spacing
Vertical positions are measured from the top of the frame at 880px tall. Bottom-anchored items are measured from the bottom.
- **Side margins:** 56px left and right. Everything aligns to these edges.
- **Nav:**
- Row centre at y=47. Wordmark and links share one baseline.
- Hairline at y=94, spanning the full 1328px content width.
- **Offering cluster (1c):**
- Label top at y≈136, 40px below the nav rule.
- Chips start 16px below the label (y≈176). Chips are 28px tall with 12px between them.
- **Glass card (1d):**
- Top at y≈134, aligned with the offering label. Spans x 954–1384 (≈428 × 268).
- Inner padding 16–18px.
- Two thumbnails side by side with a 10px gap.
- Tab labels 8px under the thumbnails, also with a 10px gap between them.
- Caption 12px under the tabs.
- **Left vertical hairline:** x=67 (11px inside the margin), y≈250–486. Pulse glyph at y≈368.
- **Right vertical hairline:** x≈1372, y≈444–696. Pulse glyph at y≈570.
- **Bottom of the frame:**
- CTA bottom sits 48px above the frame bottom.
- Headline last line sits 32–40px above the CTA top.
- Paragraph bottom aligns with the CTA bottom.
- **Bottom horizontal hairline:** sits on the CTA's vertical centre (y≈803). Runs from the CTA's right edge +12px to x≈934, so it stops 20px short of the paragraph column. Pulse glyph at about its midpoint (x≈618).
- **Rhythm:** there's no stacked section rhythm. The composition works as four corner masses with a large empty centre. Keep the centre band (roughly y 220–520, x 400–950) free of UI.
##### Type
Two families:
- **Wordmark:** a condensed bold grotesk. Free stand-in: Barlow Condensed 600 or Oswald 500.
- **Everything else:** a light neo-grotesk with an open, slightly geometric feel and a single-storey "g". Free stand-ins: Inter Tight or Inter (weight 300 for display), or Instrument Sans.
The body anchor is 16px.
| Level | Size | Line-height | Letter-spacing | Weight | Notes |
|---|---|---|---|---|---|
| Headline | 6.4× = 102px | 1.08 | −0.025em | 300 | 2 lines, sentence case, ends with a period. Each line ≤ ~17 characters, block ≤ ~720px wide |
| Wordmark | 1.9× ≈ 30px | 1.0 | 0.02em | 600 | Uppercase, 4–6 letters, condensed |
| Offering label | 1.25× = 20px | 1.3 | 0 | 300 | 2 words, sentence case |
| CTA text | 1.2× ≈ 19px | 1.0 | 0 | 400 | 3 words, sentence case, with a sparkle icon after it |
| Body paragraph | 1× = 16px | 1.5 | 0.005em | 400 | 3–4 lines, max ~54ch (428px column) |
| Card caption | 1× = 16px | 1.45 | 0 | 400 | 1 sentence wrapping to 2 lines |
| Nav links | 0.94× = 15px | 1.0 | 0.04em | 400 | UPPERCASE, single word each |
| Chips / card tabs | 0.875× = 14px | 1.0 | 0.01em | 400 | 2 words each, title case |
**Placeholder copy roles:**
- Headline: 5–6 words about stories, space or feeling, split as 3 words over 2 words, ending with a period.
- Offering label: 2 words, like "Our offering".
- Chips: three 2-word service names.
- Card tabs: two 2-word format names.
- Caption: one poetic sentence, about 12 words.
- Paragraph: two sentences, about 40 words, describing the studio's work.
- CTA: 3-word invitation.
##### Colour
| Hex | Role |
|---|---|
| `#273707` deep moss | Dominant surface. The mid-ground grass covers ~45% of the frame. Comes from the photo only. |
| `#7A9796` sage-grey | Overcast sky, the top ~35% of the frame. Comes from the photo only. |
| `#040903` near-black green | Shadows and the bottom/corner vignette in overlays. Also the tint inside the CTA glass (`rgba(4,9,3,0.35)`). |
| `#DBF7E7` pale mint-white | All UI ink: text, hairlines and glass tints. Use it at varied opacities, never as a solid fill. |
| `#687607` olive | The single accent. It appears in the sunlit grass. In the UI it may appear only as the CTA hover glow and as the pulse glyph colour on hover/active. Nowhere else. |
UI opacity steps on `#DBF7E7`:
- 100%: headline, nav and CTA text.
- 85%: paragraph and caption.
- 25%: hairlines and the nav rule.
- 12%: chip and tab fills.
- 10%: card fill.
**Overlays on the photo:**
- Bottom: `linear-gradient(to top, rgba(4,9,3,0.6) 0%, rgba(4,9,3,0) 45%)`.
- Top: a soft `rgba(4,9,3,0.25)` → transparent over the top 20%, so the nav reads.
- Optional radial darkening behind the headline.
Never flatten the whole image with one tint.
##### Surface
- **Hairlines:** 1px, `rgba(219,247,231,0.25)`. Applies to the nav rule, the three decorative lines and the card border (the card border goes up to 0.3).
- **Pulse glyph:** a tiny ECG/heartbeat zig-zag, ~16 × 12px, 1.25px stroke, 60% mint. It breaks the line it sits on, leaving an 8px gap on each side.
- **Glass card:**
- Fill `rgba(219,247,231,0.10)` with `backdrop-filter: blur(14px) saturate(1.1)`.
- 1px border at 30%.
- Radius 12px.
- **Thumbnails:** radius 6px.
- **Card tabs and offering chips:** fill at 12%, radius 4px, no border, 24–28px tall, 10–12px horizontal padding.
- **CTA pill:**
- ≈236 × 56px, radius 999px.
- Border 1.5px at 70% mint.
- Fill `rgba(4,9,3,0.35)` with blur(10px).
- Faint inner top highlight: `inset 0 1px 0 rgba(255,255,255,0.15)`.
- Padding 0 22px with a 10px gap before the 18px outline four-point sparkle icon.
- **Corners:** small radii (4px) on chips and tabs against the full pill on the CTA. That contrast is deliberate.
- **Shadows:** no drop shadows anywhere.
##### Imagery
1. **Background (1a).** One full-bleed photoreal render, landscape, at least 2400 × 1460 (~16:10). Cover the frame with `object-position ~50% 55%`.
- Endless soft, rolling hills covered in dense, velvety green grass.
- Hills rise steeply on the left and right edges and dip into a flat valley in the centre.
- Low, even, overcast sage-grey sky with soft cloud texture.
- Diffuse light with gentle sun patches making olive highlights on the grass.
- A tall, thin mirrored monolith stands upright in the valley just right of centre. Its footprint is ~130 × 310px on screen, centred near x≈737, y≈236–546. It reflects the sky and hills, with one slightly darker side face.
- Mood: surreal, calm, editorial. No people, buildings or text.
2. **Card thumbnail A.** ~190 × 132 (≈ 3:2). A moody cinematic portrait: a woman with auburn hair, dark clothing and a soft, desaturated green-brown field behind her. Shallow depth of field.
3. **Card thumbnail B.** Same size. A product still life: a green cosmetic jar among pale wildflowers and soft botanical blur, lit in airy, high-key light.
Both thumbnails should share the background's green and olive grade, so the card feels cut from the same world.
##### Motion
None of the motion below was measured. All of it is inferred, and the description calls for restrained motion.
**1. Hero**
- **kind:** entrance (on load), plus one optional scroll-linked layer.
- **what moves:**
- Background photo.
- Nav row.
- Offering cluster.
- Glass card.
- Headline lines, as two separate line masks.
- CTA and bottom hairline.
- Paragraph.
- Vertical hairlines.
- **from → to:**
- Background: scale 1.06 → 1.0 and opacity 0 → 1 (inferred).
- Nav, offering, card, paragraph: opacity 0 → 1 and translateY 12px → 0 (inferred).
- Headline lines: each line in an `overflow: hidden` mask, translateY 100% → 0 (inferred).
- Hairlines: drawn in with scaleY/scaleX 0 → 1 from their top/left origin (inferred).
- CTA: opacity 0 → 1 (inferred).
- Optional scroll-linked layer, reverses on scroll up: background translateY 0 → ~8% of the frame height, and the headline group opacity 1 → 0.6.
- **range:**
- Entrance plays once on page load. Durations are not measured; use about 900–1400ms for the background and 600–900ms for the UI, with a soft ease-out such as `cubic-bezier(0.22,1,0.36,1)`.
- Order: background first. Then nav at about +200ms, then the headline lines staggered 80–120ms apart. Card, offering and paragraph follow 60–100ms apart, and hairlines draw last.
- The optional scroll-linked layer runs from scroll 0 until the hero's bottom reaches the viewport top.
- **reduced motion:** everything renders in its final state with no transforms. At most a 200ms opacity fade on the whole UI layer. No scroll-linked drift.
**Interaction transitions** (not part of the scroll choreography). All run 200–300ms with ease-out:
- **CTA hover:** border goes to 100%, a soft `#687607` glow appears (`0 0 24px rgba(104,118,7,0.35)`), and the sparkle rotates 45°.
- **CTA press:** scale 0.98.
- **Nav link hover:** opacity 0.7 → 1 and a 1px underline grows from the left.
- **Chips and card tabs on hover:** fill 12% → 20%.
- **Card thumbnail hover:** image scale 1.0 → 1.04 inside its clipped radius. The matching tab brightens.
- **Pulse glyph:** tints olive while its nearest interactive element is hovered.
##### Responsive (below 640px)
- **Margins:** 20px. The frame stays 100svh (min 680px).
- **Nav:** the wordmark stays. The three links collapse into a single uppercase "MENU" text button (15px). The hairline stays.
- **Offering cluster:** stays at top left, and the chips wrap onto two rows.
- **Glass card:** dropped from the hero. If you want to keep it, move it below the hero as a full-width block.
- **Decorative hairlines:** drop both verticals and the bottom horizontal. Keep the nav rule.
- **Headline:** 2.75× ≈ 44px, line-height 1.05. Allowed to wrap to 3–4 lines.
- **Bottom stack:** headline → paragraph (full width, 16px) → CTA, with 20px gaps. The CTA stays an auto-width pill, not full width.
- **Background:** set `object-position: 58% 50%` so the monolith stays visible between the headline and the nav.
##### Don'ts
- **No bold or heavy headline.** It must stay light (300) and large. A 600–700 weight turns it into a generic SaaS hero.
- **No solid coloured buttons.** That includes green, white-filled and gradient. The CTA is an outlined glass pill.
- **Don't centre the layout.** No centred headline over the image. The asymmetry and the empty centre are the design.
- **Don't cover the monolith or the valley** with text, cards or a play button.
- **Don't darken the whole photo with a flat 40–60% black overlay.** Use directional gradients only, so the sky stays luminous.
- **No drop shadows**, no neumorphism, no thick borders. Hairlines are 1px only.
- **Don't push glassmorphism too far.** No heavy blur over 20px, no rainbow borders, no glossy highlights. The card stays faint.
- **Don't give the chips pill radius.** They're 4px rectangles, and only the CTA is a pill.
- **No accent colour on text, links or headings.** Olive appears only on hover states.
- **No extra sections, stats rows, logo walls or scroll-down arrows** under the hero. This reference is one frame.
- **No hamburger icon on desktop.** Nav links spread with space-between across the full width: wordmark left, two links at about the one-third and two-thirds points, the last link flush right.
- **No bouncy, springy or looping animations.** No marquee and no typing effect. Motion is a single calm settle on load.
- **Don't swap the photo for a generic nature stock shot.** It needs to be a surreal, art-directed render with a single strange object in it.
### Imagery — already generated
These pictures were made for this design and are hosted at the URLs below.
Use them as the `src` exactly as written, and keep the alt text. Do not
generate your own, do not reach for a stock library or a placeholder
service, and do not feed the Imagery section above back to an image model —
that work is done. Size and crop them with CSS (`object-fit: cover`) rather
than assuming their dimensions, and download them into the project if you
would rather not hotlink.
- https://ai-taste-vault.vercel.app/v/demo/cinematic-agency-landscape-hero/images/01-hero-meadow-monolith.webp — Rolling green hills under an overcast sage-grey sky, with a tall mirrored monolith standing in the valley
- https://ai-taste-vault.vercel.app/v/demo/cinematic-agency-landscape-hero/images/02-card-thumb-portrait.webp — Moody portrait of a woman with auburn hair in dark clothing against a muted green-brown field
- https://ai-taste-vault.vercel.app/v/demo/cinematic-agency-landscape-hero/images/03-card-thumb-product.webp — Green cosmetic jar among pale wildflowers in airy high-key light
### Image prompts
What each picture above was generated from, for anyone changing one.
**Rolling green hills under an overcast sage-grey sky, with a tall mirrored monolith standing in the valley** (`01-hero-meadow-monolith`)
MEDIUM AND FINISH: A photoreal digital render in a surreal, editorial art-directed style. The surfaces are soft, matte and velvety, and the grass reads as one dense, even plush pile rather than individual blades. The finish is clean and calm with no grain and no visible noise. Treat it as a quiet CGI landscape, not a snapshot. COLOUR AND VALUE: The sky is a low, even overcast in sage-grey. It runs from about #56655F at the top edge to its lightest value, about #AEC0B9, along the horizon. Nothing in the sky is whiter than #B8C8C2 and there is no blue anywhere. The grass is deep moss green, about #273707, through the mid-ground. Gentle diffuse sun patches lift the hill crests to olive-lime highlights around #6E8F1F to #7C9A2A, and nothing in the grass is brighter than that. The darkest values sit in the hollows between hills and along the bottom edge, around #0C1606, never pure black. Overall contrast is moderate: rich mid-greens make up most of the frame, highlights are soft, and transitions are smooth. EDGES: The image fills the frame edge to edge, full bleed. The bottom fifth gradually deepens into dark moss shadow (#0C1606 to #1A2805) so white type can sit over it. The top tenth of the sky darkens slightly toward #56655F so a thin white nav reads across it. Keep the lower-left quarter calm and low-detail grass, because a large light headline sits there. Keep the upper-right area as plain soft sky and distant hills, because a translucent card sits over it. SUBJECT: Endless soft, rolling grassy hills. On the left, a large smooth hill rises steeply from the left edge to about 30% down the frame, with a second softer ridge overlapping behind it. On the right, a big dark foreground hill swells up from the right edge to about 45% down the frame, with paler distant ridges behind it. Between them the land dips into a wide, flat valley floor of dense grass. The horizon sits at about 56% of the frame height, and the grass runs uninterrupted toward the viewer. A single tall, thin, perfectly flat mirrored monolith stands upright in the valley. It is a sharp-edged rectangular slab, about three times taller than it is wide. It is seen slightly from the left, so a narrow, darker, glossy side face shows on its left edge. The front face is a clean mirror. Its upper part reflects the pale overcast sky, and its lower part reflects green hills and grass, so it partly camouflages into the scene. It casts no hard shadow, only a soft contact darkening at its base. COMPOSITION: The monolith is horizontally centred at about 51% of the frame width and occupies roughly 46% to 56% of the width. Its top sits at about 29% of the frame height and its base at about 61%, just below the horizon on the valley floor. The camera is at standing eye level, looking straight ahead, with deep, even focus across the landscape. Everything is symmetric in calm but asymmetric in mass: steep hill on the left, dark swell on the right, open valley in the centre. AVOID: blue sky, dramatic or stormy clouds, sunbeams, lens flare, sunset or golden-hour colour, saturated travel-photo neon greens, HDR clarity, black vignette, shallow depth of field, bokeh, trees, rocks, paths, fences, flowers, people, animals, buildings, multiple monoliths, a reflective floor or water, glowing edges on the monolith, and sci-fi lighting. Output a wide 3:2 landscape frame, 1536x1024. No text, no lettering, no logos, no watermarks, no UI.
**Moody portrait of a woman with auburn hair in dark clothing against a muted green-brown field** (`02-card-thumb-portrait`)
MEDIUM AND FINISH: A genuine cinematic photograph, an editorial still from a moody brand film, with a soft, slightly desaturated filmic grade. COLOUR AND VALUE: The grade is muted green-olive overall, sharing the world of a misty green meadow. Skin is natural and slightly cool with soft warmth. The hair is a rich but not neon auburn-copper, about #8A3E1E to #B4562C at its brightest. The background is a blurred field of desaturated green-brown, about #4E5A33 to #6B6A45. The darkest values are in the clothing, around #141812, not pure black. The lightest value is a soft skin highlight, around #E2C6B4. Contrast is moderate and the light is diffuse and overcast, with no hard shadows. EDGES: The image is a simple rectangular crop that fills the frame. It will be shown small inside a frosted-glass card, so keep the subject legible and the background soft and even. SUBJECT: A young woman with long, loose, wavy auburn hair. She wears a dark high-necked top or coat and looks calmly toward the camera with a still, serious, contemplative expression. She stands in an open field of tall dry grass and soft greenery that falls away into a gentle blur. COMPOSITION: Head and shoulders, with her face placed slightly left of centre at about 40% of the width. Her eyes are about a third of the way down from the top. Shallow depth of field. Her hair frames her face and flows past her shoulders, and there is plenty of soft field on the right. AVOID: studio backdrop, harsh flash, glamour retouching, heavy makeup, bright saturated colour, golden-hour orange glow, lens flare, strong vignette, smiling, hands near the face, and text. Output a 3:2 landscape frame, 1536x1024. No text, no lettering, no logos, no watermarks, no UI.
**Green cosmetic jar among pale wildflowers in airy high-key light** (`03-card-thumb-product`)
MEDIUM AND FINISH: A soft, airy, high-key product still life with the clean, slightly dreamy finish of a premium skincare campaign render. COLOUR AND VALUE: The frame sits mostly in a light band. The background is a pale misty cream-mint, from about #E6EEE4 to #F4F7F0, and nothing is pure white. The jar is a muted sage-to-moss green, about #5F7F4A with highlights near #9DB78A and its darkest edges near #2E4122. The flowers are off-white with pale green stems around #A8B98E. Nothing in the frame is darker than #263820. Contrast is gentle, the shadows are soft and the light is diffuse, with a faint green-olive grade overall. EDGES: The image is a simple rectangular crop that fills the frame. It will be shown small inside a frosted-glass card, so the jar must read clearly at small size. SUBJECT: A short, round frosted-green glass cosmetic jar with a matching green lid. It is tilted slightly and floats or rests among delicate white umbel wildflowers, like Queen Anne's lace or yarrow, and thin green stems. Some flowers are sharp in the foreground and others are softly blurred behind. A small dollop of pale cream sits on or near the lid. The jar carries a tiny blank label area with no readable writing. COMPOSITION: The jar sits centred to slightly right at about 55% of the width and fills about 40% of the frame height. Flower heads are scattered around the upper and left areas, and the background has a soft, gentle depth blur. AVOID: dark or moody background, saturated emerald, gold metallic accents, glossy hard reflections, water splashes, pink or purple flowers, a busy scatter of props, harsh shadows, and readable branding or text on the jar. Output a 3:2 landscape frame, 1536x1024. No text, no lettering, no logos, no watermarks, no UI.
---
## Planto IoT gardening case study hero
- Page: https://ai-taste-vault.vercel.app/r/planto-iot-gardening-case-study-hero
- Original: https://br.pinterest.com/pin/1104085664938336407/
- Type: Section
- Tags: Case study, Dark mode, Editorial, Full bleed, Hero, Organic, Portfolio, Restrained motion
- Palette: #09090A, #262917, #464926, #7B8329, #B3B949
- Captured: 2026-10-08
- Rebuilt with: Claude Code · Opus 5.5 · Extra high · skills: frontend-design, emil-design-eng, transitions-dev, gsap, humanizer
- Rebuild: https://ai-taste-vault.vercel.app/v/demo/planto-iot-gardening-case-study-hero/index.html
### Prompt — Rebuild
_rebuild · html-css · opus_
#### Moss forest case study hero: full-bleed dark editorial section
This is a single full-viewport hero that opens a portfolio case study. A cinematic, low-angle macro image of a sunlit moss mound under a dark, heavily blurred forest fills the whole frame. A thin lowercase wordmark sits centred in the dark gap just above the moss crest. Three small meta labels run along the top edge, and a pair of short bilingual paragraphs sits in the bottom-right corner. Nothing else is on the page. The design works because there is very little UI: no nav, no buttons, no cards, white type only, and the photograph does all the colour work.
##### Structure
- **Frame:** full-bleed. The image runs edge to edge with square corners. Content is inset 64px left and right, so the content width is 1312px at 1440.
- **Reference grid:** 12 columns, 24px gutters, 64px margins. Positions below are given in px because the elements are placed absolutely, not on a flow grid.
- **Layers, bottom to top:** (a) background image or video, (b) two soft gradients for legibility, (c) content.
- **Sections:**
1. **Hero.** This is the only section. It contains, in reading order:
- **Meta row** along the top edge, with three items:
- left: a two-line label, one word per line (a discipline and "project"-type word)
- centre: a four-digit year
- right: a one-word project name
- **Wordmark lockup**, centred horizontally, with its optical centre at about 46% of the section height:
- product name: one lowercase word, 5–7 letters
- tagline beneath it: 3–4 words describing the service
- **Paragraph pair**, anchored to the bottom-right corner:
- a primary-language paragraph, 4–6 lines
- beside it, the same text in a second language as a translation, 5–7 lines
Exact placement at 1440 wide:
- Meta row: top edge at 44px. The left item starts at x=64. The right item ends at x=1376. The year is centred on x=720.
- Wordmark: the ascender tops sit at about 39% of the section height and the baseline at about 50%.
- Tagline: right-aligned to the wordmark's right edge. Its cap-top sits 12–16px below the wordmark baseline, inside the wordmark's descender band. It starts to the right of the first letter's descender, so the two never collide.
- Paragraph pair: two columns, each 300px wide, with a 72px gap between them. The block's right edge is on the right margin, so the primary paragraph spans x≈704–1004 and the translation spans x≈1076–1376. Both are top-aligned to each other, and the block's bottom edge sits 64px above the section bottom.
##### Scroll map
1. **Hero:** 900px tall (1.0 viewport at 1440×900; the capture shows about 885px at 1440 wide). It consumes 900px of scroll. Kind: entrance on load, then static. It scrolls away 1:1 and is not pinned.
**Total page height:** about 900px (1 viewport). If you place it at the top of a longer case study, the next section starts flush at its bottom edge on #09090A.
##### Spacing
- **Section:** `height: 100svh; min-height: 760px`. No outer margin.
- **Side padding:** 64px, about 4.4vw.
- **Top inset of the meta row:** 44px.
- **Bottom inset of the paragraph block:** 64px.
- **Meta left label:** two lines, line-height 1.2, no gap between them.
- **Wordmark to tagline:** the tagline overlaps the wordmark's descender band, so the gap is negative relative to the wordmark box. Use `margin-top: -0.12em` of the wordmark size, or position it absolutely.
- **Between the two paragraphs:** a 72px column gap.
- **Between paragraphs inside a column:** none. Each column holds a single paragraph.
- **Rhythm:** three clusters (top edge, optical centre, bottom-right corner) with large empty image areas between them. Leave the space between the meta row and the wordmark empty, about 290px at 1440. Leave the space between the wordmark lockup and the paragraphs empty too, about 230px.
##### Type
Two families:
- **Display wordmark:** a light geometric sans, with one letter swapped for a serif italic.
- Free stand-ins: **Jost 300** (or Outfit 300) for the upright letters.
- **Instrument Serif Italic** (or Cormorant Garamond Italic 400) for the swapped letter.
- **Everything else:** a neutral neo-grotesk. Use **Pretendard**, which is free and covers Hangul and Latin if the primary language is Korean. Fall back to Inter.
The body anchor is 16px.
| Level | Family | Size | Line-height | Letter-spacing | Weight | Colour |
|---|---|---|---|---|---|---|
| Wordmark | geometric sans + one serif italic glyph | 9× = 144px | 0.85 | −0.03em | 300 | #FFFFFF |
| Tagline | neo-grotesk | 1.75× = 28px | 1.1 | −0.01em | 400 | #FFFFFF |
| Meta labels (all three) | neo-grotesk | 0.875× = 14px | 1.2 | 0 | 500 | #FFFFFF |
| Body, primary paragraph | neo-grotesk | 1× = 16px | 1.6 | −0.005em | 500 | #FFFFFF at 92% |
| Body, translation | neo-grotesk | 1× = 16px | 1.6 | 0 | 400 | #FFFFFF at 68% |
**Wordmark details:**
- All lowercase.
- Strokes are hairline-thin, about 1/12 of the x-height. It should feel drawn, not bold.
- Swap exactly one interior letter, ideally the third and preferably a vowel, for the serif italic at 1.05× the size. Kern it tight so it touches or slightly overlaps the ascender before it. That single italic glyph is the lockup's signature.
**Meta labels:** sentence case, not uppercase, not letter-spaced.
**Max line length:**
- body: 300px, about 38–42 Latin characters or about 20 CJK characters per line
- tagline: one line, no wrapping
##### Colour
The photograph covers almost 100% of the surface. The UI adds only white type.
- **#09090A, near-black.** Page background behind the image. It is the darkest forest shadow in the top 40% of the frame and the tint of both legibility gradients. Any following section uses it.
- **#262917, deep olive.** The dominant blurred-forest mid-tone. Use it as the section's background-colour placeholder while the media loads.
- **#464926, moss shadow.** Imagery only: the shadowed undersides of the moss.
- **#7B8329, moss mid-tone.** Imagery only.
- **#B3B949, sunlit lime moss highlight.** This is the single UI accent. It may appear only as a keyboard focus ring or a 1px hover underline on a meta link. Never use it for fills, buttons, headings or blocks of text.
- **White, #FFFFFF.** All type, at the opacities given in the type table.
- **Orange-red petals and star flowers, about #E0562C (inferred, not in the sampled palette).** These exist only inside the photograph. Never pick this colour up into the UI.
**Legibility gradients:** soft and invisible as bands (inferred).
- top: `linear-gradient(to bottom, rgba(9,9,10,0.55) 0%, rgba(9,9,10,0) 28%)`
- bottom: `linear-gradient(to top, rgba(9,9,10,0.45) 0%, rgba(9,9,10,0) 38%)`
##### Surface
- No borders, no dividers and no hairlines.
- Corner radius 0 everywhere. The section is full bleed with square corners.
- No shadows. No text-shadow on any type: legibility comes from the image's own darkness and the two gradients.
- No cards, panels, blur or glass behind any text. Every element sits directly on the photograph.
##### Imagery
There is one picture, full bleed, filling the section: about 1.63:1 at 1440×885 with `object-fit: cover; object-position: 50% 55%`. It can be a still or a muted looping video with a still poster.
**Subject:** a low, ground-level macro view of a forest floor.
- **Lower 50–55% of the frame:**
- two or three rounded mounds of dense, bright moss, ferns and grass blades, dotted with tiny orange-red star-shaped flowers
- backlit, so the tips of the moss and grass glow yellow-green (#B3B949) with darker olive shadows beneath
- the moss crest dips slightly at the centre, about 55% down, and rises to about 40% down on the right third
- a fern frond pokes up on the left at about 25% across
- **Upper 45% of the frame:**
- a deep, almost black forest, blurred by very shallow depth of field
- one pale vertical shaft of light through the trees just left of centre, about 48–55% across, falling from the top edge toward the wordmark
- a darker trunk silhouette on the right
- **In the middle band, about 15–60% down and mostly right of centre:** a scatter of small falling petals (orange-red, yellow, a few pale pink-white), some soft with motion blur, floating at different depths.
**Treatment:**
- cinematic, warm, high contrast
- shadows crushed toward #09090A
- no colour grade beyond the natural greens
- no vignette ring
The rendered-3D or macro-photo feel is intended.
**Composition rule:** the wordmark sits in the dark gap between the light shaft and the moss crest. The brightest background area sits directly above it and the brightest moss directly below it. The meta row sits on the darkest band at the top. The paragraphs sit on the darker lower-right moss.
##### Motion
Restrained. Nothing reacts to scroll. Every value below is inferred: no measured motion report exists, so durations and easing are given as ranges and marked "not measured".
**1. Hero**
- **kind:** entrance. It plays once on load, then the section is static. The background may play an ambient video loop.
- **what moves:** background media, wordmark, tagline, meta row (three items), paragraph pair (two columns).
- **from → to (inferred):**
- background: opacity 0 → 1, scale 1.04 → 1.00
- wordmark: opacity 0 → 1, translateY 20px → 0, blur(6px) → blur(0)
- tagline: opacity 0 → 1, translateY 10px → 0
- meta items and both paragraphs: opacity 0 → 1, translateY 8px → 0
- **range:**
- **Trigger:** once, on page load, after the background media has decoded.
- **Duration (not measured):** background 1000–1600ms; text elements 600–900ms each.
- **Easing (not measured):** a long, soft ease-out with no overshoot.
- **Order:** background first; wordmark starts 200–300ms in; tagline 100–150ms after the wordmark; meta row and paragraphs together 100–150ms after that.
- **Stagger (not measured):** 60–120ms between the two paragraph columns.
- **Ambient loop:** if the background is a video, the petals drift slowly downward and diagonally. The loop length is not measured; use 8–15s. Muted, inline, seamless.
- **On scroll:** no scroll-linked effect. The section scrolls away at 1:1.
- **reduced motion:** all elements render at their final state with no translate, blur or scale. At most, use an opacity fade of 200ms or less. The video is replaced by its poster still.
**Interaction transitions** (not part of the scroll choreography):
- **Meta items, if they are links:** hover changes opacity from 1 to 0.6 and optionally adds a 1px #B3B949 underline. Duration 150–250ms (not measured), ease-out.
- **Focus-visible:** a 1px #B3B949 outline with a 4px offset. No background change.
- **Press, open and close:** none. The hero has no buttons, menus or disclosures.
##### Responsive (below 640px)
- **Section:** `height: 100svh; min-height: 640px`. Side padding 20px. Meta row top inset 24px.
- **Meta row:** keep all three positions (left, centre, right) at 13px with weight 500. The left label stays on two lines.
- **Wordmark:** about 22vw, roughly 80–88px on a 390px screen, with the same thin weight and italic-glyph swap. Move its optical centre up to about 38% of the height.
- **Tagline:** 18px, still right-aligned under the wordmark.
- **Background:** `object-position: 55% 60%`, so the moss crest stays just under the wordmark and the light shaft stays above it.
- **Paragraphs:** stack the primary paragraph above the translation, full content width, max 36ch, 16px gap. Anchor the stack 24px from the bottom. Body stays 16px.
- **Short viewports (below about 700px tall):** drop the translation paragraph and keep the primary one.
- **640–1024px:** keep the side-by-side pair, but each column becomes 44% of the content width with a 32px gap, right-aligned. Wordmark size is 13vw.
##### Don'ts
- **No navigation:**
- no hamburger, no link row, no logo in a corner
- the three meta labels are the whole top bar and are not a nav
- **No CTA:** no buttons, no "View case study", no pill links, no centred button under the tagline.
- **Keep the wordmark thin:** do not set it bold, semibold or uppercase. Hairline strokes and lowercase are the point. Don't add gradient fill, glow or text-shadow to it.
- **Keep the italic swap to one letter:** don't set the whole word in the serif or in italic, and don't swap more than one letter.
- **Don't shrink the body:** the paragraphs look tiny in the screenshot, but they are 16px.
- **Keep the corner placement:**
- don't centre the paragraphs or move them under the wordmark
- they belong in the bottom-right corner, top-aligned, as two narrow columns
- **No uppercase eyebrows:** no letter-spaced uppercase eyebrow above the wordmark, and no small kicker label.
- **Keep the frame flat and full bleed:** no glass panels, frosted cards, borders, rounded insets or "device frame" around the image.
- **Don't brighten the photograph:**
- don't lift its shadows and don't add a flat black overlay across the whole frame that greys out the moss
- the top must stay near-black and the moss must stay saturated
- **Keep the green in the photo:** don't use green or lime as a UI fill or as a background colour behind text.
- **Don't promote the orange petals:** their colour must not become a link colour or accent.
- **No extra motion:**
- no JavaScript confetti or particle system to fake the petals
- no parallax, no pinning, no scroll-scrubbed zoom
- no letter-by-letter wordmark animation with big translations
- no bouncing "scroll down" arrow or mouse icon
- **Leave the empty areas empty:**
- the dark area between the meta row and the wordmark is where the light shaft has to read
- the moss area between the wordmark and the paragraphs needs the same space
### Imagery — already generated
These pictures were made for this design and are hosted at the URLs below.
Use them as the `src` exactly as written, and keep the alt text. Do not
generate your own, do not reach for a stock library or a placeholder
service, and do not feed the Imagery section above back to an image model —
that work is done. Size and crop them with CSS (`object-fit: cover`) rather
than assuming their dimensions, and download them into the project if you
would rather not hotlink.
- https://ai-taste-vault.vercel.app/v/demo/planto-iot-gardening-case-study-hero/images/01-moss-forest-hero.webp — Low ground-level macro view of backlit moss mounds dotted with tiny orange-red star flowers, under a dark, heavily blurred forest with a pale shaft of light and falling petals
### Image prompts
What each picture above was generated from, for anyone changing one.
**Low ground-level macro view of backlit moss mounds dotted with tiny orange-red star flowers, under a dark, heavily blurred forest with a pale shaft of light and falling petals** (`01-moss-forest-hero`)
MEDIUM AND FINISH: a photoreal cinematic 3D render that looks like a macro nature photograph shot from ground level. It is genuinely high-contrast and backlit, with very shallow depth of field. The moss in the foreground is crisp and finely detailed, and everything behind it melts into a smooth, creamy blur. The finish is clean and slightly warm, with no grain, noise or painterly texture. COLOUR AND VALUE: the darkest values are a near-black green-black, #09090A to #0E110C, filling the upper corners, the forest gaps and the deep shadows under the moss. The blurred forest mid-tones are deep olive, #1A1E12 to #262917. The moss shadow undersides are #464926, the moss mid-tones are #7B8329, and the backlit tips of the moss and grass glow lime, #B3B949, reaching about #C8D04E at the very brightest edges. The lightest area in the whole frame is a soft pale yellow-green light shaft, about #C2C8A0. Nothing is pure white and nothing is blown out. Tiny accents of orange-red, #E0562C, appear only as the small flowers and some of the petals, along with a few warm-yellow #E2C25A and pale pink-white #E6D8CE petals. Keep the shadows crushed and the greens saturated but natural, with no extra colour grade. EDGES: full bleed with no frame. The top 40% stays very dark, nearly black at the top edge and the upper corners, so white type reads on it. The bottom edge and the bottom-left corner sink into dark olive moss shadow. Do not add a vignette ring; the darkness comes from the scene itself. SUBJECT: two or three rounded, dome-like mounds of dense, springy moss, mixed with small ferns and thin grass blades. They fill the lower half of the frame and are dotted with tiny orange-red star-shaped flowers. Above them is a deep, dark forest of tall trunks, completely out of focus. A darker trunk silhouette stands in the right third. A single pale vertical shaft of light falls through the trees from the top edge, slightly left of centre, at about 48–56% across. Small petals in orange-red, yellow and pale pink drift at different depths, some soft with motion blur. They are concentrated in a band from about 15% to 60% down, mostly right of centre, with only a few on the left. COMPOSITION: the moss crest runs across the frame. On the left, the mound top sits about 53% down, with a small fern frond rising above it at about 24% across. The crest dips slightly in the centre, to about 56% down, then rises into a larger mound whose top sits about 41% down in the right third. The zone from about 36% to 63% across and 33% to 52% down must stay a calm dark gap, with the light shaft above it and the brightest moss directly below it, because a large wordmark sits there. The top 10% must be quiet and dark. The lower-right area, from about 50% to 96% across and 78% to 94% down, must be mid-dark moss with low detail and no bright highlights, because two paragraphs of small white text sit on it. Keep everything important inside the central band, leaving slack at the top and bottom for a cover crop to about 1.63:1. From the style reference take only the palette, the value range and the finish. Do not reproduce its text, wordmark or layout. AVOID: lens flare or a sunburst, discrete bokeh circles or hexagons, fog or haze that lifts the dark forest to grey, lifted shadows or HDR clarity, a teal-and-orange grade, neon or acid greens, sharp in-focus background trees, sky, fireflies, glowing particles or sparkles, mushrooms, fairy-tale fantasy glow, flower pots, planters, gadgets, sensors or any IoT device, people, animals, and a black vignette ring. Output a wide 3:2 landscape frame, 1536x1024. No text, no lettering, no logos, no watermarks, no UI.
---
## Construction firm photo hero
- Page: https://ai-taste-vault.vercel.app/r/construction-firm-photo-hero
- Original: https://br.pinterest.com/pin/35254809579447228/
- Type: Section
- Tags: Corporate, Dark mode, Full bleed, Hero, Minimal, Nav bar, Neon accent, Restrained motion
- Palette: #66170B, #16538B, #380603, #FBA767, #A5381C
- Captured: 2026-10-08
- Rebuilt with: Claude Code · Opus 5.5 · Extra high · skills: frontend-design, emil-design-eng, transitions-dev, gsap, humanizer
- Rebuild: https://ai-taste-vault.vercel.app/v/demo/construction-firm-photo-hero/index.html
### Prompt — Rebuild
_rebuild · html-css · opus_
#### Sky-aperture photo hero: full-bleed architectural photo with centred copy
A single full-viewport hero section with a transparent nav laid over it. The whole design rests on one photograph. The camera looks straight up from the floor of an enclosed eight-sided courtyard: terracotta facades close in from every edge, and an opening of deep blue sky sits in the middle. All the hero copy sits inside that sky opening, so the sky serves as the background behind the text. The UI layer is white and sparse: one eyebrow pill, a two-line headline, one sentence of body text and one solid white button. There is no scrim, no card and no second colour in the UI. The tags call it "neon accent" and "dark mode". That impression comes from the saturated orange-against-blue contrast in the photo, not from any glowing UI.
##### Structure
- **Reference frame:** 1440 × 1080 CSS px (4:3). The section is full-bleed edge to edge with no max-width on the photo.
- **Gutters:** 56px left and right for the nav row.
- **Columns:** there is no grid. The nav is a three-zone row (`1fr auto 1fr`): logo on the left, link group exactly centred on the page, CTA on the right. The hero copy is one centred column, max-width 720px, text-align center.
- **Sections, top to bottom:**
1. **Nav bar.** Absolutely positioned over the top of section 2, with a transparent background and no border.
- Logo: a 28px square mark plus a one-word wordmark ending in a period.
- Link group: 4 single-word links, the first one active.
- CTA: a 2-word pill button.
2. **Hero.** Full-bleed photo with `object-fit: cover`. The copy block is centred both vertically and horizontally on the full section height, not on the space below the nav. Top to bottom:
- Eyebrow pill: a dot plus 3–4 uppercase words, written as a comma-separated two-part phrase ending in a period.
- Headline: 6–7 words in Title Case on exactly two lines, ending in a period. Line 1 (≈3 words) is visibly shorter than line 2 (≈4 words).
- Body: one sentence of 22–26 words on two lines of nearly equal length.
- Primary button: a 3-word label plus a right-arrow icon.
##### Scroll map
There is no Motion report for this reference, so the numbers below come from the still image (inferred).
1. **Nav bar:** a 112px band laid over section 2. Adds 0px of height and consumes 0px of scroll. Kind: entrance. It is not sticky and scrolls away with the hero (inferred).
2. **Hero:** 1080px at the 1440 × 1080 reference = 1.0 viewport (`height: 100svh; min-height: 720px`). Consumes 1080px of scroll, which is just its own height (no pinning). Kind: entrance.
**Total page height:** 1080px (1.0 viewport). This reference is a single section.
##### Spacing
**Nav (section 1)**
- Padding: 36px top, 56px left and right. The row is 40px tall, so its centre line is 56px from the top of the page.
- Logo mark to wordmark gap: 8px.
- Link gap: 48px between words. The group is centred on the page's centre line, not between the logo and the CTA.
- Active-link underline: 2px thick, sitting 12px below the text baseline. It extends 4px past the text on each side.
- Nav CTA: 38px tall, about 120px wide, padding 0 22px.
**Hero copy stack (section 2)**, outer edge to outer edge:
- Eyebrow pill: 36px tall, about 240px wide, padding 0 18px. The 8px dot sits 12px before the text.
- Pill → headline: 32px.
- Headline → body: 28px.
- Body → button: 32px.
- Button: 44px tall, padding 0 22px 0 24px. The 16px arrow icon sits 12px after the label.
- The whole stack is about 380px tall. Its vertical centre lands on the section's centre: at 1080px, the pill top is at about 350px and the button bottom at about 726px.
- Rhythm: tight, even 28–32px steps. Nothing in the stack is spaced more than 32px apart. All the empty space belongs to the photo around it.
##### Type
**Family class:** geometric sans with round "o", single-storey "g" and pointed "W"/"V" vertices. Use **Outfit** (Google Fonts) as the free stand-in; Plus Jakarta Sans is the second choice. Use one family for everything.
The body anchor is **17px**. Every other level is a multiple of it.
| Level | Size | Line-height | Letter-spacing | Weight | Notes |
|---|---|---|---|---|---|
| Headline (H1) | 4.5× → 76px | 1.08 | −0.02em | 500 | Title Case, max-width 680px, exactly 2 lines |
| Logo wordmark | 1.3× → 22px | 1 | −0.01em | 600 | One word plus a period |
| Body (hero sub) | 1× → 17px | 1.55 (26px) | 0 | 400 | Max-width 580px, ≈ 68–72 characters per line |
| Nav links | 0.88× → 15px | 1 | 0 | 400 (active 500) | — |
| Buttons (nav and hero) | 0.88× → 15px | 1 | 0 | 500 | Dark text on white |
| Eyebrow pill | 0.82× → 14px | 1 | +0.02em | 500 | Uppercase |
At 1440 the headline's line 2 is about 660px wide and line 1 about 500px. Force the break with `
` or balanced wrapping. Never let it run to one line or three.
##### Colour
The sampled hexes are photo colours. The UI layer itself uses only white and near-black.
**Photo colours and their roles**
| Hex | Role |
|---|---|
| `#A5381C` | Terracotta mid-tone. The dominant surface: the sunlit-to-shaded facades, about 45% of the frame |
| `#16538B` | Sky blue. The second large field and the ground under all the copy, about 30% of the frame |
| `#66170B` | Deep rust shadow on the facades. Use it as the section's `background-color` while the photo loads |
| `#380603` | Darkest brown in the shadowed corners. Use it for any solid dark UI surface (the mobile menu panel) |
| `#FBA767` | Sun-peach highlights where low sun rakes the upper-right walls. UI use is limited to keyboard focus rings |
**UI colours and their roles**
| Colour | Role |
|---|---|
| `#FFFFFF` | Headline, logo, active nav link, active underline, pill dot, button fills |
| `rgba(255,255,255,0.86)` | Body text and inactive nav links |
| `rgba(255,255,255,0.65)` | Eyebrow pill border |
| `#141414` | Button label and arrow (inferred, neutral near-black) |
**Accent rule:** the solid white button is the single accent and should be the only filled shape on the page. No orange or blue fills, text or borders appear anywhere in the UI.
##### Surface
- **Borders:** only the eyebrow pill has one: 1px `rgba(255,255,255,0.65)`. Its fill is transparent, or at most `rgba(255,255,255,0.06)`. Use no backdrop blur.
- **Radii:** every interactive or chip element is a full pill (`border-radius: 999px`). Nothing else has a radius. The section itself has square corners and runs edge to edge.
- **Shadows:** none, including on the buttons and the text. Use no text-shadow and no glow.
- **Overlays:** none over the photo. Optionally add a top-only gradient, `rgba(20,6,3,0.30) → transparent` over the first 180px, if your photo's top edge is bright behind the nav links (inferred, optional).
##### Imagery
One photograph, full-bleed behind the whole section, 4:3 at the reference size, `object-fit: cover`, `object-position: 50% 50%`.
**Subject:** a straight-up worm's-eye view from the floor of an enclosed octagonal courtyard.
- Five or six storeys of terracotta and rust-red rendered walls fill the frame from every edge.
- The walls carry regular rows of white-framed casement windows, plus cornices and thin drainpipes, all converging in strong one-point perspective toward the centre.
- A sliver of a paler beige building closes the top edge of the frame. Thin bands of pale building also appear along the bottom edge.
**The aperture:** a central eight-sided opening of deep blue sky, broken by fine scattered high cloud (altocumulus texture, white, never dense).
- It spans roughly 26%–76% of the frame width and 14%–86% of its height.
- The entire copy stack must sit inside this opening: the headline, the widest element, uses about 46% of the frame width, and the opening is about 50% wide.
**Light:** warm low sun hits the upper-right walls (peach highlights) while the left and lower walls fall into deep rust shadow, giving a strong warm/cool complementary contrast.
**Treatment:** rich and saturated, straight from the camera. No duotone, no blur, no darkening scrim, no grain.
##### Motion
There is no Motion report for this reference, so every value below is (inferred). Durations and easings are not measured; ranges are given instead.
**1. Nav bar**
- **kind:** entrance
- **what moves:** the logo, the link group and the CTA as three items
- **from → to:** opacity 0 → 1, translateY −12px → 0
- **range:** plays once on page load, starting at 0ms. Duration not measured (500–700ms). Easing: a soft ease-out such as `cubic-bezier(0.22, 1, 0.36, 1)`. Stagger 40–80ms, left to right. It does not react to scroll.
- **reduced motion:** visible at its final state immediately, with no translate.
**2. Hero**
- **kind:** entrance
- **what moves:**
- the background photo
- the eyebrow pill
- headline line 1
- headline line 2
- the body text
- the button
- **from → to:**
- Photo: opacity 0 → 1 and scale 1.06 → 1.0.
- Each copy item: opacity 0 → 1 and translateY 20px → 0.
- **range:** plays once on page load.
- Photo: starts at 0ms. Duration not measured (1.2–1.8s), slow ease-out.
- Copy items: start 200–300ms after the photo, in the order pill → H1 line 1 → H1 line 2 → body → button. Each runs 600–900ms (not measured) with the same ease-out, staggered 80–120ms.
- Nothing is tied to scroll position. When the user scrolls, the hero simply moves up with the page and nothing reverses.
- **reduced motion:** all elements are present at their final state. At most there is a single 200ms opacity fade on the copy, with no scale and no translate.
**Interaction transitions** (separate from the load choreography):
- **Nav link hover:** colour goes from 86% to 100% white, and a 2px white underline grows from the centre (`scaleX` 0 → 1). 200–250ms ease-out.
- **Active nav link:** the underline is permanently shown at full width (text width + 4px on each side).
- **Button hover** (nav and hero): the background shifts from `#FFFFFF` to `#EFEBE6`, and the hero button's arrow moves translateX 0 → 4px. 200ms ease-out.
- **Button press:** scale 0.98 for the duration of the press, 100ms.
- **Focus-visible:** a 2px `#FBA767` ring with a 3px offset, on every link and button.
- **Mobile menu open/close:** the panel fades 0 → 1 and slides translateY −8px → 0 over 250ms, and reverses on close. The menu icon changes to a close icon with a 200ms cross-fade.
##### Responsive
- **640–1024px:**
- Link gap drops to 32px and gutters to 32px.
- Headline 3.6× → about 60px.
- Below about 900px, collapse the links into a menu toggle.
- **Below 640px:**
- **Nav:** gutters 20px, top padding 20px. Keep the logo (wordmark 20px) on the left and a 40px circular menu toggle on the right (1px border at 65% white, white icon). Drop the four links and the nav CTA into the menu panel: a full-screen `#380603` panel with stacked 24px links and the CTA at the bottom.
- **Hero height:** `100svh`, min 640px.
- **Headline:** 2.5× of a 16px body → 40px, line-height 1.1, −0.02em. Three lines are acceptable here.
- **Body:** 16px / 1.55, max-width 32ch.
- **Eyebrow:** 12px text, 32px pill height.
- **Button:** stays auto-width and 44px tall, not full-width.
- **Stack gaps:** pill → headline 24px, headline → body 20px, body → button 28px.
- **Photo:** serve an art-directed portrait crop through ``, zoomed out so the octagonal ring of facades still frames the screen and the sky opening sits behind the copy. If no portrait crop exists, keep `object-position: 50% 50%` so the sky stays centred.
##### Don'ts
- **No dark overlay over the whole photo.** Don't add a "for legibility" scrim and don't darken it to 40%. The sky is the scrim, and the saturated terracotta-against-blue contrast is the entire design.
- **No container behind the copy.** No card, glass panel, blurred box or frosted chip. The copy sits directly on the sky.
- **Keep the copy centred and inside the aperture.** Don't left-align it or push it into a split layout. If any line runs out over the facades, the composition is broken. Shorten the copy or tighten the max-widths.
- **Get the headline weight and case right.** Weight 500 in Title Case. Don't use a heavy 700–900 weight, all caps or wide tracking.
- **Don't fall back to a system font.** Don't use Inter, Helvetica or system-ui. The round geometric letterforms are part of the calm, corporate tone.
- **One button only.** Don't add a secondary ghost button next to the CTA.
- **Keep the CTA white.** Don't colour it orange or blue.
- **No neon.** Don't add glows, gradient text, coloured underlines or neon tints. The "accent" is solid white.
- **Keep the nav bare.** No background bar, bottom border, blur strip or sticky shrink effect. It is text floating on the photo.
- **Don't add hero clutter.** No stats row, client-logo strip, scroll-down chevron, social icons, badges or a second eyebrow.
- **Use the right kind of photo.** Don't use a generic construction-site shot (cranes, hard hats, blueprints, scaffolding). Don't use a straight-on building facade either. It must be an upward courtyard view with a central sky opening.
- **No photo grading.** Don't tint, desaturate or duotone the photo, and don't add grain or vignettes.
- **Keep the hero full-bleed and full height.** Don't shrink it below the viewport, inset it, round its corners or put it on a coloured mat.
- **Keep motion restrained.** No looping Ken Burns zoom, no parallax drift, no per-letter or typewriter headline animation, and no scroll-scrubbed effects. One quiet load-in, then the page holds still.
### Imagery — already generated
These pictures were made for this design and are hosted at the URLs below.
Use them as the `src` exactly as written, and keep the alt text. Do not
generate your own, do not reach for a stock library or a placeholder
service, and do not feed the Imagery section above back to an image model —
that work is done. Size and crop them with CSS (`object-fit: cover`) rather
than assuming their dimensions, and download them into the project if you
would rather not hotlink.
- https://ai-taste-vault.vercel.app/v/demo/construction-firm-photo-hero/images/01-courtyard-sky-hero.webp — Looking straight up from the floor of an octagonal courtyard: sunlit terracotta facades with white-framed windows surround an opening of deep blue sky
### Image prompts
What each picture above was generated from, for anyone changing one.
**Looking straight up from the floor of an octagonal courtyard: sunlit terracotta facades with white-framed windows surround an opening of deep blue sky** (`01-courtyard-sky-hero`)
MEDIUM AND FINISH: a real architectural photograph taken with a rectilinear wide-angle lens pointed straight up at the zenith. It has deep focus, so every window is sharp from the frame edges to the rim of the opening. The colour is rich, saturated, clean and natural, as if straight from the camera. There is no film grain, no HDR clarity halos and no colour grade. Use the attached screenshot only for its photograph: copy its palette, value range, saturation and octagonal geometry. Ignore the logo, nav links, pill, headline, paragraph, buttons and every other piece of UI in it. The sky in the middle must be completely empty of text and shapes. COLOUR AND VALUE: the facades are rendered terracotta and rust-red. Sunlit walls run from orange #C9502A to peach highlights #FBA767 where low sun rakes the upper-right walls, with soft dappled shadow patches across the lit upper walls. The mid-tone is #A5381C. The left and lower walls fall into shadow at #66170B. The darkest value in the frame is #380603, and it appears only in small recesses: window reveals, the inner corners where walls meet, gutters. Nothing is darker than #2A0603, and there are no blacks anywhere. The sky is a deep, even blue: #16538B toward the right and centre, lifting to about #2E6DB5 near the clouds. The lightest values are the white cloud flecks and the off-white window frames at about #F2F4F8. Nothing is blown out and no sun appears in the frame. Small sunlit ochre eave tips (#E0A048) sit at a few corners of the opening. A muted grey-beige building closes the top edge at about #B0A090. EDGES: the image is full-bleed with no fade or seam. Facades run off all four edges of the frame. There is no vignette, and the corners are no darker than the walls next to them. SUBJECT: a worm's-eye view from the floor of an enclosed eight-sided courtyard. Five or six storeys of smooth rendered terracotta walls rise from every edge of the frame and converge in strong, symmetrical one-point perspective toward the centre. The walls carry regular rows of white-framed casement windows whose glass reflects blue sky, plus thin cornice lines and slim vertical drainpipes running into the corners. The top side of the octagon is a paler grey-beige building with a single row of small windows, filling the top-centre of the frame from the edge down to about 13% of the height. The bottom side is a terracotta block with a thin pale beige parapet. COMPOSITION: the composition is centred and mirror-symmetric. The sky opening is a nearly regular octagon spanning about 27% to 73% of the frame width and 13% to 86% of its height, with vertical sides on the left and right, horizontal sides at the top and bottom, and four diagonal sides. White text is placed over the middle of this opening, so its central band (roughly 35% to 70% of the height, across the opening's full width) must stay clear, even, mid-to-deep blue with at most a few faint wisps. Fine scattered altocumulus speckle, small white flecks and never dense, gathers toward the opening's upper-left and its lower-left and lower-right rims. The top 12% of the frame also sits behind a nav, so keep it mid-valued: grey-beige and terracotta, never bright white. AVOID: fisheye curvature or bent walls (every wall edge must stay straight), a tilted or off-axis view, the sun or a sunburst, lens flare, a black vignette, a dramatic or stormy sky, big cumulus clouds, a teal-and-orange movie grade, desaturation, a duotone, haze, bokeh or shallow depth of field, trees, birds, people, cranes, scaffolding, hard hats or any construction-site imagery, glass skyscrapers, and anything placed in the centre of the sky. Output a wide 3:2 landscape frame, 1536x1024. No text, no lettering, no logos, no watermarks, no UI.
---
## Salea AI sales landing page
- Page: https://ai-taste-vault.vercel.app/r/x-4
- Original: https://x.com/uisabor/status/2103074850839691267/photo/4
- Type: Landing page
- Tags: About, AI, Dashboard UI, Editorial, Glassmorphism, Gradient mesh, Hero, High contrast, Logo wall, Luxury, Marquee, Nav bar, Restrained motion, Tight tracking, Variable font
- Palette: #F3EADB, #44020D, #D4CDC6, #68343C
- Typefaces: TwitterChirp, Apple Color Emoji
- Captured: 2026-09-25
- Rebuilt with: Claude Code · Opus 5.5 · Extra high · skills: frontend-design, emil-design-eng, transitions-dev, gsap, humanizer
- Rebuild: https://ai-taste-vault.vercel.app/v/demo/x-4/index.html
### Prompt — Rebuild
_rebuild · html-css · opus_
#### Oxblood & cream editorial SaaS landing page — build spec
A premium AI-product landing page built from two colours: deep oxblood and warm cream. At the top is a rounded oxblood "shell" holding the nav, a large serif headline, a two-card media row (a light analytics dashboard in a frosted window on a blush gradient, and a black-and-white profile portrait with a floating AI card), and a marquee of client logos. Below the shell is a quiet cream editorial section with a two-tone serif statement and a "how it works" video row. The tone is luxury magazine rather than tech startup: thin high-contrast serif, tight tracking, lots of empty space, pill buttons, and very little motion.
##### Structure
- **Viewport:** 1440 CSS px wide. The page background is cream `#F3EADB`, edge to edge. Nothing sits behind it: no outer margin, no page-level rounding, no frame.
- **Hero shell:** a flat oxblood `#44020D` card with radius 32px. It is inset **6px** from the top, left and right of the viewport (x 6→1434, 1428px wide) and is about **1200px tall** (y 6→1205). Below it the cream page continues. The shell holds sections 1–3.
- Padding: 24px top, 34px left and right, 62px bottom. Inner width is 1360px.
- Hero copy (badge, headline, subtitle, logo-wall label) gets an extra 16px of left inset, so it starts 50px inside the shell. The nav, media row and right-hand CTA cluster sit on the 34px line.
- **Below the shell:** container 1340px (50px side padding). Two-column grid: `420px 1fr`, column-gap 64px, so the right column starts at x≈534.
Sections, top to bottom:
1. **Nav bar** (inside the shell)
- Left: a 32px solid-cream geometric placeholder mark (for example a 3×3 grid of squares with the corners and centre filled). No wordmark.
- Link group starts at x≈252: five links with ~30px gaps. The last link has a 12px down-chevron because it opens a dropdown.
- Far right: a cream pill button, 1–2 words.
- All items share one centre line, 46px below the shell top.
2. **Hero** (inside the shell)
- **Announcement badge**, 152px below the shell top: outlined pill, 34px tall, with a sparkle icon and a 6–8 word news line.
- **H1**, 32px under the badge: 4–5 words with a forced break onto two lines (~11–14 characters per line).
- **Subtitle**, 20px under the H1: ~18–20 words over two lines, max-width 480px.
- The copy block and a right-aligned CTA cluster share one row: `display:flex; justify-content:space-between; align-items:flex-end`.
- **CTA cluster**, left to right:
- a large cream pill CTA (3 words), 194×58;
- 30px gap, then a stack of three overlapping circular headshots (38px, −10px overlap, 2px `#44020D` ring);
- 8px gap, then a 14px gold star and a rating label ("number + 2 words").
- The cluster sits ~20px above the row's bottom, so its centre lines up with the subtitle's first line.
- **Media row**, 56px under the subtitle: grid `1.83fr 1fr` (≈871px | 475px), gap 16px, height 536px, both cards radius 28px.
- Left card: dashboard composite.
- Right card: monochrome portrait with a floating AI card (see Imagery).
3. **Logo wall** (bottom of the shell)
- Placed 68px under the media row, about 32px tall.
- Left: a single-line label (4–5 words, "trusted by N+ companies" type claim), starting 50px inside the shell.
- Right: a marquee track running from x≈600 to the 34px right padding line (~800px wide). It holds five monochrome cream wordmarks of mixed construction (icon + word, asterisk-burst + word, a script mark, lowercase with an underline swoosh, stacked-lines icon + word).
- Each wordmark is 22–28px tall, centres ~167px apart. Both ends of the track fade out over 64px.
4. **Statement** (cream, two columns), padding-top 112px.
- Left column: a lead paragraph, ~18 words over 3 lines, max-width 340px, in oxblood.
- Right column: a serif H2 of two sentences over 4 lines, max-width 800px. Sentence one (~11 words) is oxblood. Sentence two (~9 words) is muted stone. The colour change falls exactly at the sentence boundary.
- Both columns are top-aligned.
5. **How-it-works row** (cream, two columns), 72px below the H2, `align-items:end`.
- **Left: video thumbnail**, 333×216 (~3:2), radius 12px. It shows a reduced copy of the dashboard UI. A white pill (160×44, radius 999) sits 85px in from the thumbnail's left edge, centred vertically, holding a 3-word label and a 16px solid play icon in oxblood.
- **Right:** a muted paragraph (~25 words, 3 lines, max-width 470px), then 40px below it a solid oxblood pill button (2 words, 150×58).
- The button's bottom aligns with the thumbnail's bottom.
- The section ends with ~160px of empty cream. The capture ends here.
##### Scroll map
Assumes a 1440×900 viewport.
1. Nav — 0→104px · 104px · 0.12 vh · consumes 104px · static
2. Hero — 104→1062px · 958px · 1.06 vh · consumes 958px · entrance (on load)
3. Logo wall — 1062→1205px · 143px · 0.16 vh · consumes 143px · entrance + continuous time-based marquee (not scroll-linked)
4. Statement — 1205→1560px · 355px · 0.39 vh · consumes 355px · entrance
5. How-it-works row — 1560→1970px · 410px · 0.46 vh · consumes 410px · entrance
**Total page height ≈ 1970px ≈ 2.2 viewports.** Nothing pins or stacks.
##### Spacing
- **Shell:**
- Inset 6px from the viewport. Padding 24 / 34 / 62 (top / sides / bottom).
- Nav-row height 46 (the pill height).
- **Hero vertical rhythm:**
- nav → badge: 82px
- badge → H1: 32px
- H1 → subtitle: 20px
- subtitle → media row: 56px
- media row → logo wall: 68px
- logo wall → shell bottom: 62px
- **Horizontal gaps:**
- nav links: 30px
- CTA → avatars: 30px
- avatars → star: 8px
- star → rating text: 6px
- media cards: 16px
- logo wordmarks: ~110px between marks
- **Cream sections:**
- side padding 50px; column gap 64px
- padding-top 112px
- H2 → how-it-works row: 72px
- paragraph → button: 40px
- bottom padding ~160px
- **Pills:**
- large: 58px tall, inline padding 33–38px
- nav pill: 46px tall, padding 0 28px
- badge: 34px tall, padding 0 14px 0 12px, 8px icon gap
- **Rhythm:** whitespace alone separates sections, with large 100–160px breaths on cream and denser 16–60px spacing inside the shell. No dividers between sections.
##### Type
**Families**
- **Display: high-contrast transitional serif**, weight 400, tight tracking, used for the H1 and H2 only. Free stand-in: **Newsreader** (variable, set `opsz` to its maximum, `wght` 400). Do not use italics.
- **UI/body: neo-grotesk sans**, slightly tight. Free stand-in: **Inter** (variable; Inter Display or optical sizing on).
- **Mono**, only for numeric deltas inside the dashboard mock. Free stand-in: **JetBrains Mono**.
**Scale.** Body anchor is **18px**; every other level is a multiple of it.
| Role | Class | Size | × body | Line-height | Tracking | Weight |
|---|---|---|---|---|---|---|
| H1 (hero) | serif | 84px | 4.67× | 0.90 | −0.045em | 400 |
| H2 (statement) | serif | 54px | 3.0× | 0.98 | −0.035em | 400 |
| Body / subtitle / lead / paragraph | sans | 18px | 1.0× | 1.55 | −0.01em | 400 |
| Logo-wall label | sans | 16px | 0.89× | 1.3 | −0.01em | 400 |
| Buttons (all pills) | sans | 16px | 0.89× | 1 | −0.01em | 500 |
| Nav links | sans | 15px | 0.83× | 1.2 | −0.01em | 400 |
| Badge text, rating label | sans | 14px | 0.78× | 1.2 | −0.005em | 500 / 400 |
| Mock: KPI numbers | sans | 20px | 1.11× | 1.1 | −0.02em | 500 |
| Mock: panel titles | sans | 16px | 0.89× | 1.2 | −0.01em | 600 |
| Mock: UI text, floating-card rows | sans | 13px | 0.72× | 1.35 | 0 | 400/500 |
| Mock: section labels, description | sans | 12px | 0.67× | 1.3 | +0.08em, uppercase (labels only) | 500 |
| Mock: deltas | mono | 12px | 0.67× | 1 | 0 | 500 |
**Line lengths**
- H1: 2 lines, ~11–14 characters each, explicit break.
- H2: ~34–36 characters per line (max 800px), 4 lines.
- Subtitle: ~52 characters per line (max 480px).
- Statement lead: ~36 characters per line (340px).
- How-it-works paragraph: ~50 characters per line (470px).
##### Colour
| Hex | Role |
|---|---|
| `#F3EADB` cream | Covers most of the page: the background below the shell and the 6px frame around it. Also every primary text on oxblood (H1, logo label, wordmarks, rating label), the fill of the nav pill and hero CTA, and the active-row highlight inside the dashboard mock. |
| `#44020D` oxblood | The hero shell fill (the largest dark area); all primary text on cream (statement lead, H2 sentence one); the "Learn more" pill fill; KPI numbers and active icons in the mock; label text on cream pills. |
| `#D4CDC6` stone | Secondary text on oxblood: nav links and hero subtitle. |
| `#68343C` dusty maroon | Hairlines on oxblood: badge border (1px), dropdown chevron, the dimmed ends of the logo marquee, hover tints on the shell. |
Values not in the sample (all inferred):
- muted second sentence of the H2: `#B1A79B`. A darker step of stone, because `#D4CDC6` straight on cream disappears.
- how-it-works paragraph: `#6F625C`.
- rating star: `#E9B44C`.
- mock UI: whites `#FFFFFF`, app canvas `#F7F4F1`, borders `#ECE6E1`, grey text `#8A817C`, delta green `#1F8F4E` on `#E2F4E8`, chart line `#7A2A5A`.
- floating card and thumbnail pill: white `#FFFFFF`.
**Accent rule.** The design is a two-colour figure/ground swap: oxblood is the accent on cream, and cream is the accent on oxblood. The only other saturated colours are the gold star (one instance), the green delta pills and the crimson satin ribbon, all confined to the dashboard and rating. Nothing else gets a hue.
##### Surface
**Radii**
- hero shell: 32px
- media cards: 28px
- video thumbnail: 12px
- glass window bezel: 20px
- floating AI card: 12px; its inner list group: 8px
- mock cards: 10–12px
- all buttons, badges and tags: fully round (999px)
- avatars: circles
**Borders**
- badge: 1px `#68343C`
- avatars: 2px `#44020D` ring
- mock cards and dividers: 1px `#ECE6E1`
- floating-card list rows: separated by 1px `#EEE9E5`
**Shadows** appear in exactly two places:
- floating AI card: `0 12px 32px rgba(40,10,15,0.14)`
- glass bezel: `0 20px 50px rgba(120,30,45,0.10)`
The shell, media cards, buttons, badge and thumbnail have **no** shadow.
**Glass.** The dashboard window bezel is an 8px frame of `rgba(255,255,255,0.55)` with `backdrop-filter: blur(14px)` and a 1px inner edge of `rgba(255,255,255,0.85)`. Glass is used nowhere else.
##### Imagery
**1. Dashboard composite** (hero, left media card, ~1.63:1, 871×536)
- **Background:** a gradient mesh. Blush `#F8E4DF` along the top fades to `#FBF7F5` at the bottom right. A glossy satin ribbon in crimson → rose → pale pink (`#A3122F → #E58C9B → #F6D3D6`) folds vertically down the left edge and is mostly hidden behind the window. Build it with layered radial gradients plus one blurred SVG path.
- **Window:** a frosted glass bezel holds a light-theme sales analytics app. The window starts 54px from the card's left and top edges and **bleeds off the right and bottom edges**.
- **App, left sidebar** (~200px):
- product mark and name with a collapse icon;
- an account switcher card: 28px avatar, name, a tiny outlined "trial" tag and "N days left";
- a search field with a ⌘/ keycap;
- an uppercase section label;
- six nav rows with 16px icons. Row 1 has an outlined "new" tag. Row 2 is active, with a cream `#F3EADB` fill and radius 8;
- a divider, a second uppercase label, and one more row.
- **App, main area:** a white panel with radius 14px.
- title row;
- a filter row: a split dropdown ("period ▾ | calendar icon + date range") and a second dropdown;
- two KPI cards side by side. Each has a grey label with an info icon, a large oxblood number, and a footer with a mono delta, a green % pill and "view details ›";
- a statistics card: three metric columns, each with a coloured dot, a grey label, a value and a green % pill. Below them is a line chart with y-axis labels, light vertical gridlines and a single thin plum line that jumps up near the right.
**2. Portrait** (hero, right media card, ~0.89:1, 475×536)
- Black-and-white studio photo of a woman in profile facing right, chin lifted, hair pulled back tightly, dark jacket, on a pale grey seamless backdrop (`#ECECEC`). The head is in the upper middle and the crop cuts at the chest.
- **Floating AI card** over the lower centre: white, 252px wide, 30px above the card's bottom, horizontally centred. Contents, top to bottom:
- a 24px oxblood geometric mark, centred;
- a 14px semibold title, 3–4 words;
- a 12px grey description, ~14 words over 2 lines, centred;
- a bordered list of three rows. Each row has a sparkle icon, a 5–7 word prompt and a "›" chevron, with padding 10px 12px.
**3. Avatars**
- Three small headshots of different people, cropped to 38px circles, overlapping.
**4. How-it-works thumbnail** (section 5, ~3:2, 333×216)
- A reduced copy of the dashboard UI with a hint of the blush ribbon on its left edge, plus the white "play" pill overlay.
##### Motion
No motion report was supplied. **Every value below is (inferred)** from the stills and from the "restrained motion" and "marquee" observations. Durations and easings were **not measured**, so ranges are given.
**1. Nav bar**
- kind — static
- what moves — nothing
- from → to — none
- range — none
- reduced motion — same
**2. Hero**
- kind — entrance (once, on page load)
- what moves — badge, H1 lines, subtitle, CTA cluster, then the two media cards
- from → to — copy: opacity 0 → 1, translateY 16px → 0. Media cards: opacity 0 → 1, translateY 24px → 0 (inferred)
- range — triggers on load. Duration not measured (500–800ms), ease-out (cubic or quart). Stagger 60–100ms through badge → H1 line 1 → H1 line 2 → subtitle → CTA cluster. The media cards follow 100–150ms after the CTA, with 80–120ms between them.
- reduced motion — everything is rendered at rest with no translate. At most an opacity fade of ≤200ms.
**3. Logo wall**
- kind — entrance, plus a continuous time-based marquee. The marquee is **not** scroll-linked and does not reverse on scroll.
- what moves — the label and track fade in; the wordmark track loops horizontally
- from → to — entrance: opacity 0 → 1. Marquee: the track (wordmarks duplicated once) moves translateX 0 → −50%, then repeats seamlessly (inferred)
- range — the entrance plays once when the row's top reaches 85% of the viewport, not measured (400–700ms), ease-out. Marquee speed not measured (25–45px/s), linear easing, pause on hover. The edge masks stay fixed while the track moves.
- reduced motion — no marquee. Show the five wordmarks static and evenly spaced across the track, with the edge fades kept.
**4. Statement**
- kind — entrance
- what moves — the left lead paragraph and the H2 (by line)
- from → to — opacity 0 → 1, translateY 20px → 0 (inferred). The two-tone colour split is fixed at rest and does not animate.
- range — once, when the section's top reaches 80% of the viewport. Not measured (600–900ms), ease-out. The lead goes first, then the H2 lines with a 60–80ms stagger.
- reduced motion — render at rest
**5. How-it-works row**
- kind — entrance
- what moves — thumbnail, paragraph, button
- from → to — opacity 0 → 1, translateY 20px → 0 (inferred)
- range — once, when the row's top reaches 80% of the viewport. Not measured (600–900ms), ease-out, 80ms stagger in the order thumbnail → paragraph → button.
- reduced motion — render at rest
**Interaction transitions** (separate from the scroll choreography; all inferred, 150–250ms ease-out):
- **Nav link hover:** colour `#D4CDC6` → `#F3EADB`.
- **"Resources" dropdown open/close:** chevron rotates 180°. The panel (cream, radius 16, no shadow or a very soft one) fades in and moves translateY −6px → 0. It closes in reverse.
- **Cream pills (nav, hero CTA):**
- hover: background `#F3EADB` → `#FFF8EC`;
- press: scale 0.98.
- **Oxblood pill:**
- hover: background `#44020D` → `#5A0816`;
- press: scale 0.98.
- **Badge hover:** border `#68343C` → `rgba(243,234,219,0.5)`.
- **Video thumbnail:**
- hover: the image inside scales to 1.03 (clipped by the 12px radius) and the play pill scales to 1.04;
- click: opens a video modal with a backdrop fade of 200ms.
- **Floating AI card rows hover:** background → `#F7F3EF`, and the chevron nudges 2px right.
- **Marquee:** pauses on hover.
##### Responsive (below 640px)
- **Shell:** keeps its 6px inset. Radius drops to 24px and padding to 20px.
- **Nav:** the link group collapses into a 44px cream round menu button. The mark and the "sign up" pill stay.
- **Hero copy:**
- badge text may wrap to 2 lines;
- H1 becomes 48px (2.7× a 17px mobile body), line-height 0.95;
- subtitle 17px with no forced break;
- the CTA cluster stacks under the subtitle, left-aligned: the CTA pill first, then avatars and rating on one line, 16px below.
- **Media row:** stacks vertically with a 12px gap.
- Dashboard card goes to 4:3. The window still bleeds off the right and bottom edges, and the sidebar is hidden.
- Portrait card goes to 4:5, with the floating card at 240px wide.
- **Logo wall:** the label sits above the marquee, and the marquee goes full width with 40px edge fades.
- **Statement:** one column, with the lead above the H2. H2 becomes 34px (2×), line-height 1.02. Padding-top 72px, sides 20px.
- **How-it-works row:** one column. Thumbnail full width (3:2), then paragraph, then button with 32px spacing. Bottom padding 96px.
##### Don'ts
- **Hero shell**
- Don't make the hero full-bleed or square-cornered. It is a rounded oxblood card inset 6px on cream, and cream shows on three sides.
- Don't put a gradient, glow, noise or vignette on the oxblood. It is one flat colour.
- **Type**
- Don't bold or italicise the serif, and don't loosen its tracking. Regular weight, tight negative tracking and sub-1.0 leading are the whole look.
- Don't set headlines in the sans, and don't set nav, buttons or body in the serif.
- Don't centre the hero copy. It is left-aligned, and the CTA cluster sits far right on the subtitle's line.
- **Colour**
- Don't add a brand colour (no blue, violet, teal or neon). The only hues outside oxblood and cream are the gold star, the green deltas and the crimson ribbon, all inside the imagery.
- Don't use pure black text or a pure white page. White exists only inside the UI mocks, the floating card and the play pill.
- Don't swap the muted H2 sentence for gradient text, a highlight, or an underline.
- Don't turn the H2 split into a scroll-scrubbed word reveal. The split sits on the sentence boundary.
- **Imagery**
- Don't use a dark-mode dashboard, and don't fit it neatly inside its card. It is a light UI in a frosted bezel that bleeds off two edges.
- Don't colourise or duotone the portrait. It stays neutral black-and-white on pale grey.
- Don't use real company logos, and don't use grey boxes. Use invented monochrome cream wordmarks of mixed construction.
- **Surface**
- Don't use square or slightly rounded buttons. Every button is a full pill, 46px (nav) or 58px (primary) tall.
- Don't add drop shadows to the shell, media cards, buttons or thumbnail. Only the floating AI card and the glass bezel get soft shadows.
- Don't use glassmorphism anywhere except the dashboard bezel. Not on the nav, the badge or the cream section.
- **Layout and motion**
- Don't add section dividers, borders or tinted bands between sections. Whitespace on one cream field does the separating.
- Don't over-animate. No parallax, pinning, scroll-jacking, 3D tilt, cursor followers or counting-up numbers. Motion is a single soft fade-up per block plus the logo loop.
### Imagery — already generated
These pictures were made for this design and are hosted at the URLs below.
Use them as the `src` exactly as written, and keep the alt text. Do not
generate your own, do not reach for a stock library or a placeholder
service, and do not feed the Imagery section above back to an image model —
that work is done. Size and crop them with CSS (`object-fit: cover`) rather
than assuming their dimensions, and download them into the project if you
would rather not hotlink.
- https://ai-taste-vault.vercel.app/v/demo/x-4/images/01-dashboard-satin-backdrop.webp — Soft blush gradient with a glossy crimson satin ribbon folding down the left edge
- https://ai-taste-vault.vercel.app/v/demo/x-4/images/02-hero-portrait.webp — Black-and-white studio profile of a woman with her chin lifted, wearing a dark jacket
- https://ai-taste-vault.vercel.app/v/demo/x-4/images/03-avatar-sheet.webp — Four small customer headshots arranged in a two-by-two grid
### Image prompts
What each picture above was generated from, for anyone changing one.
**Soft blush gradient with a glossy crimson satin ribbon folding down the left edge** (`01-dashboard-satin-backdrop`)
MEDIUM AND FINISH: a clean, soft digital 3D render of a single length of glossy satin fabric lying on a smooth gradient field. It is a calm abstract backdrop rendered like a product-shot surface, with silky specular sheen on the fabric, perfectly smooth everywhere else, no texture, no grain, no noise. From the attached screenshot take only the blush-and-crimson colouring and the soft finish visible at the left and top edges of the large left hero card. Ignore all of its text, UI, dashboard, layout and the dark oxblood page colour. COLOUR AND VALUE: the field is pale and warm. A blush haze #F8E4DF lies along the top edge and fades smoothly to an almost-white warm #FBF7F5 across the lower right, which is also the lightest value in the frame. The ribbon runs from pale pink #F6D3D6 in its highlights through rose #E58C9B to crimson #A3122F in its deepest folds. Nothing in the frame is darker than #8E1A2E. There are no blacks, no greys, no cast shadows on the ground, and no hues other than these pinks and crimsons. EDGES: the image fills a card with 28px rounded corners that sits on a flat dark oxblood surface. Every edge is a hard crop: no vignette, no darkened corners, no glow at the border. A light UI window will cover everything right of about 7% of the width and below about 10% of the height. Those areas must stay a perfectly smooth, quiet gradient, because they will be seen through a frosted-glass blur. SUBJECT: one wide satin ribbon enters at the top-left corner as a pale pink sweep. It folds down the far left edge in a loose vertical S-curve and turns into its deepest glossy crimson fold between roughly 20% and 45% of the frame height, hugging the left edge. Below that it softens back to rose and pale pink and exits at the bottom-left corner. A faint rosy bloom from the fabric bleeds about a third of the way along the top edge, then dissolves into the blush haze. COMPOSITION: all the ribbon stays inside the left 14% of the width. The rest of the frame is an empty, even blush-to-cream gradient with no objects, no shapes and no light streaks. The rebuild crops about 4% off the top and bottom, so keep the crimson fold away from those edges. AVOID: ribbon or fabric spreading into the centre or right of the frame, multiple ribbons, flowers or petals, glitter, bokeh, lens flare, neon or magenta glow, purple or blue tints, harsh rim lighting, deep shadows, dark or saturated backgrounds, a visible floor or horizon, photographic grain, and any added shapes or particles. Output a wide 3:2 landscape frame, 1536x1024. No text, no lettering, no logos, no watermarks, no UI.
**Black-and-white studio profile of a woman with her chin lifted, wearing a dark jacket** (`02-hero-portrait`)
MEDIUM AND FINISH: a genuine black-and-white studio fashion photograph. It is clean and editorial, with a large soft key light from the front-right, crisp but natural detail, neutral monochrome with no toning, and the finish of a modern lookbook rather than a moody art print. From the attached screenshot take only the tonal register of the portrait in the right hero card: pale grey seamless backdrop, near-black clothing and hair, and a softly lit face. Ignore all text, UI, the white floating card and the page colours. COLOUR AND VALUE: strictly neutral greyscale with zero colour cast, no sepia, no blue and no warm tint. The backdrop is an even pale grey around #ECECEC, the lightest broad area in the frame, easing very slightly to about #E2E2E2 toward the lower left. Only small skin highlights on the cheekbone, nose bridge and throat go lighter, near #F4F4F4. Skin midtones sit between #B5B5B5 and #D8D8D8, and the shadow under the jaw and behind the ear is around #5A5A5A. Only the hair and the jacket go near black, down to #0E0E0E. There are no other deep shadows in the frame. EDGES: the image fills a card with 28px rounded corners. All four edges are hard crops onto the pale backdrop, with no vignette and no darkening at the corners. The rebuild crops about 6% off each side, so keep the whole head inside the central 86% of the width. SUBJECT: a young woman in strict side profile facing right, with her chin lifted high so her face tilts toward the upper right. Her eyes are closed or nearly closed, with a long elegant neck and a calm expression. Her dark hair is pulled back very tightly and sleek against the head into a low knot at the nape. She wears a loose dark jacket or shirt with an open collar, and it reads as a near-black mass. COMPOSITION: the top of her head is about 9% below the top edge. The back of the head is near 30% of the width and the tip of the nose near 80%. The face, chin and throat all sit above the 52% height line. Below that her shoulders and dark jacket fill the lower middle of the frame and are cut by the bottom edge at mid-chest. The lower-centre area, from 25% to 75% of the width and 55% to 95% of the height, will be covered by a white UI card, so it should be plain jacket with no hands or detail of interest. The left quarter of the frame and the area above and in front of the face are empty pale grey backdrop. AVOID: colour, duotone, sepia or split-toning; a dark or black backdrop; a heavy vignette; dramatic rim or edge light; harsh hard-light contrast; HDR clarity; heavy film grain; shallow-focus blur on the face; looking at the camera or a three-quarter or frontal pose; visible hands, jewellery-heavy styling or props; a busy studio background; and cropping at the waist instead of the chest. Output a square 1:1 frame, 1024x1024. No text, no lettering, no logos, no watermarks, no UI.
**Four small customer headshots arranged in a two-by-two grid** (`03-avatar-sheet`)
MEDIUM AND FINISH: four separate, natural colour headshot photographs tiled into a precise 2x2 grid. Each is a quiet, softly lit, everyday professional portrait, like a team-page photo, with gentle diffuse light, realistic skin and modest retouching. From the attached screenshot take only the muted, warm, natural look of the tiny round avatars next to the hero CTA and in the dashboard account switcher. Ignore all text, UI, layout and the oxblood page colour. COLOUR AND VALUE: colours are muted and natural. Each backdrop is a plain light tone between #E3DED8 and #F1EEEA, warm grey or soft off-white, and the backdrops are the lightest areas. Skin is natural and unsaturated, and clothing is in muted neutrals with at most one dusty brick red. The darkest values are hair and dark clothing, no darker than #1A1512. There are no saturated colours, no neon and no coloured gels. EDGES: the frame is divided into four exactly equal 512x512 squares with no gutters, borders or rounded corners. Each square is cropped independently into a small circle, so nothing (hair, shoulders, background objects) may cross from one quadrant into another, and each backdrop is a plain flat tone right to its square's edge. SUBJECT: top-left is a woman with long dark hair worn down and a light top, with a slight smile. Top-right is a man with short dark hair, a light stubble beard and a dark crew-neck tee. Bottom-left is a man with a short trimmed beard and a dusty-red checked shirt. Bottom-right is a man with short dark hair, a full dark beard and a light collared shirt, smiling. All four are different adults from varied backgrounds, facing the camera or a slight three-quarter angle. COMPOSITION: each person is centred in their own square in a tight head-and-shoulders crop. The face fills about 55–65% of the square's height, with the eyes slightly above the square's centre. This way each face still reads clearly when the square is shrunk to a 38px circle. AVOID: shared or continuous backgrounds across quadrants, white grid lines, dramatic studio lighting, dark backdrops, strong bokeh or outdoor scenes, glamour retouching, black-and-white conversion, heavy saturation, props, hands near faces, sunglasses and hats. Output a square 1:1 frame, 1024x1024. No text, no lettering, no logos, no watermarks, no UI.
---
## Synais — AI finance landing page
- Page: https://ai-taste-vault.vercel.app/r/x-1
- Original: https://x.com/uisabor/status/2103074850839691267/photo/1
- Type: Landing page
- Tags: About, Dashboard UI, Fintech, Glassmorphism, Gradient mesh, Hero, High contrast, Marquee, Minimal, Nav bar, Product shot, Restrained motion, Stats band, Tight tracking, Variable font
- Palette: #351817, #E4E2D3, #533C37, #955D45
- Typefaces: TwitterChirp, Apple Color Emoji
- Captured: 2026-09-25
- Rebuilt with: Claude Code · Opus 5.5 · Extra high · skills: frontend-design, emil-design-eng, transitions-dev, gsap, humanizer
- Rebuild: https://ai-taste-vault.vercel.app/v/demo/x-1/index.html
### Prompt — Rebuild
_rebuild · html-css · opus_
#### Cream and oxblood fintech landing page
A quiet, high-contrast fintech landing page in two grounds. The top screen is warm parchment cream with faint circuit-board traces. A cut-out photo of a hand holding a small rounded device rises from the bottom edge, between a left-aligned statement paragraph and two small dark dashboard cards. Below it the page turns deep oxblood-brown for a large centred statement, a three-column stats band and a wide, rounded closing photograph that ends the page. The type is a neo-grotesk with very tight tracking. Primary buttons are square-cornered maroon blocks and secondary buttons are white. Motion is minimal.
##### Structure
- **Viewport reference:** 1440 × 900. The page is full-bleed with no outer margin, no page-level rounding and nothing behind it.
- **Container:** there is no centred max-width wrapper for the frame. Edge-anchored elements sit 14–24px from the viewport sides. Centred content uses its own max widths: hero stack about 460px, statement 900px. The stats band spans the full 1440 in three equal 480px columns.
- **Columns:** the hero is a three-zone composition over one shared canvas:
- left zone, x 24–514: the statement paragraph, bottom-anchored
- centre zone: the product photo
- right zone, x 865–1425: two dashboard cards side by side, bottom-anchored
Everything below the hero is a single centred column, except the 3-up stats band.
**Sections, top to bottom:**
1. **Nav bar.** A fixed overlay, 14px from the top. On the left, a 251 × 47 frosted-glass group: logo tile, wordmark, square menu button. On the right, two 47px-tall buttons.
2. **Hero.** 1056px tall, cream. In order:
- centred credit line
- two-line display headline
- two-line subhead
- two CTAs
- circuit-trace background layer
- centred product cut-out whose bottom is cropped by the section's bottom edge
- bottom-left mono label and statement paragraph
- bottom-right pair of dashboard cards
3. **About statement.** Oxblood ground. A centred chip label, then a five-line centred statement with an inline three-tile icon stack after its first word.
4. **Stats band.** Oxblood. Three equal columns separated by 1px vertical hairlines, each with a large value and a one-line label.
5. **Closing image.** Oxblood. One wide, rounded photograph panel, inset 18px left, right and bottom. It is the last thing on the page: no footer row or text after it.
##### Scroll map
Viewport height = 900px.
1. **Nav bar:** 75px band (0.08 vp), overlaid and fixed. Consumes 0 scroll. Static.
2. **Hero:** 1056px (1.17 vp). Consumes 1056px. Entrance.
3. **About statement:** 544px (0.60 vp), y 1056–1600. Consumes 544px. Entrance.
4. **Stats band:** 250px (0.28 vp), y 1600–1850. Consumes 250px. Entrance.
5. **Closing image:** 820px (0.91 vp), y 1850–2670: 81px gap, 720px panel, 18px bottom inset. Consumes 820px. Entrance.
**Total page height:** about 2670px (2.97 viewports). Nothing pins or stacks.
##### Spacing
**§1 Nav**
- The nav group is inset 14px from the top and 15px from the left.
- The right button pair is inset 14px from the top and right; the buttons sit 10px apart.
- Glass group padding: 4px top, right and bottom; 9px left.
- Inside the group: logo tile, then 6px gap, then wordmark; the menu button is pushed to the far right.
**§2 Hero** (y values from the top of the page)
- Credit line: cap-centre at y 125.
- Headline line box: starts at y 172, ends at y 300.
- Subhead: starts at y 316, 16px below the headline, and ends at y 364.
- CTA row: starts at y 386, 22px below the subhead, and ends at y 440. The two buttons sit 10px apart.
- Product cut-out: starts at y 471, 31px below the CTAs, and runs to y 1056, where the section edge crops it.
**§2 Hero, bottom-left block**
- Left inset 24px.
- Mono label at y 826–838.
- Statement paragraph starts 26px below the label and ends 26px above the hero's bottom edge.
**§2 Hero, dashboard cards**
- Each card is 276 × 196.
- 8px gap between the cards.
- Right inset 15px; bottom inset 20px from the hero edge, so the cards span y 840–1036.
**§3 About statement**
- 100px top padding before the chip.
- 72px from the chip to the statement.
- 44px below the statement.
**§4 Stats band**
- 49px from the top of the section to the hairlines.
- The hairlines are 112px tall.
- 89px below the hairlines.
- In each column, the value and label are centred vertically in the 112px band, with 18px between value and label.
**§5 Closing image**
- 81px top gap, so the panel sits 170px below the stats hairlines.
- The panel is 18px from the left, right and bottom edges.
**Rhythm:** the dark sections use generous vertical gaps (100 / 72 / 92 / 170) against a tight hero. Never compress the dark part into even 64px gaps.
##### Type
**Families**
- **Main family:** one neo-grotesk family (Helvetica Now Display or Neue Haas class) for everything. It is a variable font: display weight sits near 430, slightly heavier than regular. Free stand-in: **Inter Tight** (variable, Google Fonts) using `font-variation-settings: "wght" 430` for display.
- **Mono:** used only for the small slash label and the percentage badges. Free stand-in: **Geist Mono** or **JetBrains Mono**.
Body anchor: 17px.
| Level | × body | Size | Line-height | Tracking | Weight | Max length |
|---|---|---|---|---|---|---|
| Hero display headline | 3.75× | 64px | 1.0 | −0.055em | 430 | 2 lines, about 18ch |
| About statement | 3.3× | 56px | 1.07 | −0.04em | 400 | 900px (about 42ch), `text-wrap: balance` |
| Stat value | 3.3× | 56px | 1.0 | −0.04em | 400 | one line |
| Hero statement paragraph | 1.7× | 29px | 1.1 | −0.03em | 400 | 490px (about 32ch) |
| Stat label | 1.18× | 20px | 1.3 | −0.01em | 400 | one line |
| Wordmark | 1.06× | 18px | 1.0 | −0.03em | 500 | — |
| Body / subhead | 1× | 17px | 1.41 | −0.01em | 400 | 350px (about 45ch) |
| Credit line | 0.94× | 16px | 1.25 | −0.01em | 500 | one line |
| Hero CTA label | 0.88× | 15px | 1.0 | −0.01em | 500 | — |
| Nav button / chip label | 0.82× | 14px | 1.0 | 0 (chip is uppercase, +0.01em) | 500 | — |
| Mono slash label | 0.71× | 12px | 1.2 | +0.02em | 400 mono | — |
**Two-tone text:** the trailing clause of the hero headline, the hero paragraph and the about statement switches to a muted tone mid-sentence. This is static colour on spans, not opacity on the whole block and not a gradient.
- Headline: word 2 of line 1 is muted.
- Hero paragraph: about the first 14 words are ink; the rest is muted.
- About statement: about the first 15 words are cream; the rest is muted.
**Placeholder copy**
| Element | Copy |
|---|---|
| Credit line | "Backed by" + 14px badge + 1-word partner name |
| Headline | 3 words on two lines: "Word Muted-word / Longword" |
| Subhead | 14–16 words over 2 lines |
| CTAs | 2 words each |
| Mono label | a 4px asterisk glyph + one word wrapped in slashes, `/Word/` |
| Hero paragraph | 28–30 words over 5 lines |
| Chip | 2 uppercase words |
| About statement | about 30 words over 5 lines; word 1 is a brand word followed by the inline icon stack |
| Stats | value 3–5 characters (count with "+", a percentage, a currency amount with "B+"); label 2–3 words |
##### Colour
| Hex | Role |
|---|---|
| `#E4E2D3` cream | The hero surface (about 40% of the page). Also text on dark, the chip fill on dark, and the cream parts of the dashboard cards. |
| `#351817` oxblood-brown | The ground of §3–§5 (about 60% of the page), the dashboard card surface and the menu button fill. |
| `#1A1411` ink | Primary text on cream. |
| `#857B71` warm grey | Muted text on cream: headline word 2, subhead, the paragraph's trailing clause. |
| `#8C7A73` muted rose-grey | Muted text on dark: the statement's trailing clause, the donut's minor segment. |
| `rgba(228,226,211,0.75)` | Stat labels. |
| `rgba(228,226,211,0.55)` | Stat hairlines. |
| `#7A3432` maroon | **The single accent.** Allowed only as a fill on: the primary hero CTA, the nav "log in" button, and the dropdown pill and % badges inside the dashboard cards. Never text colour, never a border, never on §3–§5 type. |
| `#FFFFFF` white | Fill of the secondary buttons only (nav "sign up", hero "request demo"), with ink text. |
| `#CFCBBE` trace | Circuit lines. |
| `#DCD9CB` chip | Embossed circuit nodes. |
| `#955D45` copper / `#533C37` umber | Photographic tones only: skin and bronze in the imagery and in the closing image's fallback gradient. Not UI colours. |
| `#F26625` orange | The 14px partner badge in the credit line. The one off-palette hue; it appears nowhere else. |
##### Surface
**Radii**
- 0px: all buttons.
- 2px: menu button and chip.
- 3px: glass nav group.
- 4px: dashboard cards and their inner pills.
- 6px: logo tile.
- 8px: circuit chips and inline icon tiles.
- 12px: floating hero tile.
- 20px: closing image panel.
**Borders:** none on buttons, cards or the image. The only lines are the 2px circuit traces and the 1px stat hairlines.
**Shadows:** used on exactly three things:
- **Floating hero tile:** `0 8px 20px rgba(53,24,23,0.14), inset 0 1px 0 rgba(255,255,255,0.7)`.
- **Circuit chips:** emboss, `0 1px 2px rgba(53,24,23,0.10), inset 0 1px 0 rgba(255,255,255,0.7)`.
- **Glass nav group:** `0 1px 2px rgba(53,24,23,0.10), inset 0 0 0 1px rgba(255,255,255,0.35)`.
No shadows on buttons, dashboard cards or the closing image.
**Glass nav group fill:** `linear-gradient(90deg, rgba(196,191,176,0.55), rgba(228,226,211,0.35))` with `backdrop-filter: blur(14px) saturate(120%)`.
**Circuit layer.** One absolutely positioned 1440 × 1056 SVG behind all hero content and behind the product photo, which overlaps it. Strokes are 2px `#CFCBBE` with no fill. Every 90° turn is rounded at 16px. The right side mirrors the left (x′ = 1440 − x) with small irregularities.
Left-side paths:
- (0,328) → (152,328) → (152,536) → (296,536)
- (0,399) → (296,399), then the long vertical x = 296 down to y = 1056. It passes behind the hero paragraph.
- (0,621) → (76,621) → (76,556) → (470,556)
- (0,686) → (106,686) → (106,631) → (470,631)
- (0,761) → (96,761)
On the right, the mirrored vertical x = 1144 stops at y = 840 and lands exactly in the 8px gap between the two dashboard cards.
Nodes along the traces:
- Pill chips 52 × 24 with tiny glyphs in `#B9B4A6` (three dots, three bars, dash-dot), on the left at (400,556) and (120,761), and on the right at (1030,556) and (1316,556).
- A vertical chip 22 × 40 at (114,556).
- A 32px dot-grid chip at (1310,768).
- 26px round nodes at (90,399) and (1350,399).
- A **floating tile**, 60 × 60, fill `#ECEAE0`, centred at (1216,399) on the right trace, holding a 30px black asterisk mark.
##### Imagery
1. **Hero product cut-out:** about 445 × 585, roughly 3:4 portrait, with no background (transparent PNG). A deep-brown-skinned hand rises from the bottom edge and holds a small, soft-cornered square device in matte sage green (about `#8E978A`). The device has an embossed six-spoke asterisk mark and a thin amber light strip glowing along its lower front edge. Warm studio light comes from the upper left. A forest-green knit cuff shows at the bottom right. The box's left edge is at x 471 (centre about 27px left of page centre). Its bottom is flush with, and cropped by, the hero's bottom edge, so the wrist runs off-section.
2. **Dashboard cards (×2):** a product shot built as DOM, `aria-hidden`.
- **Build size and scaling:** author each card at 440 × 314 and scale it with `transform: scale(0.625)`, origin top left, to 276 × 196.
- **Card:** `#351817` fill, 4px radius, 22px padding.
- **Top row:**
- left: title (15px cream, 500) over a date range (12px muted)
- right: two 24px square icon buttons (the first cream with a dark clock glyph, the second translucent with a chart glyph) and a 64 × 24 maroon "label ⌄" pill
- **Value:** 28px cream, e.g. "$ 000.00".
- **Trend row:** a maroon 70 × 24 badge with a trend icon and a 12px mono percentage, then 14px "vs last period" text.
- **Bottom row:**
- left: a 100px donut ring with a 14px stroke, cream with a 25% `#8C7A73` segment
- right: a 12px muted "all categories" label above a two-column legend of three items (6px cream dot, 12px muted name, 13px cream value)
- **The two cards:** card 1 is an expenses-style card with a small value; card 2 is income-style with a larger value.
3. **Brand mark tile:** a 26px charcoal `#2B2624` tile with a cream 16px six-spoke asterisk glyph. This is a placeholder mark.
4. **Inline icon stack (§3):** three 36px tiles with 8px radius, overlapping by 8px: charcoal `#2A2724`, mid-grey `#8A8784`, cream `#E4E2D3`. Each carries the asterisk glyph in a contrasting tone. The stack sits inline after the statement's first word, vertically centred on the x-height, with 16px space on each side.
5. **Closing image panel (§5):** 1404 × 720 (about 1.95:1), at x 18–1422 and y 1931–2651, 20px radius, `object-fit: cover`. It is a warm abstract macro photograph, like glossy bronze or a satin surface under a single warm light:
- deep oxblood-umber (`#351817` → `#533C37`) across the left 60%
- rising through copper `#955D45`
- to a pale champagne highlight (about `#D9C7A2`) in the upper right
- one crisp diagonal specular streak running from the top edge at about 75% width down to the right
No text, logo or overlay on it. If you have no photo, use a CSS mesh fallback: stacked radial gradients in the same stops plus a skewed linear gradient for the streak. The panel must still be there.
##### Motion
No measured motion data exists for this page. Every value below is inferred, and the durations were not measured, so they are given as ranges.
**§1 Nav bar**
- **kind:** static (fixed position, inferred).
- **what moves:** nothing. Content scrolls beneath, and the glass group blurs it.
- **from → to:** none.
- **range:** none.
- **reduced motion:** identical.
**§2 Hero**
- **kind:** entrance.
- **what moves:** credit line, headline lines, subhead, CTA row, product cut-out, bottom-left block, dashboard card 1, dashboard card 2. The circuit layer and its chips stay static.
- **from → to:** text and buttons go opacity 0 → 1 and translateY 16px → 0 (12–20px). The product cut-out goes opacity 0 → 1 and translateY 40px → 0 (24–48px). The left block and the cards go opacity 0 → 1 and translateY 16px → 0.
- **range:** once, on page load. Duration not measured: 600–900ms, ease-out `cubic-bezier(0.22,1,0.36,1)`. Stagger 60–100ms in the order listed. All inferred.
- **reduced motion:** everything renders in its final state; at most a 150ms opacity fade.
**§3 About statement**
- **kind:** entrance.
- **what moves:** the chip, then each statement line as a separate block.
- **from → to:** opacity 0 → 1, translateY 20px → 0. The two-tone colour split is static and does not animate.
- **range:** once, when the section's top reaches 80% of the viewport. Duration not measured: 600–800ms, ease-out, 60–90ms stagger per line (inferred).
- **reduced motion:** shown immediately.
**§4 Stats band**
- **kind:** entrance.
- **what moves:** the three columns, each with its value, label and the hairline to its left.
- **from → to:** opacity 0 → 1, translateY 16px → 0. Values appear at their final number, with no counting.
- **range:** once, when the band's top reaches 85% of the viewport. Duration not measured: 500–700ms, ease-out, 80–120ms stagger left to right (inferred).
- **reduced motion:** shown immediately.
**§5 Closing image**
- **kind:** entrance.
- **what moves:** the panel and the photo inside it.
- **from → to:** the panel goes opacity 0 → 1 and translateY 32px → 0. The inner image goes scale 1.06 → 1.0 inside the clipped panel.
- **range:** once, when the panel's top reaches 85% of the viewport. Duration not measured: 900–1200ms, ease-out (inferred).
- **reduced motion:** static, fully visible.
**Interaction transitions** (not part of the scroll choreography). Durations were not measured: 150–200ms ease-out.
- **Primary maroon button hover:** fill `#7A3432` → `#682B29`.
- **White button hover:** fill `#FFFFFF` → `#F3F1E8`.
- **Press:** translateY(1px), no scale bounce.
- **Menu button hover:** the two 16px cream bars (1.5px thick) move from 5px to 7px apart.
- **Menu open:** a panel drops from under the glass group, opacity 0 → 1 and translateY −8px → 0. Close reverses it.
- **Focus:** 2px solid ink outline with a 2px offset on cream; a cream outline on oxblood.
##### Responsive (below 640px)
- **§1 Nav:** the glass group shrinks to its content (logo, wordmark, menu). "Log in" moves into the menu. "Sign up" stays, 40px tall. Insets become 12px.
- **§2 Hero:**
- Height becomes auto, with 96px top padding.
- Headline 40px (2.35×), line-height 1.02. Subhead 16px, max 320px.
- The CTAs stay in one row, each `flex: 1`, 48px tall.
- Product cut-out at 280px wide, centred and no longer cropped. Below it, 20px side insets:
- the mono label and paragraph (22px, line-height 1.15)
- then both dashboard cards stacked full width (scaled 440 → 335), 8px apart, with 20px bottom padding
- The circuit layer keeps only the y-399 trace and its vertical on each side. Chips, round nodes and the floating tile are dropped.
- **§3 About statement:** 72px top padding. Statement 32px (1.9×), line-height 1.12, 20px side insets. Icon-stack tiles become 22px.
- **§4 Stats band:** three stacked rows, each about 120px. The vertical hairlines become 1px horizontal hairlines between rows, inset 20px. Values 44px, labels 18px.
- **§5 Closing image:** inset 12px on the sides and bottom, radius 14px, 4:5 aspect, cropped so the highlight stays in the upper right. 96px above it. It is still the last element on the page.
##### Don'ts
- **The page ends at the closing image.** Don't end it at the stats band, and don't follow the stats with a footer, CTA block, newsletter row or text-on-gradient banner. The last element is the 1404 × 720 rounded photograph on the oxblood ground, with 18px of oxblood below it.
- **Buttons are square.** No pill buttons or 8–12px radii. Buttons are 0-radius rectangles: 54px tall in the hero, 47px in the nav.
- **No pure white page or black dark section.** The page is cream `#E4E2D3`. The dark half is warm oxblood `#351817`, not charcoal, navy or `#000`.
- **Maroon is only a fill.** Never use `#7A3432` for links, headings, icons, borders or text on the dark section. White appears only on the two secondary buttons.
- **Headlines stay light and tight.** No bold display weights (keep 400–430) and no default tracking (keep −0.04 to −0.055em). Loose, heavy headlines kill this design.
- **No usual SaaS effects.** No gradient text, glowing blobs, purple/blue fintech gradients or neon accents.
- **The muted clause is static colour on spans.** Don't fade whole paragraphs, don't animate a word-by-word colour scrub, and don't use a gradient.
- **The circuit traces are faint.** Keep them 2px and barely darker than the cream: no dark or thick lines, no glowing pulses racing along them, no animated stroke drawing. They pass behind the product photo and the paragraph.
- **The dashboard cards are small corner details.** Don't enlarge them into a centred hero screenshot or a browser-frame mockup. They stay at 276 × 196 in the hero's bottom-right corner.
- **Hero layout is fixed.** Don't centre the hero paragraph (it is left-aligned at 24px, bottom-anchored). Don't give the product photo a background, card or frame (it is a cut-out cropped by the section edge).
- **Shadows only where listed.** None on buttons, cards or the image panel; only the floating tile, the circuit chips and the glass nav group carry them.
- **No extra sections or effects.** No logo cloud, testimonial carousel, feature-card grid, count-up odometers, parallax headline, spring or bounce easing, or scroll pinning.
- **No grey frame.** No outer margin, grey surround or rounded page corners: the design runs edge to edge.
### Imagery — already generated
These pictures were made for this design and are hosted at the URLs below.
Use them as the `src` exactly as written, and keep the alt text. Do not
generate your own, do not reach for a stock library or a placeholder
service, and do not feed the Imagery section above back to an image model —
that work is done. Size and crop them with CSS (`object-fit: cover`) rather
than assuming their dimensions, and download them into the project if you
would rather not hotlink.
- https://ai-taste-vault.vercel.app/v/demo/x-1/images/01-hero-hand-device.webp — A deep-brown-skinned hand holding a small soft-cornered sage-green device with an asterisk mark and a glowing amber light strip
- https://ai-taste-vault.vercel.app/v/demo/x-1/images/02-closing-bronze-panel.webp — Abstract close-up of a curved satin-bronze surface glowing from deep oxblood to a pale champagne highlight
### Image prompts
What each picture above was generated from, for anyone changing one.
**A deep-brown-skinned hand holding a small soft-cornered sage-green device with an asterisk mark and a glowing amber light strip** (`01-hero-hand-device`)
MEDIUM AND FINISH: A clean, photoreal studio product photograph of a hand holding a small gadget, cut-out style. The light is soft, even and diffused, the finish is matte, focus is crisp across the whole hand and device, contrast is moderate and there is no grain. From the attached screenshot, take only the warm cream-and-brown palette and the soft studio finish of the hand-and-device image in its centre. Ignore its text, buttons, faint circuit lines and dark dashboard cards. COLOUR AND VALUE: The background is one perfectly flat, uniform cream #E4E2D3. The skin is a deep warm brown: midtones around #5A3626, lit knuckles and thumb pad rising to copper #955D45–#A87256, and the deepest creases between the fingers no darker than #22140E (no true blacks anywhere). The nails are a pale pink-beige #C7A496. The device is matte sage green #8E978A, lighter at #AAB1A3 on its top-left face and #66705F on its shaded right side. The only bright element in the frame is a thin warm light strip: its core reaches #F8E7C2 and it falls off through soft amber #E2A75E. Nothing else is brighter than the cream background. The sleeve cuff is a dark forest-green knit #2C4038. EDGES: The subject is isolated on the flat #E4E2D3 cream with no cast shadow, no floor, no gradient and no vignette, so the background can be keyed out and the hand sits directly on a cream page. The wrist and the knit cuff run straight off the bottom edge of the frame and are cropped by it. SUBJECT: A deep-brown-skinned hand rises from the lower right with its palm toward the camera. It holds a small, soft-cornered square device, like a rounded pebble about the size of a palm, upright in front of the palm and tilted slightly, with its front face toward the camera and seen a touch from above. The thumb presses the device's right side near its top corner. The index, middle and ring fingers curl around its left side with their nails visible. The front face carries an embossed six-spoke asterisk mark in a slightly darker sage tone, just above centre. A thin warm light strip glows along the lower front edge and curves up around the bottom-right corner, and a tiny dark port slot sits at the centre of the bottom edge. Warm soft key light comes from the upper left. At the bottom right, the wrist goes into a forest-green knit sweater cuff. COMPOSITION: Portrait. The hand and device fill the frame width with only a small cream margin on each side. The device sits in the upper-centre and spans about 45% of the frame width. The forearm angles down to the bottom-right corner. Leave roughly the top 12% as empty cream above the highest fingertip, so the frame can be trimmed to 3:4 without touching the hand. AVOID: dramatic chiaroscuro, a black or dark background, rim-light halos, hard shadows, shallow depth of field or bokeh, glossy plastic or metallic device surfaces, a screen or display on the device, neon or blue-white glow, rings, watches or jewellery, a second hand, extra props, any circuit lines or UI behind the hand, and over-sharpened HDR skin. Output a tall 2:3 portrait frame, 1024x1536. No text, no lettering, no logos, no watermarks, no UI.
**Abstract close-up of a curved satin-bronze surface glowing from deep oxblood to a pale champagne highlight** (`02-closing-bronze-panel`)
MEDIUM AND FINISH: A smooth, photoreal abstract macro image of a curved satin-bronze surface. It reads like a clean product render of polished metal seen extremely close: silky continuous tonal gradients, no surface texture, no grain, no visible object outline and no recognisable product. From the attached screenshot, take only the warm oxblood-to-champagne palette and the satin sheen of the thin sliver of this panel visible at its very bottom edge. Ignore all of the screenshot's text, buttons, cards and the cream upper page. COLOUR AND VALUE: The darkest value is #2E1514 and nothing goes below it: no black and no crushed shadows. The left 60% of the frame is deep oxblood-umber, moving from #351817 up to #533C37. Toward the right it lifts through copper #955D45 and warm tan #B98A63 into a pale champagne highlight #D9C7A2 in the upper right. The single brightest point is the core of the specular streak at #F3EBDB, never pure white. A faint copper sheen around #7A5442 glances along the very top-left corner. EDGES: This image sits inside a rounded panel on a flat #351817 oxblood page, with a thin oxblood margin on the left, right and bottom. The left edge and the bottom edge stay close to #351817–#3E1F1B so the panel sinks quietly into the ground there; only the upper right glows. No type sits over it. SUBJECT: One large, gently curving bronze surface fills the whole frame, like the shoulder of a polished metal object turning away from a single warm light placed off-frame to the upper right. The curvature gives a broad, soft roll-off from dark on the left to light on the right. One crisp, narrow diagonal specular streak starts at the top edge at about 75% of the frame width and runs down and to the right, leaving off the right edge. COMPOSITION: Wide landscape with large calm areas and minimal detail. Keep the dark-to-light transition and the streak inside the middle horizontal band, so the image still works when cropped to about 2:1 through the middle and when cropped to 4:5 around the upper-right highlight. AVOID: black vignettes, lens flare, sunbursts, bokeh, reflections of a studio or environment, water droplets, brushed-metal scratches, gold glitter, liquid swirls or smoke, any purple, blue or teal tint, more than one streak, hard high-contrast HDR, and any recognisable object or device. Output a wide 3:2 landscape frame, 1536x1024. No text, no lettering, no logos, no watermarks, no UI.
---
## Red creative agency landing page
- Page: https://ai-taste-vault.vercel.app/r/x-3
- Original: https://x.com/uisabor/status/2103074850839691267/photo/3
- Type: Landing page
- Tags: About, Agency / Studio, Editorial, Feature grid, Full bleed, Glassmorphism, Gradient mesh, Hero, Marquee, Nav bar, Neon accent, Restrained motion, Stats band, Tight tracking, Variable font
- Palette: #FEFEFE, #F3680C, #2A2A2A, #D30718, #670707
- Typefaces: TwitterChirp, Apple Color Emoji
- Captured: 2026-09-25
- Rebuilt with: Claude Code · Opus 5.5 · High · skills: frontend-design, emil-design-eng, transitions-dev, gsap, humanizer
- Rebuild: https://ai-taste-vault.vercel.app/v/demo/x-3/index.html
### Prompt — Rebuild
_rebuild · html-css · opus_
#### Red duotone creative agency landing page
This is a short, editorial landing page for an art-direction studio. It opens with a full-bleed hero photo graded entirely in red-orange. A motion-blurred profile portrait fills it. Across the hero sit huge, very tightly tracked uppercase grotesk headlines, small uppercase mono text, a frosted-glass info card and a pair of big stats. Below the hero the page turns plain white for an "about" split: a two-tone headline, a mono paragraph, a CTA pair and a 2×2 feature list on the left, and one tall black-and-white photo on the right. The look comes from three contrasts: hot duotone against clean white, giant compressed grotesk against small mono, and square hard edges against a single glass card.
##### Structure
- **Layout:** full-width, 1440px reference, no centred max-width container. Content sits on a 24px left/right gutter (the right side of the hero reads ~34px). It is a 12-column grid with 24px gutters, used loosely.
- **Sections, top to bottom:**
1. **Nav bar.** A thin near-black strip across the full width.
- Left: logo mark and wordmark, a 1px vertical divider, then a tiny mono studio tag (2 words).
- Right: five mono uppercase links, then a mark icon with "MENU".
2. **Hero.** A full-bleed duotone photo with these layers:
- a ghost word the full width of the page behind the subject
- a dot-grid patch at top-left
- a stats pair at middle-left
- a right-aligned mono statement at middle-right
- a three-line headline at lower-left
- a CTA row under the headline
- a glass card at lower-right
3. **Trust bar.** A white band with a full-width hairline on top.
- Left: a small orange pixel icon and the mono label "TRUSTED BY" (2 words).
- Right: a mono grey label (2 words).
- Between them, a slow logo marquee (inferred from the "Marquee" tag; it isn't visible in the still).
4. **About and features.** A two-column split.
- Left column, cols 1–5: two-tone headline, mono paragraph, CTA pair with a rating chip, then a 2×2 feature list.
- Right column, cols 7–12, ~660px wide: one tall black-and-white photo, its top aligned with the headline top and its bottom aligned with the last feature row.
The capture ends after section 4.
##### Scroll map
Heights assume a 900px viewport. No motion report was supplied, so every value here is read off the still.
1. **Nav:** 44px, 0.05 vh. Consumes 44px. Static, sticky at top (inferred).
2. **Hero:** ~995px, 1.1 vh. Consumes 995px. Entrance, plus a light scroll-linked parallax on the ghost word (inferred).
3. **Trust bar:** ~150px, 0.17 vh. Consumes 150px. Static, with a continuous marquee loop (inferred).
4. **About and features:** ~810px, 0.9 vh. Consumes 810px. Entrance (inferred).
**Total page height:** ~2000px, about 2.2 viewports. Nothing pins or stacks.
##### Spacing
**1. Nav**
- Height 44px.
- Logo cluster gap 12px; the divider is 1px × 14px.
- Links are spaced 34px apart and end ~150px before the "MENU" item, which sits 24px from the right edge.
**2. Hero**, positions measured from the hero top:
- **Ghost word:** occupies y 120–360.
- **Dot grid:** x 24–390, y 140–320. Dots are 1.5px, on a 16px pitch.
- **Stats:** start at y 440.
- Two stats are spaced 200px apart, left edge to left edge.
- Number to label: 18px.
- **Right statement:** top at y 470, right edge 34px in. Five lines, right-aligned.
- **Headline:** occupies y ~645–850.
- **CTA row:** starts 36px below the headline.
- Primary button: 172×68.
- Square icon button: 68×68, set 4px from the primary.
- "Watch demo" text link: 68px further right, vertically centred.
- Bottom of the CTA row to the hero bottom: ~45px.
- **Glass card:** 495×195, inset 34px from the right and 38px from the bottom.
- Left rail 46px wide.
- Header row 46px tall, with a hairline under it.
- Body padding 24px.
- Portrait panel 155px wide, flush right.
**3. Trust bar**
- Hairline starts 50px below the hero, inset 32px each side.
- Labels sit 32px below the hairline.
- Bottom padding to section 4: 75px.
**4. About and features**
- Headline to paragraph: 50px.
- Paragraph to CTAs: 52px.
- CTAs: a 182×72 black button and a 72×72 orange square, 4px apart. The rating chip is 44px to the right.
- CTAs to feature grid: 100px.
- Feature grid: 2 columns on a ~300px pitch; 135px from row to row.
- Each item has a 7px orange dot at the left, with text indented 44px from the dot.
- Title to description: 22px.
- Bottom padding: ~40px.
**Rhythm:** a dense hero, then tight label bands, then generous ~75–100px pauses inside the white section. Sections share no uniform padding. Space is set by alignment to the photo edges.
##### Type
Two families only.
**Display: tight neo-grotesk.** Something close to Neue Haas or Helvetica Now Display.
- Free stand-in: **Inter Tight**, variable, weights 500–650.
- Headlines are always uppercase and always set with heavily negative tracking, so letters nearly touch.
**Text: monospace.** A slightly typewriter-flavoured mono.
- Free stand-in: **Geist Mono** or **IBM Plex Mono**, weight 400.
- Used for all running copy, labels, nav and button text. Mostly uppercase, with positive tracking.
The body anchor is 16px, set in mono uppercase.
| Level | Family | Ratio | Size | Line-height | Tracking | Weight | Notes |
|---|---|---|---|---|---|---|---|
| Ghost word (hero) | grotesk | ~25× | ~400px (fit to ~95vw) | 0.8 | −0.06em | 600 | Single word, uppercase, white at 6–8% opacity |
| Hero H1 | grotesk | 6.5× | 104px | 0.8 | −0.065em | 600 | 3 lines, 2–3 words each, max ~14 chars/line |
| About H2 | grotesk | 4.9× | 78px | 0.9 | −0.06em | 600 | 3 lines; the first ~3 words in ink, the rest in grey |
| Stat number | grotesk | 3.75× | 60px | 1.0 | −0.07em | 500 | e.g. "90%" |
| Feature title | grotesk | 1.4× | 22px | 1.1 | −0.03em | 500 | Uppercase, 2 words |
| Rating value | grotesk | 1.4× | 22px | 1.1 | −0.03em | 500 | "4.5/5.0" format |
| Logo wordmark | grotesk | 1.1× | 18px | 1 | −0.02em | 600 | |
| Button label | mono | 1.25× | 20px | 1 | 0.02em | 400 | Sentence case, 3 words |
| Trust labels | mono | 1.1× | 18px | 1 | 0.12em | 400 | Uppercase |
| Body / about paragraph | mono | 1× | 16px | 1.55 | 0.04em | 400 | Uppercase, max ~48 chars/line, 4 lines |
| Hero statement, glass card text | mono | 1× | 16px | 1.35 | 0.06em | 400 | Uppercase; ~24 chars/line (statement), ~30 chars/line (card) |
| Stat label | mono | 1× | 16px | 1 | 0.1em | 400 | Uppercase, preceded by a 7px white dot |
| Demo link | mono | 1× | 16px | 1 | 0.1em | 400 | Uppercase; the last 3 words in brighter white |
| Nav links | mono | 0.875× | 14px | 1 | 0.08em | 400 | Uppercase |
| Feature description, rating caption | mono | 0.875× | 14px | 1.45 | 0.04em | 400 | Uppercase, grey, 2 lines of ~30 chars |
| Studio tag, card rail "//YEAR" | mono | 0.75× | 12px | 1 | 0.1em | 400 | The rail text is rotated −90° |
If the variable axes allow it, headlines may narrow slightly (wdth ~90). The weight stays at medium–semibold, never black.
##### Colour
| Hex | Role |
|---|---|
| `#FEFEFE` | Page surface for sections 3–4, all text on the hero, and the primary button fill on the hero. This covers most of the page below the fold. |
| `#F3680C` | **The single accent (orange).** Allowed only on: the square icon buttons, feature-bullet dots, the trust-bar pixel icon, the rating star, and the bright top-right of the hero grade. Nowhere else, and never as text. |
| `#D30718` | Hero red. It is the mid-tone of the duotone grade and lower-left part of the hero. Appears only inside the hero imagery and grade. |
| `#670707` | Deep maroon, the shadow tone of the duotone (hair, jacket folds, the bottom of the hero). |
| `#2A2A2A` | Ink for body mono on white. |
Values below are inferred, not sampled:
- `#111111`: nav bar background and the black button.
- `#8C8C8C`: grey second half of the H2 and the feature descriptions.
- `#E6E6E6`: hairlines on white.
- `#F1F1F1`: the circle behind the rating star.
**Hero grade.** The photo is mapped to a duotone, shadows `#670707` and highlights `#F3680C`. On top sits a mesh of three radial gradients:
- orange `#F3680C` at the top-right (60% 0%)
- red `#D30718` at the lower-left (10% 80%)
- maroon `#670707` at 85% 100%
Blend the mesh with multiply or soft-light, so the image stays legible while the colour stays saturated. Text on the hero is always white.
##### Surface
- **Corners:** square or nearly square everywhere. Buttons 2px, the about photo 4px, the nav 0.
- **Glass card:** the one exception, at 16px radius.
- Fill: `rgba(255,255,255,0.06)`
- `backdrop-filter: blur(18px) saturate(140%)`
- Border: 1px `rgba(255,255,255,0.35)`
- Internal hairlines (rail divider and header underline): 1px `rgba(255,255,255,0.3)`
- The portrait panel has 16px radius on its right corners only.
- **Hairlines on white:** 1px `#E6E6E6`.
- **Shadows:** none anywhere. No glows, even though the page is tagged "neon accent". The neon effect comes from saturation alone.
##### Imagery
1. **Hero backdrop.** Full-bleed, about 1440×995 (≈1.45:1).
- Subject: a young woman in profile facing right, placed right of centre so her face sits at ~65% x, 35% y. She has long braids and a work jacket.
- Treatment: a long horizontal motion blur (shutter drag) smears her hair and the back of her head out to the left, filling the left half with streaks.
- Grade: red-orange duotone as above.
- The ghost word sits *behind* her head. Mask it or put it on a layer under a cut-out, so her silhouette overlaps it.
2. **Glass card portrait.** About 155×195 (≈4:5).
- The same subject facing the camera, framed head and shoulders, with the same blur and the same orange grade.
3. **About photo.** About 660×728 (≈10:11), right column.
- A black-and-white, low-angle shot of a woman in a puffy jacket and over-ear headphones, mid-dance with one arm flung up. Behind her is a concrete underpass ceiling.
- High-contrast greyscale with no tint. This is the only neutral image, and it cools the page after the hero.
##### Motion
No motion report was supplied. Everything below is inferred, and no timings were measured.
**1. Nav**
- kind: static (sticky to the top, inferred)
- what moves: nothing
- from → to: none
- range: n/a
- reduced motion: same
**2. Hero**
- kind: entrance, plus scroll-linked for the ghost word (inferred)
- what moves:
- the H1 lines
- the stats
- the right statement
- the CTA row
- the glass card
- the ghost word (scroll-linked)
- from → to:
- H1 lines: each line is clipped in a line mask; the text goes from translateY 100% → 0.
- Stats, statement and CTA row: opacity 0 → 1, translateY 16px → 0.
- Glass card: opacity 0 → 1, translateY 24px → 0.
- Ghost word: translateX 0 → −80px (inferred).
- range:
- Entrance: plays once on load. Duration not measured; use 600–900ms with a strong ease-out (expo-out-like). H1 lines stagger by 80–120ms, then the other elements follow 100ms apart.
- Ghost word: scroll-linked from scroll 0 until the hero bottom reaches the viewport top, and it reverses on the way back up.
- reduced motion: everything appears at its final state; no parallax.
**3. Trust bar**
- kind: static, with a continuous marquee (inferred)
- what moves: a row of greyscale logos between the two labels
- from → to: translateX 0 → −50% of the duplicated track, looping linearly
- range: always running, not tied to scroll. Loop speed not measured; keep it slow (30–50s per loop).
- reduced motion: the marquee stops and shows a static row.
**4. About and features**
- kind: entrance (inferred)
- what moves: the H2 lines, paragraph, CTA row, the four feature items and the photo
- from → to:
- H2 lines: line-mask rise, translateY 100% → 0.
- Paragraph, CTA row and feature items: opacity 0 → 1, translateY 20px → 0.
- Photo: clip-path inset(100% 0 0 0) → inset(0), revealing upward, with scale 1.06 → 1 on the image inside.
- range: plays once, when each element's top reaches 80% of the viewport. Duration not measured; use 600–900ms ease-out. The features stagger by 80ms in reading order.
- reduced motion: no transforms; at most a 200ms opacity fade.
**Interaction transitions** (separate from scroll):
- **Primary buttons:** on hover, white ↔ ink fills swap (on the hero the button goes ink with white text; on white the black button goes orange). 200ms ease.
- **Square orange icon button:** on hover the mark rotates 90°, 250ms.
- **Nav links and the demo link:** on hover, opacity 0.6 → 1, or an underline grows from the left, 200ms.
- **Press:** scale 0.98, 100ms.
- **Menu open:** a full-screen near-black panel slides down, 400–500ms ease-out (inferred).
- **Glass card:** on hover the border opacity goes 0.35 → 0.6.
##### Responsive (below 640px)
- **1. Nav:** collapses to logo + "MENU" only. Drop the studio tag and the links.
- **2. Hero:**
- Becomes ~100svh tall or slightly more.
- Re-crop the photo so the face is centred in the upper half.
- Scale the ghost word to the viewport width (~22vw).
- Drop the dot grid.
- Stack in this order: stats (keep both side by side), H1 at ~48px (2.8× body) with the same tracking, CTA row.
- The demo link moves under the buttons.
- The right statement moves above the stats, left-aligned.
- **Glass card:** moves below the hero onto a red `#670707` band, full width minus a 16px gutter. Keep the portrait panel at 110px wide.
- **3. Trust bar:** labels stack, with the marquee below them.
- **4. About and features:**
- Single column in this order: H2 at ~40px, paragraph, CTAs, then the photo at full width (4:5), then the features in one column.
- **Gutters:** 16px. Mono body stays at 16px; feature descriptions stay at 14px.
##### Don'ts
- Don't use pill or rounded-xl buttons, and don't use soft card shadows. Everything is square and flat except the one glass card.
- Don't leave the headlines at default tracking. Without about −0.06em and ~0.8–0.9 line-height they look like a generic SaaS page. Never use a geometric sans (Poppins, Montserrat) or a serif.
- Don't set any body copy in the grotesk, or in sentence-case sans. Running text is uppercase mono; the only sentence-case mono is the button label.
- Don't show the hero photo in natural colour, and don't use a plain red overlay at 50% opacity. It has to be a true duotone (maroon shadows, orange highlights) with visible motion blur.
- Don't spread the orange around. No orange headlines, links, borders or section backgrounds. It lives on small squares, dots and the star.
- Don't add purple, blue or a dark-mode body. Below the hero the page is white with ink text.
- Don't colourise the about photo. It must stay greyscale.
- Don't centre anything in the hero. The headline stays bottom-left, the card bottom-right, the statement right-aligned.
- Don't make the ghost word legible or high-contrast. It's texture at 6–8% opacity, sitting behind the subject.
- Don't stuff the feature list with icons, cards or borders. It's an orange dot, an uppercase title and two grey mono lines.
- Don't add bouncy or springy motion, or big scroll-jacking. Motion is a short line-mask rise and fades, played once.
### Imagery — already generated
These pictures were made for this design and are hosted at the URLs below.
Use them as the `src` exactly as written, and keep the alt text. Do not
generate your own, do not reach for a stock library or a placeholder
service, and do not feed the Imagery section above back to an image model —
that work is done. Size and crop them with CSS (`object-fit: cover`) rather
than assuming their dimensions, and download them into the project if you
would rather not hotlink.
- https://ai-taste-vault.vercel.app/v/demo/x-3/images/01-hero-motion-portrait.webp — Woman in profile facing right, her braided hair smeared into long horizontal motion streaks, toned entirely in red and orange
- https://ai-taste-vault.vercel.app/v/demo/x-3/images/02-card-portrait.webp — Same young woman facing the camera, head and shoulders, hair blurred sideways, toned in orange-red
- https://ai-taste-vault.vercel.app/v/demo/x-3/images/03-about-dance-bw.webp — Black-and-white low-angle photo of a woman in a puffer jacket and headphones dancing with one arm flung up under a concrete ceiling
### Image prompts
What each picture above was generated from, for anyone changing one.
**Woman in profile facing right, her braided hair smeared into long horizontal motion streaks, toned entirely in red and orange** (`01-hero-motion-portrait`)
MEDIUM AND FINISH: a real editorial fashion photograph, shot with a slow shutter, so the background and hair carry a long horizontal motion blur while the face stays sharp. The whole image is toned as a single-hue red-orange duotone, like an art-directed magazine spread. The finish is smooth with fine grain; it is not a render and not an illustration. COLOUR AND VALUE: the image is monochrome in a red-orange ramp with no other hues. The lightest values are the hot orange of the background at top-right and the highlights on the cheek and ear, around #F7740F to #FF8A3A, and nothing is lighter than #FF9A50. There are no whites, no skin-neutral tones, no blue and no green. Mid-tones are a saturated signal red, #D30718, which fills the lower-left and the jacket. The darkest values are a deep maroon, #3A0505 to #670707, in the braids, the hair at the back of the head and the deep folds of the jacket. Nothing in the frame goes to pure black. The background has no detail: it is a smooth gradient from bright orange at top-right to deeper red at lower-left and along the bottom edge. EDGES: the image runs full-bleed, edge to edge, with no frame and no vignette. The bottom edge settles into red #C8061A to maroon so it can meet a white page cleanly. COMPOSITION: keep the lower-left third quiet, smooth red with only faint streaks, because a large white headline and buttons sit over it. The middle-left band should hold only soft horizontal blur streaks, with no hard detail. The far right edge beside and below the face needs calm, even colour for a small block of text and a card. SUBJECT: a young East Asian woman in strict side profile facing right, from her chest up. Her face sits at about 70% across and 30% down, with her chin slightly lifted, her lips parted and her eyes calm. Her dark hair is pulled back into long braids that hang down the back of her shoulder and the front of her chest. She wears a slightly glossy, crumpled work or chore jacket with a raised collar, which fills the centre-bottom of the frame. The shutter drag pulls the back of her head and hair into long horizontal streaks reaching out to the left edge across the upper-middle of the frame, like a comet tail of dark maroon strands over orange. The top of her head sits near the top edge. AVOID: natural skin colour, a full-colour photo with a red overlay, a black vignette, lens flare, bokeh circles, studio rim-light halos, neon glow, a busy background or any scenery, HDR clarity, a centred subject, and the face motion-blurred. Output a wide 3:2 landscape frame, 1536x1024. No text, no lettering, no logos, no watermarks, no UI.
**Same young woman facing the camera, head and shoulders, hair blurred sideways, toned in orange-red** (`02-card-portrait`)
MEDIUM AND FINISH: a real editorial portrait photograph taken with a slow shutter. Loose strands of hair carry a slight horizontal motion blur while the face stays sharp. The whole image is toned as a single-hue red-orange duotone, with a smooth, fine-grained magazine finish. COLOUR AND VALUE: the image is monochrome in a red-orange ramp. The background is a flat, bright orange, #F36A10 to #F7740F, which is also the lightest value, and nothing is lighter than #FF9A50. There are no whites and no natural skin tones. Mid-tones in the skin and jacket are saturated red, #D30718 to #B0101A. The darkest values are maroon, #3A0505 to #670707, in the hair, the braids and the jacket shadows, and nothing goes to pure black. EDGES: the image runs full-bleed inside a small rounded frame with no vignette, and the background stays even orange right up to every edge. COMPOSITION: a centred head-and-shoulders crop. The face sits in the upper half, with the eyes at about 35% down, and the shoulders fill the bottom quarter. SUBJECT: the same young East Asian woman, now facing the camera directly with a neutral, confident expression and her lips slightly parted. Her dark hair is parted in the middle into two long braids falling over the front of her shoulders, and loose flyaway strands smear sideways into soft horizontal streaks on both sides of her head. She wears a crumpled, slightly glossy work jacket with a collar. AVOID: natural colour, a red overlay on a colour photo, a studio grey backdrop, a vignette, bokeh, rim-light halos, glow, smiling glamour retouching, and a busy background. Output a 4:5 portrait frame, 1024x1280. No text, no lettering, no logos, no watermarks, no UI.
**Black-and-white low-angle photo of a woman in a puffer jacket and headphones dancing with one arm flung up under a concrete ceiling** (`03-about-dance-bw`)
MEDIUM AND FINISH: a real black-and-white street-style photograph with crisp focus throughout and a clean digital finish with light grain. It is true neutral greyscale with no tint. COLOUR AND VALUE: the image is strictly greyscale with zero colour cast. The lightest values are the highlights on the white puffer jacket and headphones, around #E6E6E6, and nothing is blown out to pure white. The darkest values are in the concrete ceiling at the top and the dark inner top at her neck, around #1C1C1C. Most of the frame sits in mid-greys, #5A5A5A to #9A9A9A, with medium-high contrast and no crushed blacks. EDGES: the image sits inside a frame with a 4px radius on a white page and runs full to all edges with no vignette, no border and no fade. COMPOSITION: shot from a low angle, looking up at the subject. She fills most of the frame from the hips up, leaning back and to the right. Her right arm is flung up and out toward the upper-left with her fingers spread, and her face is turned up toward the light at about 45% down and 45% across. Behind her and above is a concrete underpass ceiling with heavy horizontal beams, darker at the top of the frame and lighter grey toward the right edge. SUBJECT: a young woman mid-dance, smiling with her eyes nearly closed, her hair pulled back in a ponytail. She wears large over-ear headphones, an oversized quilted puffer jacket with deep rounded baffles in a pale tone, a dark high-neck top underneath, and track pants with side stripes just visible at the bottom. AVOID: any colour, sepia, a blue or warm tint, dramatic spotlighting, a black vignette, shallow depth of field, bokeh, motion blur, a studio backdrop, and HDR clarity. Output a near-square portrait frame at about 10:11, 1024x1128. No text, no lettering, no logos, no watermarks, no UI.
---
## Solva AI support copilot landing page
- Page: https://ai-taste-vault.vercel.app/r/solva-ai-support-copilot-landing-page
- Original: https://br.pinterest.com/pin/430093833185064897/
- Type: Landing page
- Tags: CTA band, FAQ, Feature callout, Footer, Hero, Light mode, Logo wall, Pastel, Pricing table, Restrained motion, Testimonials
- Palette: #FAF9F6, #D9D9D6, #010101, #67A9B6
- Captured: 2026-09-24
- Rebuilt with: Claude Code · Opus 5.5 · High · skills: frontend-design, emil-design-eng, transitions-dev, gsap, humanizer
- Rebuild: https://ai-taste-vault.vercel.app/v/demo/solva-ai-support-copilot-landing-page/index.html
### Prompt — Rebuild
_rebuild · html-css · opus_
#### Pastel-photo AI SaaS landing page: build prompt
Build a long, light-mode marketing page for a B2B AI product. The page is warm off-white and quiet. Headlines use a serif display face, body text uses a grotesk, and all buttons are near-black. The only colour comes from soft-focus pastel nature photographs: wildflowers and tall grass against a pale blue-teal sky. Crisp white product-UI cards float on top of those photos. Everything else is ink, grey and hairline borders. The page is about 13,000px tall at 1440px wide.
##### Structure
- **Canvas:** 1440px wide. Page background is #FAF9F6. No section changes the background colour.
- **Container:** max-width 1360px, 40px side padding, centred. Content runs almost edge to edge, and the side margins are narrow on purpose.
- **Grid:** 12 columns, 24px gutter.
Sections, top to bottom:
1. **Nav bar.** The logo mark and wordmark sit on the left. 4 text links sit in the centre. A "Log in" text link and a small dark button sit on the right.
2. **Hero.** Two columns.
- Left, cols 1–5: a pill badge, a 2-line headline, a 3-line paragraph and a dark button.
- Right, cols 6–12: a near-square pastel photo card with an inbox-style app UI mockup floating over it.
3. **Logo wall.** One row of 6 grey customer logos (small icon plus wordmark) spread evenly across the container.
4. **"Three ways" cards.** An eyebrow and a 2-line H2, left-aligned. Below them, 3 equal cards. Each card is a 3:2 pastel photo with a small white UI snippet inset, followed by a title and a 2-line description under the photo.
5. **Feature callouts.** An eyebrow and a 2-line H2, then 3 large alternating-content rows. Every row has the image on the left and the text on the right.
- Image: cols 1–7, a pastel photo with a floating UI card. Row A's card is a metric card with two large numbers. Row B's is a chat/reply card. Row C's is a bar-chart card with one big number.
- Text: cols 9–12, vertically centred against the image. It holds a 2–3 line H3, a 3–4 line paragraph and a small dark button.
6. **Platform tabs.** An eyebrow and a 2-line H2, then one large bordered panel.
- The panel starts with a full-width row of 4 equal tabs. The first tab is active.
- Below the tabs, on the left (about 30%), sit an H3 of 2–3 lines, 3 checklist items (icon, bold title, 1–2 line description) and a dark button.
- On the right (about 65%) is a wide pastel photo with a large dashboard/table UI mockup inset.
7. **Security.** Centred block: an eyebrow, a 2-line H2 and a 2-line paragraph. Below it, a 4-column row of small items. Each item has an icon in a 32px bordered square, a title and a 2-line description. The columns are separated by 1px vertical rules.
8. **Pricing.** Centred content, top to bottom:
- an eyebrow, a 2-line H2, and a Monthly/Yearly toggle with a small "save" pill;
- 3 equal cards: Free tier, Pro tier (highlighted) and Custom tier;
- a centred 1-line trust caption;
- one row of 6 grey logos.
9. **Case-study testimonial.**
- A left-aligned eyebrow and a 2-line H2.
- Below them, a portrait photo on the left (cols 1–4, about 2:3) showing a person holding a phone in soft light, with a round play button.
- On the right (cols 6–12), from top to bottom:
- a large serif pull quote of 5–6 lines;
- the name and role, with a company logo aligned top-right;
- a row of 3 big stats with labels, separated by 1px rules.
10. **Testimonial wall.** An eyebrow and a 2-line H2, then a 4-column masonry of about 12 bordered quote cards. The bottom row fades into the background under a gradient.
11. **FAQ.** A left-aligned eyebrow and a 2-line H2, then a 2-column accordion with 3 rows per column. Each row is a question with a plus icon on the right and a 1px bottom rule.
12. **CTA band.** A full-container-width rounded card, about 520px tall, filled with a pastel photo. On the left sit a 2-line H2, a 2-line paragraph and a dark button, all in ink.
13. **Footer.** Top area:
- Left (about 30%): the logo and a 2–3 line description.
- Right: 4 link columns, each with a heading and 4–5 links.
Below that, a bottom bar with a 1px top rule: copyright on the left, a credit line on the right.
##### Scroll map
No motion report was provided. Heights are estimated from the page composite at a 1440×900 viewport. Every section scrolls normally, with no pinning.
1. Nav: 64px (0.07 vp). Scroll consumed: 64px. Kind: static (inferred).
2. Hero: 850px (0.94 vp). Scroll consumed: 850px. Kind: entrance.
3. Logo wall: 140px (0.16 vp). Scroll consumed: 140px. Kind: entrance.
4. Three-ways cards: 800px (0.89 vp). Scroll consumed: 800px. Kind: entrance.
5. Feature callouts: 3250px (3.6 vp), of which each row is about 900px. Scroll consumed: 3250px. Kind: entrance.
6. Platform tabs: 1400px (1.56 vp). Scroll consumed: 1400px. Kind: entrance.
7. Security: 750px (0.83 vp). Scroll consumed: 750px. Kind: entrance.
8. Pricing: 1450px (1.61 vp). Scroll consumed: 1450px. Kind: entrance.
9. Case-study testimonial: 1170px (1.3 vp). Scroll consumed: 1170px. Kind: entrance.
10. Testimonial wall: 1380px (1.53 vp). Scroll consumed: 1380px. Kind: entrance.
11. FAQ: 780px (0.87 vp). Scroll consumed: 780px. Kind: entrance.
12. CTA band: 530px (0.59 vp). Scroll consumed: 530px. Kind: entrance.
13. Footer: 440px (0.49 vp). Scroll consumed: 440px. Kind: static.
**Total page height:** about 13,000px (about 14.4 viewports).
##### Spacing
- **Between sections:** 160–200px of padding (inferred). Use 96px top and bottom per section as the base. The tighter pairs are:
- Hero → Logo wall: 64px.
- Pricing cards → trust caption: 48px.
- **Header block:** eyebrow → H2 is 16px. H2 → content is 64px. Where there is a paragraph, H2 → paragraph is 20px.
- **Hero:**
- Nav → hero top: 48px.
- Badge → H1: 24px.
- H1 → paragraph: 20px.
- Paragraph → button: 32px.
- The hero image is about 720×670px.
- **Section 4 cards:** 24px gap between cards. Image → title is 20px. Title → description is 8px.
- **Section 5 rows:** 160px between rows. The image column is about 800px wide and 780–900px tall.
- Text column: H3 → paragraph is 16px, and paragraph → button is 28px.
- **Section 6 panel:**
- The tab row is 56px tall.
- The panel content has 40px padding.
- Checklist items are 24px apart.
- The column gap is 48px.
- **Security row:** 32px of padding on each side of every vertical rule.
- **Pricing cards:**
- 24px gap between cards and 32px internal padding.
- Price → description is 12px, and description → list is 24px.
- List items are 10px apart.
- The button is pinned to the card bottom.
- **Testimonial wall:** 20px gap in both directions. Cards have 24px padding.
- **FAQ:** 48px column gap. Rows are 64px tall.
- **CTA band:** 64px internal padding on the left.
##### Type
Use two families:
- **Display:** a serif display face with sharp, moderate contrast, weight 400. Free stand-in: *Newsreader* (or *Instrument Serif*).
- **Everything else:** a neutral grotesk. Free stand-in: *Inter*.
The body anchor is **17px**.
| Level | Family | Size | Line-height | Tracking | Weight |
|---|---|---|---|---|---|
| H1 hero | serif | 3.5× → 60px | 1.05 | −0.02em | 400 |
| H2 section | serif | 3.1× → 52px | 1.08 | −0.02em | 400 |
| CTA H2 | serif | 3.3× → 56px | 1.05 | −0.02em | 400 |
| H3 feature row / panel | serif | 1.8× → 30px | 1.15 | −0.01em | 400 |
| Pull quote | serif | 1.75× → 30px | 1.3 | −0.01em | 400 |
| Stat / price number | serif | 2.4× → 40px | 1.0 | −0.02em | 400 |
| Card title | grotesk | 1.06× → 18px | 1.3 | −0.005em | 500 |
| Body | grotesk | 17px | 1.55 | 0 | 400 |
| Small body (card desc, FAQ question, list) | grotesk | 0.88× → 15px | 1.5 | 0 | 400 |
| Eyebrow / caption / meta | grotesk | 0.76× → 13px | 1.4 | 0 | 400 |
| Nav link / button | grotesk | 14px | 1 | 0 | 500 |
| Text inside UI mockups | grotesk | 12px | 1.4 | 0 | 400–500 |
- **Eyebrows:** a 6px dot followed by the label, sentence case, in grey. Never uppercase.
- **Headlines:** always two lines, sentence case. Each line is a short, complete clause of 2–4 words.
- **Max line lengths:**
- Body: 44ch.
- Hero paragraph: about 420px.
- Section 5 text column: about 380px.
- Pull quote: about 760px.
- H2: about 640px.
##### Colour
| Hex | Role |
|---|---|
| #FAF9F6 | Page background. Covers about 85% of the surface. |
| #FFFFFF | Card fills, UI mockups, active tab, pricing cards. |
| #D9D9D6 | Every border, rule and divider, plus the inactive toggle track. |
| #010101 | Headlines, primary text, filled buttons, the "New" chip in the badge, chart bars in the mockups. |
| #6B6B66 | Body paragraphs, eyebrows, captions, logos (inferred secondary grey). |
| #67A9B6 | The single accent: dusty teal. |
Where the teal may appear:
- It comes mostly from the photographs' skies.
- As a UI colour it is limited to the 6px eyebrow dots, the checklist icons, the "save" pill text, and one highlighted series or status dot inside mockups.
- It is never used on buttons, headlines or large fills.
The Pro pricing card has a pale teal-to-white wash across its top third, taken from the photo palette.
##### Surface
- **Borders:** 1px solid #D9D9D6 everywhere. There are no heavier borders.
- **Radii:**
- Photo cards, the tab panel and the CTA band: 16px.
- Pricing cards and testimonial cards: 12px.
- UI mockup cards: 10px.
- Buttons: 8px.
- Icon squares: 8px.
- Badge and toggle: fully rounded (pill).
- **Shadows:** only on UI mockups floating over photos: `0 8px 24px rgba(1,1,1,0.08)`. Page-level cards are flat, with a border and no shadow.
- **Buttons:**
- Primary: #010101 fill, white 14px/500 text, 40px tall, 16px horizontal padding.
- Secondary (pricing only): white fill with the 1px border.
##### Imagery
- **Photo style.** All photos share one treatment: soft-focus meadow flowers (daisies, wildflowers, feathery grass seed heads) seen from low down against a hazy pale blue-teal sky. Colours are washed pastels, contrast is low, and there is lots of bright negative space. Treat them as one series, as if taken from one shoot.
- **Hero (section 2).** About 1.07:1. Tall grasses fill the lower half and sky fills the top. A white inbox mockup covers the right-centre about 70% of the photo: a sidebar, a list of 6–8 ticket rows and a detail pane.
- **Section 4.** Three 3:2 photos. Each has one small white card (about 55% of the photo width) with 2–4 lines of fake UI: a status list, a document snippet, a handoff note.
- **Section 5.** Three photos, each about 800 wide by 780–900 tall (roughly 1:1 to 4:5). Each has a centred white card:
- Row A: two KPI numbers.
- Row B: a chat bubble with reply chips.
- Row C: a big number above a 7-bar chart.
- **Section 6.** One wide photo (about 16:10) with a large table/dashboard mockup covering about 85% of it.
- **Section 9.** A portrait (about 2:3) of a person looking at a phone. Muted, warm, natural light. A 56px white circular play button sits in the centre.
- **Section 12.** A full-bleed meadow photo inside the band. Keep the left 45% brightest so ink text reads.
- **Logos.** Monochrome grey placeholder marks with wordmarks, all the same optical height (about 20px).
##### Motion
No motion report exists, so every value below is inferred from the stills. The page uses restrained motion only.
**1. Nav**
- kind — static
- what moves — nothing
- from → to — n/a
- range — n/a
- reduced motion — same
**2. Hero**
- kind — entrance (on load)
- what moves — badge, H1, paragraph and button; then the photo card
- from → to — text goes from opacity 0, translateY 16px to opacity 1, translateY 0. The photo goes from opacity 0, scale 1.02 to opacity 1, scale 1.
- range — once, on page load. Duration not measured (use 500–700ms), ease-out. Text stagger 60–100ms. The photo starts after the button.
- reduced motion — everything visible immediately, with no transform
**3. Logo wall**
- kind — entrance
- what moves — the logo row as one unit
- from → to — opacity 0 → 1
- range — once, when the row's top reaches 85% of the viewport. Duration not measured (400–600ms), ease-out.
- reduced motion — visible immediately
**4. Three-ways cards**
- kind — entrance
- what moves — header block, then the 3 cards
- from → to — opacity 0, translateY 20px → opacity 1, translateY 0
- range — once, when each element's top reaches 80% of the viewport. Duration not measured (500–700ms), ease-out. The cards stagger 80–120ms.
- reduced motion — visible immediately
**5. Feature callouts**
- kind — entrance
- what moves — for each row, the photo card, then its text column
- from → to — the photo goes from opacity 0, translateY 24px to opacity 1, translateY 0. The text goes from opacity 0, translateY 16px to opacity 1, translateY 0.
- range — once per row, when the row's top reaches 80% of the viewport. Duration not measured (500–700ms), ease-out. The text follows the photo by 100–150ms.
- reduced motion — visible immediately
**6. Platform tabs**
- kind — entrance
- what moves — header block, then the panel as one unit
- from → to — opacity 0, translateY 20px → opacity 1, translateY 0
- range — once, at 80% of the viewport. Duration not measured (500–700ms).
- reduced motion — visible immediately
**7. Security**
- kind — entrance
- what moves — centred header, then the 4 items
- from → to — opacity 0, translateY 16px → opacity 1, translateY 0
- range — once, at 80% of the viewport. Duration not measured (400–600ms). The items stagger 60–80ms.
- reduced motion — visible immediately
**8. Pricing**
- kind — entrance
- what moves — header, then the 3 cards, then the trust row
- from → to — opacity 0, translateY 20px → opacity 1, translateY 0
- range — once, at 80% of the viewport. Duration not measured (500–700ms). The cards stagger 80–100ms.
- reduced motion — visible immediately
**9. Case-study testimonial**
- kind — entrance
- what moves — portrait, quote, stats
- from → to — opacity 0, translateY 20px → opacity 1, translateY 0
- range — once, at 80% of the viewport. Duration not measured (500–700ms). Stagger 100ms.
- reduced motion — visible immediately
**10. Testimonial wall**
- kind — entrance
- what moves — the cards, column by column
- from → to — opacity 0, translateY 16px → opacity 1, translateY 0
- range — once, when each card's top reaches 85% of the viewport. Duration not measured (400–600ms). Stagger 50–80ms per column.
- reduced motion — visible immediately
**11. FAQ**
- kind — entrance
- what moves — header, then the rows
- from → to — opacity 0, translateY 12px → opacity 1, translateY 0
- range — once, at 85% of the viewport. Duration not measured (400–500ms). Stagger 40–60ms.
- reduced motion — visible immediately
**12. CTA band**
- kind — entrance
- what moves — the band, then its text
- from → to — the band goes from opacity 0, scale 0.98 to opacity 1, scale 1. The text goes from opacity 0, translateY 12px to opacity 1, translateY 0.
- range — once, at 80% of the viewport. Duration not measured (600–800ms), ease-out.
- reduced motion — visible immediately
**13. Footer**
- kind — static
- what moves — nothing
- from → to — n/a
- range — n/a
- reduced motion — same
###### Interaction transitions
These are separate from the scroll choreography. All durations are inferred.
- **Primary button hover:** background #010101 → #2A2A28 over 150–200ms. Press: scale 0.98.
- **Secondary button hover:** border colour → #010101 over 150ms.
- **Nav links and footer links hover:** colour grey → ink over 150ms.
- **Tabs (section 6):** clicking a tab moves the white active pill to it (200–300ms ease-out). The panel content and photo crossfade over 250–350ms with no slide.
- **Pricing toggle:** the knob slides between Monthly and Yearly over 200ms. The price numbers crossfade.
- **FAQ open/close:** the answer's height and opacity animate over 250–300ms ease-out. The plus rotates 45° to become ×.
- **Play button hover:** scale 1 → 1.05 over 200ms.
- **Testimonial cards and pricing cards:** no hover lift.
##### Responsive (below 640px)
- **Container:** side padding drops to 20px. Section spacing drops to 96px.
- **Type:** H1 → 40px, H2 → 36px, H3 → 24px, pull quote → 22px. Body stays at 16–17px.
- **Nav:** the centre links and "Log in" collapse into a menu icon. The dark button stays.
- **Hero:** stacks as text, then photo. The photo is full-width at 4:5.
- **Logo walls:** switch to a 3×2 grid.
- **Section 4 cards, and section 5 rows:** stack to one column. In section 5 the image always comes before the text, and images go to 4:5.
- **Section 6 panel:**
- The tabs become a horizontally scrollable row.
- The text comes before the photo.
- The dashboard mockup crops from the left rather than shrinking below legibility.
- **Security:** a 2×2 grid. The vertical rules become horizontal rules.
- **Pricing:** cards stack with Pro first.
- **Case study:** the portrait goes above the quote. The stats stay 3-up but drop to 28px.
- **Testimonial wall:** one column, showing only the first 6 cards before the fade.
- **FAQ:** a single column of 6 rows.
- **CTA band:** the photo stays, and the text sits over a lightened area at the top.
- **Footer:** the link columns become 2×2, and the bottom bar stacks.
##### Don'ts
- Don't add gradients, glows, blobs or tinted section backgrounds. The page stays #FAF9F6 all the way down, and colour comes only from the photographs.
- Don't make the accent teal a button colour or a headline highlight. Buttons are always near-black, and there are no coloured words inside headlines.
- Don't use bold or semibold headlines, or a geometric sans for display. Headlines are regular-weight serif, tightly tracked, two short lines.
- Don't write uppercase, letter-spaced eyebrows. They are small sentence-case grey text with a dot.
- Don't use saturated, sharp or dark photography, or generic office stock. Keep it hazy meadow-and-sky pastels, consistent across every image.
- Don't render UI mockups as screenshots in browser chrome or device frames. They are clean white cards with a 10px radius and one soft shadow, floating on the photo.
- Don't put shadows on page-level cards (pricing, testimonials, FAQ). Use 1px #D9D9D6 borders only.
- Don't use large radii (24px+) or pill-shaped primary buttons. Buttons are 8px-radius rectangles.
- Don't centre everything. Only Security and Pricing are centred, and every other header is left-aligned to the container edge.
- Don't narrow the container to 1120–1200px. The layout runs nearly full-width with 40px gutters.
- Don't add parallax, pinned sections, marquee logo scrolling, counters that tick up, or bouncy/spring easing. Motion is limited to small, once-only fades.
- Don't alternate the feature-row image side in section 5. The image stays on the left in all three rows.
- Don't highlight the Pro card with a coloured border or a "Most popular" ribbon in the accent. Use the soft photo wash and the dark button.
### Imagery — already generated
These pictures were made for this design and are hosted at the URLs below.
Use them as the `src` exactly as written, and keep the alt text. Do not
generate your own, do not reach for a stock library or a placeholder
service, and do not feed the Imagery section above back to an image model —
that work is done. Size and crop them with CSS (`object-fit: cover`) rather
than assuming their dimensions, and download them into the project if you
would rather not hotlink.
- https://ai-taste-vault.vercel.app/v/demo/solva-ai-support-copilot-landing-page/images/01-hero-meadow.webp — Soft-focus tall meadow grasses and a few white wildflowers against a hazy pale blue-teal sky
- https://ai-taste-vault.vercel.app/v/demo/solva-ai-support-copilot-landing-page/images/02-feature-meadow-tall.webp — Close, low-angle soft-focus white daisies and grass stems against a pale misty teal sky
- https://ai-taste-vault.vercel.app/v/demo/solva-ai-support-copilot-landing-page/images/03-cta-meadow-wide.webp — Wide hazy meadow with grasses and wildflowers along the bottom and right under a pale blue-teal sky
- https://ai-taste-vault.vercel.app/v/demo/solva-ai-support-copilot-landing-page/images/04-case-study-portrait.webp — A person looking down at a phone in soft, muted natural window light
### Image prompts
What each picture above was generated from, for anyone changing one.
**Soft-focus tall meadow grasses and a few white wildflowers against a hazy pale blue-teal sky** (`01-hero-meadow`)
MEDIUM AND FINISH: a dreamy, overexposed, soft-focus pastel nature photograph with a matte, slightly milky finish, as if shot through haze. It should look airy and washed out, not crisp. COLOUR AND VALUE: the whole frame sits in a narrow high-key band. The lightest value is a near-white misty sky, #F2F5F3. The sky deepens only slightly toward a dusty pale teal, #A9CDD5, with hints of #67A9B6 at most in the upper corners. The grasses are desaturated sage and straw, #9DB39A, #C9CDB0 and #D8D2B8. A few small flowers are off-white, #F6F4EC, with muted butter-yellow centres, #E2CE8A. Nothing in the frame is darker than #6E8470. There are no blacks, no deep shadows and no saturated greens anywhere. EDGES: the image sits inside a 16px-radius card on a warm off-white page, #FAF9F6, so no edge needs to fade. The overall brightness should match the page closely enough that the card reads as a pale window rather than a dark block. SUBJECT: a low, ground-level view into a wild meadow. Tall, feathery grass stems and seed heads rise from the bottom edge and fill roughly the lower half. A handful of small daisies and wildflowers are scattered among them, all gently out of focus. Above is open, hazy pale blue-teal sky with no clouds of note. COMPOSITION: grasses fill the bottom half and lean slightly, with a few thin stems reaching into the upper third on the left. The centre and right-centre stay soft and uncluttered, because a large white app-UI card will cover about 70% of the frame there. Keep the detail even and low-contrast, with no single focal point. AVOID: vivid green or saturated travel-photo colour, a dramatic or cloudy sky, sun flare or sunburst, golden-hour orange, dark vignette, HDR clarity, crisp macro detail, busy bokeh balls, and any people, buildings or horizon lines. Output a near-square 1:1 frame, 1024x1024. No text, no lettering, no logos, no watermarks, no UI.
**Close, low-angle soft-focus white daisies and grass stems against a pale misty teal sky** (`02-feature-meadow-tall`)
MEDIUM AND FINISH: a dreamy, overexposed, soft-focus pastel nature photograph with a matte, milky, low-contrast finish. It belongs to the same series as a hazy meadow shoot. COLOUR AND VALUE: the frame stays high-key throughout. The lightest value is a misty near-white, #F3F6F4. The sky is a soft dusty pale blue-teal, #B7D6DC to #9FC7CF. Stems and leaves are muted sage, #92AA92 and #B8C4A8. Daisy petals are warm off-white, #F7F5EE, with soft mustard centres, #DDBF6E. Nothing in the frame is darker than #647A66. There are no blacks, no hard shadows and no saturated colour. EDGES: the image sits in a 16px-radius card on a #FAF9F6 page. No fades are needed, but the frame should read as uniformly pale and bright. SUBJECT: a ground-level view up through a patch of wild meadow. Several white daisies with yellow centres sit near the lower-left and upper-left, some close and blurred and some slightly sharper. Thin, feathery grass stems and seed heads sweep up diagonally from the bottom and right. The background is open, hazy pale teal sky. COMPOSITION: the flowers and grasses hug the edges and corners, mainly the bottom third and the left side. The central 55% of the frame stays calm, soft sky with little detail, because a white UI card (metrics, chat bubble or bar chart) will float centred over it. AVOID: vivid green, a saturated blue sky, clouds with drama, sun flare, golden light, dark vignette, sharp macro clarity, heavy bokeh circles, insects, and people. Output a portrait 4:5 frame, 1024x1280. No text, no lettering, no logos, no watermarks, no UI.
**Wide hazy meadow with grasses and wildflowers along the bottom and right under a pale blue-teal sky** (`03-cta-meadow-wide`)
MEDIUM AND FINISH: a dreamy, overexposed, soft-focus pastel landscape photograph with a matte, milky, very low-contrast finish. It matches a series of hazy meadow-and-sky images. COLOUR AND VALUE: the whole frame sits near the top of the value range. The left side is almost white, #F4F6F3 to #E9F0EE. Toward the right, the sky tints to a dusty pale teal, #B3D3DA, never deeper than #8FBFC9. Grasses are desaturated sage and straw, #A3B79F and #CFCDB3. Small flowers are off-white, #F6F4EC, with muted yellow centres, #E0C987. Nothing in the frame is darker than #72876F. There are no blacks and no shadows. EDGES: the image fills a 16px-radius band on a #FAF9F6 page and will be cropped to a very wide strip (about 2.6:1). The important content must sit in the horizontal middle band so the crop works. SUBJECT: a wide, low view across a wild meadow. Feathery grass seed heads and a scattering of small daisies and wildflowers rise along the bottom edge and thicken toward the right third. The rest is open, hazy, pale sky. COMPOSITION: the left 45% of the frame must be the brightest, calmest area, almost empty misty sky with only faint low grass tips, because a two-line near-black serif headline, a paragraph and a dark button sit over it. Visual interest gathers on the right third. AVOID: saturated greens or blues, a dramatic sky, clouds, sun flare, sunset colour, dark vignette, a hard horizon line, HDR crispness, busy bokeh, and people or buildings. Output a wide 3:2 landscape frame, 1536x1024. No text, no lettering, no logos, no watermarks, no UI.
**A person looking down at a phone in soft, muted natural window light** (`04-case-study-portrait`)
MEDIUM AND FINISH: a quiet, natural-light editorial lifestyle photograph with a soft, matte, slightly faded finish and gentle, low contrast. It is muted and warm, not glossy. COLOUR AND VALUE: the palette is restrained warm neutrals: oatmeal and stone walls, #D9D4CA and #C4BDB1, soft greige clothing, #A8A197, and natural skin tones. The lightest value is soft window light, #EEEAE3. Shadows stay lifted and warm, and nothing is darker than #3F3B36 (reserved for hair). There are no crushed blacks and no saturated colour. A faint cool pale-teal cast, #C9DADB, in the highlights is welcome, to tie it to the meadow series. EDGES: the image sits in a 16px-radius card on a #FAF9F6 page. No fades are needed, but the overall tone should be light enough to sit calmly next to pale pastel photographs. SUBJECT: a young adult support professional, seen from the chest up, in a calm indoor space. They hold a smartphone in both hands at chest height and look down at it with a relaxed, focused expression. The phone screen faces away or is out of view. The background is a softly blurred plain wall with diffuse daylight from one side. COMPOSITION: a vertical frame with the person centred and the head in the upper third. The middle of the frame (the chest and phone area) stays uncluttered, because a 56px white circular play button will sit dead centre. AVOID: corporate office stock, headsets, laptops, visible screen content, harsh flash, dramatic rim light, deep shadows, black vignette, teal-and-orange grading, saturated colour, and a posed smile at camera. Output a portrait 2:3 frame, 1024x1536. No text, no lettering, no logos, no watermarks, no UI.
---
## Golden-hour lawn services hero
- Page: https://ai-taste-vault.vercel.app/r/golden-hour-lawn-services-hero
- Original: https://br.pinterest.com/pin/583568064247076113/
- Type: Landing page
- Tags: Editorial, Full bleed, Hero, Luxury, Nav bar, Neon accent, Organic, Restrained motion
- Palette: #1B260B, #565919, #789694, #F7E14C, #987729
- Captured: 2026-09-21
- Rebuilt with: Claude Code · Opus 5.5 · Extra high · skills: frontend-design, emil-design-eng, transitions-dev, gsap, humanizer
- Rebuild: https://ai-taste-vault.vercel.app/v/demo/golden-hour-lawn-services-hero/index.html
### Prompt — Rebuild
_rebuild · html-css · opus_
#### Golden-hour photo hero: centred serif headline, symmetric nav
Build a single full-viewport landing hero. One edge-to-edge golden-hour photograph fills the whole screen. It shows a modernist glass house on a wide, sunlit lawn. A transparent navigation row sits over the sky, with a script wordmark centred between two symmetric groups of links. Lower down, a soft display-serif headline of three lines sits on the lawn, centred. Two pill buttons sit under it. The only saturated UI colour is a lemon-yellow accent. The page should feel calm, expensive and warm. The photograph does most of the work, and the type stays small enough not to compete with it.
No motion was measured for this reference. Every motion value below is marked "(inferred)" or "not measured".
##### Structure
- Layout frame: 1440 × 900 CSS px (desktop reference). The hero is `100svh` tall, with a minimum of 720px.
- Container: the nav row sits in a centred container about 960px wide. The headline block is a single centred column with a maximum width of 560px.
- Columns: the nav is a three-column grid, `1fr auto 1fr`. The left link group aligns to the end of its column, the wordmark takes the auto column, and the right link group aligns to the start of its column. The composition is mirror-symmetric around the page's vertical centre line. The hero content below the nav is one centred column.
Sections, top to bottom:
1. **Nav**: sits over the top of section 2 with absolute positioning, so it takes no space in the flow. It holds three links on the left, a centred wordmark with a small descriptor underneath, and three links on the right. It has no background.
2. **Hero**: the full-bleed photograph plus gradient overlays. The headline block and button pair are anchored to the bottom of the viewport.
This reference is the hero only. Do not invent sections below it.
##### Scroll map
- 1 Nav: 0px in flow (overlays the top ~80px of section 2) · 0 viewports · consumes 0px of scroll · entrance
- 2 Hero: 900px · 1.00 viewport · consumes 900px of scroll · entrance on load, then static
- **Total page height: 900px (1.0 viewport)**
##### Spacing
- Nav: 32px padding at the top of the viewport. The wordmark runs from about 34px to 78px from the top, descriptor included.
- Gap between neighbouring nav links: 60px. Gap between the innermost link on each side and the wordmark: 70px. The links span about 944px in total, centred.
- Wordmark to descriptor line: 2–4px, stacked tightly.
- Nav links are vertically centred on the wordmark's script line, not on the descriptor.
- Hero content: a flex column with `justify-content: flex-end` and `padding-bottom: 104px`. The headline block then starts about 61% of the way down the viewport (about 552px at 900 tall). It sits on the lawn, just below the house's terrace.
- Headline to buttons: 48px.
- Button to button: 16px, side by side and centred as a pair.
- Horizontal page padding: 40px on desktop and 20px on mobile. It only matters when the viewport is narrower than the container.
- Rhythm: there is no vertical rhythm between sections because there is only one. The composition has three layers: a thin nav band in the sky, open air over the whole middle 50% (the house), and a compact text block in the lower third.
##### Type
Anchor: body text is **17px**. This capture has no running text, but use 17px for any supporting line you add, and derive every level from it.
- **Headline (H1)**: soft-cornered display serif with high contrast and ball terminals. It is warm rather than sharp. Free stand-in: **Fraunces** at weight 600 with SOFT 100 and opsz around 72. The Google Fonts static weight 600 also works.
- Size 3.0× body = **52px**, line-height **0.95**, letter-spacing −0.01em, weight 600.
- Centred, three lines, about 18–22 characters per line, maximum width 560px. Break the lines by hand.
- Line 1: claim, 4 words.
- Line 2: two accent words joined by "&", followed by one ordinary word. Only the "word & word" part is accent-coloured.
- Line 3: place or qualifier, 2–3 words.
- **Wordmark**: chunky upright script, about 2× body (about 34px tall, about 140px wide), set in the accent colour. Free stand-in: **Lobster** at 32–34px. Placeholder: a brand name of 1 word.
- **Wordmark descriptor**: geometric sans, uppercase. 0.71× body = **12px**, line-height 1, letter-spacing 0.08em, weight 400, white. Placeholder: category descriptor, 2 words.
- **Nav links**: geometric sans, uppercase. Free stand-in: **Poppins**. 0.88× body = **15px**, line-height 1, letter-spacing 0.02em, weight 300. White at 85% opacity. Placeholders: 1–3 words each, three per side.
- **Button labels**: the same geometric sans, sentence case. 0.88× body = **15px**, line-height 1, letter-spacing 0, weight 500. Placeholders: the primary is a 3-word action; the secondary is a 2-word action.
- **Body (reserve)**: geometric sans, 17px / 1.55 / 0 / 400, maximum 60ch.
##### Colour
The photograph covers essentially 100% of the surface. The palette is taken from it, and the UI borrows only one colour.
- `#F7E14C`: sun lemon-yellow. This is **the single accent**. It is allowed in only five places:
- the wordmark
- the "word & word" phrase in headline line 2
- the primary button fill
- the secondary button's border and label
- nav link hover and focus rings
It appears nowhere else. It reads as neon against the green.
- `#1B260B`: deepest lawn shadow, an olive-black. Use it for the primary button label, as the tint in the overlay gradients, and as the page background colour behind the image while it loads.
- `#565919`: olive midtone of the sunlit lawn. It is the dominant colour of the lower half of the photo. Do not use it in the UI.
- `#789694`: hazy sage-teal sky. It is the backdrop for the nav. Do not use it in the UI.
- `#987729`: golden ochre of backlit foliage and the glowing roof underside. It only appears in the photo. If you need a pressed state for the primary button, darken toward it (see Interactions).
- Headline and descriptor text: `#FFFFFF`, or a barely warm `#FFFDF4`.
Overlays (inferred):
- Top scrim: `linear-gradient(to bottom, rgba(27,38,11,0.28) 0, rgba(27,38,11,0) 180px)`, so the nav reads against the pale sky.
- Bottom scrim: `linear-gradient(to top, rgba(27,38,11,0.55) 0%, rgba(27,38,11,0) 48%)`.
- A faint corner vignette. The lower corners fall off toward `#1B260B`.
##### Surface
- There are no cards, panels, dividers or rules anywhere.
- Buttons are fully rounded pills (`border-radius: 999px`), **44px** tall, with 32px horizontal padding.
- Primary: about 218px wide. Solid `#F7E14C` fill, `#1B260B` label, no border.
- Secondary: about 140px wide. Transparent fill, 1px border in `#F7E14C` at 80% opacity, `#F7E14C` label.
- No box-shadows. No text-shadows. No backdrop blur.
##### Imagery
There is one image: the full-bleed hero photograph.
- **Aspect and fit**: 16:10 at desktop, filling the viewport with `object-fit: cover` and `object-position: 45% 55%`. Source it at 2400 × 1500 or larger.
- **Subject**: a single-storey modernist pavilion set back in the middle distance.
- The roof is a thin, flat, cantilevered slab with a dark fascia. Its underside glows amber in the sun and overhangs deeply at both ends. A small chimney block rises right of centre.
- The centre of the front is floor-to-ceiling glass with slim dark mullions, and a warm interior shows through.
- Pale stacked-stone piers stand on the left, and dark timber cladding covers the right.
- A low concrete terrace plinth runs across the front, with two white loungers on it.
- **Placement in frame**: the house spans roughly 5%–84% of the width and 29%–58% of the height. The roof line sits just under a third of the way down. The whole house stays above the headline.
- **Setting**:
- A wide umbrella pine rises behind the roof on the left.
- Olive trees frame both edges, and one olive branch reaches into the top-right corner over the sky.
- Rounded shrubs, agaves and ornamental grasses line the terrace.
- **Light**: golden hour, with a low sun from the back right. Foliage is rim-lit gold, the air is slightly hazy, and the sky in the top 20% is soft, pale sage-teal.
- **Foreground**: a sweeping, freshly mown lawn fills the lower ~42% of the frame. It is deep green, with bright raking sun bands and long diagonal shadows, and it rolls gently. In the lower-right corner, out-of-focus clumps of shrubs and grasses catch gold at their tips.
- **Treatment**: photoreal and warm-graded. The render feels almost architectural-visualisation. No duotone, no desaturation.
##### Motion
No motion report was supplied. Everything here is inferred from the "restrained motion" character of the design.
**1 Nav**
- kind: entrance (on page load, not tied to scroll)
- what moves: the left link group, the wordmark with its descriptor, and the right link group, as one row
- from → to: opacity 0 → 1, translateY −8px → 0 (inferred)
- range: starts 200ms after the hero image begins (inferred). Duration not measured, 500–700ms. Ease-out (inferred). No stagger between the links.
- reduced motion: the nav is shown in its final state immediately.
**2 Hero**
- kind: entrance on load, then static. The image does not parallax and nothing is scroll-linked; the section scrolls away normally.
- what moves:
- the background photograph
- the three headline lines, as separate lines
- the button pair
- from → to:
- Photograph: opacity 0 → 1 and scale 1.06 → 1.00 (inferred).
- Headline lines: each goes opacity 0 → 1, translateY 20px → 0 (inferred).
- Buttons: opacity 0 → 1, translateY 12px → 0 (inferred).
- range:
- Photograph: starts on first paint. Duration not measured, 1.4–2.0s, with a slow ease-out.
- Headline: the first line starts about 400ms in (inferred). Each line's duration is not measured, 600–900ms, ease-out. The stagger between lines is not measured, 80–120ms.
- Buttons: start after the last headline line begins. Duration not measured, 500–700ms, ease-out.
- reduced motion: everything is shown at its final opacity and position immediately. There is no scale on the photograph.
**Interactions** (separate from the load sequence):
- Nav link hover: colour changes from white at 85% to `#F7E14C` over 150–200ms, ease-out. No underline.
- Primary button hover: the fill lightens slightly, to about `#FAE86E`, over 150ms. Press: scale 0.98 and the fill darkens toward `#E6CF3A`, over 100ms.
- Secondary button hover: the fill goes from transparent to `rgba(247,225,76,0.12)` and the border goes to full opacity, over 150ms. Press: scale 0.98.
- Focus-visible, on all controls: a 2px `#F7E14C` outline with a 3px offset.
- Mobile menu open and close: a full-screen `#1B260B` panel at 96% opacity fades in over 200–250ms. The links fade in on the same timing, with no stagger.
##### Responsive (below 640px)
- **Nav**:
- The links collapse into a menu button with two thin white lines, 44 × 44 hit area, at the top right.
- The wordmark moves to the top left at about 28px. The descriptor stays under it at 12px.
- The menu panel lists the links stacked and centred: uppercase geometric sans, 17px, weight 400, 28px gaps, white. Hover and focus use the accent.
- **Hero**:
- Height is `100svh`, with a minimum of 640px.
- The photograph shifts to `object-position: 40% 50%` so the glazed front stays in frame.
- Bottom padding drops to 56px.
- **Headline**:
- Size drops to 2.1× body (**36px**), line-height 1.0, maximum width 18ch.
- The accent phrase stays together on its own line, and the lines stay centred.
- **Buttons**:
- They stack vertically, full width up to 320px, centred, 48px tall, with a 12px gap.
- The primary goes on top.
- Nothing else is dropped. The overlays stay, and the bottom scrim strengthens to 0.65.
##### Don'ts
- Don't darken the whole photo with a flat overlay. The golden glow is the design. Use only the top and bottom gradient scrims.
- Don't give the nav a bar background, glass blur, bottom border or sticky behaviour. Don't put a CTA button at the top right. Don't show a hamburger on desktop.
- Don't move the wordmark to the left. The nav is mirror-symmetric around a centred script wordmark.
- Don't set nav links bold or in title case. They are light (300), uppercase and slightly translucent.
- Don't use a sans or a sharp high-fashion Didone for the headline. It needs a soft, friendly display serif at weight 600.
- Don't make the headline huge. At 52px it is deliberately modest, and the house must stay unobscured.
- Don't centre the headline vertically, and don't align it left. It sits centred in the lower third, on the lawn.
- Don't add a subheading paragraph, trust badges, star ratings, a stats row, a scroll-down chevron, or a video background.
- Don't shift the accent toward mustard, gold or orange (`#987729` is photo-only). Don't make any button green. Yellow is the only UI colour.
- Don't give buttons shadows, glows, gradients or 6–8px corners. They are flat pills, 44px tall.
- Don't use a daytime blue-sky suburban house, a tract home or a lawnmower close-up for the image. It must be low backlit sun, long shadows, a modernist glass pavilion and a deep green lawn.
- Don't add parallax, scroll-jacking or looping ambient motion. The page makes one quiet arrival and then holds still.
### Imagery — already generated
These pictures were made for this design and are hosted at the URLs below.
Use them as the `src` exactly as written, and keep the alt text. Do not
generate your own, do not reach for a stock library or a placeholder
service, and do not feed the Imagery section above back to an image model —
that work is done. Size and crop them with CSS (`object-fit: cover`) rather
than assuming their dimensions, and download them into the project if you
would rather not hotlink.
- https://ai-taste-vault.vercel.app/v/demo/golden-hour-lawn-services-hero/images/01-hero-photo.webp — Modernist single-storey glass pavilion on a wide, freshly mown lawn at golden hour, framed by olive trees and an umbrella pine
### Image prompts
What each picture above was generated from, for anyone changing one.
**Modernist single-storey glass pavilion on a wide, freshly mown lawn at golden hour, framed by olive trees and an umbrella pine** (`01-hero-photo`)
MEDIUM AND FINISH: a photoreal architectural-visualisation render in the style of high-end archviz imagery. It reads as a photograph, but everything is impossibly clean and manicured. The light is soft and glowing, with a faint warm haze in the air and smooth, painterly foliage. There is no grain, no noise and no HDR crunch. Take only the palette, value range, light and finish from the attached style reference. Ignore all of its text, buttons, navigation and logo. COLOUR AND VALUE: the frame is warm-graded golden hour, with moderate contrast between deep green shade and gold-rimmed highlights. The lightest values are the pale, hazy sky near the treeline, around #D9DDBF, and the sun-washed glow behind the trees on the right, around #EDE3B0. The two white loungers are warm off-white, around #E6DFD0. Nothing is pure white. The darkest values are the deep shade inside the foliage at the left edge, under the terrace plinth and in the lower-right foreground shrubs, around #18210A. Nothing is darker than #141C08, and there are no neutral blacks. The sky is a soft pale sage-teal, from about #7E9A96 at the top edge to about #C9D3BE at the treeline. The lawn is olive-green, around #4E6B14 in its body, with raking sunlit bands up to about #8DA42C and long shadow bands down to about #2A3C0C. Rim-lit foliage glows ochre-gold, around #B89A3C to #987729. The roof underside glows amber, around #B07A30. The stone piers are warm pale stone, around #A89880. The timber cladding is a dark warm brown, around #2E2A24. The greens stay olive and warm. They are never emerald, lime or blue-green. EDGES: the image is full-bleed, and every edge runs to the frame. Do not bake in any vignette, dark gradient or border, because the page adds its own gradient overlays. The top 12% is open, calm sky, where a thin row of navigation will sit. The only things that cross it are the crown of the umbrella pine behind the roof on the left and an olive branch reaching in from the top-right corner. The lower-middle of the frame, roughly 30%–70% of the width and 60%–82% of the height, is where a centred headline and two buttons will sit. It must be plain, even lawn with soft diagonal shadow bands and nothing on it. SUBJECT: a single-storey modernist pavilion set back in the middle distance. It has a thin, flat, cantilevered roof slab with a dark charcoal fascia and a deep overhang at both ends. The underside of the roof glows amber in the sun. A small pale chimney block rises right of centre. The centre of the facade is floor-to-ceiling glass with slim dark mullions, and a warm, dim interior shows through. Pale stacked-stone piers stand on the left, and dark vertical timber cladding covers the right. A low pale-concrete terrace plinth runs across the front, with two white sun loungers on it. Rounded shrubs, blue-grey agaves and ornamental grasses line the base of the terrace. A wide umbrella pine rises behind the roof on the left. Olive trees frame both side edges. A hazy band of backlit trees fills the right background. COMPOSITION: an eye-level, straight-on view with a slight three-quarter angle. The house spans roughly 5%–84% of the width, with its roof line at about 29% of the height and the terrace plinth at about 57%. The whole house sits above 58% of the height. A low sun from the back right, just out of frame, rim-lights the foliage and throws long diagonal shadows toward the lower left. Below the terrace, a sweeping, gently rolling, freshly mown lawn fills the lower 42% of the frame. In the lower-right corner, close foreground clumps of shrubs and grasses fall softly out of focus and catch gold at their tips. Everything else stays in focus. AVOID: a visible sun disc, sunburst, lens flare or light streaks; an orange, pink or red sunset sky; clouds or a dramatic sky; a bright blue daytime sky; saturated emerald or lime greens; HDR clarity or crunchy detail; a black corner vignette; a two-storey, suburban, tract or traditional house; a pool; paths, sprinklers, mowers, people, cars or furniture on the lawn; mountains or ocean in the background. Output a wide 3:2 landscape frame, 1536x1024. Keep a little spare sky at the top and lawn at the bottom so it can be cover-cropped to 16:10. No text, no lettering, no logos, no watermarks, no UI.
---
## Mindora — Mental health therapy site
- Page: https://ai-taste-vault.vercel.app/r/mindora-mental-health-therapy-site
- Original: https://dribbble.com/shots/27380327-MINDORA-Mental-Health-Website
- Type: Landing page
- Tags: Earth tones, Feature grid, Footer, Health, Hero, Light mode, Organic, Pastel, Pricing table, Process steps, Stats band
- Palette: #FCFCFB, #D7D9D7, #B8B8A7, #875726, #D69B66
- Captured: 2026-09-20
- Rebuilt with: Claude Code · Opus 5.5 · High · skills: frontend-design, emil-design-eng, transitions-dev, gsap, humanizer
- Rebuild: https://ai-taste-vault.vercel.app/v/demo/mindora-mental-health-therapy-site/index.html
### Prompt — Rebuild
_rebuild · html-css · opus_
#### Earthy wellness landing page: build prompt
A light, calm landing page for a therapy and wellbeing service. It opens and closes on two full-bleed, warm, sun-washed photographs. Between them sit five quiet, left-aligned content sections on near-white and pale stone tints, with small white stat cards that overlap the images. A neo-grotesk sans is used throughout, at light-to-medium weights. The hero is one giant word, and a standing figure is cut out in front of it. The page has one pistachio-lime accent pill and one black active state. The footer ends in an oversized, nearly invisible wordmark that is clipped by the bottom edge.
##### Structure
- **Viewport:** design at 1440 × 900. The page is full-bleed, with no outer margin, no rounded page corners and nothing behind it.
- **Content container:** 1344px wide, with 48px side gutters. Use a 12-column grid with 24px gutters.
- **Hero gutters:** the hero and the closing CTA image use 64px side insets for their overlay text.
- **Section openers:** every content section starts with the same pattern. There's an eyebrow row (a 6px black dot, an uppercase micro label of 2–3 words, and a 1px hairline running to the right edge of the container). Below it sits a two-line, left-aligned H2.
Sections, top to bottom:
1. **Hero.** Full-bleed photo with a transparent nav on top.
- **Nav:** a small uppercase wordmark on the left; 5 uppercase links centred; a white "get started" pill on the right.
- **Display word:** one giant word spans almost the full width, set in white. The standing figure in the photo overlaps it, with the head in front of the letters.
- **Lower left:** an eyebrow ("• 3–4 words") over a 2-line subhead of about 4 words.
- **Right:** a right-aligned paragraph of 4 short lines and a white pill CTA with a ↗ arrow.
- **Bottom strip:** two uppercase micro labels, one at far left and one at far right, about 48px above the hero's bottom edge.
2. **About.** Eyebrow and H2 (2 lines, 6–7 words). Then a three-part staggered composition:
- **Left (cols 1–3):** a portrait image. A white stat card (number + 2-word caption) overlaps the image's top edge.
- **Centre (cols 4–7):** a lead paragraph of about 60 words, set large, with a lime pill CTA below it.
- **Right (cols 9–12):** a taller image that starts higher than the left one. One white stat card overlaps its top-left corner, sticking out about 50px past the image edge. A second stat card sits inside the bottom-right corner.
3. **Process.**
- **Header:** eyebrow and H2 (2 lines, 4–5 words).
- **Tab row:** 4 equal tabs spanning the full container. Each has an uppercase step label on the left and a two-digit number ("01"–"04") on the right. The first tab is solid black; the others are pale with a hairline.
- **Step content:** cols 1–4 hold the step title (3 words) and a 2-line caption, bottom-aligned to the image. Cols 5–12 hold a wide 2:1 image.
4. **Therapists.**
- **Header:** eyebrow, then H2 (3 words, 2 lines) on the left. On the same baseline on the right are 4 underline-style filter dropdowns (label + chevron, about 180px each).
- **Cards:** a row of 3 equal portrait cards at about 4:5. Each is a full-bleed photo with a dark warm gradient at the bottom. Over the gradient sit a white name, a 3–4 word specialty caption and a small arrow at the bottom right.
5. **Features.**
- **Header:** eyebrow, H2 (7 words, 2 lines) on the left, lime pill CTA on the right, aligned to the H2.
- **Grid:** two rows of tiles, 3 tiles across on the first row and 2 wider tiles on the second.
- **Tiles:** a small line icon at the top left. At the bottom: a title of 2 words and a caption of 5–7 words.
6. **Pricing.**
- **Header:** eyebrow and H2 (6 words, 2 lines) on the left. On the right, a muted question line (4 words) and a lime pill.
- **Cards:** two equal, wide cards with a cream-to-sage pastel gradient. Each card has:
- a square image at the top left;
- to its right, a circular outline icon above a 2-line plan name;
- a large price with a small "/session" suffix;
- a 4-item checklist;
- a black pill CTA at the bottom right.
7. **Closing CTA and stats band.** Full-bleed photo.
- **Top left:** eyebrow plus a 2-line white H2 of 4 words.
- **Top right:** a 2-line right-aligned white paragraph and two stacked white pills.
- **Bottom:** a 4-column stats band in white, each column a big number over an uppercase caption.
8. **Footer.** White.
- **Left:** wordmark, a 1-line tagline, and an underline email field with a text "Subscribe" button.
- **Right:** 3 link columns (heading + 4–5 links).
- **Bottom:** a giant wordmark across the full width in a barely-off-white tint, clipped by the page bottom.
##### Scroll map
The viewport is 900px tall.
1. Hero: 920px (1.02 vp). Consumes 920. Entrance.
2. About: 925px (1.03 vp). Consumes 925. Entrance.
3. Process: 880px (0.98 vp). Consumes 880. Entrance, plus click tabs.
4. Therapists: 955px (1.06 vp). Consumes 955. Entrance.
5. Features: 880px (0.98 vp). Consumes 880. Entrance.
6. Pricing: 920px (1.02 vp). Consumes 920. Entrance.
7. Closing CTA and stats: 945px (1.05 vp). Consumes 945. Entrance.
8. Footer: 575px (0.64 vp). Consumes 575. Entrance.
Total page height is about 7,000px (≈ 7.8 viewports). No motion report was supplied, so nothing pins or stacks and every value here is inferred.
##### Spacing
- **Section padding:** 80px top and 88px bottom in sections 2–6. Sections butt edge to edge; there are no gaps or dividers between them. Rhythm comes from the background tint changing.
- **Inside the section opener:**
- eyebrow row to H2: 48px;
- H2 to first content block: 48–56px (process tabs, therapist cards, feature grid, pricing cards);
- in About, the H2 sits at top left and the composition starts about 40px below it.
- **About:**
- The right image starts about 40px below the eyebrow row, roughly level with the H2.
- The left image starts about 130px lower.
- The paragraph starts about 90px below the right image's top.
- Stat cards: 20px padding, about 200px wide.
- **Process:**
- Tab row: 52px tall, with 6px gaps between tabs.
- Tabs to step content: 20px.
- Step text block: max-width 340px.
- **Therapists:** card gap 20px. Name block inset 20px from the card's bottom-left.
- **Features:**
- Grid gaps: 20px in both directions.
- Tiles: 256px tall, 24px padding.
- **Pricing:**
- Card gap 20px; cards about 662 × 540; 24px padding.
- Image to price: 32px. Price to list: 24px. List rows 28px apart.
- **Hero:**
- Nav: 24px from the top, 64px side insets.
- Display word: top about 105px from the hero top.
- Subhead block: starts about 440px from the top.
- **Closing CTA (section 7):**
- Overlay text: 64px insets, top text about 80px down.
- Stats band: about 64px from the bottom, 4 equal columns.
- **Footer:**
- Padding: 64px top.
- Columns: link columns about 140px wide with a 48px gap.
- Giant wordmark: starts about 120px below the columns, and about 25% of the glyph height is cut off by the page edge.
##### Type
- **Family:** a single neo-grotesk sans (Neue Montreal/Haas class). Free stand-in: **Inter Tight**; Geist also works.
- **Weights:** no serif and no mono. Headings are 400–500 and never bold.
- **Anchor:** body = **17px**.
| Level | Ratio | Size | Line-height | Tracking | Weight |
|---|---|---|---|---|---|
| Hero display word | 17.6× | 300px (clamp 120px–21vw–300px) | 0.88 | −0.045em | 400 |
| Footer giant wordmark | 19× | ~330px, full width | 0.85 | −0.04em | 500 |
| Hero/CTA subhead, white | 3× | 52px | 1.02 | −0.03em | 400 |
| Section H2 | 2.1× | 36px | 1.15 | −0.02em | 500 |
| Price / stats-band number | 1.9× | 32px | 1.1 | −0.02em | 500 |
| Stat-card number, plan name | 1.6× | 28px | 1.1 | −0.02em | 500 |
| Lead paragraph (About) | 1.35× | 23px | 1.4 | −0.01em | 400 |
| Card / step title | 1.2× | 20px | 1.3 | −0.01em | 500 |
| Therapist name | 1.1× | 19px | 1.25 | −0.01em | 500 |
| Body | 1× | 17px | 1.55 | 0 | 400 |
| Caption, card sub-lines, checklist | 0.82× | 14px | 1.45 | 0 | 400 |
| Nav links, button labels, tab labels (uppercase) | 0.82× | 14px | 1 | +0.06em | 500 |
| Eyebrows, stat captions, hero bottom labels (uppercase) | 0.71× | 12px | 1.2 | +0.08em | 500 |
- **Max line lengths:**
- lead paragraph: 30–34ch (it's a narrow, tall block);
- captions: 45ch;
- H2: break by hand into 2 lines of 3–4 words.
##### Colour
| Hex | Role |
|---|---|
| `#FCFCFB` | Main surface: sections 2, 4, 6, footer, feature tiles, inactive tabs, stat cards (largest area) |
| `#F4F3EF` | Alternate section tint for sections 3 and 5 (inferred, derived from the palette's light end) |
| `#D7D9D7` | Hairlines: eyebrow rules, tab borders, filter underlines, footer input underline |
| `#B8B8A7` | Muted sage: secondary text tint, pricing card gradient end (mixed lighter), icon strokes |
| `#875726` | Deep earth brown: therapist-card bottom gradient, photo grading; never flat UI fills |
| `#D69B66` | Caramel: photo warmth only (hero grass, CTA sunset); at most a tiny price-unit tint |
| `#1A1A17` | Text and the black elements: active tab, pricing CTA pills (inferred) |
| `#77776E` | Secondary text and captions (inferred) |
| `#CFE6A3` | **The single accent**, pistachio-lime (inferred, sampled by eye) |
| `#FFFFFF` | Text and pills over photos only |
- **Accent rule:** the pistachio-lime is used only as the fill of primary pills on light sections (About CTA, Features CTA, Pricing "contact" pill). Its label is dark. It never appears as text colour, an icon colour, a border or a background band.
- **Pricing card gradient:** top `#F3EEE6` (warm cream) to bottom `#DDE5D0` (pale sage), vertical.
##### Surface
- **Borders:** 1px `#D7D9D7` hairlines only. Feature tiles and inactive tabs have either a hairline or none, separated by tint alone. There are no heavy outlines.
- **Corner radii:**
- images and photo cards: 16px;
- feature tiles and pricing cards: 14px;
- stat cards: 10px;
- tabs: 6px;
- every button: fully pill-shaped (999px);
- filter dropdowns: none (underline only);
- the page and the full-bleed photo sections: 0.
- **Shadows:** almost none. Stat cards get one soft lift, `0 8px 24px rgba(40,30,20,0.08)`. Nothing else has a shadow.
- **Buttons:** pills are 40px tall with 20px horizontal padding. Labels are uppercase 14px with a small ↗ arrow. Variants are white on photos, lime on light sections and black in pricing.
##### Imagery
All photography is warm, soft, sunlit and slightly desaturated, with a film-like grade. There are no illustrations.
- **Hero (section 1), 1440 × 920, full-bleed.**
- **Scene:** one adult with short tousled light hair, in a loose cream blouse and dark trousers. They stand in tall dry golden grass and gaze to the side. The figure is waist-up in frame at about 50–58% across.
- **Sky:** hazy olive-sage, fading warm at the horizon.
- **Layering, critical:** use a background plate, then the white display word, then a cut-out PNG of the figure on top. The head and shoulders sit in front of the middle letters.
- **About, left (section 2):** portrait at about 3:5 (322 × 530). A person in rust-coloured activewear holds a balanced standing yoga pose in a bare warm-beige studio.
- **About, right (section 2):** about 2:3 (435 × 650). Close-up of a hand resting in a meditation mudra over a knee draped in cream chunky knit, on a soft neutral background.
- **Process (section 3):** 2:1 (850 × 425). Close-up of two hands clasping, one in a light sleeve and one in a brown knit sleeve, against a pale blue sky. Each tab swaps in its own image of the same style.
- **Therapists (section 4):** 3 portraits at about 4:5 (432 × 556). Smiling clinicians in white coats with stethoscopes, chest-up, centred, on a plain sage-grey backdrop. The bottom 35% fades into a warm olive-brown gradient behind the white text.
- **Pricing (section 6):** 2 near-square images (about 220 × 228). Surreal pastel portraits where the head is replaced by a burst of flowers: one with an orange cap and hoodie, one with a floral bucket hat. Their backgrounds blend into the card's cream tone.
- **Closing CTA (section 7), 1440 × 945, full-bleed.**
- **Scene:** a person seen from behind, waist-up, in the lower-centre of the frame, standing in a field of small yellow wildflowers at dusk. The sky is graded mauve to orange.
- **Darkening:** add a 15–25% dark overlay at the top and bottom edges so the white text reads.
##### Motion
No motion report was supplied. Everything below is **(inferred)**, and every timing is not measured, so a range is given.
**1. Hero**
- **kind:** entrance, on page load.
- **what moves:** background photo; display word; figure cut-out; subhead block; right paragraph and pill; nav.
- **from → to:**
- photo: scale 1.06 → 1, opacity 0 → 1;
- display word: translateY 40px → 0, opacity 0 → 1;
- figure: translateY 20px → 0;
- text blocks and nav: translateY 16px → 0, opacity 0 → 1.
- **range:** once, on load. Duration not measured (700–1100ms for the photo, 500–800ms for text), ease-out (cubic). Stagger: photo, word, figure, text, nav at 80–120ms steps.
- **reduced motion:** everything is shown in its final state with no transforms. At most a 200ms opacity fade.
**2. About**
- **kind:** entrance.
- **what moves:** eyebrow row, H2, both images, paragraph and CTA, the three stat cards.
- **from → to:**
- text and images: opacity 0 → 1, translateY 24px → 0;
- stat cards: additionally scale 0.96 → 1.
- **range:** once, when each element's top reaches 80% of the viewport. Duration not measured (500–800ms), ease-out. Stagger 60–100ms, left to right; stat cards last.
- **reduced motion:** content is shown immediately, without transforms.
**3. Process**
- **kind:** entrance (the tab switching is an interaction; see the list below).
- **what moves:** header, then the 4 tabs, then the step text and image.
- **from → to:**
- header and step content: opacity 0 → 1, translateY 24px → 0;
- tabs: opacity 0 → 1, translateY 12px → 0.
- **range:** once, at 80% of the viewport. Duration not measured (500–800ms), ease-out. Tabs stagger 50–80ms.
- **reduced motion:** content is shown immediately.
**4. Therapists**
- **kind:** entrance.
- **what moves:** header and filters, then the 3 cards.
- **from → to:** opacity 0 → 1, translateY 32px → 0.
- **range:** once, when the card row's top reaches 80% of the viewport. Duration not measured (600–900ms), ease-out. Cards stagger 80–120ms.
- **reduced motion:** content is shown immediately.
**5. Features**
- **kind:** entrance.
- **what moves:** header and pill, then the 5 tiles.
- **from → to:** opacity 0 → 1, translateY 24px → 0.
- **range:** once, at 80% of the viewport. Duration not measured (500–800ms), ease-out. Tiles stagger 60–90ms in reading order.
- **reduced motion:** content is shown immediately.
**6. Pricing**
- **kind:** entrance.
- **what moves:** header, then the 2 cards. Inside each card, the image settles.
- **from → to:**
- cards: opacity 0 → 1, translateY 32px → 0;
- card images: scale 1.04 → 1.
- **range:** once, at 80% of the viewport. Duration not measured (600–900ms), ease-out. Stagger 100–140ms.
- **reduced motion:** content is shown immediately.
**7. Closing CTA and stats**
- **kind:** entrance.
- **what moves:** H2 block, then the right text and pills, then the 4 stats.
- **from → to:** opacity 0 → 1, translateY 24px → 0. The photo itself stays still.
- **range:** once, when the section top reaches 70% of the viewport. Duration not measured (500–800ms), ease-out. Stats stagger 60–100ms. No count-up animation.
- **reduced motion:** content is shown immediately.
**8. Footer**
- **kind:** entrance.
- **what moves:** the giant wordmark.
- **from → to:** translateY 40px → 0, opacity 0 → 1. Everything else in the footer is static.
- **range:** once, when the wordmark's top reaches 90% of the viewport. Duration not measured (700–1000ms), ease-out.
- **reduced motion:** static.
**Interaction transitions** (separate from the scroll choreography)
- **Pills:** on hover, the background darkens by about 6% (lime to a slightly deeper lime, white to `#F2F2EE`, black to `#333`). The ↗ arrow moves 2px up and 2px right. Duration 150–200ms. On press, scale to 0.98.
- **Process tabs:** on click, the active tab's black fill moves to the clicked tab. The step title, caption and image crossfade in 250–350ms, ease-in-out. Inactive tabs get a `#EFEEEA` background on hover.
- **Therapist cards:** on hover, the photo scales 1 → 1.03 over 400–500ms, and the arrow moves 2px right and up.
- **Feature tiles:** on hover, the background goes to white and the hairline goes to `#C9CBC9`, in 150–200ms.
- **Filter dropdowns:** a menu card (14px radius, soft shadow) opens below. It fades in and rises 6px over 150–200ms, and the chevron rotates 180°.
- **Nav and footer links:** on hover, an underline grows from left to right in 200ms.
##### Responsive (below 640px)
- **Gutters:** 20px. Section padding drops to 56px top and 64px bottom. H2 drops to 28px; body stays 17px.
- **Nav:** wordmark, a "get started" pill and a menu button. The links go into a sheet.
- **Hero:** height 100svh.
- The display word scales to fill the width (about 22vw) and stays behind the figure.
- Subhead (36px), paragraph and pill stack at the bottom, left-aligned.
- The two bottom labels are dropped.
- **About:** order is H2, paragraph, CTA, then the two images side by side at 50/50 with equal tops. Keep the 3 stat cards, overlapping the images.
- **Process:** the tabs become a horizontally scrolling row (each tab at least 140px). The step text stacks above a full-width 3:2 image.
- **Therapists:** the filters become a horizontally scrolling chip row. The cards become a horizontal scroll-snap row at 80% width.
- **Features:** one column; tiles 180px tall.
- **Pricing:** cards stack. The image stays at the top left; the plan name wraps beside it.
- **Closing CTA (section 7):**
- The H2, paragraph and pills stack at the top, left-aligned.
- Stats become a 2 × 2 grid.
- The photo is cropped to keep the figure centred.
- **Footer:** link columns become 2-up. The giant wordmark scales to the viewport width and stays clipped.
##### Don'ts
- **Mat and page edges:** don't paint a grey mat, frame, or rounded corners around the page, and don't inset the hero photo. Sections 1 and 7 are edge to edge.
- **Hero layering:** don't put the display word on top of the figure, and don't drop the cut-out. Text behind the figure is the hero's whole point.
- **Wellness palette:** no lavender, teal or blue-purple gradients, no blob shapes, no wavy SVG dividers, no illustrations or 3D characters.
- **Weights and hierarchy:** no bold (700+). Hierarchy comes from size and tight tracking, not weight. Don't centre the section headings; everything sits on the left edge except the right-side CTAs and filters.
- **Accent overuse:** lime is never a background band, link colour, icon colour or checkmark colour. Black is only used for the active tab and the pricing pills.
- **Cards:** no drop shadows on feature tiles, pricing cards or therapist cards, and no 2px borders. There are no coloured icon chips; icons are thin monochrome line icons, about 20px, with no background.
- **Stats:** don't turn the stats band into separate cards or add a count-up. They are plain white numbers on the photo.
- **Footer:** don't make the giant wordmark legible-dark. It is a whisper (`#F1F1EE` on `#FCFCFB`) and it must be clipped by the page bottom.
- **Additions:** don't add sections the design doesn't have (testimonials carousel, FAQ accordion, logo wall). Don't add scroll-jacking, pinning or parallax that isn't specified here.
- **Imagery:** don't use cool or high-contrast stock photography. Every image should share the warm, hazy, desaturated grade.
### Imagery — already generated
These pictures were made for this design and are hosted at the URLs below.
Use them as the `src` exactly as written, and keep the alt text. Do not
generate your own, do not reach for a stock library or a placeholder
service, and do not feed the Imagery section above back to an image model —
that work is done. Size and crop them with CSS (`object-fit: cover`) rather
than assuming their dimensions, and download them into the project if you
would rather not hotlink.
- https://ai-taste-vault.vercel.app/v/demo/mindora-mental-health-therapy-site/images/01-hero-calm-figure-in-grass.webp — A person with short tousled blond hair in a loose cream blouse stands in tall golden dry grass under a hazy sage sky, looking to the side
- https://ai-taste-vault.vercel.app/v/demo/mindora-mental-health-therapy-site/images/02-closing-cta-wildflower-dusk.webp — A person seen from behind stands in a field of small yellow wildflowers at dusk under a mauve-to-orange sky
- https://ai-taste-vault.vercel.app/v/demo/mindora-mental-health-therapy-site/images/03-therapist-portrait.webp — A smiling clinician in a white coat with a stethoscope against a plain sage-grey backdrop
- https://ai-taste-vault.vercel.app/v/demo/mindora-mental-health-therapy-site/images/04-process-hands-clasping.webp — Close-up of two hands clasping in a supportive handshake, one in a cream sleeve and one in a brown knit sleeve, against a pale sky
### Image prompts
What each picture above was generated from, for anyone changing one.
**A person with short tousled blond hair in a loose cream blouse stands in tall golden dry grass under a hazy sage sky, looking to the side** (`01-hero-calm-figure-in-grass`)
MEDIUM AND FINISH: a quiet editorial fashion photograph with a soft, low-contrast, slightly faded film-like grade, matte rather than glossy. The background is gently out of focus and the figure is sharp. COLOUR AND VALUE: the sky is a flat, hazy olive-sage, about #A8AD8C at the top, warming to a pale straw #CDBF98 near the horizon. The grass is a muted golden wheat, #C9A46E to #B08A55. The blouse is cream, #E9E1CF. The skin is warm and lightly tanned. The lightest value in the frame is the cream blouse, about #EDE6D6; nothing is pure white. The only deep value is the dark trousers, about #1E1A16. Everything else sits in a narrow mid-to-light warm band, and there are no hard shadows. Use the attached screenshot only for this palette and the hazy desaturated finish; ignore all of its text, buttons and layout. EDGES: full-bleed, with no border or vignette. The upper third of the sky must stay empty and evenly toned, because a giant white word will be set across it behind the figure's head. The lower-left and right-centre areas of the sky and grass must stay calm, because small white text sits there. The figure's silhouette must be crisp and clean against the soft sky so it can be masked into a separate cut-out layer. SUBJECT: one slim adult with short, tousled, pale-blond hair, in a loose, slightly sheer cream long-sleeve blouse tucked into high-waisted black trousers. They stand calmly with arms relaxed at their sides, head turned to their left in profile-three-quarter, gazing into the distance. Tall, dry, feathery golden grass rises around their hips and fills the bottom quarter of the frame, with a few seed heads crossing the foreground. COMPOSITION: the figure stands at about 50–58% across the frame. The top of the head sits about 25% down from the top edge, and the body runs off the bottom edge at about mid-thigh. Leave wide, empty sky on both sides. AVOID: blue sky, clouds, sun flare or sunburst, golden-hour orange saturation, a black vignette, HDR clarity, high contrast, punchy greens, strong bokeh balls, any other people, and any text. Output a wide 3:2 landscape frame, 1536x1024. No text, no lettering, no logos, no watermarks, no UI.
**A person seen from behind stands in a field of small yellow wildflowers at dusk under a mauve-to-orange sky** (`02-closing-cta-wildflower-dusk`)
MEDIUM AND FINISH: a soft, warm, slightly hazy photograph with a faded film-like grade. It is low in contrast and gently desaturated, with atmospheric haze softening the distance. COLOUR AND VALUE: the sky grades from a dusty mauve-grey, about #8E7C82 at the top, through a soft rose to a hazy peach-orange glow, #E3AE85, at the horizon behind the figure. The field is a carpet of small mustard-yellow and ochre flowers, #C99A3A to #A5782E, darkening to olive-brown, #5E4A2A, at the very bottom. The lightest value is the horizon glow, about #ECBC94, and there is no visible sun disc. The darkest value is the figure's hair and the deepest shadow of the jacket, about #2A1D15. Nothing is pure black. Use the attached screenshot only for this palette and finish; ignore its text, buttons and layout. EDGES: full-bleed, with no border. The top quarter of the sky must be calm and slightly darker so that white headline text and pills on the upper left and upper right stay readable. The bottom 15% of the field must be even and slightly darker, with no bright detail, because a row of white numbers sits across it. SUBJECT: one adult seen fully from behind, waist-up, with short dark hair and a loose brown-umber jacket. They stand still, facing the glowing horizon, in a wide meadow of tiny yellow wildflowers that fades into soft haze. COMPOSITION: the figure is centred horizontally. Their shoulders sit at about 55% down the frame and their head at about 45%, so the body fills the lower-centre and runs off the bottom edge. There is wide, empty sky above and open meadow on both sides. AVOID: a visible sun or lens flare, a dramatic cloudscape, saturated orange-red sunset, purple-teal grading, a black vignette, HDR, sharp foreground bokeh, other people, and text. Output a wide 3:2 landscape frame, 1536x1024. No text, no lettering, no logos, no watermarks, no UI.
**A smiling clinician in a white coat with a stethoscope against a plain sage-grey backdrop** (`03-therapist-portrait`)
MEDIUM AND FINISH: a clean, soft studio portrait photograph with gentle, even, diffused front light. It is low in contrast with a slightly warm, muted grade, like a calm healthcare brand portrait. COLOUR AND VALUE: the backdrop is a flat, seamless sage-grey, about #A9B0A0, very slightly warmer toward the bottom, #A8A58E. The white coat reads as soft off-white, #EDEDE8, never blown out. The skin is natural and warm. The darkest value is the hair and the stethoscope tubing, about #1F1C1A, and only in small areas. Everything else sits in a light-to-mid range with no deep shadows. Use the attached screenshot only for this palette and the soft finish; ignore its text, cards and layout. EDGES: the frame will be cropped to 4:5 inside a rounded card, and a warm olive-brown gradient will be laid over the bottom 35% in CSS with white text on it. Keep that bottom zone simple: just coat and stethoscope, with no hands and no busy detail. SUBJECT: one friendly adult clinician with neat short dark hair and a warm, open, natural smile, looking straight at the camera. They wear a crisp white lab coat over a light blue-grey shirt, with a dark stethoscope draped around the neck. COMPOSITION: chest-up and centred, with the head in the upper third and the top of the head about 12% below the top edge. The shoulders fill most of the width and the body runs off the bottom edge. The backdrop is evenly lit, with no props. AVOID: a hospital interior, window light, a dramatic rim light, a dark or black background, a cool blue clinical grade, high saturation, shallow-focus blur on the face, a heavy retouched plastic look, crossed arms, clipboards, and text. Output a 2:3 portrait frame, 1024x1536, with the subject centred so it survives a 4:5 crop. No text, no lettering, no logos, no watermarks, no UI.
**Close-up of two hands clasping in a supportive handshake, one in a cream sleeve and one in a brown knit sleeve, against a pale sky** (`04-process-hands-clasping`)
MEDIUM AND FINISH: a soft, airy close-up photograph with a gentle, slightly faded warm grade. It is low in contrast and bright, with smooth, even daylight and no hard shadows. COLOUR AND VALUE: the background is an empty, pale, hazy blue sky, about #C3D3DD at the top, lightening to #DCE5E9 toward the bottom, completely smooth and cloudless. The left sleeve is a soft cream-beige, #E6D8C2, on lighter warm skin. The right sleeve is a chunky brown knit, #7A4E2C to #5A3820, on deeper brown skin. The lightest value is about #E8EDEF in the sky. The darkest value is the knit's shadow folds and the creases of the deeper hand, about #2E1E14, and only in small areas. Use the attached screenshot only for this palette and finish; ignore its text, tabs and layout. EDGES: the image sits in a rounded frame on a pale stone page. All four edges should stay as clean, empty sky apart from the sleeves entering from the sides, so the frame reads calm. SUBJECT: two hands meeting in a warm, firm clasp in the centre of the frame. One hand reaches in from the left in a loose cream sleeve. The other reaches in from the right in a cosy brown cable-knit sleeve. The fingers wrap around each other, conveying support and connection. COMPOSITION: the clasp sits at the horizontal centre and slightly below the vertical centre. The forearms run diagonally off the left and right edges, and there is generous empty sky above and below. AVOID: a business-suit corporate handshake, an office background, clouds, the sun, lens flare, a saturated blue sky, a dark vignette, HDR detail, dramatic side light, rings or watches, and text. Output a wide 3:2 landscape frame, 1536x1024, with the clasp centred so it survives a 2:1 crop. No text, no lettering, no logos, no watermarks, no UI.
---
## Le Friance — Furniture Ecommerce Homepage
- Page: https://ai-taste-vault.vercel.app/r/le-friance-furniture-ecommerce-homepage
- Original: https://dribbble.com/shots/27730593-Premium-Furniture-E-commerce-Website-Design-Le-Friance
- Type: Landing page
- Tags: Earth tones, E-commerce, Footer, Gallery, Hero, High contrast, Light mode, Luxury, Nav bar, Newsletter signup, Product shot
- Palette: #F9F1E8, #3A322B, #181614, #D6B797, #765639
- Captured: 2026-09-18
- Rebuilt with: Claude Code · Opus 5.5 · Extra high · skills: frontend-design, emil-design-eng, transitions-dev, humanizer, gsap
- Rebuild: https://ai-taste-vault.vercel.app/v/demo/le-friance-furniture-ecommerce-homepage/index.html
### Prompt — Rebuild
_rebuild · html-css · opus_
#### Cream furniture ecommerce homepage — rebuild prompt
A long, warm-neutral commerce landing page: a full-bleed interior photograph under an edge-to-edge ultra-condensed wordmark, one dark brown feature panel, a bento photo grid, a four-up product row, an editorial slider, and a dark footer that ends on the same wordmark cropped by the bottom of the page. Everything is cream, walnut and near-black. No brand marks, no logos — placeholder copy by role only.
**No live motion capture was supplied with this reference.** Every value in the Motion section is read off the stills and is marked **(inferred)**; durations, easings and stagger were **not measured**, so ranges are given. Do not invent exact timings, and do not specify lerp / stiffness / spring parameters.
---
##### 1. Structure
- **Page**: full-bleed, no visible page margin or mat. Sections 1, 2, the slider strip in 5, and 6–7 run edge to edge; content inside them is constrained.
- **Container**: 1312px max-width, centred, 64px side gutters at 1440 (content runs x = 64 → 1376).
- **Grid**: 12 columns × 85.3px with 24px gutters for layout; the photo grids override this with their own 4 × 319px columns at 12px gaps.
- **Reference viewport**: 1440 × 900.
Sections, top to bottom:
1. **Hero** — full-bleed interior photograph, transparent nav, giant wordmark, caption chip bottom-left.
2. **Modular-system panel** — dark brown, three columns: filter chips left, floating white slide card centre, upcoming-slide rail right; two-tone centred headline above, centred footnote below.
3. **Bento photo grid** — cream. Left headline + right paragraph, then a 4 × 2 tile grid in which two cells are text instead of photo.
4. **Product row** — cream. Offset headline, prev/next controls, category filter pills, 4-up product tiles with swatches and prices, numbered pagination rail.
5. **Editorial slider** — cream. Centred headline + subcopy, then a full-bleed sand strip holding a 3-up slider with the middle card enlarged and dark.
6. **Footer** — dark brown. Thumbnail pair, nav row, large image with dots, social row, studio paragraph, then a bottom band with the newsletter CTA headline and an underline email field.
7. **Wordmark band** — near-black, the hero wordmark repeated and cropped by the bottom edge of the document.
---
##### 2. Scroll map
Viewport = 900px. No section pins: the full-page composite shows no dead scroll anywhere, so **scroll consumed = section height for every section**. Carousels in 2, 4, 5 and 6 advance by click/drag, not by scroll.
| # | Section | Height | Viewports | Scroll consumed | Kind |
|---|---|---|---|---|---|
| 1 | Hero | 992px | 1.10 | 992px | scroll-linked (inferred) |
| 2 | Modular-system panel | 984px | 1.09 | 984px | entrance (inferred) |
| 3 | Bento photo grid | 1016px | 1.13 | 1016px | entrance (inferred) |
| 4 | Product row | 1176px | 1.31 | 1176px | entrance (inferred) |
| 5 | Editorial slider | 656px | 0.73 | 656px | entrance (inferred) |
| 6 | Footer | 926px | 1.03 | 926px | entrance (inferred) |
| 7 | Wordmark band | 210px | 0.23 | 210px | scroll-linked (inferred) |
**Total document height: 5960px ≈ 6.62 viewports.**
---
##### 3. Spacing
- Section vertical padding: **96px top / 96px bottom** on cream sections (3, 4, 5); **120px top / 112px bottom** on the dark panel (2) and footer (6).
- Rhythm between sections on cream: sections 3 → 4 → 5 share the same background, separated by a 1px hairline and the 96 + 96 padding pair, i.e. **192px of air across each seam**. Do not collapse it.
- Headline block → first grid/media block: **72px**.
- Headline → its supporting paragraph (when stacked, section 5): **20px**.
- Photo grid gaps: **12px** both axes (sections 3 and 4). This tightness is the look — do not open it to 24 or 32.
- Product tile image → name: **16px**; name → swatch/price row: **10px**.
- Pills: height 34px, padding 0 16px, gap 8px.
- Square "+" buttons: 44 × 44, 12px inset from the tile edge.
- Circular arrow buttons: 44px diameter, 12px gap between the pair.
- Footer row spacing: image row → social/paragraph row **72px**; then hairline; then **56px** to the bottom CTA band.
- Nav bar: 72px tall, 24px from the top of the page, same 64px side gutters.
---
##### 4. Type
Two families only.
- **Display (wordmark, section 7 and hero only)** — ultra-condensed heavy grotesk display, flat terminals, near-closed counters. Free stand-in: **Anton**; if it is still too wide, apply `transform: scaleX(0.88)` rather than reducing the size.
- **Everything else** — neutral grotesk, tight apertures, slightly condensed caps. Free stand-in: **Inter Tight** for headlines, **Inter** for body and UI.
Body anchor: **17px at 1440**. Every level below is a multiple of it.
| Level | Ratio | Size | Line-height | Tracking | Weight | Max measure |
|---|---|---|---|---|---|---|
| Wordmark (1, 7) | 28.2× | 480px (cap height ≈ 343px) | 0.82 | −0.015em | 700/900 | one line, full bleed |
| Section headline (2, 3, 4, 5) | 2.8× | 48px | 1.12 | −0.02em | 500 | 18ch (~520px) |
| Footer CTA headline (6) | 2.6× | 44px | 1.15 | −0.02em | 500 | 22ch (~600px) |
| Card title / grid link (3, 5) | 1.18× | 20px | 1.25 | −0.01em | 500 | 24ch |
| Body / lede paragraph | 1× | 17px | 1.55 | −0.005em | 400 | 62ch (~560px) |
| Product name | 1× | 17px | 1.3 | −0.005em | 500 | 20ch |
| Nav link, locale | 0.88× | 15px | 1.4 | 0 | 400 | — |
| Pills, buttons, price, small note | 0.82× | 14px | 1.5 | 0 (0.06em when uppercase) | 400/500 | 34ch (~300px) |
| Micro label, slide index, eyebrow | 0.7× | 12px | 1.35 | 0.08em, uppercase | 500 | 28ch |
Numerals in the pagination rail and prices are tabular. Nothing on the page is italic. Nothing below 12px.
Placeholder copy by role and length:
- Hero wordmark: one word or a two-word lockup, 8–10 characters total.
- Nav: 4 links, one word each; locale, 2–3 words; CTA, 2 words.
- Hero caption chip: 3 lines × ~34 characters.
- Section headlines: 5–8 words on two lines (section 3: 8–9 words on three lines).
- Supporting paragraphs: 22–30 words.
- Side notes parked at the far edges: 8–14 words, 2–4 short lines.
- Product names: 2–3 words. Prices: currency symbol + 4 digits with a thousands separator.
- Newsletter label: 2–3 words uppercase; field placeholder, 2 words; action, 1 word.
---
##### 5. Colour
| Hex | Role |
|---|---|
| `#F9F1E8` | **Dominant surface** — warm cream. Sections 3, 4, 5 background; the floating slide card in 2; all text set on dark. Covers roughly 55% of the page. |
| `#181614` | **Ink** — all body and headline text on cream; fill for the primary pills, the dark "+" button and the active pagination chip; background of section 7 only. |
| `#3A322B` | **Dark panel** — background of section 2, the footer (6), and the enlarged editorial card in 5. Warm brown-grey, never neutral charcoal. |
| `#D6B797` | **The single accent** — warm tan. Allowed in exactly four places: the colour swatch dots on product tiles, the active carousel dot, the sand strip behind the slider in 5 (`#F1E5D6`, the accent mixed into cream at ~25%), and the newsletter underline on focus. Nowhere else. |
| `#765639` | Accent's dark step — the third swatch dot, and hover state for the accent underline. Not a text colour on cream. |
Derived values:
- Muted text on cream: `#181614` at 60% (`rgba(24,22,20,0.6)`).
- Muted text on dark: `#F9F1E8` at 55%; second half of the two-tone headline in section 2 at 45%.
- Hairlines: `rgba(24,22,20,0.12)` on cream, `rgba(249,241,232,0.14)` on dark.
No pure white, no pure black, no grey. No gradients anywhere except the soft floor shadow baked into the product photography.
---
##### 6. Surface
- **Borders**: 1px only. Section seams, the pagination rail, the newsletter field underline, outlined pills, social icon circles, and two vertical 1px rules in section 2 that flank the centred headline column (at x = 438 and x = 1013, running 190px down from the section's top edge).
- **Radii**: photos and cards **8px**; small thumbnails and slide-rail tiles **4px**; square "+" buttons **8px**; pills, arrow buttons, social icons, dots **999px**. Nothing at 16px or above — the page reads square.
- **Shadows**: none, with one exception — the floating white slide card in section 2 carries `0 24px 60px rgba(24,22,20,0.28)` so it lifts off the brown. Cream sections have zero elevation.
- **Glass**: one frosted strip across the lower third of the slide-card image in section 2 — `backdrop-filter: blur(18px)`, `background: rgba(249,241,232,0.18)`, 64px tall, full image width, holding one line of 14px cream text **(inferred)**.
---
##### 7. Imagery
All photography is the same world: warm daylight from one side, plaster or off-white walls, walnut and light-oak timber, cream/sage upholstery, no clutter, no visible branding, no smiling models. People appear only as hands, backs and working figures.
1. **Hero photo (1)** — 1440 × 992, **1.45:1**, full bleed behind the nav and wordmark. A furnished living room shot head-on: two mid-century lounge chairs with pale cushions centre, a sage-green armchair right, a low sofa with textile cushions left, a small dark pedestal table, a woven rug on pale flooring, a dried branch in a floor vase far right. The upper third is empty plaster wall — the wordmark sits in it. Exposure is bright; keep the top 40% of the frame quiet enough for white type.
2. **Slide-card image (2)** — 586 × 415, **1.41:1**, inside the white card. A person in a neutral shirt leaning over a walnut table, wiping or finishing the surface, a plant and two ceramic bowls in frame. Warm, documentary, shallow depth.
3. **Slide rail thumbnails (2)** — three tiles, 62 × 62, **1:1**, right column. Crops of upcoming slides: a chair silhouette, a workbench, a detail shot. The two inactive ones sit at 60% opacity.
4. **Bento tiles (3)** — six photos, **319px wide**; row 1 tiles are 319 × 288 (**1.11:1**), row 2 tiles are 319 × 328 (**0.97:1**).
- 3a: light-wood writing table, straight on, with a dark green leather desk mat and two small objects.
- 3c: corner of a sofa with a sage-green throw draped over the arm, close crop, fabric texture legible.
- 3d: low walnut sideboard against a pale wall, two ceramic vases and a trailing plant on top, wide.
- 3e: open shelving with ceramics, stacked books and a small plant, warm shadow.
- 3f: wishbone-style chair, woven paper-cord seat, three-quarter view, a table edge and green bowl in the foreground.
- 3g: macro of a mitred timber corner joint, grain and end-grain both visible.
5. **Product shots (4)** — four tiles, 319 × 402, **4:5 portrait**. Each chair centred on the cream ground, whole object in frame, shot at eye level, soft contact shadow only. Types: a cream shell accent chair on a splayed wood base; a dark sculpted-wood lounge chair with boucle upholstery; a cream armchair in walnut with cane detail; a tan upholstered barrel chair on thin black legs.
6. **Editorial cards (5)** — flanking cards 283 × 238 (**1.19:1**), active card is dark with no photo. Card 1: two lounge chairs in a bright room with a figure adjusting one. Card 3: a person at a walnut dining table in a workshop-lit room, seen from behind.
7. **Footer thumbnails (6)** — two tiles, 90 × 70, **1.29:1**: the sage-throw sofa crop and the sideboard, reused small.
8. **Footer feature image (6)** — 483 × 477, **1.01:1**. A person kneeling to assemble a slatted wooden shelf unit, sunlight raking across the floor, tools out of frame.
---
##### 8. Motion
Everything below is **(inferred)** from the stills; nothing was measured on a live page. Where a number was not measurable, a range is given.
###### Section 1 — Hero
- **kind**: scroll-linked **(inferred)**
- **what moves**: the hero photograph (background layer) and the wordmark (foreground layer).
- **from → to**: photo `translateY: 0 → −80px` and `scale: 1.06 → 1.0`; wordmark `translateY: 0 → +40px`, `opacity: 1 → 0.65`. Nav stays fixed at opacity 1.
- **range**: from page scroll 0 until the hero's bottom edge reaches the top of the viewport (0 → 992px of scroll). Reverses exactly on the way back up.
- **reduced motion**: no transform, no opacity change; the hero is a static image.
###### Section 2 — Modular-system panel
- **kind**: entrance **(inferred)**
- **what moves**: headline (both tonal halves together), left filter-chip stack, the white slide card, the right thumbnail rail, the centred footnote.
- **from → to**: each `opacity 0 → 1`, `translateY +28px → 0`; the slide card additionally `scale 0.97 → 1`.
- **range**: trigger once, when the section's top reaches 80% of the viewport. Duration **not measured** — use 600–800ms. Easing: a standard ease-out (`cubic-bezier(0.22, 1, 0.36, 1)`). Stagger **not measured** — use 70–110ms in the order headline → card → chips → rail → footnote.
- **reduced motion**: all elements appear at final state, opacity fade only, ≤150ms.
###### Section 3 — Bento photo grid
- **kind**: entrance **(inferred)**
- **what moves**: the headline lines, the right paragraph, and each of the eight grid cells (six photos, two text cells).
- **from → to**: headline lines `translateY +24px → 0`, `opacity 0 → 1`; grid cells `opacity 0 → 1` with the image inside each cell `scale 1.06 → 1` under a fixed 8px-radius clip, so the frame never moves.
- **range**: trigger once, when each cell's top reaches 85% of the viewport. Duration **not measured** — use 700–900ms for the image scale, 400–600ms for the fade. Stagger across the grid in reading order, **not measured** — use 60–90ms.
- **reduced motion**: fade only, no scale; stagger reduced to 0.
###### Section 4 — Product row
- **kind**: entrance **(inferred)**
- **what moves**: the offset headline, the control row, the filter pills, the four product tiles, the pagination rail.
- **from → to**: `opacity 0 → 1`, `translateY +20px → 0` for all; product tiles stagger left to right.
- **range**: trigger once, at 80% of the viewport, per group. Duration **not measured** — use 500–700ms, ease-out. Tile stagger **not measured** — use 80–120ms.
- **reduced motion**: static, opacity only.
###### Section 5 — Editorial slider
- **kind**: entrance **(inferred)**
- **what moves**: centred headline, subcopy, then the three cards and the two arrow buttons. The sand strip itself does not move.
- **from → to**: headline and subcopy `opacity 0 → 1`, `translateY +20px → 0`; cards `opacity 0 → 1`, `translateY +32px → 0`, active centre card last.
- **range**: trigger once, at 80% of the viewport. Duration **not measured** — use 600–800ms. Stagger **not measured** — use 90–130ms, outer cards first, centre card last.
- **reduced motion**: fade only.
###### Section 6 — Footer
- **kind**: entrance **(inferred)**
- **what moves**: the thumbnail pair, nav row, feature image, social row, studio paragraph, then the bottom CTA headline and the newsletter field.
- **from → to**: `opacity 0 → 1`, `translateY +24px → 0`; the feature image also runs `clip-path: inset(0 0 12% 0) → inset(0 0 0 0)`.
- **range**: trigger once, at 85% of the viewport, top row then bottom band. Duration **not measured** — use 600–800ms. Stagger **not measured** — use 80–120ms.
- **reduced motion**: no clip animation, fade only.
###### Section 7 — Wordmark band
- **kind**: scroll-linked **(inferred)**
- **what moves**: the cropped wordmark.
- **from → to**: `translateY +60px → 0` as the last 210px of the document enters view; the crop itself is structural (the glyphs are cut by the document's bottom edge, not animated).
- **range**: from the moment the band's top edge enters the viewport until the document bottom is reached. Reverses on scroll up.
- **reduced motion**: static, already at final position.
###### Interaction transitions (not part of the scroll choreography)
- **Nav link hover**: underline grows from left, 1px, 180ms ease-out; colour unchanged.
- **Pill hover** (filter, "view all"): border darkens from 12% to 40% ink, 160ms. **Active/selected**: `#181614` fill, cream text, no transition on selection — it swaps instantly with the grid re-render.
- **"+" square button hover**: glyph rotates 90°, 220ms ease-out; fill inverts (dark ↔ cream) over 160ms.
- **Product tile hover**: the image scales `1 → 1.03` inside its fixed clip over 400ms ease-out; the name shifts 0, the price does not move; swatch dots gain a 1px ink ring.
- **Swatch dot press**: ring tightens to 2px, 120ms.
- **Arrow button hover**: fill inverts, the chevron slides 3px toward its direction, 160ms. **Disabled**: 35% opacity, no hover.
- **Carousel advance** (sections 2, 5, 6): the track translates one card-width plus gap over 420–600ms with an ease-in-out; the newly active card in section 5 grows from 283 × 238 to 334 × 289 over the same duration; the dot rail crossfades in 200ms.
- **Newsletter field focus**: the 1px underline thickens to 2px and turns `#D6B797`, 160ms; the placeholder does not move. **Send press**: the word scales to 0.97 for 90ms.
- **Cursor**: default. No custom cursor, no magnetic buttons.
---
##### 9. Responsive (below 640px)
- Gutters 20px; container = full width − 40px.
- Wordmark stays full-bleed and still runs edge to edge; cap height ~86px (font-size ~120px). It is still cropped at the bottom in section 7. Do not centre it with side margins.
- Nav: logo + hamburger only; the four links and the locale move into the drawer; the CTA stays visible as a 14px text link.
- Hero: photo re-crops to **4:5**, section height 560px; the caption chip goes full width minus gutters and sits 20px above the bottom.
- Section 2: single column — headline, then the slide card (image re-crops to 4:3), then the caption, then the chip stack as a horizontally scrolling row with 12px gaps and no scrollbar; the thumbnail rail and the far-right note are **dropped**; the centred footnote stays.
- Section 3: bento becomes **2 columns**, 8px gaps; the two text cells become full-width rows in their original reading position; the "+" buttons shrink to 40px.
- Section 4: product grid becomes **2 columns**, 8px gaps, tiles stay 4:5; the prev/next pair moves under the headline; the filter pills scroll horizontally; the pagination rail shows `01 02 03` plus `06` and drops the rest.
- Section 5: the three cards become a snap-scrolling row, each card 86vw, all at the same size (no enlarged centre card); arrows dropped, dots kept.
- Section 6: everything stacks — feature image first at full width **4:3**, then nav as a 2-column list, then the thumbnail pair side by side at 48% each, then socials, then the CTA headline, then the newsletter field full width with `SEND` below the rule.
- Type: body 16px, section headlines 32px (2×), footer CTA 30px, card titles 18px, small notes 14px, micro 12px. Section padding drops to 64px top / 64px bottom.
---
##### 10. Don'ts
- **Don't scale the wordmark to fit inside the container.** It is a full-bleed architectural element whose outer glyphs are optically flush with (and slightly cropped by) the page edges. A centred 96px headline version kills the page.
- **Don't reach for a serif or a Didone for the wordmark.** It is a heavy ultra-condensed grotesk, all caps, tight to the point of near-touching. And don't use it anywhere except sections 1 and 7 — no condensed type in headings, nav or buttons.
- **Don't substitute white for the cream.** `#F9F1E8` is warm and slightly pink; `#FFFFFF` or a cool grey immediately makes it a generic SaaS page. Likewise the dark is `#3A322B`, a brown — not `#111827`, not charcoal.
- **Don't use `#000000` or a pure-black overlay** on the hero. The caption chip is `#181614`, and the photograph is not darkened.
- **Don't add shadows to the cream sections.** One shadow exists on the whole page: the floating slide card in section 2.
- **Don't open the grid gaps.** 12px is the design. 24px or 32px turns a dense editorial grid into a card deck.
- **Don't fill the two empty bento cells with photos.** The text cells and the air around their two short lines are load-bearing — they are why the grid reads as composed rather than tiled.
- **Don't centre the layout.** The page is deliberately off-axis: section 3's headline is hard left with its paragraph hard right, section 4's headline starts at x ≈ 730 with a tiny note at x = 66, and small text blocks are parked at the far edges with large gaps between them. Resist the urge to tidy these into a symmetric two-column split. Only sections 2 and 5 are centred.
- **Don't introduce a coloured CTA.** There is no blue, no green button, no brand colour. Primary actions are `#181614` fills; the only chromatic note is the tan `#D6B797` in the swatch dots, the active dot, the slider strip and the focus underline.
- **Don't add commerce chrome.** No "New" / "Sale" badges, no star ratings, no wishlist hearts, no "Add to cart" buttons, no cart count in the nav. Each product tile is image, name, three swatches, price.
- **Don't pin anything or scrub every block.** The document has no dead scroll: the only scroll-linked elements are the hero parallax and the closing wordmark. Carousels advance on click, never on scroll hijack.
- **Don't make the nav sticky with a blurred white bar.** It sits over the hero photo and scrolls away with it.
- **Don't uppercase or letterspace the body and side notes.** Uppercase with tracking is reserved for 12px micro-labels and the filter pills.
- **Don't round images past 8px** or turn the tiles into pills; and don't add hairline borders around photos — the images meet the cream directly.
- **Don't use bright, wide-angle, high-saturation interior stock.** The photography is warm, softly lit, tightly cropped, and shows work being done — hands, backs, surfaces — never faces addressing the camera.
- **Don't let any type drop below the floor**: 16px for running text, 14px for nav, pills and buttons, 12px for labels and indices.
### Imagery — already generated
These pictures were made for this design and are hosted at the URLs below.
Use them as the `src` exactly as written, and keep the alt text. Do not
generate your own, do not reach for a stock library or a placeholder
service, and do not feed the Imagery section above back to an image model —
that work is done. Size and crop them with CSS (`object-fit: cover`) rather
than assuming their dimensions, and download them into the project if you
would rather not hotlink.
- https://ai-taste-vault.vercel.app/v/demo/le-friance-furniture-ecommerce-homepage/images/01-01-hero-interior.webp — Warm daylit living room with two mid-century lounge chairs, a sage armchair and a woven rug on pale flooring
- https://ai-taste-vault.vercel.app/v/demo/le-friance-furniture-ecommerce-homepage/images/02-02-bento-interiors-sheet.webp — Six warm interior detail photographs of a desk, a sage throw on a sofa arm, a sideboard, open shelving, a wishbone chair and a timber joint
- https://ai-taste-vault.vercel.app/v/demo/le-friance-furniture-ecommerce-homepage/images/03-03-chair-product-sheet.webp — Four designer chairs photographed separately on the same flat cream background
- https://ai-taste-vault.vercel.app/v/demo/le-friance-furniture-ecommerce-homepage/images/04-04-people-at-work-sheet.webp — Four warm documentary photographs of people working with furniture — finishing a table, adjusting chairs, sitting at a dining table and assembling a shelf
### Image prompts
What each picture above was generated from, for anyone changing one.
**Warm daylit living room with two mid-century lounge chairs, a sage armchair and a woven rug on pale flooring** (`01-01-hero-interior`)
MEDIUM AND FINISH: A real interior photograph, full-frame digital, shot head-on with a normal 35–50mm lens and deep focus so every chair, the rug weave and the far wall stay sharp; soft diffuse daylight from a large window off frame to the right, matte finish, natural fabric and wood texture, the faintest film grain, colour-graded warm and slightly desaturated like a furniture catalogue interior — calm and evenly lit, not moody, not glossy, not HDR. COLOUR AND VALUE: One warm cream-and-walnut family with a single muted sage note. Plaster walls are the lightest thing in the frame, sitting between #EDE6DB and #F2ECE2 at their brightest and never blowing out; pale flooring #DCD2C4; the woven rug a flat warm tan #C6A87C; chair frames and the low table in mid walnut #7A5436 to #5C3E28; cushions and upholstery in cream and oat #DDD6C6 to #E6E0D0; one armchair in muted dusty sage #93A48F, desaturated, never leafy or emerald. The darkest values in the frame are the small dark pedestal table and the shadow it casts, reaching about #201D1A, and they are tiny and confined to the lower middle — no black masses, no deep shadow pools anywhere else, no vignette. The whole picture sits in a bright, narrow, warm mid-to-light band with gentle contrast. EDGES: The image is used full-bleed across the entire top of the page, square corners, no border, no rounding, so the exposure must stay flat and even right up to all four edges with no darkened corners and no falloff. The upper third to upper 40% of the frame is empty plaster wall only — flat, quiet, unbroken, no pictures, no shelves, no sconces, no strong shadow shapes — because very large white display type is set over it; keep the lower-left corner uncluttered as a small dark caption panel sits there. SUBJECT: A furnished living room photographed straight on at standing eye level: two mid-century lounge chairs with solid walnut frames and pale oat cushions sit side by side just right of centre facing the camera; a muted sage-green upholstered armchair with wooden arms sits further right; a low cream sofa with a couple of textile cushions, one of them in a simple black-and-white graphic weave, runs in from the left edge; a small dark round pedestal side table with a candle on it stands between the sofa and the chairs; a large woven tan rug covers the pale floor beneath everything; a bare dried branch in a tall floor vase stands at the far right against the wall. Nothing on the walls. COMPOSITION: Furniture occupies only the lower 55–60% of the frame, arranged in a calm symmetrical line across the room with generous air between pieces; the top 40% is wall. Room is empty of clutter, no people, no pets, no books or cups. AVOID: no wide-angle distortion, no fisheye, no shallow depth of field or bokeh, no sun flare or sunbeam shafts, no black vignette, no dramatic chiaroscuro, no HDR clarity halos, no oversaturated travel-magazine greens or teals, no cool grey or blue daylight, no pure white walls, no gallery wall art, framed prints, posters, wall text or signage, no television, no branded objects, no people, no visible window with a view, no text, no lettering, no logos, no watermarks, no UI. Output a wide 3:2 landscape frame, 1536x1024. No text, no lettering, no logos, no watermarks, no UI.
**Six warm interior detail photographs of a desk, a sage throw on a sofa arm, a sideboard, open shelving, a wishbone chair and a timber joint** (`02-02-bento-interiors-sheet`)
MEDIUM AND FINISH: Six separate interior detail photographs arranged as one seamless 3-across by 2-down contact sheet, all shot on the same day in the same warm plaster-walled rooms under soft diffuse side daylight, all graded identically — real photography, matte, tactile, deep focus so wood grain, ceramic glaze and woven fibre stay legible, faint natural grain, soft long shadows, no styling gloss. COLOUR AND VALUE: One warm cream, oak and walnut family across all six cells, identical grade. Plaster walls and pale surfaces are lightest at #EDE6DB to #F1EAE0; light oak #C9A87A; walnut #6E4A30; ceramics in chalky off-white and soft clay #E2DACB to #BC9A78; a single muted sage-green accent #93A48F used sparingly; plant foliage muted and dusty, never vivid. The darkest values are a dark green desk mat and the shadow inside the shelving, bottoming out around #2E332B — nothing in the sheet is darker than that, no blacks, no crushed shadow, no vignette in any cell. Every cell sits in the same gentle, bright, warm mid band. EDGES: The sheet is sliced into six equal square cells and each cell is cropped out and used on its own, so the grid must be strict and even with no gutters, no margins, no borders, no frames, no rounded corners and no shadows between cells; each photograph fills its own cell edge to edge and no subject crosses a cell boundary. SUBJECT: Top row, left to right — (1) a light-oak writing table shot straight on with a dark green leather desk mat on it and two small objects, a plain ceramic cup and a folded cloth; (2) the corner of a cream sofa with a soft sage-green knitted throw draped over the arm, close crop, weave and fabric texture clearly readable; (3) a low walnut sideboard against a pale plaster wall, wide view, two ceramic vases and a trailing green plant on top. Bottom row, left to right — (4) open timber shelving holding stacked ceramics, a few books laid flat and one small plant, warm shadow behind; (5) a light-wood wishbone-style chair with a woven paper-cord seat seen three-quarter on, with the edge of a table and a small sage bowl soft in the foreground; (6) a macro of a mitred timber corner joint where face grain and end grain both read, filling the cell. COMPOSITION: Each subject is centred and generously cropped inside its own cell, same camera height and same light direction throughout; plenty of quiet empty surface around each object; no people in any cell. AVOID: no wide-angle distortion, no shallow-focus bokeh, no sun flare, no black vignette, no HDR clarity, no saturated emerald or olive greens, no cool grey or blue light, no pure white walls, no clutter, no wall art, framed prints or posters, no packaging, no branded objects, no candles lit with visible flame, no people or hands, no grid lines, borders, captions or numbers, no text, no lettering, no logos, no watermarks, no UI. Output a wide 3:2 landscape frame, 1536x1024, as a seamless 3x2 grid of six equal square cells. No text, no lettering, no logos, no watermarks, no UI.
**Four designer chairs photographed separately on the same flat cream background** (`03-03-chair-product-sheet`)
MEDIUM AND FINISH: Four separate furniture product photographs arranged as one seamless 2-across by 2-down contact sheet, every chair shot alone on the same flat warm cream seamless ground under one broad soft overhead-front light — plain catalogue product photography, matte, no reflections, deep focus front to back, the whole object inside the frame, only a soft short contact shadow directly under the feet. COLOUR AND VALUE: The seamless ground is a flat warm cream #F9F1E8 in all four cells with no gradient, no floor line and no visible horizon, lightening to at most #FBF4EC; contact shadows are warm and faint, no darker than #CFC2B1 and never spreading more than a few centimetres from the feet. Upholstery runs cream boucle #E8E1D2, soft oat #DDD4C2, muted sage-grey #9DA394 and warm tan suede #C39A6D; timber runs light walnut #A8seat-free — light walnut #A9763F through dark rosewood #4A2C1B. The only near-black values allowed are the thin metal legs of one chair and the deepest grain of the dark sculpted frame, around #221D19, and they stay confined to those slim shapes. Nothing else in the sheet is dark; no blacks in the ground, no shadow pools, no vignette. Identical exposure and grade in all four cells. EDGES: The sheet is sliced into four equal 4:5 portrait cells and each cell is cropped out and placed on a cream page of exactly the same colour, so the ground must run flat and perfectly even to all four outer edges and across every cell boundary with no gutters, no borders, no frames, no rounded corners and no tonal step between cells; each chair is centred in its own cell and never crosses a boundary. SUBJECT: Four different armchairs, one per cell, each standing alone and facing three-quarters toward the camera at eye level — (1) a cream boucle shell accent chair on a splayed light-walnut base; (2) a lounge chair with a dark sculpted-wood frame and muted sage-grey boucle cushions; (3) a cream upholstered armchair in a walnut frame with woven cane panels in the back and sides; (4) a tan upholstered barrel chair on four thin black tapered metal legs. All plain and unbranded, no labels, no tags, no cushions or throws added. COMPOSITION: Each chair occupies about seventy percent of its cell height, dead centre, same camera height, same distance and same light direction in every cell so the four read as one shoot; nothing else in any frame. AVOID: no room set, no rug, no floor, no wall, no plants or props, no white or grey seamless, no gradient backdrop or spotlight pool, no glossy or reflective tabletop, no mirror reflections, no hard cast shadows, no dramatic side or rim light, no shallow-focus blur, no HDR clarity, no cool or blue tint, no people, no grid lines, borders, captions, prices or numbers, no text, no lettering, no logos, no watermarks, no UI. Output a 4:5 portrait frame, 1024x1280, as a seamless 2x2 grid of four equal 4:5 portrait cells. No text, no lettering, no logos, no watermarks, no UI.
**Four warm documentary photographs of people working with furniture — finishing a table, adjusting chairs, sitting at a dining table and assembling a shelf** (`04-04-people-at-work-sheet`)
MEDIUM AND FINISH: Four separate documentary interior photographs arranged as one seamless 2-across by 2-down contact sheet, all shot in the same warm plaster-walled workshop-apartment rooms with soft daylight from one side, all graded identically — honest reportage, matte, natural grain, unposed, medium depth of field with the person and the furniture both readable, no studio lighting and no styling gloss. COLOUR AND VALUE: One warm cream and walnut family in every cell, identical grade. Sunlit plaster walls and floor are lightest at #EFE8DD to #F3EDE3; timber runs light oak #C4A47A to walnut #6B4830; clothing is plain ecru, oat and warm grey #D8D0C0 to #8B8377, with one figure in a darker charcoal-brown top; foliage is muted and dusty. The darkest values are hair and the folds of the darkest garment, reaching about #2A2420, and they stay small and confined to the figure — no black backgrounds, no shadow pools, no vignette in any cell. Light is warm and gentle; where sun rakes across a floor it stays a soft warm stripe, not a blown-out hotspot. EDGES: The sheet is sliced into four equal landscape cells and each cell is cropped out and used on its own inside a rounded frame, so the grid must be strict and even with no gutters, no margins, no borders, no frames and no shadows between cells; each photograph fills its own cell edge to edge and no figure crosses a cell boundary. SUBJECT: Top left — a person in a plain ecru shirt leaning over a large walnut table, wiping or oiling the surface with a cloth, a potted plant and two ceramic bowls on the table, seen from the side, head down, face not toward the camera. Top right — a bright empty room with two wooden lounge chairs, one figure crouching beside a chair adjusting its cushion, pale wall behind, warm floor. Bottom left — a person seen from behind, seated at a walnut dining table in a room lit by a tall window, one hand resting on the table, back to the camera. Bottom right — a person kneeling on the floor assembling a tall slatted wooden shelf unit, low sun raking across the floor and wall behind them, seen from the side and slightly behind. COMPOSITION: In every cell the figure is small to medium in the frame and the room and furniture carry the picture; no faces address the camera, no smiling, no eye contact; same camera height and same warm side light throughout; rooms are uncluttered. AVOID: no posed lifestyle models, no smiling, no faces to camera, no eye contact, no wide-angle distortion, no heavy bokeh, no sun flare or light shafts, no black vignette, no dramatic chiaroscuro, no HDR clarity, no saturated colours or bright branded clothing, no cool grey or blue light, no power tools running, no sawdust clouds, no safety goggles or hi-vis, no packaging, boxes or printed instructions, no phones or laptops, no wall art or posters, no grid lines, borders or captions, no text, no lettering, no logos, no watermarks, no UI. Output a wide 3:2 landscape frame, 1536x1024, as a seamless 2x2 grid of four equal landscape cells. No text, no lettering, no logos, no watermarks, no UI.
---
## Solacecare — Dark telehealth landing
- Page: https://ai-taste-vault.vercel.app/r/solacecare-dark-telehealth-landing
- Original: https://dribbble.com/shots/27496632-Solacecare-telehealth-landing-page
- Type: Landing page
- Tags: Editorial, Footer, Full bleed, Health, Hero, High contrast, Nav bar, Neon accent, Process steps, Stats band
- Palette: #FEFEFE, #022821, #090805, #017846, #01C66B
- Captured: 2026-09-18
- Rebuilt with: Claude Code · Opus 5.5 · Extra high · skills: frontend-design, emil-design-eng, transitions-dev, humanizer, gsap
- Rebuild: https://ai-taste-vault.vercel.app/v/demo/solacecare-dark-telehealth-landing/index.html
### Prompt — Rebuild
_rebuild · html-css · opus_
#### Dark green wellness landing page
A long, photography-led marketing page built on two grounds that alternate: a near-black forest green and a warm off-white. One neon green accent carries every call to action. All type is geometric sans, set light and tracked tight; headlines are two lines with the second line dropped to ~35% opacity — that two-tone headline is the page's signature and appears in four places. Photography is motion-blurred, heavily green-graded, and always full-bleed inside its container. No shadows anywhere.
**No motion report was supplied for this reference.** Every value in the Motion section is read from the stills and the page composite and is marked `(inferred)`; durations and easings are given as ranges, not exact measured numbers.
---
##### Structure
- Page width: full-bleed, designed at 1440.
- Two horizontal systems:
- **Content container** — 1200px max, centred, 120px gutters at 1440. Used by sections 2, 3, 5.
- **Edge gutter** — 48px from each viewport edge. Used by the nav, section 1's headline row and chip strip, section 6, and section 7.
- Section 4 is an inset panel: 34px from each edge (so 1372px wide), with its own 24px inner padding on top of that.
- Grid: sections 2 and 5 are equal-column grids with a deliberately tight **16px** gap. Section 2 is 2 columns (592px each). Section 5 is 3 columns (389px each).
Sections, top to bottom:
1. **Hero** — full-bleed motion-blur photograph, nav overlaid, headline bottom-left / paragraph + CTA bottom-right, six-item category chip strip across the bottom on a dark gradient.
2. **Process** — off-white. Eyebrow, centred two-tone headline, then two large near-square photo cards side by side, each with overlaid text.
3. **Stats band** — off-white. Centred two-tone headline, three statistics in a row split by vertical hairlines, one small centred footnote.
4. **Program carousel** — inset dark panel. Eyebrow + headline + CTA top-left, tall cut-out portrait centre, a small square image card and a glass info card stacked on the right, a supporting paragraph bottom-left, segmented progress bar and "3 / 6" counter along the bottom.
5. **Approach** — off-white. Eyebrow, centred two-tone headline, three photo cards with a title and a two-line paragraph beneath each.
6. **Closing CTA** — full-bleed dark. Large headline left, paragraph + circular glyph + pill button under it, three micro-pills and a tall product card on the right, a ghosted repeat of the hero chip strip across the bottom.
7. **Footer** — darkest ground. An oversized lowercase wordmark fitted edge to edge, hairline rule, then a four-block link row with social icons and a copyright.
---
##### Scroll map
Reference viewport 1440 × 900.
| # | Section | Height | Viewports | Scroll consumed | Kind |
|---|---------|--------|-----------|-----------------|------|
| 1 | Hero | 937px | 1.04 | 937px | scroll-linked (photo parallax) + entrance on nav/headline |
| 2 | Process | 1037px | 1.15 | 1037px | entrance |
| 3 | Stats band | 582px | 0.65 | 582px | entrance (numbers count up once) |
| 4 | Program carousel | 937px | 1.04 | 937px | entrance, then user-driven (not scroll-linked) |
| 5 | Approach | 852px | 0.95 | 852px | entrance, staggered |
| 6 | Closing CTA | 724px | 0.80 | 724px | entrance |
| 7 | Footer | 611px | 0.68 | 611px | entrance on the wordmark |
**Total page height ≈ 5680px ≈ 6.3 viewports.** Nothing pins; nothing stacks. Section boundaries land at 937 / 1974 / 2556 / 3493 / 4345 / 5069 / 5680.
---
##### Spacing
**Vertical rhythm.** Off-white sections (2, 3, 5) use 128px top padding and 96–128px bottom padding. Dark sections (1, 4, 6) run their content to a 48–64px inner margin instead — they feel denser because the photograph fills the box.
Section internals:
- **1** — nav bar 88px tall, top-aligned, 48px gutters. Headline block sits 180px above the section bottom; paragraph on the right shares its top baseline. Chip strip occupies the bottom 120px, separated by a 1px hairline.
- **2** — 128px top pad → eyebrow → 20px → headline (2 lines, 48px each) → 56px → card row (625px tall) → 94px bottom pad.
- **3** — 96px top pad → headline (2 × 48px) → 64px → stat row (130px tall) → 64px → footnote → 96px bottom pad.
- **4** — panel inset 34px horizontally, 30px above and below. Inside: 24px panel padding, plus 48px from panel edge to the eyebrow. Headline → CTA gap 32px. Bottom paragraph sits 72px above the progress bar; progress bar 24px above the panel floor.
- **5** — 128px top pad → eyebrow → 20px → headline (2 × 48px) → 56px → card row → 40px bottom pad. Inside a card: image → 24px → title → 16px → paragraph.
- **6** — 96px top pad, headline (2 × 68px), 32px to paragraph, 28px to the button row, then 72px to the ghosted chip strip, 56px bottom.
- **7** — 64px top pad → wordmark → 48px → hairline → 40px → link row → 48px bottom.
**Horizontal.** Nav links 40px apart. Right-hand nav cluster 16px apart. Chip strip: 6 items distributed evenly edge to edge, icon 12px from its label. Card grid gaps 16px. Stat columns split by 1px vertical rules with 48px of clearance either side. Card inner padding 32px; glass card inner padding 24px.
---
##### Type
**Family class: geometric sans** — near-circular bowls, double-storey `a`, low contrast, generous x-height. Free stand-in: **Outfit**; alternates **Figtree** or **Plus Jakarta Sans**. One family for the whole page, weights 400 and 500 only. No mono, no serif, no second family.
Body anchor: **17px** at 1440. Every other level is a multiple of it.
| Level | Ratio | Size | Line-height | Tracking | Weight |
|---|---|---|---|---|---|
| Footer wordmark (7) | 11.8× | ~200px — **fit to the container width**, not a fixed size | 0.85 | -0.04em | 500 |
| Hero headline (1), CTA headline (6) | 3.5× | 60px | 1.12 | -0.02em | 400 |
| Stat number (3) | 3.75× | 64px | 1.0 | -0.03em | 500 |
| Section headline (2, 3, 5) | 2.35× | 40px | 1.20 | -0.02em | 400 |
| Carousel headline (4) | 2.0× | 34px | 1.18 | -0.02em | 400 |
| Card headline in 2a | 1.65× | 28px | 1.20 | -0.015em | 400 |
| Stat suffix (`%`, `/5`) | 1.4× | 24px | 1.0 | 0 | 400 |
| Card title (5) | 1.4× | 24px | 1.25 | -0.01em | 500 |
| Body / stat description | 1× | 17px | 1.55 | 0 | 400 |
| Supporting paragraph (1, 2, 4, 5, 6) | 0.88× | 15px | 1.50 | 0 | 400 |
| Nav link, button label, slider counter | 0.82× | 14px | 1.0 | 0.02em | 500 |
| Eyebrow, footer link | 0.76× | 13px, uppercase | 1.0 | 0.16em (eyebrow) / 0.06em (footer) | 500 |
| Micro-pill, chip label, in-image label | 0.7× | 12px, uppercase | 1.3 | 0.08em | 500 |
Never below 12px; nav and buttons never below 14px.
**Max line length.** Running paragraphs 46–52ch. Hero and card overlay paragraphs 28–32ch (they are deliberately narrow columns). Headlines break at 18–22ch per line and are hard-broken, not left to wrap.
**The two-tone headline.** Sections 2, 3, 4 and 5 all set their headline on two lines: line 1 at full-strength foreground, line 2 at ~35% opacity of the same colour. On off-white that reads as `#090805` over `rgba(9,8,5,0.35)`; on dark, `#FEFEFE` over `rgba(254,254,254,0.38)`. Same size, same weight — only opacity changes.
**Placeholder copy by role:** eyebrow 2–3 words wrapped in brackets (`[ THE PROCESS ]`); headlines 5–7 words on two lines; hero paragraph 3 lines / ~18 words; card paragraphs 2–3 lines / ~14 words; stat descriptions 2 lines / ~10 words; footnote 1 line / ~14 words at 12px and 40% opacity; chip labels 1–2 words; button labels 2 words.
---
##### Colour
| Hex | Role |
|---|---|
| `#FEFEFE` | Off-white. The largest single surface (~45%) — grounds sections 2, 3, 5 — and all text on dark grounds. Never pure `#FFFFFF`. |
| `#022821` | Deep forest green-black (~35%). Ground for sections 4 and 6, the hero's gradient overlay, and the fill of the neon pill buttons' label text. |
| `#090805` | Near-black (~15%). Footer ground, all body and headline text on off-white, and the deepest end of every photo gradient. Never pure `#000000`. |
| `#017846` | Mid green (~3%). Support only: the mid-stop of dark gradients, button press state, hairline borders at low opacity, icon strokes on dark. Never a text colour. |
| `#01C66B` | **The single accent** (~2% of pixels). |
**Where the accent is allowed:** pill button fills (with `#022821` text on them); the bracketed eyebrow labels; the giant footer wordmark; social icon circles; small icon glyphs and the arrow in the glass card; the filled segment of the carousel progress bar; link hover underlines. The hero headline's first line also takes the accent while the second line stays `#FEFEFE`.
**Where it is banned:** section backgrounds, paragraph text, headings in sections 2/3/5/6, borders longer than a button, and anything on the off-white ground larger than 13px except the eyebrow.
Hairlines: `rgba(254,254,254,0.12)` on dark, `rgba(9,8,5,0.10)` on off-white. Muted text: 35–40% opacity of the ground's opposite.
---
##### Surface
- **Borders:** 1px only. Outlined chips and micro-pills on dark use `rgba(254,254,254,0.30)`; the section-4 panel edge uses `rgba(1,198,107,0.18)`. Photo cards on off-white have **no border at all**.
- **Radii:** 20px on the large photo cards (2, 5); 24px on the section-4 panel; 16px on the small image cards inside 4 and 6; 12px on the glass info card; 999px on every pill, chip and icon circle.
- **Shadows: none.** Not on cards, not on buttons, not on the glass card. Depth comes from three things only: the gradient baked over each photograph, the 1px hairlines, and the soft green radial glow behind the section-4 portrait.
- **Glass card (4):** `rgba(2,40,33,0.55)` fill, 1px `rgba(254,254,254,0.16)` border, 20px backdrop blur. It is the only blurred surface on the page.
- The page's own outer corners are square — it is full bleed, not a rounded sheet.
---
##### Imagery
All photography is graded the same way: shadows pushed to deep green, highlights held warm, saturation lifted in the greens only. Every image is a hard crop with a gradient baked over the region where text sits.
- **IMG-1 — Hero**, 1440 × 840, ≈1.7:1, top of section 1 bleeding under the nav. A long-exposure frame of a figure running left to right, smeared horizontally so limbs dissolve into streaks; warm sand-ochre ground, the figure's dark form cutting through it. A `#022821` → transparent gradient rises over the bottom 45% and a lighter wash sits over the top 120px so the nav reads.
- **IMG-2 — Process, left card**, 592 × 625, ≈0.95:1. Same long-exposure treatment: a figure bent forward mid-effort, motion smeared, the whole frame pulled toward green. Bottom third darkened for the overlaid headline and button.
- **IMG-3 — Process, right card**, 592 × 625. Close product photography: a glass supplement bottle with a metal cap, lit from behind so the glass glows, standing on a reflective black surface against a soft green gradient backdrop. Clean, still, the opposite of IMG-2's motion.
- **IMG-4 — Program portrait**, 440 × 770, ≈0.57:1, centred in the section-4 panel. A face in three-quarter view, single hard key light from the left rendering one cheek bright green and the other side in near-black; skin cool, eyes catching the light. Vignetted or cut out so it sits into the panel rather than in a box.
- **IMG-5 — Program, small card**, 227 × 227 square, top right of section 4. Abstract: backlit foliage and green bokeh, nothing readable.
- **IMG-6 — Approach, card 1**, 389 × 370, ≈1:0.95. An iridescent soap-film / oil-on-water surface in green and gold, rippling; a small brand wordmark overprinted in the middle in white.
- **IMG-7 — Approach, card 2**, 389 × 370. The bottle again, now surrounded by dark plant leaves, lit from above, deep shadows.
- **IMG-8 — Approach, card 3**, 389 × 370. Macro of an eye and brow in warm natural daylight, skin texture visible, looking up out of frame. This is the one warm image on the page — leave it warm.
- **IMG-9 — Closing CTA card**, 270 × 326, ≈0.83:1, right side of section 6. The bottle a third time, darker and closer, almost silhouetted in green.
---
##### Motion
All values below are `(inferred)` from the stills and composite. Durations are ranges. Easing is described as a class; no spring, lerp or stiffness parameters are specified because none were measured.
###### 1 — Hero
- **kind:** scroll-linked (background) + entrance (foreground), both `(inferred)`
- **what moves:** the hero photograph; the nav row; the headline's two lines; the right-hand paragraph and pill; the six chip items.
- **from → to:** Photograph `translateY 0 → -90px` with `scale 1.06 → 1.06` held (parallax against the section, which scrolls normally). Nav `opacity 0 → 1`, `translateY -16px → 0`. Headline lines `opacity 0 → 1`, `translateY 32px → 0`. Paragraph + pill `opacity 0 → 1`, `translateY 24px → 0`. Chips `opacity 0 → 1`, `translateY 16px → 0`.
- **range:** Photograph is **scroll-linked** and reverses on the way back up — mapped from page scroll 0 to 937px (the section top at the viewport top until the section bottom reaches the viewport top). Foreground items are **entrances that play once on load**, 600–900ms, ease-out, with a 60–100ms stagger: nav first, then headline line 1, line 2, paragraph, pill, then the chip row as its own 40–60ms-per-item stagger.
- **reduced motion:** No parallax — the photo is static. Entrances become a single 150–200ms opacity fade with no translate.
###### 2 — Process
- **kind:** entrance, once `(inferred)`
- **what moves:** eyebrow, headline line 1, headline line 2, then the two photo cards.
- **from → to:** Text `opacity 0 → 1`, `translateY 24px → 0`. Cards `opacity 0 → 1`, `translateY 40px → 0`, `scale 0.985 → 1`, and the photo inside each card reveals with `clip-path inset(0 0 12% 0) → inset(0 0 0 0)`.
- **range:** triggers once when the block's top reaches 80% of the viewport; 700–900ms, ease-out; 80–120ms stagger down the list, the two cards 120ms apart left then right.
- **reduced motion:** opacity only, 150ms, no clip-path, no stagger.
###### 3 — Stats band
- **kind:** entrance, once `(inferred)`
- **what moves:** headline, the three stat numbers, their descriptions, the two vertical rules, the footnote.
- **from → to:** Headline and text `opacity 0 → 1`, `translateY 20px → 0`. Numbers count from 0 to their final value (`0 → 92`, `0 → 4.8`, `0 → 87`) — a **once-only** count, not scroll-linked; it does not run backwards on scroll-up. Rules `scaleY 0 → 1` from the centre.
- **range:** triggers once when the stat row's top reaches 80% of the viewport; count duration 1200–1600ms, ease-out; column stagger 120–160ms left to right.
- **reduced motion:** numbers appear at their final value immediately; rules appear at full height; text fades 150ms.
###### 4 — Program carousel
- **kind:** entrance on arrival, then user-driven. **Not scroll-linked** — the slide index never changes with scroll position. `(inferred)`
- **what moves:** the panel, the portrait, the small image card, the glass card, the progress bar.
- **from → to:** Panel `opacity 0 → 1`, `translateY 32px → 0`. Portrait `opacity 0 → 1`, `translateY 48px → 0`, `scale 1.04 → 1`. Right-hand cards `opacity 0 → 1`, `translateX 32px → 0`. Progress bar's active segment `scaleX 0 → 1` from the left.
- **range:** entrance once, when the panel's top reaches 85% of the viewport; 800ms–1.0s, ease-out; 100–140ms stagger (panel → portrait → small card → glass card → bar). Slide changes afterwards are user-triggered only — see interactions.
- **reduced motion:** panel and contents fade in at 150ms; the progress segment appears filled; autoplay, if any, is disabled.
###### 5 — Approach
- **kind:** entrance, once, staggered `(inferred)`
- **what moves:** eyebrow, both headline lines, then each of the three cards as a unit (image, title, paragraph together).
- **from → to:** `opacity 0 → 1`, `translateY 36px → 0`; each card's image additionally `scale 1.05 → 1` inside its fixed 20px-radius frame.
- **range:** triggers once when the card row's top reaches 80% of the viewport; 700–900ms, ease-out; 100–140ms stagger card to card, left to right.
- **reduced motion:** opacity only, 150ms, all three at once, image held at `scale 1`.
###### 6 — Closing CTA
- **kind:** entrance, once `(inferred)`
- **what moves:** headline lines, paragraph, glyph + pill, the three micro-pills, the product card, the ghosted chip strip.
- **from → to:** Headline lines `opacity 0 → 1`, `translateY 40px → 0`. Paragraph and button row `opacity 0 → 1`, `translateY 24px → 0`. Product card `opacity 0 → 1`, `translateY 48px → 0`. Ghosted chip strip `opacity 0 → 0.28`.
- **range:** triggers once when the section's top reaches 75% of the viewport; 800ms–1.0s, ease-out; 90–120ms stagger, headline first, product card last.
- **reduced motion:** opacity only, 150ms; the chip strip goes straight to 0.28.
###### 7 — Footer
- **kind:** entrance, once `(inferred)`
- **what moves:** the oversized wordmark, then the hairline, then the link columns.
- **from → to:** Wordmark `opacity 0 → 1`, `translateY 60px → 0`, revealed with `clip-path inset(0 0 100% 0) → inset(0 0 0 0)` so it rises out of its own baseline. Hairline `scaleX 0 → 1` from the left. Link columns `opacity 0 → 1`, `translateY 16px → 0`.
- **range:** triggers once when the wordmark's top reaches 90% of the viewport; wordmark 900ms–1.1s, ease-out; hairline 400–600ms; columns 500ms with 60–80ms stagger.
- **reduced motion:** wordmark fades 150ms with no clip or translate; hairline appears at full width.
###### Interaction transitions
These are input-driven and are **not** part of the scroll choreography.
- **Neon pill button** — hover: background `#01C66B → #01E07A`, `scale 1 → 1.02`, 180ms ease-out. Press: `scale 0.98`, background `#017846`, 90ms.
- **White nav pill** — hover: background `#FEFEFE → #01C66B`, label `#090805` stays, 180ms.
- **Nav link** — hover: a 1px accent underline grows from left, `scaleX 0 → 1`, 220ms ease-out; label opacity 0.7 → 1.
- **Photo card (2, 5)** — hover: inner image `scale 1 → 1.04` over 400–500ms ease-out, frame and radius unchanged; no lift, no shadow.
- **Carousel** — next/previous by drag or by clicking a progress segment: slides cross-fade and translate `±40px` over 500–650ms ease-out; the counter swaps instantly; the active segment fills `scaleX 0 → 1` over the same duration.
- **Micro-pill group (GUIDANCE / PERSONALIZED / SUPPORT)** — selecting one moves the filled state: background transitions `transparent → #FEFEFE`, label `#FEFEFE → #022821`, 200ms.
- **Glass card arrow link** — hover: arrow `translate 3px, -3px`, 180ms; card border brightens to `rgba(254,254,254,0.28)`.
- **Footer link / social circle** — hover: colour to `#01C66B`, 150ms; circles fill and invert their glyph.
---
##### Responsive (below 640px)
- Gutters drop to 20px; the section-4 panel inset drops to 12px.
- Nav collapses to logo + pill button + hamburger; the centred link list moves into an overlay sheet. Nav stays 64px tall.
- Hero: height 620px. Headline 32px/1.15 on three lines; paragraph and CTA move **below** the headline, left-aligned, no longer opposite it. The chip strip becomes a horizontally scrolling single-row strip with 12px gaps and no visible scrollbar; keep all six items.
- Section 2: cards stack to one column, each 100% wide and 420px tall, 16px apart. The overlaid paragraph in the top-right of card 2a drops out entirely; the chips and headline stay.
- Section 3: stats stack to one column, centred, with the vertical rules replaced by full-width horizontal hairlines. Stat numbers drop to 44px. The footnote stays.
- Section 4: the portrait becomes a 4:5 image at full panel width, the small square image card is dropped, and the glass card moves below the portrait at full width. Headline 26px. Progress bar and counter stay, pinned to the panel floor.
- Section 5: three cards stack; images stay near-square at full width; titles 20px.
- Section 6: single column. Headline 32px on three lines. The micro-pill row moves above the headline; the product card moves below the button and becomes 4:3 full width.
- Section 7: wordmark still fits edge to edge (≈62px at 375). Link blocks become a 2-column grid; the social row and copyright sit on their own rows beneath.
- Section vertical padding halves: 128px → 64px, 96px → 56px.
- Entrance translate distances halve; the hero parallax is disabled on touch.
---
##### Don'ts
- **Don't make the accent a gradient.** `#01C66B` is a flat fill everywhere it appears. No green-to-teal button gradients, no glow filters, no neon text-shadow. The only gradients on the page are the dark green washes baked over photographs.
- **Don't let the accent exceed ~2% of the surface.** If more than the buttons, eyebrows, small glyphs and the footer wordmark are green, it's wrong. Do not tint section backgrounds green.
- **Don't bold the headlines.** They are weight 400 at 40–60px with `-0.02em` tracking. A 700-weight headline destroys the editorial feel immediately.
- **Don't drop the two-tone headline.** Line 2 at 35% opacity in four separate sections is the page's identity, not a fade-in artefact. Both lines are the same size and weight — only opacity differs.
- **Don't widen the card gaps.** The grid gap is 16px, not 24 or 32. The cards are meant to read as one continuous band of imagery with a seam, not as separated tiles.
- **Don't add shadows or "lift on hover."** No `box-shadow` anywhere on this page. Card hover scales the image inside the frame; the frame itself never moves.
- **Don't round the page's outer corners or inset the whole design on a coloured mat.** Sections 1, 6 and 7 bleed to the viewport edges.
- **Don't use a sticky nav that turns into a solid white bar.** The nav sits over the hero and scrolls away with it.
- **Don't use pure black or pure white.** `#090805` and `#FEFEFE`. Pure `#000`/`#FFF` will read as a template.
- **Don't make the stats band dark.** The alternation off-white → dark → off-white → dark is the page's pacing; three dark sections in a row flattens it.
- **Don't put borders on the photo cards** in sections 2 and 5. The only 1px borders are on outlined chips, micro-pills, icon circles, the section-4 panel and the glass card.
- **Don't scroll-link the carousel.** Slide index is user-driven. Hijacking scroll to advance slides is the wrong pattern here and breaks the scroll map.
- **Don't re-trigger entrances on every scroll pass.** Every entrance plays once. Only the hero photograph's parallax is scroll-linked and reversible.
- **Don't clean up the photography.** The hero and section-2 left card must stay motion-smeared and green-graded; swapping in crisp, well-lit lifestyle stock removes the only thing holding the page together.
- **Don't set the footer wordmark at a fixed px size.** It is fitted to the container width — it must touch both gutters at every breakpoint, with the descender-free lowercase baseline sitting tight against the hairline above the links.
- **Don't use a second typeface** for labels or numerals, and don't reach for a mono for the micro-pills — they are the same geometric sans at 12px uppercase with `0.08em` tracking.
### Imagery — already generated
These pictures were made for this design and are hosted at the URLs below.
Use them as the `src` exactly as written, and keep the alt text. Do not
generate your own, do not reach for a stock library or a placeholder
service, and do not feed the Imagery section above back to an image model —
that work is done. Size and crop them with CSS (`object-fit: cover`) rather
than assuming their dimensions, and download them into the project if you
would rather not hotlink.
- https://ai-taste-vault.vercel.app/v/demo/solacecare-dark-telehealth-landing/images/01-hero-runner-motion-blur.webp — Long-exposure photograph of a lone runner smeared into horizontal streaks across warm sand-coloured ground
- https://ai-taste-vault.vercel.app/v/demo/solacecare-dark-telehealth-landing/images/02-process-figure-motion-blur.webp — Green-graded long-exposure photograph of a figure bent forward mid-effort, smeared into streaks
- https://ai-taste-vault.vercel.app/v/demo/solacecare-dark-telehealth-landing/images/03-program-portrait.webp — Three-quarter studio portrait lit hard from one side, graded deep green, face half in near-black
- https://ai-taste-vault.vercel.app/v/demo/solacecare-dark-telehealth-landing/images/04-product-bottle-green.webp — Backlit green glass supplement bottle with a metal cap on a dark reflective surface against a green gradient
### Image prompts
What each picture above was generated from, for anyone changing one.
**Long-exposure photograph of a lone runner smeared into horizontal streaks across warm sand-coloured ground** (`01-hero-runner-motion-blur`)
MEDIUM AND FINISH: A genuine long-exposure 35mm film photograph, shutter dragged to roughly 1/8 second with the camera held still so the moving subject smears into horizontal streaks while the ground stays semi-legible; visible film grain, matte contrast, slightly soft overall, no digital sharpening, no HDR clarity, no retouching. COLOUR AND VALUE: Warm sand-ochre daylight across the open right two-thirds — mid tones around #C6A275, highlights no brighter than #EBD8B0 — with the smeared body the darkest thing in the frame at about #16120B; the left third and the bottom 45% fall away into flat deep forest green-black #022821 through a mid stop near #0C3A2C, and those greens stay desaturated and dark, never emerald or grassy. No sky, no blue, no white. EDGES: The left edge and the bottom 45% dissolve into flat #022821 with no visible seam, band or vignette ring so a headline and a dark chip strip can sit over them; the top strip lifts to a slightly lighter warm wash around #7A6B4E so overlaid nav links stay readable; the right edge stays warm ochre and runs to the frame. SUBJECT: A single lone human figure in dark clothing running left to right across an empty warm sand-coloured ground — bare earth or a dust-lit floor with no horizon line, no buildings, no track markings — the body dissolved into horizontal streaks so the limbs read as smeared dark ribbons of movement, the head and face completely unreadable, a faint pale streak of skin or light garment trailing behind. COMPOSITION: Figure in the upper centre-right, occupying about a third of the frame width, its motion trail extending to the right; the left third and the whole bottom half empty, dark and quiet with no subject detail; horizonless, flat, ambiguous space. AVOID: crisp sports photography, a stadium or running track, sunset, sun flare or sunburst, blue sky, lens bokeh or shallow depth of field, black vignette, teal-and-orange grade, saturated travel-photo greens, a readable face, more than one figure, the look of a sharp photo with a blur filter applied over it. Output a wide 3:2 landscape frame, 1536x1024. No text, no lettering, no logos, no watermarks, no UI.
**Green-graded long-exposure photograph of a figure bent forward mid-effort, smeared into streaks** (`02-process-figure-motion-blur`)
MEDIUM AND FINISH: A genuine long-exposure 35mm film photograph with a dragged shutter around 1/6 second, in-camera smear, visible grain, matte and slightly soft, no digital sharpening, no HDR clarity, no commercial polish. COLOUR AND VALUE: The whole frame is pulled toward green — mid tones a muted sage (#5E7A5A to #7E9A6E), the brightest streak a pale warm cream-green no lighter than #E2E4C2, the darkest areas in the bottom third and the corners a deep forest green #0E2E22; saturation lifted only in the greens while skin and cloth highlights stay warm ochre; contrast moderate, with no true black and no white anywhere. EDGES: The picture fills a near-square card with no border, so it must run to all four edges with no frame, no vignette and no visible crop line; the bottom third darkens smoothly to #0E2E22 so a white headline and a pill button sit over it, and the top-left and top-right corners stay quiet flat mid-green for small overlaid labels. SUBJECT: A single human figure bent forward mid-effort — braced over their knees or pushing off the ground — against an ambiguous soft green field with no room, no equipment, no floor line and no horizon; the body smeared into vertical and diagonal streaks so shoulders and arms dissolve into ribbons, the face entirely unreadable, one pale warm streak of light cutting across the torso. COMPOSITION: Figure centred slightly high, filling roughly the upper two-thirds of the square; the bottom third open and dark; no props, no background detail, nothing else in frame. AVOID: crisp gym or fitness stock photography, weights, mats or athletic branding, a studio seamless backdrop, a readable face, lens flare, bokeh balls, shallow depth of field, black vignette, neon or emerald green, the look of a sharp photo with a blur filter applied over it. Output a square frame, 1024x1024. No text, no lettering, no logos, no watermarks, no UI.
**Three-quarter studio portrait lit hard from one side, graded deep green, face half in near-black** (`03-program-portrait`)
MEDIUM AND FINISH: A studio photograph lit by a single hard key, colour-graded heavily toward green in post — clean but not retouched smooth, with natural skin texture and pores kept, moderate grain and a matte finish; no beauty-dish glamour gloss, no plastic skin, no HDR clarity. COLOUR AND VALUE: The lit side of the face renders as cool green-tinted skin with highlights topping out around #A8CDA6 on the cheekbone and brow; the shadow side of the face and the entire background fall to near-black forest green between #04140F and #022821, and roughly 60% of the frame sits inside that dark band; a faint soft green glow around #0B4A34 blooms directly behind the head. No warm amber, no magenta, no blue. EDGES: All four edges must fall to flat #022821 with a soft falloff so the portrait sits into a dark panel with no visible box, crop line or vignette ring; hair and shoulders dissolve into the background rather than ending on a cut edge; the top and both outer margins stay quiet and dark. SUBJECT: A single person's head and shoulders in three-quarter view, chin slightly raised, looking past the camera with a calm, neutral, unsmiling expression; dark hair pulled back off the face, dark clothing merging into the background; one hard key from camera-left rakes across a cheek, the jaw and the bridge of the nose while the far side of the face drops into near-black; the eyes catch the light. COMPOSITION: Tall portrait crop with the face filling the upper middle of the frame and the shoulders entering at the bottom; nothing else in frame. AVOID: glossy beauty retouching, airbrushed poreless skin, glitter or heavy makeup shine, coloured gel rim lights on both sides, cyan-and-magenta cyberpunk duotone, a smiling stock expression, a visible studio backdrop seam or fabric, heavy bokeh, jewellery sparkle, hands in frame, a second person. Output a tall 2:3 portrait frame, 1024x1536. No text, no lettering, no logos, no watermarks, no UI.
**Backlit green glass supplement bottle with a metal cap on a dark reflective surface against a green gradient** (`04-product-bottle-green`)
MEDIUM AND FINISH: A close still-life product photograph, backlit, shot on a dark reflective surface with a long lens; controlled and clean but soft-edged, gentle gradient lighting, fine grain, matte finish, no HDR clarity and no hard commercial packshot sheen. COLOUR AND VALUE: Green throughout — the glass body glows a translucent sage-to-jade (#8FBE8A through #4E8B62) where light passes through it, the brightest points are the brushed metal cap and the glass shoulder at no more than #E4EFE2, and the reflective surface and outer corners drop to a deep green-black #071612; the backdrop is a smooth green gradient from about #4C7A5E behind the bottle to #0C2A21 at the edges, with no seam and no hotspot. EDGES: The backdrop gradient runs right to all four edges with no vignette, border or visible sweep line, so the frame can be re-cropped tighter and darker and still match the page; keep generous empty gradient above, below and either side of the bottle, and keep the lower fifth quiet and dark so a caption can sit over it. SUBJECT: A single upright supplement bottle in green-tinted glass with a wide ribbed silver-metal screw cap, apothecary-proportioned, lit from behind so the glass glows from within and the contents read as a soft mass rather than countable pills; the label area is completely blank, with no lettering, printing or marks of any kind; a soft mirrored reflection of the bottle sits on the dark surface beneath it. COMPOSITION: Bottle dead centre and upright, occupying about 55% of the frame height, with clear gradient space all around it; nothing else in frame. AVOID: supermarket packshot on pure white, drop shadows, hard specular strip-light reflections, water splashes or droplets, floating or scattered pills, amber pharmacy glass, gold or copper accents, sunburst flare, extreme shallow depth of field with bokeh balls, any readable label, box or packaging. Output a square frame, 1024x1024. No text, no lettering, no logos, no watermarks, no UI.
---
## Sentry — AI security landing page
- Page: https://ai-taste-vault.vercel.app/r/sentry-ai-security-landing-page
- Original: https://dribbble.com/shots/27590903-AI-Cybersecurity-SaaS-Website-Landing-Page-UI-Design
- Type: Landing page
- Tags: AI, Dashboard UI, Feature grid, Full bleed, Hero, High contrast, Logo wall, Nav bar, Neon accent, Technical / Developer
- Palette: #EAEDF5, #020304, #233EE9, #4877FE, #88B8FC
- Captured: 2026-09-18
- Rebuilt with: Claude Code · Opus 5.5 · Extra high · skills: frontend-design, emil-design-eng, transitions-dev, gsap, humanizer
- Rebuild: https://ai-taste-vault.vercel.app/v/demo/sentry-ai-security-landing-page/index.html
### Prompt — Rebuild
_rebuild · html-css · opus_
#### Isometric blue security landing page
A 1440px, full-bleed landing page for a technical AI product. It opens on a black hero that becomes an electric royal-blue glow and then dissolves into a pale, cool lavender-grey page. The headlines are large, light-weight and very tightly tracked. The page uses isometric line illustrations and a layered analytics dashboard composite. It uses one accent hue family, blue, in three steps.
##### Structure
- Canvas: 1440px, full bleed. Page gutter: 64px left and right, so content is 1312px wide. Grid: 12 columns with 24px gutters (each column ≈ 87px).
- Two surface zones: a dark backdrop behind sections 1–3, then a gradient that dissolves into a pale page for sections 4–6. There is no hard seam between them.
1. **Nav bar.** Fixed, inset 8px from the top, left and right edges, 60px tall. It is a bordered bar split into three equal cells by 1px vertical dividers:
- Logo cell: left-aligned.
- Link cell: 4 links, centred. The first two have a small chevron.
- Action cell: two buttons, right-aligned.
2. **Hero.**
- Text column: columns 1–6, max 760px wide, left-aligned. It holds a row of two status chips, the H1 (two lines), a one-line lead and a split CTA button.
- Right side: a large isometric illustration in columns 7–12. It bleeds off the right edge and down into section 3.
3. **Logo strip.** Sits on the blue part of the hero backdrop, left-aligned. It has a small uppercase label, then one row of 3–5 white wordmarks.
4. **Feature section.**
- H2 on two lines. Line 1 is near-black; line 2 is a pale-blue gradient.
- One-line lead.
- A 4-cell grid. Each cell has a faint index label, an isometric line illustration, a title and a description.
- A text link with an arrow below the grid.
5. **Signal section.**
- H2 on two lines. Line 1 is near-black; line 2 is a saturated-blue gradient.
- One-line lead, then a text link with an arrow.
- A dashboard composite:
- A wide, faint tray on the left holding two analytics cards: a heatmap card and a funnel/stream-chart card.
- A taller white "digest" card overlapping the tray's right end, sitting above it.
6. **Footer** (inferred; the capture ends inside section 5):
- 1px hairline on top.
- Wordmark on the left, and 3 short link columns (4 links each) in columns 7–12.
- A 12px legal row 48px below.
- Padding: 64px top and bottom.
##### Scroll map
Viewport is 1440×900. No motion capture exists, so all heights are read off the still (inferred). Nothing pins or stacks, so the scroll each section consumes equals its height.
1. Nav: 60px (0.07 vh). Fixed overlay, consumes 0. Static.
2. Hero: 0–880px. 880px, 0.98 vh, consumes 880. Entrance.
3. Logo strip: 880–1040px. 160px, 0.18 vh, consumes 160. Entrance.
4. Features: 1040–2060px. 1020px, 1.13 vh, consumes 1020. Entrance.
5. Signal and dashboard: 2060–2960px. 900px, 1.0 vh, consumes 900. Entrance.
6. Footer: 2960–3200px. About 240px, 0.27 vh. Static (inferred).
**Total: about 3200px (about 3.6 viewports).** About 2960px of that is visible in the capture.
##### Spacing
**Nav**
- Inset 8px from the top, left and right edges. Height 60px.
- Cell padding: 0 16px. Links are 32px apart.
- Buttons are 44px tall, 8px apart, and 8px from the right divider/edge.
**Hero** (y values measured from the top of the page)
- Chips start at y≈148px. They are 26px tall and 8px apart.
- Gaps: chips → H1 32px; H1 → lead 36px; lead → CTA 56px.
- The CTA ends at about y=550px. Below that, the left half stays empty.
- The illustration fills x≈590–1440 and y≈270–915.
**Logo strip**
- The label sits at y≈910px. Label → logos: 24px.
- Logos are 28px tall with 64px gaps. Bottom padding: 72px.
**Features**
- Padding-top 96px. Gaps: H2 → lead 28px; lead → grid 72px.
- The grid breaks wider than the gutter: it sits 32px from each viewport edge (1376px wide). It has 4 equal cells of about 341px with 4px gaps.
- Each cell is 520px tall. Padding: 24px top, 32px sides, 48px bottom. This puts the first cell's text on the 64px page gutter.
- Inside a cell: index label → illustration box 24px. The illustration box is 276px tall. Illustration → title 44px; title → description 10px.
- Grid → text link: 48px. Section padding-bottom: 72px.
**Signal**
- Padding-top 80px. Gaps: H2 → lead 28px; lead → link 32px; link → tray 80px.
- Tray:
- Starts at x=64 and is about 824px wide and 328px tall.
- Inner padding 12px; 12px gap between its two cards.
- Its bottom 44px is a caption/legend strip.
- Tray cards: each about 422px wide and 244px tall, with 16px padding.
- Digest card:
- About 454×484px. Its left edge overlaps the tray's right edge by about 8px, and its right edge sits about 103px from the viewport edge.
- Its top aligns with the text-link row (about 110px above the tray top). Its bottom hangs 40px below the tray.
- Padding 20px; 40px between list items.
- Section padding-bottom: 120px.
**Rhythm**
- About 150px of empty space between the last element of one section and the next H2.
- The heading block is tight (28–32px gaps); the jump to the content block is 72–80px.
##### Type
**Family:** a neutral neo-grotesk with tight letterforms (the Neue Montreal / Aeonik class). Use **Inter Tight** as the free stand-in (Geist is acceptable). Use one family for everything, including uppercase labels. Use tabular numerals in the dashboard. No serif, no mono.
**Body anchor: 17px.**
| Level | × body | px | line-height | tracking | weight | notes |
|---|---|---|---|---|---|---|
| H1 (hero) | 5.2× | 88 | 1.02 | −0.055em | 400 | 2 lines, max 760px. Line 1 ~2 words, line 2 ~3–4 words |
| H2 (sections 4, 5) | 3.8× | 64 | 1.1 | −0.05em | 400 | 2 lines, max 760px. Line 1 ~4 words, line 2 ~2–3 words |
| Lead / body | 1× | 17 | 1.5 | −0.01em | 400 | Single line, max 680px (~75ch) |
| Feature title | 1× | 17 | 1.35 | −0.015em | 500 | 3–5 words |
| Feature description | 0.82× | 14 | 1.45 | 0 | 400 | 3 lines, max 250px (~34ch) |
| Nav wordmark | 1.3× | 22 | 1 | −0.03em | 500 | Paired with a 20px geometric mark |
| Dashboard hero number | 1.3× | 22 | 1.1 | −0.02em | 400 | Tabular |
| Dashboard value | 1.05× | 18 | 1.1 | −0.02em | 400 | Tabular |
| Digest card title | 0.94× | 16 | 1.3 | −0.01em | 500 | 3 words |
| Card title / list-item title | 0.82× | 14 | 1.35 | 0 | 500 | |
| Hero CTA, text links | 0.88× | 15 | 1 | −0.01em | 500 | |
| Nav links, nav buttons | 0.82× | 14 | 1 | 0 | 400 / 500 | |
| Chips, strip label, isometric tags | 0.71× | 12 | 1 | +0.02em | 500 | Uppercase |
| Micro (meta, axis, legend, index labels) | 0.71× | 12 | 1.35 | 0 (index labels +0.04em uppercase) | 400 | |
##### Colour
**Palette roles**
| Hex | Role | Where it appears |
|---|---|---|
| **#EAEDF5** | Dominant surface, about 65% of the page | Everything below the hero dissolve (sections 4–6) |
| **#020304** | Near-black | Hero base; nav bar fill; H2 line 1 and all dark text on the light page; % pills in the stream chart (at 90%) |
| **#233EE9** | Royal blue, deep accent | Core of the hero glow; slab side faces; CTA arrow segment; end stop of section 5's H2 gradient; strongest heatmap cells; stream-chart core |
| **#4877FE** | Primary accent | CTA main fill; start stop of section 5's H2 gradient; end stop of section 4's H2 gradient; blue paths and dots in line illustrations; mid chart bands |
| **#88B8FC** | Pale accent | Start stop of section 4's H2 gradient; the fringe where the hero dissolves to light; mid heatmap cells; outer chart band; slab edge highlights |
**Derived neutrals**
- #FFFFFF: H1 line 2, logos, "Get demo" button, digest card.
- #C4C8D2: lead text on dark.
- #8C8E96 → #BFC1C8: H1 line 1 silver gradient (horizontal).
- #6B7180: muted text on light.
- #7A8090 / #A4A9B6: secondary and meta text.
- #9AA0AE: line-art strokes.
- #DCE1EC: hairlines on light.
- rgba(255,255,255,0.12): hairlines on dark.
- #1E1F24: "Sign in" button fill.
- #F1F3F8: feature cell tint.
**Status colours:** green #34C77B and red #E5484D. They appear only inside tiny status pills (on 12% tints of themselves) and as the 6px square in the hero chip.
**Where the accent may appear.** Blue appears only in:
- the hero backdrop and illustration,
- the single primary CTA,
- line 2 of each H2,
- small accents inside line illustrations,
- data-viz.
It never appears in body text, the nav, borders, secondary buttons or section fills below the hero.
**Hero backdrop.** One wrapper spans sections 2–3 plus 200px into section 4 (about 1240px tall). It has three layers:
- Base: #020304.
- Glow: radial-gradient(ellipse 70% 60% at 72% 58%, #233EE9 0%, rgba(35,62,233,.85) 35%, transparent 70%).
- Dissolve: linear-gradient(180deg, transparent 0%, transparent 48%, #233EE9 66%, #4877FE 76%, #88B8FC 88%, #EAEDF5 100%).
The result: the top-left stays pure black through the H1, the right side glows blue from about y=250px, and the logo strip sits on a mid blue between #4877FE and #88B8FC.
##### Surface
**Borders**
- 1px everywhere; there are no 2px borders.
- On dark: rgba(255,255,255,0.12). On light: #DCE1EC, or rgba(2,3,4,0.07) for the faintest cells.
**Corner radii**
| Element | Radius |
|---|---|
| Buttons (nav and CTA) | 4px |
| Chips, isometric tags | 2px |
| Feature cells | 4px |
| Tray | 12px |
| Dashboard cards | 8px |
| Digest card | 12px |
| Status and % pills | 999px |
| Heatmap squares | 2px |
**Nav:** filled #020304 with a full 1px border, plus 1px dividers between the three cells.
**Feature cells:** #F1F3F8 at about 70% on the page colour, with a hairline border. They should be barely visible.
**Tray:** rgba(255,255,255,0.45) with a hairline border. Its two cards are rgba(255,255,255,0.8) with hairline borders.
**CTA:** a split button, 52px tall.
- Left segment: gradient from #6A90FF (top) to #4877FE (bottom), with white text.
- Right segment: a 52×52 square in #233EE9 with a white 14px arrow.
- A 1px inner top highlight in rgba(255,255,255,.25).
**Shadows**
- The digest card is the only element with a shadow: 0 1px 2px rgba(2,3,4,.04), 0 24px 48px -12px rgba(35,62,233,.14).
- Glow appears only in the hero illustration (under the slab and on the vertex dots). No other UI element glows.
##### Imagery
**1. Hero isometric scene.** One inline SVG, about 850×650 (about 4:3). Its centre is at about x=1110, y=600 on the page, and it bleeds off the right edge. It uses a true 30° isometric projection.
- **Slab.** A square slab, drawn as a diamond about 420px wide with about 36px of visible thickness.
- Top face: gradient from #4877FE (near corner) to #233EE9 (far corner), with a 1px #88B8FC edge highlight.
- Side faces: #1F36D6 and #1A2EC0.
- A blurred #233EE9 glow at 60% spreads about 120px beneath it.
- Tiny 3px white dots at its top corners.
- **Floating plane.** About 110px above the slab, a matching wireframe diamond (1px white at 70%). 1px dashed vertical lines (white at 35%) join its corners to the slab. A tiny 1px sparkline sits on its surface.
- **Outer plane.** A larger wireframe plane (about 1.6× the slab) at the slab's base, drawn 1px in white at 15%. Extension lines run off-canvas and down into the logo strip.
- **Tags.** Four small rectangular tags with a 1px white 50% border. Each holds a 12px uppercase metric name of 1–2 words and lies flat along an isometric edge:
- the floating plane's top edge,
- the outer plane's right corner,
- the slab's front-left edge,
- the outer plane's lower-left edge.
- **Annotations.** Faint 12px annotations (white at 25%) lie flat along two more edges.
- **Vertex dots.** 3–4 white dots, 6px each, with a 12px white glow, on the outer-plane vertices.
**2. Four feature illustrations.** Isometric line drawings, about 280×240 each, centred in the 276px box.
- Strokes: 1px #9AA0AE. Faces: white or #F4F6FA fills.
- Blue appears only in small accents: dot-matrix patches in #4877FE on top faces, a single connecting path, and 4–6px dots.
- The four subjects:
1. A stack of 5 thin tiles; the top tile carries a blue dotted disc.
2. Three separated tiles at different heights, joined by a blue stepped path, with faint vertical guide lines.
3. A large cube with about 15 small cubes hovering above it in a loose cluster, converging onto one blue dot on the cube's top face.
4. Two small stacked tiles over a base platform, ringed by a thin elliptical orbit that carries two blue dots.
**3. Dashboard composite.** Build it in HTML/SVG, not as an image.
- **Heatmap card**
- Header: a small document icon and a title of 4–5 words. Three faint icon buttons sit top-right.
- Two stat pairs, each a big number with a 12px caption of 3–4 words.
- A heatmap of 7 rows × 28 columns of 10px squares with 3px gaps. Cells use 5 steps (#DDE3F2, #C2D6FB, #88B8FC, #4877FE, #233EE9), weighted so blue forms clusters.
- Day labels on rows 1, 4 and 7; 7 month labels underneath.
- **Stream-chart card**
- Title of 2 words.
- Two stats, each with a 12px label, an 18px value and a 12px green "↑ n% period" delta.
- A horizontal stream chart, about 400×90. It is built from three nested bands, symmetric about a horizontal axis:
- outer band #88B8FC at 35%,
- mid band #4877FE at 70%,
- core #233EE9.
- The bands grow from about 6px thick at the left to about 80px at 60% of the width, then narrow slightly.
- Three 1px white vertical stage markers, each with a dark % pill (22px tall, 12px white text) centred on the axis.
- The chart's right end runs underneath the digest card.
- Stage labels in 12px muted text sit in the tray's caption strip.
- **Tray caption strip:** a faint link on the left and a "less ▪▪▪ more" legend.
- **Digest card**
- Header: a title of 3 words and a date chip (12px, #EEF1F7 fill, 4px radius).
- A hairline, then a 12px muted role label.
- 3 list items. Each has:
- a 14px/500 title of 3–5 words,
- a status pill (red for escalated, green for contained),
- two 12px detail lines of about 8 words each, prefixed with "·",
- a 12px meta line: attribution · relative time.
**4. Logos.** 3–5 monochrome white placeholder wordmarks, 28px tall, left-aligned in a single row.
##### Motion
Nothing on this page is scroll-linked, pinned or stacked. There was no live capture, so every value below is inferred from the stills, and every duration is not measured.
**1. Nav**
- kind: static. The bar is fixed and does not animate (inferred).
- what moves: nothing.
- from → to: none.
- range: none.
- reduced motion: same.
**2. Hero**
- kind: entrance, plus a continuous idle loop (inferred).
- what moves: chips, H1 line 1, H1 line 2, lead, CTA, illustration. In the idle loop: the floating wireframe plane and the vertex dots.
- from → to:
- Text: opacity 0 → 1, translateY 20px → 0.
- Illustration: opacity 0 → 1, translateY 32px → 0, scale 0.97 → 1.
- Idle: the floating plane bobs translateY 0 → −8px → 0, and the vertex dots pulse opacity 0.6 → 1.
- range:
- Plays once on page load, in reading order. The illustration starts with the H1.
- Duration not measured (range 600–900ms). Ease-out (curve not measured). Stagger not measured (range 80–120ms).
- Idle loop period not measured (range 5–7s).
- reduced motion: everything renders in its final state with no idle loop. A plain opacity fade of 200ms or less is allowed.
**3. Logo strip**
- kind: entrance (inferred).
- what moves: the label, then each logo.
- from → to: opacity 0 → 1, translateY 12px → 0.
- range:
- Plays once, when the strip's top reaches 85% of the viewport.
- Duration not measured (range 400–700ms). Ease-out. Stagger not measured (range 60–100ms), left to right.
- reduced motion: shown immediately.
**4. Features**
- kind: entrance (inferred).
- what moves: H2 line 1, H2 line 2, lead, the four cells (left to right), the text link. Inside each cell, the blue accent path/dots.
- from → to:
- Elements: opacity 0 → 1, translateY 24px → 0.
- Blue strokes in each cell: stroke-dashoffset 100% → 0 after the cell lands.
- range:
- Each group plays once, when its top reaches 80% of the viewport.
- Duration not measured (range 500–800ms). Ease-out.
- Cell stagger not measured (range 80–120ms). Stroke draw not measured (range 600–900ms).
- reduced motion: final state, with strokes fully drawn.
**5. Signal and dashboard**
- kind: entrance (inferred).
- what moves: H2 lines, lead, link, tray, digest card, heatmap cells, stream chart.
- from → to:
- Heading group: opacity 0 → 1, translateY 24px → 0.
- Tray: opacity 0 → 1, translateY 32px → 0.
- Digest card: opacity 0 → 1, translateY 48px → 0, starting after the tray.
- Heatmap cells: opacity 0 → 1, sweeping column by column from left to right.
- Stream chart: clip-path inset(0 100% 0 0) → inset(0 0 0 0).
- range:
- Heading plays once at 80% of the viewport. The composite triggers once, when the tray's top reaches 80%.
- Tray duration not measured (range 600–800ms).
- Digest card delay not measured (range 120–200ms after the tray).
- Heatmap sweep not measured (range 400–700ms total).
- Chart reveal not measured (range 700–1000ms). Ease-out.
- reduced motion: all elements shown fully drawn, with no sweep or reveal.
**6. Footer**
- kind: static.
- what moves: nothing.
- from → to: none.
- range: none.
- reduced motion: same.
##### Interaction transitions
These are separate from the scroll choreography. Durations were not measured; use 150–250ms, ease-out.
- **Nav links:** hover changes the colour from #A5A9B4 to #FFFFFF.
- **Nav chevron items:** open a dropdown panel that fades in and drops 4px (#0B0C10 fill, hairline border, 8px radius). The chevron rotates 180°. Closing reverses it.
- **"Sign in":** hover changes the fill from #1E1F24 to #2A2C33.
- **"Get demo":** hover changes the fill from #FFFFFF to #DDE3F2.
- **Hero CTA:**
- Hover: the left segment brightens by about 6% and the arrow shifts 3px right.
- Press: scale 0.98.
- **Text links:** on hover the arrow translates 4px right and the text is underlined 1px, offset 4px.
- **Feature cells:** on hover the border darkens to #CDD3E0 and the blue accents go to full opacity from 80%. Nothing lifts.
- **Heatmap cells:** on hover show a dark tooltip (12px text, 4px radius) holding a count and a date.
##### Responsive (below 640px)
- **Gutter:** 20px.
- **Nav:** becomes two cells: logo, and "Get demo" plus a menu button. The link cell is dropped into a full-screen menu. Inset stays 8px; height becomes 56px.
- **Hero:**
- Text stacks first. H1 drops to 48px (2.8×) at line-height 1.05. Chips may wrap.
- The illustration moves below the CTA at 100% width (scaled to about 360px wide), no longer bleeding off the edge.
- Hero height becomes auto.
- **Logo strip:** logos wrap to 2 rows at 22px tall, 32px apart.
- **Feature section:**
- H2 drops to 40px (2.35×).
- The grid becomes 1 column (2×2 between 640 and 1024px) and moves back inside the 20px gutter.
- Each cell becomes auto height, with the illustration box at 220px.
- **Dashboard:**
- The overlap is dropped. The digest card stacks below the tray at full width.
- The two tray cards stack.
- The heatmap crops to its last 14 columns.
- The stream chart goes full width.
- **Rhythm:** section spacing shrinks from about 150px to 96px.
##### Don'ts
- **Headlines:**
- Don't bold them. They are weight 400 with very tight negative tracking, and at default tracking the page looks generic.
- Don't centre the hero. Text is left-aligned and the illustration sits right.
- Don't put eyebrow labels ("Features", "How it works") above the H2s. The only small uppercase labels are the hero chips, the logo-strip label and the cell index labels.
- Don't apply gradient text anywhere except line 2 of the H2s and the silver H1 line 1. Never use rainbow or purple-to-pink gradients.
- **Colour:**
- Don't make the whole page dark. It turns from black to pale lavender at the logo strip, and it does so through a soft gradient, never a hard edge or a divider.
- Don't introduce a second accent hue: no violet, cyan, teal or neon green glows. The "neon" is only electric royal blue; green and red live only in tiny status pills.
- Don't use pure white as the page background below the hero. It is #EAEDF5; white is reserved for the digest card and dashboard surfaces.
- Don't put a blue frame or mat around the page. It is full bleed.
- **Surfaces and buttons:**
- Don't use rounded pill buttons or large radii. Buttons are 4px, and the CTA is a split two-segment button.
- Don't add glassmorphism, backdrop blur, or glowing borders on cards.
- Don't drop-shadow every card. Only the digest card has a shadow.
- Don't make the feature cells white cards with shadows. They are barely-tinted panels with hairlines, butted together with 4px gaps.
- **Illustration and imagery:**
- Don't replace the isometric SVG with a 3D render, stock photo or abstract blob. It is a precise wireframe plus one glossy slab.
- Don't use icon-in-circle feature items or emoji. Each cell carries an isometric line drawing with sparse blue accents.
- Don't lay out the logo wall as a centred grey grid of 6–8 logos. It is 3–5 white wordmarks, left-aligned, on the blue.
- **Dashboard:**
- Don't use chart-library defaults: no gridlines, legends in boxes, multicolour series or rounded bar charts.
- Data-viz is monochrome blue in three steps, with dark % pills.
- Don't flatten the composite into a neat side-by-side row. The digest card must overlap the tray and sit higher and lower than it.
---
## Golf club landing hero
- Page: https://ai-taste-vault.vercel.app/r/golf-club-landing-hero
- Original: https://dribbble.com/shots/27282087-Golf-Club-Landing-Page-Design
- Type: Section
- Tags: Editorial, Full bleed, Hero, Luxury, Minimal, Muted palette, Nav bar
- Palette: #D0CDC4, #54673A, #161915
- Captured: 2026-09-18
- Rebuilt with: Claude Code · Opus 5.5 · Extra high · skills: frontend-design, emil-design-eng, transitions-dev, humanizer, gsap
- Rebuild: https://ai-taste-vault.vercel.app/v/demo/golf-club-landing-hero/index.html
### Prompt — Rebuild
_rebuild · html-css · opus_
#### Full-bleed editorial hero — photographic stage with centred serif display line
A single-viewport hero section for a members-club / heritage-sport site. One uncropped photograph fills the entire viewport; a transparent three-zone nav floats on top of it; a large high-contrast serif headline sits in the lower third, centred, deliberately overlapping the people in the photo. Nothing is boxed, nothing is rounded, nothing has a shadow. The whole effect depends on restraint: one image, one type moment, no UI chrome.
The source capture shows this design inset on a flat warm-grey mat. That mat is the photograph's framing, not part of the design — build the page full-bleed, edge to edge, with no outer margin and no rounded page corners.
##### Structure
- Design viewport: **1440 × 810** (16:9). Hero is `100vh` with `min-height: 720px`.
- Container: the **media is full-bleed** (100vw, no max-width). The **text layer** is a centred container, `max-width: 1080px` (75% of 1440), with 40px side gutters. The **nav** is also full-bleed with 40px side gutters — it is not inside the 1080px container.
- Column structure: no grid columns are visible. The hero is a three-zone flex nav (left / centre / right, `justify-content: space-between`) over a single centred text stack. Everything hangs off one vertical centre axis.
Sections, top to bottom:
1. **Nav overlay** — fixed/absolute over the hero, transparent, no background, no rule. Left: 5 uppercase links. Centre: serif wordmark lockup (wordmark + superscript ® + a small uppercase tagline line beneath). Right: a text-only CTA and a two-line menu glyph.
2. **Hero media stage** — the full-bleed photograph, `object-fit: cover`, plus two gradient scrims (top and bottom).
3. **Hero text block** — bottom-anchored inside section 2, centred: display headline (one line at 1440) + a narrow two-line standfirst under it.
Section 4 (the first content section below the fold) is out of scope for this artifact; it begins at exactly `100vh` with no divider, no shape, no curve.
##### Scroll map
Viewport reference 1440 × 810.
| # | Section | Height | Viewports | Scroll consumed | Kind |
|---|---------|--------|-----------|-----------------|------|
| 1 | Nav overlay | 82px (visual band; 0 in flow) | 0.10 | 0 — overlays section 2 | static (position fixed) |
| 2 | Hero media stage | 810px | 1.00 | 810px | scroll-linked (parallax only, no pin) |
| 3 | Hero text block | 226px (inside 2) | 0.28 | 0 — child of 2 | entrance on load, then scroll-linked exit |
**Total artifact height: 810px = 1.00 viewport.** Nothing pins, nothing stacks, the hero consumes exactly its own height. If you add content below, the hero must scroll away normally — do not sticky-pin it.
##### Spacing
- Side gutters: **40px** at 1440 (nav and text layer both). 32px at 1024, 20px below 640.
- Nav: `padding-top: 32px`. Left links, wordmark and right cluster are baseline-aligned to the **wordmark's line**, not to the lockup's box — the tagline hangs 10px below that shared line.
- Gap between nav links: **28px**. Gap between CTA text and menu glyph: **32px**.
- Menu glyph: 30px wide, 2 rules, 1.5px thick, 8px apart.
- Hero text block: anchored to the bottom with **80px** bottom padding measured to the last line of the standfirst.
- Headline → standfirst gap: **32px** (optically ~64px baseline to baseline).
- Standfirst measure: `max-width: 300px`, centred — it is deliberately much narrower than the headline.
- Rhythm for sections below the fold (so the hero reads as part of a system): 120px top/bottom section padding at 1440, 80px at 1024, 56px below 640; 24px baseline gap inside text stacks.
##### Type
Two families only.
- **Display / wordmark:** high-contrast transitional-to-Didone **serif display** — vertical stress, sharp thin strokes, flat bracketed serifs, generous x-height. Free stand-ins: **Bodoni Moda**, **Playfair Display**, or **Instrument Serif** for a tighter contemporary cut.
- **UI / running text:** neutral **grotesk**, no quirks, no geometric circles. Free stand-in: **Inter** (or Archivo).
Body anchor: **17px at 1440**, grotesk, regular.
| Level | Ratio to body | Size | Line-height | Letter-spacing | Weight | Max measure |
|---|---|---|---|---|---|---|
| Hero headline (3) | 7.0× | **119px** (use 120) | 0.95 | −0.01em | 400 serif | ~24ch, one line at 1440 |
| H2 (below fold) | 3.2× | 54px | 1.08 | −0.01em | 400 serif | 20ch |
| H3 | 1.65× | 28px | 1.25 | 0 | 400 serif | 28ch |
| Body | 1.0× | **17px** | 1.55 | 0 | 400 grotesk | 68ch |
| Hero standfirst (3) | 0.94× | 16px | 1.50 | 0 | 400 grotesk | 34ch (300px), centred |
| Wordmark (1) | 1.4× | 24px | 1.0 | 0.06em | 500 serif, uppercase | — |
| Nav link (1) | 0.82× | 14px | 1.0 | 0.08em | 500 grotesk, uppercase | — |
| CTA text (1) | 0.82× | 14px | 1.0 | 0.10em | 600 grotesk, uppercase | — |
| Tagline under wordmark (1) | 0.7× | 12px | 1.0 | 0.16em | 500 grotesk, uppercase | — |
| Caption / meta | 0.76× | 13px | 1.4 | 0.02em | 400 grotesk | 40ch |
The ® is set at 0.35em, raised to align its top with the wordmark's cap line.
Placeholder copy by role: nav — five single-word links (5–10 chars each); wordmark — one word, 8–11 chars; tagline — "EST. YYYY — TWO WORDS"; CTA — 2 words; headline — **5 words on one line**, sentence case, no punctuation; standfirst — two sentences, ~36 characters each, breaking onto exactly two lines.
##### Colour
Four values. The photograph supplies most of the colour; the UI palette is almost monochrome.
- **`#161915` — near-black forest.** The dominant dark. It is the deep shade of the treeline that fills the top ~18% of the photo, and it is the page's true black for text on light surfaces and for dark sections below the fold.
- **`#54673A` — fairway olive.** The **single accent** and the only saturated colour in the system. In the hero it exists *only inside the photograph* (grass, knitwear) — no UI element on the hero is green. Below the fold the accent is allowed on: the active/hover nav underline, a small filled CTA, rules and bullets, and one dark-olive section background. Never on hero text, never as a hero overlay.
- **`#D0CDC4` — warm bone.** Light neutral surface for sections below the hero, and the muted tint for secondary text on dark. (The flat mat in the reference capture happens to be this colour; that is coincidence — treat bone as a page surface, not as a frame.)
- **`#F4F1EA` — warm off-white.** All hero text. Warm, never `#FFFFFF`.
Scrims over the photograph, both `#161915` based:
- Top: `linear-gradient(to bottom, rgba(22,25,21,0.45) 0%, rgba(22,25,21,0) 22%)` — exists only so the nav stays legible.
- Bottom: `linear-gradient(to top, rgba(22,25,21,0.28) 0%, rgba(22,25,21,0) 45%)`.
Keep both subtle. The grass behind the headline stays clearly green and clearly lit; if the image reads as darkened, the scrims are too strong.
##### Surface
- Borders: **none** on the hero. Below the fold, hairlines are `1px solid rgba(22,25,21,0.14)` on bone, `1px solid rgba(244,241,234,0.18)` on dark.
- Corner radii: **0** everywhere — page, images, buttons, inputs. No rounded photo corners.
- Shadows: **none**. No drop shadow on the headline, no text-shadow for legibility — the scrims do that job.
- No blur, no glass, no backdrop-filter anywhere.
##### Imagery
One image, and it carries the whole section.
**Hero photograph — 16:9, full-bleed, `object-fit: cover`, focal point at 50% 45%.**
Two people walking across a mown fairway toward the camera and slightly to the right, each carrying a club balanced over one shoulder, mid-stride, in the middle distance — they occupy roughly the central 45% of the frame width and their heads sit at about 32% from the top. Behind them, a low mown ridge and then a dense unlit treeline filling the top fifth of the frame; a bare reddish-earth bank at the right edge; faint mower stripes in the turf. Knitwear and collared shirts, nothing branded, nothing posed for camera — they are mid-conversation, not looking at the lens.
Treatment: overcast or late soft light, no direct sun, no highlight bloom. Greens pulled toward olive rather than emerald, contrast held low in the midtones, shadows deep but not crushed, a fine even grain across the frame. No HDR clarity, no vignette, no colour-grade split-toning.
Composition rule that must survive the rebuild: **the headline crosses the two figures at roughly thigh height.** Type in front of people, not beside them and not above them. The bottom crop sits just below their feet, so the ground line is visible and the frame does not feel truncated.
##### Motion
No live-page motion capture was supplied with this reference. Every value below is **(inferred)** from the still; exact timings, easings and stagger were **not measured**, so they are given as ranges. Do not substitute a spring, lerp or duration parameter that is not in this list.
**1 — Nav overlay**
- kind — static *(inferred)*
- what moves — nothing. The nav is fixed over the hero and does not fade, shrink, collapse, or gain a background on scroll while the hero is on screen.
- from → to — n/a.
- range — n/a.
- reduced motion — unchanged; it was already static.
**2 — Hero media stage**
- kind — scroll-linked *(inferred)*; reverses on the way back up.
- what moves — the photograph only (the `![]()
` inside an `overflow: hidden` stage). The scrims do not move.
- from → to — image `translateY: 0 → +60px` and `scale: 1.06 → 1.00`, i.e. the image starts slightly oversized so the parallax never exposes an edge. Total travel is ~7% of section height; **do not exceed 8%**.
- range — from page scroll 0 until the hero's bottom edge reaches the top of the viewport (0 → 810px of scroll). Linear mapping to scroll position, no easing curve, no smoothing lag.
- reduced motion — no parallax; the image is static at `scale: 1, translateY: 0`.
**3 — Hero text block**
- kind — **entrance** on load (plays once), then **scroll-linked** exit *(both inferred)*.
- what moves — headline and standfirst, as two separate elements. The headline animates as one block, not per character and not per word.
- from → to — entrance: headline `opacity 0 → 1`, `translateY +28px → 0`; standfirst `opacity 0 → 1`, `translateY +16px → 0`. Exit: the whole block `opacity 1 → 0`, `translateY 0 → −40px`.
- range — entrance trigger: on load, after the hero image's `decode()` resolves, not on a scroll threshold (the block is above the fold). Duration **not measured** — use 700–900ms; easing **not measured** — use a standard ease-out (`cubic-bezier(0.22, 1, 0.36, 1)`); stagger **not measured** — use 100–160ms, headline first. Exit range: scroll-linked from scroll position 400px until 810px (the last half of the hero's travel).
- reduced motion — no translate and no exit fade; both elements render at final position, `opacity 0 → 1` over 200ms or instantly.
###### Interaction transitions
These are hover/press/open states, not part of the scroll choreography above.
- Nav link hover: a 1px underline in `#F4F1EA` grows from left, `scaleX 0 → 1`, 180ms ease-out; text colour unchanged. No opacity dimming of the siblings.
- CTA hover: letter-spacing `0.10em → 0.14em`, 200ms ease-out, plus the same 1px underline. No fill appears.
- Menu glyph hover: the two rules converge by 2px, 160ms.
- Menu open: full-viewport `#161915` panel wipes down via `clip-path: inset(0 0 100% 0) → inset(0 0 0 0)`, 420–520ms ease-out; menu items fade up 16px with 60ms stagger; glyph crossfades to an ×.
- Menu close: reverse, ~320ms.
- Press on any nav item: `opacity → 0.7`, 80ms.
- Focus-visible: 2px `#F4F1EA` outline, 3px offset, square corners.
##### Responsive
Below 640px (reference 390 × 844):
- Nav: the five links and the CTA move **into** the menu panel. Only the wordmark lockup (centred) and the menu glyph (right) remain. Keep the tagline line under the wordmark; drop it only below 360px. Wordmark 19px, tagline 11px, gutters 20px, padding-top 24px.
- Hero: `height: 100svh`. Re-crop the photograph to portrait (4:5 or taller) with focal point on the two figures — do not letterbox the 16:9 crop and do not shrink the figures to specks.
- Headline: 48px (`~12.5vw`), line-height 1.02, breaking onto **three** lines, still centred.
- Standfirst: 16px, `max-width: 88%`, still centred, still two or three short lines.
- Text block bottom padding: 48px.
- Bottom scrim strengthens to `rgba(22,25,21,0.38)` because the portrait crop puts brighter turf behind the type.
- Nothing is dropped except the inline nav links and CTA. The parallax is disabled below 768px.
##### Don'ts
- **Don't put the headline in a card, panel, or tinted box**, and don't flood the photo with a 40%-black overlay to "fix" contrast. Two soft directional gradients, nothing else.
- **Don't vertically centre the text.** It lives in the lower third, bottom-anchored. Centring it kills the composition.
- **Don't move the headline off the people.** The overlap of type and figures is the idea. Left-aligning it to the gutter, or floating it in empty sky, is the most likely wrong turn.
- **Don't uppercase or letterspace the headline.** Sentence case, tight tracking, one line at desktop. The uppercase-with-wide-tracking treatment belongs only to the 12–14px labels.
- **Don't use a geometric sans (Poppins, Montserrat) for the headline**, and don't use a serif for nav links. The whole system is one high-contrast serif against one neutral grotesk.
- **Don't make the nav sticky-with-a-background.** No blurred pill, no bar that fades in a solid or translucent panel on scroll, no shrinking logo. It is transparent and static over the photograph.
- **Don't delete the menu glyph because there are already visible links.** The hamburger and the inline nav coexist on desktop — the glyph opens an overflow panel. Hiding it above 640px breaks the layout's right-hand balance.
- **Don't turn the CTA into a filled green button.** It is text-only, 14px, uppercase, same colour as the nav links. The accent green never appears as a hero UI element.
- **Don't saturate the photo** toward vivid golf-course green, and don't add clarity/HDR. Muted olive, soft light, visible grain. A punchy image makes it look like a resort ad rather than an editorial page.
- **Don't add a scroll indicator** — no bouncing chevron, no vertical "SCROLL" word, no mouse glyph. There is none, and adding one crowds the bottom margin the standfirst depends on.
- **Don't round anything or add shadows**, including a text-shadow under the headline.
- **Don't animate the headline per character or per word**, and no blur-in, no 3D rotation, no mask-reveal that wipes letter by letter. One block, opacity and a short lift.
- **Don't pin the hero.** It scrolls away at 1:1; only the image inside it moves, and by no more than 8%.
- **Don't widen the standfirst** to match the headline. Its narrowness — ~300px under a ~1080px headline — is a deliberate proportion.
- **Don't use pure white or pure black.** `#F4F1EA` and `#161915`.
- **Don't reproduce the reference's flat grey surround** as a page background, outer margin, or rounded frame. The page is full-bleed.
### Imagery — already generated
These pictures were made for this design and are hosted at the URLs below.
Use them as the `src` exactly as written, and keep the alt text. Do not
generate your own, do not reach for a stock library or a placeholder
service, and do not feed the Imagery section above back to an image model —
that work is done. Size and crop them with CSS (`object-fit: cover`) rather
than assuming their dimensions, and download them into the project if you
would rather not hotlink.
- https://ai-taste-vault.vercel.app/v/demo/golf-club-landing-hero/images/01-hero-fairway-walkers.webp — Two golfers walking across a mown fairway carrying clubs, a dense dark treeline behind them
### Image prompts
What each picture above was generated from, for anyone changing one.
**Two golfers walking across a mown fairway carrying clubs, a dense dark treeline behind them** (`01-hero-fairway-walkers`)
MEDIUM AND FINISH: A real 35mm colour photograph on overcast daylight, shot at a mild telephoto from a standing eye-level position, everything from the figures to the treeline acceptably sharp — no shallow depth of field. Flat soft light with no direct sun anywhere in the scene, low midtone contrast, muted film-like colour, a fine even grain across the whole frame, no HDR clarity, no sharpening halo, no colour grade or split-tone. COLOUR AND VALUE: The whole picture sits in a narrow muted band. The turf that fills most of the frame is a desaturated olive green between #4E6034 and #6E7C4E — never emerald, never yellow-bright. The darkest thing in the frame is the unlit conifer treeline along the top, around #0F120D to #1A2116; nothing outside that treeline is darker than about #2A3324. The lightest thing in the frame is the woman's cream knitwear and the man's pale trousers, around #E3DFD4 to #EBE8DF — there are no blown white highlights and no specular glints anywhere. Bare earth at the right side is a dull reddish brown near #6E4736, not orange. The man's sweater is a deep muted forest green near #1D3A2F. No sky is visible. EDGES: The image is used full-bleed, edge to edge, with type set across the lower middle, so all four edges must continue the scene with no vignette, no darkened corners, no blur at the borders and no frame. The top fifth of the frame is filled solidly by the dark treeline; the bottom edge crops just below the walkers' feet so the ground line is still visible and the frame does not feel truncated. SUBJECT: Two people walking across a mown golf fairway toward the camera and slightly to the right, mid-stride, mid-conversation, neither looking at the lens. On the left, a man in a dark forest-green V-neck cricket-style knit over a white collared shirt and pale cream trousers, a golf club balanced horizontally across both shoulders behind his neck with his hands resting up on the shaft, his face turned away to his left. On the right and half a pace behind, a woman with dark shoulder-length curly hair in a cream sleeveless knit vest over a white shirt with a small patterned neckerchief and a light sand pleated skirt, a club held down in one hand, her eyes on the ground. Nothing branded, nothing posed. COMPOSITION: The two figures stand in the middle distance and together occupy roughly the central 45% of the frame width, full-length, with their heads about a third of the way down from the top. Behind them a low mown grass ridge, then the dense treeline; faint diagonal mower stripes run through the turf; a bare reddish-earth bank cuts in at the right edge. Keep the open turf to the left and right of the figures plain and quiet — no bunkers, flags, carts, bags, buildings, spectators or clutter — because a large headline is laid over the figures at thigh height. AVOID: direct sunlight, sun flare or sunburst, golden hour warmth, blown highlights, black vignette, dramatic or cloudy sky, saturated travel-brochure or resort-advert greens, HDR or clarity processing, heavy contrast, bokeh or background blur, tilt-shift, people smiling at the camera or posing, visible branding, logos or sponsor marks, watermarks. Output a wide 16:9 landscape frame, 1536x864. No text, no lettering, no logos, no watermarks, no UI.
---
## Imagio AI — About page
- Page: https://ai-taste-vault.vercel.app/r/imagio-ai-about-page
- Original: https://dribbble.com/shots/27550733-Imagio-Al-Image-Generator-SaaS-About-Page
- Type: Landing page
- Tags: AI, CTA band, Editorial, Hero, High contrast, Light mode, Logo wall, Stats band, Team, Testimonials
- Palette: #FAF2EA, #2B1609, #6595A4, #84B5E4, #F4B996
- Captured: 2026-09-18
- Rebuilt with: Claude Code · Opus 5.5 · High · skills: frontend-design, emil-design-eng, transitions-dev, gsap, humanizer
- Rebuild: https://ai-taste-vault.vercel.app/v/demo/imagio-ai-about-page/index.html
### Prompt — Rebuild
_rebuild · html-css · opus_
#### Warm editorial about page: cream, espresso and serif
Build a long about page for an AI image-generation product. It has a light cream surface, espresso-brown type and a single dark band. Headlines are in a soft serif and everything else is in a quiet grotesk. Photography supplies all the saturated colour; the UI stays almost monochrome. It reads like a magazine spread: hanging first-line indents, stepped stat cards, a curved photo ribbon and a fan of image cards that tucks behind the footer.
##### Structure
- Page width 1440. Content container 1320 max, 60px side gutters. Some content blocks are narrower and noted below.
- The grid is a 12-column grid with a 24px gutter. Most sections use 6/6 or 5/7 splits.
- The page is full-bleed. Only section 5 changes background colour.
Sections, top to bottom:
1. **Nav.** A floating bar that overlays the top of the hero. It is centred, about 820px wide and 56px tall, with a transparent background.
- Left: a "Menu" text button with a small grid or hamburger glyph.
- Centre: logo mark plus wordmark.
- Right: a small dark pill CTA, "Get started" style, 3–4 words.
2. **Hero.** Centred text on cream.
- Eyebrow pill (1–2 words, uppercase).
- Serif headline, 6–8 words on two lines.
- Two-line sub-paragraph, about 22 words, centred, max 560px wide.
3. **Photo ribbon with stepped stats card.** A full-bleed abstract photo, masked so both its top and bottom edges are wide, shallow arcs that sag toward the centre (a smile-shaped ribbon). The cream above and below meets it on those curves.
- The ribbon is about 900px tall at the centre.
- A stats card, 1160px wide, sits centred on the photo and starts about 120px below the ribbon's top edge.
- The card is three stacked horizontal rows of about 150px each. They touch, with no gap between them.
- **Row 1:** dark espresso fill. Large numeral (e.g. "10K+") at left, a 3-line micro-description, a small tag pill (1 word) and a logo lockup at top-right in cream.
- **Row 2:** pale peach fill. Same layout.
- **Row 3:** cream fill. Same layout.
- The content stair-steps right: row 2's numeral starts about 90px further right than row 1's, and row 3's about 90px further again. All rows share the right edge.
- Only the outer corners of the card are rounded.
4. **Mission and vision.** An editorial zig-zag.
- **Header row.** Serif H2 on the left. The first 2 words are espresso and the last 2 words are a pale muted beige ("Our mission" + muted "and vision"). On the far right is a small pager reading "01 / 02", with the second number muted.
- **Row A.**
- Left column (6 cols): a serif lead paragraph, 3–4 lines and about 35 words. Its first line has a text-indent of about 120px.
- Under that, about 220px lower, a large light numeral ("80x" style).
- Under the numeral, a 2-line caption, max 300px, with a 1px left rule.
- Right column (5 cols, right-aligned): a photo at 1.18:1 with a 16px radius.
- **Row B** mirrors Row A.
- Left column (5 cols): a photo at about 1.18:1.
- Right column (6 cols): a serif lead paragraph whose first line is indented about 240px.
- Then, about 220px lower, a numeral ("70x" style) and a ruled caption.
5. **Values.** A full-bleed dark espresso band with all type in cream. 6/6 split, 48px gap.
- **Left column, in order:**
- Eyebrow pill, dark variant.
- Serif H2 on two lines (3 + 3 words).
- 2-line small body, max 420px.
- About 120px lower, a raised card in lighter brown, about 400px tall, 24px padding.
- **Inside the raised card, in order:**
- A row of 4 overlapping round avatars, 32px each, overlapping by -10px.
- 5 peach stars and a tiny label beside the avatars.
- A 3-line quote, about 40 words, in 17px sans.
- A hairline divider.
- Two stats side by side ("50K+" / "10M+"), each with a 2-line micro-label.
- A 36px dark square icon button at bottom-right.
- **Right column:** 3 stacked outline cards, gap 16px, each about 230px tall, padding 28px. Each card has a peach line icon (24px) top-left, a serif title (3 words) about 60px lower, and a 2-line small description in cream at 60% opacity.
6. **Team.**
- Centred header: eyebrow pill, serif H2 (4 words, one line) and a 2-line sub, max 520px.
- Below the header is a horizontal carousel of portrait cards, 316px wide with a 20px gap.
- The track starts at the container's left edge and bleeds off the right edge of the viewport, so a 5th card is cut off.
- Each card has a white fill, an 8px inner padding and a 16px radius. It contains:
- A photo at about 1:0.95 with a 12px radius.
- The name (15px, weight 500).
- The role (13px, muted, prefixed with an em dash).
- A 32px dark square LinkedIn-style icon button at bottom-right.
- The 2nd and 4th cards' photos are about 40px taller, so the name rows alternate heights (inferred).
- About 64px below the carousel, a centred small dark pill button ("Join our team" + arrow).
7. **Trusted brands and testimonial.**
- **Header row, split.** Left: eyebrow pill, then a serif H2 (4 words, one line). Right: a 2-line small paragraph, max 340px, aligned to the H2 baseline.
- **Logo grid.** 5 columns × 2 rows of rounded white tiles, 96px tall, gap 16px. Each tile holds a single dark monochrome placeholder logo, centred. The first tile is shown in its active state: a 1.5px espresso border.
- **Testimonial card,** 48px below the grid, full container width. White fill, 360px tall, 20px radius, overflow hidden.
- Left: a 440px-wide photo, full card height.
- Right, padding 48px: a large pale peach quote glyph, a serif quote (3 lines, about 30 words), and an attribution line (em dash, name, role) in 13px.
- A faded placeholder logo sits at bottom-right.
8. **CTA with image fan.**
- Centred: serif H2 (5 words, one line), a 1-line sub, and a dark pill button with an arrow.
- About 70px below the button is a fan of 5 image cards, 960px wide overall, each with a 16px radius.
- Centre card: about 300×330, front-most, upright.
- Inner pair: rotated ±8°, about 40px lower, behind the centre card.
- Outer pair: rotated ±14°, about 80px lower, furthest back.
- The bottom of the fan is hidden behind the footer panel, which overlaps it by about 120px.
9. **Footer.**
- A rounded panel (24px radius) inside a 1360px container. Its fill is one step deeper than the page cream. Padding 24px.
- **Left: newsletter card.** About 430×460, dark espresso, 16px radius, padding 28px. Contents in order:
- Logo.
- 2-line description.
- An italic serif micro-heading ("Stay updated" style).
- A 2-line note.
- An email input (cream-on-dark outline, 44px tall, pill) with an embedded small "Subscribe" pill.
- **Right: three link columns.**
- Column headings are italic serif and muted, 14px.
- Columns: 5 links / 4 links / a row of 4 dark 36px square social buttons.
- Under the columns is a hairline, then "Terms" left and "Privacy" right, 13px.
- Below the panel, outside it, is a 48px sub-footer row: three 12px credits (left, centre, right).
##### Scroll map
Viewport is 1440×900. Motion was not measured, so every kind below is inferred.
| # | Section | Height | Viewports | Scroll consumed | Kind |
|---|---|---|---|---|---|
| 1 | Nav | 56px (overlays 2) | 0.06 | 0 | static |
| 2 | Hero | 560px | 0.62 | 560px | entrance |
| 3 | Photo ribbon + stats card | 900px | 1.0 | 900px | scroll-linked photo + entrance card (inferred) |
| 4 | Mission and vision | 1480px | 1.64 | 1480px | entrance (heading fill possibly scroll-linked, inferred) |
| 5 | Values | 1090px | 1.21 | 1090px | entrance |
| 6 | Team | 1115px | 1.24 | 1115px | entrance + drag carousel |
| 7 | Trusted + testimonial | 1125px | 1.25 | 1125px | entrance |
| 8 | CTA + fan | 810px | 0.9 | 810px | entrance |
| 9 | Footer | 525px | 0.58 | 525px | static |
Total page height is about 7600px (about 8.4 viewports). Nothing pins or stacks.
##### Spacing
- **Vertical section padding:** 140–160px top and bottom. Exceptions:
- The hero is 140px top (under the nav) and 100px bottom.
- Section 8 is 140px top, and its fan runs into the footer.
- **Section header to content:** 56–64px.
- **Eyebrow pill to H2:** 20px. **H2 to sub:** 16px.
- **Mission rows:** 120px between Row A and Row B. 48–64px between text column and photo.
- **Card padding:**
- Stats rows: 28px vertical, 40px horizontal.
- Values cards: 28px.
- Testimonial text: 48px.
- Team cards: 8px, with 16px below the photo.
- **Button padding:** 12×22px. **Eyebrow pill padding:** 6×12px, with a 6px dot or icon gap.
- **Gaps:** logo grid 16px, team carousel 20px, footer link column gap 64px, link list line gap 10px.
- **Rhythm:** a generous, even, magazine-like cadence. Sections are separated only by space and the one dark band. There are no divider lines between sections.
##### Type
Two families:
- **Serif display:** soft transitional serif, regular weight, moderate contrast. Free stand-in: **Newsreader** (display optical size) or **Instrument Serif**. Used for all H1/H2 headings, lead paragraphs, the quote, card titles and footer column heads (italic).
- **Neutral grotesk:** free stand-in **Inter** or **Geist**. Used for body, UI and all numerals.
Body anchor is **17px**.
| Level | Family | Size | Line-height | Tracking | Weight |
|---|---|---|---|---|---|
| H1 hero | serif | 4.25× = 72px | 1.12 | -0.02em | 400 |
| H2 section | serif | 3× = 52px | 1.15 | -0.015em | 400 |
| Mega stat (stats card) | grotesk | 6× = 104px | 1.0 | -0.04em | 400 |
| Mid stat (80x / 50K+) | grotesk | 2.4× = 40px (50K+ at 1.4× = 24px) | 1.05 | -0.03em | 300–400 |
| Lead paragraph (mission) | serif | 1.5× = 26px | 1.5 | -0.005em | 400 |
| Testimonial quote | serif | 1.4× = 24px | 1.4 | 0 | 400 |
| Card title (values) | serif | 1.15× = 20px | 1.3 | 0 | 400 |
| Body / sub | grotesk | 17px | 1.55 | 0 | 400 |
| Small body / card desc | grotesk | 0.88× = 15px | 1.5 | 0 | 400 |
| Caption / role / micro-label | grotesk | 0.76× = 13px | 1.45 | 0 | 400 |
| Eyebrow pill | grotesk | 12px uppercase | 1 | 0.08em | 500 |
| Nav / buttons | grotesk | 14px | 1 | 0 | 500 |
- Max line length is 60ch for body and 46ch for lead paragraphs. The hero H1 is capped at about 880px so it breaks onto exactly two lines.
- Headings are never bold. All emphasis comes from size and the muted two-tone split.
##### Colour
| Hex | Role |
|---|---|
| `#FAF2EA` | Page surface, covering about 80% of the page. Also cream text on dark. |
| `#2B1609` | Espresso. All primary text, the section 5 band, primary buttons, row 1 of the stats card, the newsletter card and social buttons. |
| `#F4B996` | Peach, the single accent. Allowed only on values icons, rating stars, the large quote glyph, and (at about 35% tint, `#FBE3D2`) the fill of stats row 2. Never on buttons, links or large surfaces. |
| `#6595A4`, `#84B5E4` | Blues that live only inside the photography (sky and cool tones). Never used as UI colours. |
Derived neutrals:
- Muted text `#8C7B6E`.
- Pale heading half `#CDBFB2`.
- Card white `#FFFCF8`.
- Footer panel `#F3E7DB`.
- Dark-band raised card `#43301F`.
- Dark-band outline `rgba(250,242,234,0.14)`.
- Hairlines `rgba(43,22,9,0.08)`.
##### Surface
- **Borders:** 1px hairlines in espresso at 8% on light, cream at 14% on dark. The only heavy border is the 1.5px espresso active state on a logo tile.
- **Radii:**
- Pills and buttons: 999px.
- Stats card outer corners: 20px.
- Photos and cards: 16px. Team photo insets: 12px.
- Logo tiles: 14px. Testimonial card: 20px. Footer panel: 24px.
- Square icon buttons: 8px.
- **Shadows:** essentially none. Cards separate from cream by being a whiter fill. At most a 0 1px 2px rgba(43,22,9,0.04) on team cards and logo tiles.
##### Imagery
- **Section 3 ribbon:** an abstract long-exposure or zoom-blur of flowers and petals. Clear blue sky in the upper-left, with coral, peach, orange and pink streaks radiating out. The frame is full-bleed and about 1440×900, cropped by the arced mask.
- **Mission Row A:** sunflowers against a bright blue sky, shot from below in natural daylight. Aspect 1.18:1.
- **Mission Row B:** an autumn forest with orange leaves falling, warm hazy backlight. Aspect 1.18:1.
- **Values avatars:** 4 small circular headshots.
- **Team:** 4–5 studio portraits from the chest up, on a neutral light grey background, in business-casual clothes. Consistent lighting. Aspect about 1:0.95.
- **Testimonial:** a smiling person in glasses and a rust-orange sweater, on a warm neutral background. Portrait crop that fills the 440×360 slot.
- **CTA fan:** 5 dreamy macro flower images (peach bloom, pink petals) on pastel blue or teal backgrounds, soft focus, cohesive palette. Aspect about 0.9:1.
- **Logos:** placeholder monochrome espresso wordmarks.
##### Motion
No motion report was provided. Everything below is inferred from the still, and no timings were measured.
**1. Nav**
- kind: static
- what moves: nothing
- from → to: n/a
- range: n/a
- reduced motion: same
**2. Hero**
- kind: entrance (inferred)
- what moves: eyebrow pill, H1 lines, sub-paragraph
- from → to: opacity 0 → 1, translateY 24px → 0
- range: once on load. Duration not measured (use 600–900ms), ease-out, stagger 80–120ms in that order.
- reduced motion: elements appear at rest, no translate
**3. Photo ribbon + stats card**
- kind: scroll-linked photo + entrance card (inferred)
- what moves: the photo inside its arced mask (slow parallax); the three stats rows
- from → to:
- Photo: translateY -40px → +40px (inferred) as the section crosses the viewport.
- Each stats row: opacity 0 → 1, translateY 32px → 0.
- range:
- Photo: scroll-linked from the section top entering the viewport bottom until the section bottom leaves the top. It reverses on scroll up.
- Rows: once, when the card top reaches 80% of the viewport. Duration not measured (600–900ms), ease-out, stagger 100–150ms from row 1 to row 3.
- reduced motion: the photo is fixed in its mask and the rows show at rest
**4. Mission and vision**
- kind: entrance; the heading colour fill may be scroll-linked (inferred)
- what moves: lead paragraphs, photos, numerals and captions; possibly the muted half of the H2
- from → to:
- Text blocks: opacity 0 → 1, translateY 24px → 0.
- Photos: clip-path inset(12% 0 0 0 round 16px) → inset(0 round 16px), with scale 1.06 → 1 on the image.
- Muted heading words (if implemented): colour `#CDBFB2` → `#2B1609`, word by word.
- range:
- Entrances: once each, when the element's top reaches 80% of the viewport. Duration not measured (600–1000ms), ease-out.
- Heading fill: scroll-linked from the heading at 85% of the viewport to 45%. It reverses on scroll up.
- reduced motion: everything at rest; the heading stays two-tone
**5. Values**
- kind: entrance (inferred)
- what moves: eyebrow, H2, raised quote card, the three outline cards
- from → to: opacity 0 → 1, translateY 24px → 0
- range: once at 80% of the viewport. Duration not measured (600–900ms), ease-out. The right-hand cards stagger 100–150ms.
- reduced motion: at rest
**6. Team**
- kind: entrance (inferred), plus a user-driven horizontal carousel
- what moves: header, then the cards
- from → to: header opacity 0 → 1, translateY 20px → 0. Cards opacity 0 → 1, translateX 40px → 0.
- range: once at 80% of the viewport. Duration not measured (600–900ms), ease-out, stagger 80–120ms across cards. The track scrolls by drag or swipe with scroll-snap and does not auto-advance.
- reduced motion: cards at rest; native horizontal scroll still works
**7. Trusted + testimonial**
- kind: entrance (inferred)
- what moves: header, logo tiles, testimonial card
- from → to: opacity 0 → 1, translateY 16px → 0
- range: once at 80% of the viewport. Duration not measured (500–800ms), ease-out. Tiles stagger 40–60ms row by row.
- reduced motion: at rest
**8. CTA + fan**
- kind: entrance (inferred)
- what moves: heading, sub, button, the five fan cards
- from → to:
- Text: opacity 0 → 1, translateY 20px → 0.
- Fan cards: rotate 0° → final angle, translateY 60px → final offset, opacity 0 → 1. They start stacked behind the centre card and spread outward.
- range: once when the fan top reaches 85% of the viewport. Duration not measured (700–1000ms), ease-out, stagger 60–100ms from the centre outward.
- reduced motion: the fan is shown at its final angles
**9. Footer**
- kind: static
- what moves: nothing
- from → to: n/a
- range: n/a
- reduced motion: same
**Interaction transitions** (not scroll choreography):
- **Pill buttons, hover:** background lightens to `#43301F` and the arrow nudges 3px up-right. About 200ms ease.
- **Pill buttons, press:** scale 0.97.
- **Logo tiles, hover:** gain the 1.5px espresso border and the logo goes from 60% to 100% opacity. 150–200ms.
- **Team cards, hover:** the photo zooms to scale 1.04 inside its radius and the icon button inverts. About 300ms.
- **Values outline cards, hover:** the border brightens to cream at 30% opacity.
- **Footer links, hover:** colour goes from muted to espresso and an underline slides in from the left.
- **Email input, focus:** the border goes to cream at 60% opacity.
- **"Menu" button:** opens a full-width dropdown panel in cream with a 16px radius. Opacity plus translateY -8px → 0, 250ms. Close reverses.
##### Responsive (below 640px)
- **Gutters and padding:** gutters drop to 20px. Section padding drops to 88px.
- **Type sizes:** H1 → 2.5× body (42px) and H2 → 2× (34px). Mega stats → 64px. Lead paragraphs → 20px, and the large first-line indents shrink to 48px.
- **Nav:** becomes full width, with logo left and Menu right. The CTA pill is dropped.
- **Ribbon:** the arc depth halves.
- **Stats card:** full width. The stair-step offset shrinks to 16px per row. Inside each row, the numeral sits on top with the description and pill below.
- **Mission:** rows stack with the photo first, then the paragraph, then the stat. The "01 / 02" pager is dropped.
- **Values:** columns stack, with the left column and quote card first and the three cards after.
- **Team:** the carousel stays horizontal, with 78vw cards and snap. The stagger offset is removed.
- **Logo grid:** becomes 2 columns × 5 rows.
- **Testimonial card:** stacks with the photo on top (16:10) and the text below.
- **CTA fan:** reduced to 3 cards (centre plus inner pair).
- **Footer:** the newsletter card goes full width on top. The link columns go 2-up, with socials below. The sub-footer stacks centred.
##### Don'ts
- **Fonts:** don't set headlines in a bold sans or a heavy serif. The serif is regular weight and quiet, and bold kills the editorial calm. No Playfair-style high-drama italics either.
- **Colour:**
- Don't use pure white `#FFF` as the page or pure black `#000` as text. The warmth comes from cream and espresso.
- Don't promote the peach or the photo blues into buttons, links, gradients or section fills. Buttons are espresso, full stop.
- **Effects:** no drop shadows, glassmorphism, glows, or gradient borders. No purple AI gradients or sparkle icons.
- **Ribbon:** don't make the photo a straight-edged rectangle. The arced top and bottom edges are the signature of the page.
- **Stats card:** don't render the stats as three equal side-by-side boxes. They are stacked full-width rows with a stair-step offset and a dark → peach → cream fill progression.
- **Mission section:** don't centre the paragraphs or drop the large first-line indents. Don't put the stats next to the paragraphs; they float well below them with a hairline-ruled caption.
- **Section 5:** don't add a second dark section. It is the only dark band, and the newsletter card is the only other dark block.
- **Team carousel:** don't contain it inside the container on the right. It must bleed off the viewport edge. Don't make team cards bordered and shadowed; they are white fills on cream.
- **Logo strip:** don't animate the logos as an infinite marquee. They are a static tiled grid.
- **CTA fan:** don't lay the cards out flat in a row. They are rotated and overlapping, with the centre card in front, and the footer panel overlaps them.
- **Footer:** don't make it a full-bleed dark slab. It is a rounded cream panel with one dark card inside.
- **Copy:** no lorem-heavy walls. Keep every block to the stated lengths, and keep eyebrow pills to 1–2 uppercase words.
### Imagery — already generated
These pictures were made for this design and are hosted at the URLs below.
Use them as the `src` exactly as written, and keep the alt text. Do not
generate your own, do not reach for a stock library or a placeholder
service, and do not feed the Imagery section above back to an image model —
that work is done. Size and crop them with CSS (`object-fit: cover`) rather
than assuming their dimensions, and download them into the project if you
would rather not hotlink.
- https://ai-taste-vault.vercel.app/v/demo/imagio-ai-about-page/images/01-ribbon-petal-zoom.webp — Abstract zoom-blur of coral, peach and pink petals streaking outward from a clear blue sky
- https://ai-taste-vault.vercel.app/v/demo/imagio-ai-about-page/images/02-mission-sunflowers.webp — Sunflowers seen from below against a bright blue sky with soft white clouds
- https://ai-taste-vault.vercel.app/v/demo/imagio-ai-about-page/images/03-mission-autumn-forest.webp — Hazy autumn forest with orange leaves falling in warm backlight
- https://ai-taste-vault.vercel.app/v/demo/imagio-ai-about-page/images/04-cta-fan-bloom.webp — Dreamy macro of a soft peach blossom against a pastel blue background
### Image prompts
What each picture above was generated from, for anyone changing one.
**Abstract zoom-blur of coral, peach and pink petals streaking outward from a clear blue sky** (`01-ribbon-petal-zoom`)
MEDIUM AND FINISH: an abstract long-exposure zoom-blur photograph of flowers and petals. It should look like an in-camera zoom burst: smooth, silky motion streaks with soft edges and no sharp detail anywhere. The finish is luminous, airy and high-key, like an editorial art print, not a gritty action shot. COLOUR AND VALUE: the frame is bright and sits mostly in the upper half of the value range. The lightest value is a warm near-white #FDF3EC, in the streak highlights. The darkest value is a saturated coral-red #D4553A, in thin streak cores only. Nothing is darker than #C2563E, and there are no blacks, browns or deep shadows. The palette is clear sky blue #84B5E4 and a slightly deeper #6A9FD6 in the upper left. Everything else is coral #EE7A57, orange #F29A5E, peach #F4B996, soft pink #F2A7B5 and blush white. EDGES: the image is masked with arced top and bottom edges by the page, so every edge stays full of colour and texture. Don't fade it out and don't vignette it. Keep a believable blue band along the upper-left and upper-centre. A dark card sits over the middle 80% of the frame, so the centre can be busy, but it must stay mid-to-light in value. SUBJECT: petals and blossoms dissolved into long radial streaks. They burst from a vanishing point slightly right of centre and fan outward toward all four edges. Clear, cloudless blue sky shows through the upper-left quarter. The warm streaks get denser and more saturated toward the right and bottom edges, with a few white-hot petal highlights scattered through them. COMPOSITION: the radial energy fills the frame edge to edge. The sky sits upper-left, the warmest coral streaks on the right third, and pink-peach along the bottom. There is no single recognisable flower and no horizon. AVOID: sharp in-focus flowers, a recognisable garden or field, lens flare, sunburst stars, a black or dark vignette, purple or magenta neon, sci-fi light-speed tunnels, HDR clarity and grain. Output a wide 8:5 landscape frame, 1536x960. No text, no lettering, no logos, no watermarks, no UI.
**Sunflowers seen from below against a bright blue sky with soft white clouds** (`02-mission-sunflowers`)
MEDIUM AND FINISH: a genuine natural-daylight photograph with crisp, clean, true-to-life colour. It should look bright and cheerful like a stock editorial image, not moody or film-graded. COLOUR AND VALUE: the sky is a clear saturated blue, from #3E86CF at the top to a paler #A9CDEB near the flowers. A few soft white cumulus clouds near the horizon line are #F6F8FA. The petals are warm sunflower yellow #F2C230, with golden-orange shadows of #D99A1E. The leaves and stems are a fresh mid green, #6E9A3C to #4E7A2E. The darkest values are the seed-disc centres and the deepest leaf shadows, around #3A2A12. Nothing else in the frame goes that dark, and there is no crushed black. EDGES: the image sits inside a 16px-radius frame on a cream page, with no type over it. All edges are full image, with no fade or vignette. SUBJECT: a row of open sunflowers shot from slightly below, facing the camera and slightly up toward the sun. The heads sit across the lower 55% of the frame at different heights, with large leaves filling the very bottom. The upper 45% is open blue sky with low soft clouds just above the flower heads. COMPOSITION: the flowers fill the frame left to right. Two or three heads are large and dominant in the centre-right, with smaller ones receding at the left. The sky stays calm and uncluttered. AVOID: sunset or golden-hour orange skies, dramatic storm clouds, lens flare or sun stars, shallow-depth bokeh blobs, a dark vignette, over-saturated HDR, wilted flowers and people. Output a landscape frame at 1.18:1, 1416x1200. No text, no lettering, no logos, no watermarks, no UI.
**Hazy autumn forest with orange leaves falling in warm backlight** (`03-mission-autumn-forest`)
MEDIUM AND FINISH: a soft, atmospheric photograph of a forest in autumn with warm haze and gentle backlight through mist. The finish is dreamy and painterly-soft, with low micro-contrast and slightly diffused light, not crisp or HDR. COLOUR AND VALUE: the whole frame is warm and amber. The lightest value is a hazy cream glow, #F6DDB0 to #FBEAD0, in the upper-centre where the light comes through the mist. Mid tones are honey #E2A35A, orange #D9782E and burnt orange #B85A22. The darkest values are the tree trunks and the lower-left foreground, around #3E2412. Nothing goes darker than #3E2412, there are no pure blacks, and there is no blue or green anywhere. EDGES: the image sits inside a 16px-radius frame on a cream page, with no type over it. All edges are full image. Let the corners darken only gently toward warm brown, with no black vignette. SUBJECT: tall slender tree trunks recede into golden fog. In the foreground, a dozen or so large orange and amber maple-like leaves are caught mid-fall at different distances. The nearest leaves are slightly larger and softer, and a few are crisply lit by the backlight. The forest floor is a blur of warm leaf litter. COMPOSITION: the glowing haze is centred slightly above the middle, framed by darker trunks at the left and right. Falling leaves are scattered across the middle and lower two-thirds. AVOID: blue sky, green foliage, visible sun discs or starburst flare, god-ray beams that are too strong, a cold or desaturated grade, a heavy dark vignette, people, paths and benches. Output a landscape frame at 1.18:1, 1416x1200. No text, no lettering, no logos, no watermarks, no UI.
**Dreamy macro of a soft peach blossom against a pastel blue background** (`04-cta-fan-bloom`)
MEDIUM AND FINISH: a soft matte digital render in the style of a dreamy macro flower image, like the output of an AI image generator. It's impossibly smooth and clean, with silky gradients, gentle glow and a very shallow, creamy focus falloff. It isn't a gritty photograph. COLOUR AND VALUE: it's a high-key pastel image, and the whole frame sits in a narrow band near the top of the value range. The background is a pastel sky blue, from #BFD9EE at the top to a soft teal-blue #9CC4CF near the bottom. The petals are a translucent peach-white, #FBE6D8, blushing to #F4B996 and soft coral-pink #EFA59A at the centre. The darkest value anywhere is #7FA7B3, in the background behind the bloom. There are no deep shadows, no blacks and no dark stems. EDGES: the image is cropped into a 16px-radius card, and several cards are rotated in a fan. Keep all edges a soft, even pastel with no vignette. The bottom fifth is hidden behind the footer, so detail there doesn't matter. SUBJECT: a single large open bloom, like a ranunculus, poppy or cosmos. It has translucent, delicately veined petals and rises from the lower centre on a slim pale stem. A few tiny floating petals or soft glow specks hang in the air around it. COMPOSITION: the bloom fills the middle 60% of the frame, with its centre slightly above the middle. The background is clean, soft, out-of-focus blue with no horizon. AVOID: saturated reds or magenta, dark green leaves, hard studio light, black backgrounds, harsh bokeh circles, sparkles, purple AI gradients, film grain, and anything that looks like real camera noise. Output a portrait frame at 0.9:1, 1024x1152. No text, no lettering, no logos, no watermarks, no UI.
---
## Imagio — AI image generator landing
- Page: https://ai-taste-vault.vercel.app/r/imagio-ai-image-generator-landing
- Original: https://dribbble.com/shots/27547076--Imagio-AI-Image-Generator-SaaS-Landing-page
- Type: Landing page
- Tags: AI, FAQ, Feature grid, Footer, Hero, High contrast, Light mode, Organic, Pastel, Pricing table, Testimonials
- Palette: #FAF2EA, #2A1509, #DBD4CB, #175B76, #97C5D6
- Captured: 2026-09-18
- Rebuilt with: Claude Code · Opus 5.5 · Extra high · skills: frontend-design, emil-design-eng, transitions-dev, gsap, humanizer
- Rebuild: https://ai-taste-vault.vercel.app/v/demo/imagio-ai-image-generator-landing/index.html
### Prompt — Rebuild
_rebuild · html-css · opus_
#### Build prompt: warm cream editorial landing page for an AI image product
A long, quiet landing page for an AI image-generation SaaS. It feels like a stationery catalogue more than a tech site. The page is warm cream paper with deep espresso-brown ink. Headlines are set in a light editorial serif, and all supporting text is in a small neutral grotesk. The only colour comes from soft-focus pastel flower images on rotated, fanned "photo cards", and from one sky-to-teal blue accent that stays inside image-adjacent surfaces. In the middle of the page there is a single dark-brown band for pricing. The page ends on a dark-brown footer card. The source capture shows the page inside a browser window on a mat. Ignore the window and the mat, and build a full-bleed page.
No motion was measured for this reference. Every motion value below is inferred from the stills and marked as such.
##### Structure
- Desktop canvas is 1440px wide. The content container is **1200px**, centred, with 120px side gutters.
- The grid is 12 columns with 24px gutters. Most rows use 3 equal columns (384px each) or a 50/50 split (588 / 24 / 588).
- Headers are of two kinds:
- **Centred heading blocks** for sections 3, 4, 8, 10 and 11.
- **Split heading rows** for sections 6, 7 and 9: eyebrow and H2 on the left, with a short paragraph pinned top-right, max 320px.
Sections, top to bottom:
1. **Nav.** A 72px bar laid over the hero.
- Left: a "Menu" text button with a 2-line hamburger icon.
- Centre: a logo mark plus a one-word wordmark.
- Right: a dark-brown pill CTA (2–4 words + ↗).
2. **Hero.** A full-bleed panel ~1110px tall.
- **Card fan.** A shallow arc of 6 portrait flower cards spans almost the full 1440 width.
- **Prompt card** below the fan, 760px wide. It holds placeholder prompt text (1 line) top-left, 4 small option chips bottom-left (aspect ratio, style, count, quality), and a dark pill "generate" button (2 words + ↗) bottom-right.
- **Centred serif H1** (5–7 words on 2 lines).
- **Subtext** (2 lines, ~22 words).
3. **How it works.**
- Centred heading block: eyebrow pill, H2 of 3 words, 2-line subtext.
- Three step cards in a row, 384×265px each.
- Each card has a "STEP 0X" micro-label top-left and a tiny UI mock centred inside it:
- card 1: a text input with typed placeholder text;
- card 2: a 3×2 grid of style chips;
- card 3: a single dark pill button.
- Under each card, outside it: a serif title (3–4 words) and a 2-line description.
4. **Core features bento.**
- Centred heading block (H2 of 2 words).
- A 3-column, 3-row bento:
- **Row 1, cols 1–2:** "text-to-image" cell. Title and 2-line description top-left. Below them is a wide mock prompt input with chips, plus a floating dark dropdown chip ("choose type") overlapping its top edge.
- **Col 3, rows 1–2:** tall "high-resolution" cell. Title and description on top. Below them is a 3:4 before/after image with a vertical divider and handle.
- **Row 2, col 1:** "styles" cell. Title, description, then a row of 4 small style chips with one filled dark.
- **Row 2, col 2:** "history" cell. Title, description, then a list of 3 faded prompt lines with a small play/cursor icon.
- **Row 3:** three illustration-first cells, each with its title and 1-line description below the illustration:
- two outlined image placeholders joined by a "+";
- a small centred logo-mark badge;
- a stack of 3 slightly rotated paper sheets.
5. **Statement.**
- A fan of ~7 portrait cards, centred and 400px wide overall. They are splayed like a hand of playing cards from a bottom pivot. The backs are pale sky blue, and the front card shows a flower.
- Below the fan: a 3-line centred serif statement (~30 words). It has an inline pill-shaped image chip set into line 2, like a word.
- Three small dark-brown role tags (1 word each) float at the text's corners, each rotated ±6°.
6. **Solutions.**
- A 1px hairline runs across the container top.
- Split heading: eyebrow, then H2 (5–6 words on 2 lines); paragraph top-right.
- Content row with a 64px top margin:
- **Left (600px):** a vertical list of 4 audience items. Each has a serif title (2–3 words) and a 1-line description, separated by hairlines. The active item is a filled dark-brown rounded bar with cream text.
- **Right (540×420px):** an image card. A blue gradient sits behind a single white flower, with a huge serif stat numeral ("500+" pattern) and a 1-line caption at the bottom centre.
7. **Pricing.** A full-bleed dark-brown band.
- Split heading in cream: H2 of 6–7 words on 2 lines; paragraph top-right.
- Three plan cards, 370×520px each:
- left and right cards are cream;
- the middle (featured) card is a lighter brown with a cream hairline border.
- Card anatomy, top to bottom:
1. Small icon, plan name and a 1-line description.
2. Hairline.
3. "WHAT'S INCLUDED" micro-label.
4. 7 feature rows with check icons.
5. Price row: serif price, "/month" in small text, and a monthly/yearly pill toggle on the paid cards.
6. Full-width pill CTA.
8. **Testimonials.**
- Centred heading block: H2 of 5–6 words on 2 lines, plus 1-line subtext.
- A 3-column masonry of 384px columns, alternating quote cards and portrait photos:
- col 1: quote, photo, quote;
- col 2: photo, quote, photo, quote;
- col 3: quote, photo, quote, photo.
- Photo heights vary between 1:1 and 4:5, so the columns stagger.
9. **Insights.**
- **Left column (380px):** eyebrow, H2 (4–5 words on 2 lines), 3-line subtext, and a small dark pill "view all" button.
- **Right:** two article cards, 360px each with a 24px gap. Each has a 4:3 image, a 2-line serif title and a "Read more →" link.
10. **FAQ.**
- Centred heading block: H2 of 2–3 words, 1-line subtext.
- An 800px-wide stack of 5 accordion rows. The second row is open, showing a 2-line answer.
11. **Closing CTA.**
- Centred H2 (one line, 4–5 words), 1-line subtext and a dark pill button.
- Below them: an arc of 7 flower cards rising from the bottom edge over a sky-blue wash that bleeds down behind the footer's top edge.
12. **Footer.** A dark-brown rounded card, 1280px wide, inset from the page edges, ~500px tall.
- Columns:
- logo and 2-line description, plus a newsletter label, email input and cream "subscribe" pill;
- two link columns of 5 links each;
- a "stay in touch" heading with 4 square social buttons.
- Inside bottom bar: copyright left, legal links right.
- Below the card on cream: a 48px credits strip of 2 small text runs.
##### Scroll map
Heights are inferred, at a 900px viewport.
1. Nav: 72px overlay inside the hero. Consumes 0. Static.
2. Hero: ~1110px / 1.23 vp. Consumes 1110. Entrance.
3. How it works: ~800px / 0.89 vp. Consumes 800. Entrance.
4. Core features: ~1430px / 1.59 vp. Consumes 1430. Entrance.
5. Statement: ~740px / 0.82 vp. Consumes 740, not pinned. Scroll-linked.
6. Solutions: ~1000px / 1.11 vp. Consumes 1000. Entrance.
7. Pricing: ~1030px / 1.14 vp. Consumes 1030. Entrance.
8. Testimonials: ~1460px / 1.62 vp. Consumes 1460. Entrance.
9. Insights: ~740px / 0.82 vp. Consumes 740. Entrance.
10. FAQ: ~820px / 0.91 vp. Consumes 820. Entrance.
11. Closing CTA: ~640px / 0.71 vp. Consumes 640. Entrance.
12. Footer: ~660px / 0.73 vp, including the credits strip. Consumes 660. Static.
**Total page height ≈ 10,430px ≈ 11.6 viewports.** No section pins or stacks.
##### Spacing
- **Section rhythm:** 128px top and bottom padding on every cream section. Sections 7 and 8 use 128px inside the dark band. Section 5 uses 96px top and bottom because the card fan supplies its own air.
- **Centred heading block:**
- eyebrow pill → 20px → H2 → 16px → subtext → 64px → content.
- Split heading rows use the same eyebrow → H2 gaps. Their paragraph aligns to the eyebrow's top.
- **Hero vertical layout,** from the hero top:
- card fan top at ~104px, fan height ~340px (outer cards sit lower on the arc);
- prompt card top at ~490px, height 140px;
- H1 top at ~690px;
- subtext at ~865px;
- ~170px empty cream below.
- **Prompt card:** 20px padding. 12px between the placeholder text and the chip row. Chips have an 8px gap, 28px height and 0 12px padding. The generate button is 40px tall with 0 18px padding.
- **Step cards:** 24px gap and 24px padding. 20px from the card's bottom to its title, and 8px from title to description.
- **Bento:** 24px gaps. Cells have 28px padding, and 20px from description to mock.
- **Solutions list:** items are ~104px pitch with 20px vertical × 24px horizontal padding. 6px from title to description. The list and image are separated by a 56px gap.
- **Pricing cards:** 20px gap and 24px inner padding. Feature rows sit 12px apart. Leave 24px above the price row and 20px from the price row to the CTA. The CTA is 48px tall.
- **Testimonials masonry:** 20px column gap and 20px vertical gap. Quote cards have 24px padding.
- **Insights:** 24px card gap. 16px from image to title, then 12px from title to link.
- **FAQ:** 12px gap between rows. Rows have 20px vertical × 24px horizontal padding and a ~64px closed height. An open answer adds 12px top spacing.
- **Footer card:** 48px padding and 48px column gap. The bottom bar has a 32px top margin and 24px top padding.
##### Type
- **Display serif:** a light, moderate-contrast editorial serif with open counters. It is never bold. Use **Newsreader** (Google Fonts, display optical size) at weight 400; **Source Serif 4** (Display) works as an alternative.
- **UI and body sans:** a neutral grotesk. Use **Inter** or **Geist**.
- **Body anchor:** 17px.
| Level | Family | Size | Line-height | Letter-spacing | Weight |
|---|---|---|---|---|---|
| H1 hero | serif | 4.0× = 68px | 1.05 | -0.02em | 400 |
| H2 section | serif | 3.0× = 52px | 1.1 | -0.015em | 400 |
| Statement (s5) | serif | 2.5× = 42px | 1.3 | -0.01em | 400 |
| Stat numeral (s6) | serif | 4.0× = 68px | 1.0 | -0.02em | 400 |
| Price | serif | 2.35× = 40px | 1.0 | -0.01em | 400 |
| Card / feature / list titles | serif | 1.25× = 21px | 1.25 | -0.005em | 400 |
| Body / section subtext | sans | 17px | 1.55 | 0 | 400 |
| Secondary text (card descriptions, quotes, FAQ answers) | sans | 0.94× = 16px | 1.5 | 0 | 400 |
| FAQ question, plan name | sans | 1.0× = 17px | 1.4 | 0 | 500 |
| Nav, buttons, links | sans | 0.82× = 14px | 1.0 | 0.005em | 500 |
| Features list, chips, meta (names, roles) | sans | 0.82× = 14px | 1.45 | 0 | 400; names 500 |
| Eyebrow pill, "STEP 01", "WHAT'S INCLUDED" | sans uppercase | 0.71× = 12px | 1.0 | 0.08em | 500 |
**Measures:**
| Text | Max width | Approx. characters |
|---|---|---|
| H1 | 900px | ~28ch per line |
| Centred H2 | 720px | — |
| Split-row H2 | 560px | — |
| Statement | 1040px | — |
| Subtext | 520px | ~62ch |
| Card descriptions | 320px | — |
All text uses sentence case except the micro-labels.
##### Colour
| Hex | Role |
|---|---|
| `#FAF2EA` | Cream paper. Page background on 85% of the surface. Also the light pricing cards and the text colour on dark surfaces. |
| `#2A1509` | Espresso brown. All primary text and every primary button. Also the pricing band background, the footer card, the active Solutions item, the floating role tags and the dark chips. |
| `#DBD4CB` | Warm grey. 1px hairlines and borders, inactive chip fills, toggle tracks. Also the top colour of the hero gradient. |
| `#175B76` | Deep teal. **The single accent.** |
| `#97C5D6` | Pale sky blue. The accent's light partner. |
**Where the accent may appear:**
- the bottom stop of the Solutions stat-card gradient;
- the statement-fan card backs;
- the closing-CTA sky wash;
- the inline image chip in the statement.
It never appears on buttons, links, icons, text or borders.
**Derived tones:**
- Muted text: `#7A6A5D` (brown at ~62% on cream).
- Faint text: `#B8ACA0`, used for unrevealed statement words and placeholder text.
- Raised fill: `#F3EADF`, used for step cards, bento mock surfaces, quote cards and FAQ rows.
- Prompt card fill: `#FFFDF9`.
- Featured pricing card: `#3A2416`.
- Text on dark: cream at 100%, muted cream at 65%, hairlines on dark cream at 15–20%.
**Gradients:**
- Hero panel: a vertical gradient from `#DBD4CB` at the top to `#F3EADF` at the bottom. It ends cleanly onto the `#FAF2EA` page.
- Solutions card: a vertical gradient from `#97C5D6` at the top to `#175B76` at the bottom.
- Closing CTA wash: a radial ellipse of `#97C5D6` at 70% behind the fan, fading to transparent by 60% radius.
##### Surface
- **Borders:** 1px `#DBD4CB` on cream surfaces, and 1px cream at 18% on dark ones. Nothing is heavier than 1px.
- **Radii:**
| Element | Radius |
|---|---|
| Buttons, chips, eyebrow pills, toggles, email input, inline image chip | pill (999px) |
| Prompt card, step cards, bento mocks, pricing cards, quote cards, image cards | 20px |
| Photo cards in the fans | 16px |
| Solutions active bar, FAQ rows | 12px |
| Social buttons | 10px |
| Footer card | 24px |
- **Eyebrow pill:** 28px tall, `#FFFDF9` fill, 1px hairline, 0 12px padding. A 6px brown dot sits before the label.
- **Shadows:** used only on things that float.
- Fanned photo cards: `0 18px 40px rgba(42,21,9,0.16)`.
- Prompt card: `0 12px 32px rgba(42,21,9,0.08)`.
- Floating dropdown chip and role tags: `0 6px 16px rgba(42,21,9,0.18)`.
- Every other card is flat and defined by its hairline or its fill alone.
##### Imagery
All imagery shares one look: soft-focus macro photographs of single flowers (ranunculus, poppy, cosmos, peony, daisy) on pastel gradient grounds of sky blue, blush, butter and peach. The light is diffuse with shallow depth of field, and nothing in the frame is saturated beyond the petals. They should read as "AI-generated art samples".
- **Hero fan (s2):** 6 cards, 3:4, ~210×280px.
- Arrange them in a shallow arc across the full width. Rotations run −14°, −8°, −3°, +3°, +8°, +14°. The outer cards sit ~60px lower than the centre pair.
- Subjects alternate peach, orange, yellow and pale pink flowers on blue or blush grounds.
- **Before/after (s4):** one 3:4 image, ~380×520px. A magenta-pink flower on a deep plum ground.
- The left half is pixelated or blurred and the right half is crisp.
- A 2px cream vertical divider has a 32px round cream handle at mid-height.
- Small pill labels "Before" and "After" sit on either side, 16px from the bottom.
- **Statement fan (s5):** ~7 cards, 3:4, ~150×200px, splayed through ~70° from a bottom-centre pivot.
- Back cards are flat `#97C5D6` with a faint inner border.
- The front card shows a peach-white flower on a pale blue ground.
- **Inline chip (s5):** a 72×40 pill image (pastel flower crop) set on the text baseline like a word.
- **Solutions card (s6):** 540×420px. One white daisy or cosmos, centred, on the blue gradient. The stat numeral and caption sit in cream, centred, 32px from the bottom.
- **Testimonial portraits (s8):** 5–6 headshots of smiling adults in warm natural light on plain beige or stone backgrounds, chest-up. Aspects vary between 1:1 and 4:5, at 20px radius.
- **Insights cards (s9):** two 4:3 images, 360×270px: a pink flower on blush, and a pale flower on misty white-blue.
- **Closing fan (s11):** 7 cards, 3:4, ~190×250px, from the same set as the hero. They form an arc whose centre card rises highest, and the bottom edges tuck to within 0–16px of the footer card's top.
- **Icons:** 1.5px-stroke line icons in brown, 16–20px. The check icons in pricing sit in 18px circles.
##### Motion
None of this was measured. The kinds are inferred from the stills, and every value is a range.
**1. Nav**
- kind: static (inferred). Whether it is sticky was not measured; build it non-sticky.
- what moves: nothing.
- from → to: —
- range: —
- reduced motion: same.
**2. Hero**
- kind: entrance (inferred).
- what moves: the fan cards, then the prompt card, H1 and subtext.
- from → to:
- Cards start stacked at the centre: rotate 0, translateX toward 0, opacity 0. They end at their arc positions and rotations at opacity 1.
- Text and prompt card: translateY 24px → 0, opacity 0 → 1.
- range:
- Plays once on page load.
- Duration not measured; use 700–1000ms for the fan and 500–700ms for the text.
- Use a soft ease-out with no overshoot.
- Fan cards stagger 50–80ms from the centre outward. The text follows 150–250ms after the fan starts.
- reduced motion: everything renders in its final position, with no movement.
**3. How it works**
- kind: entrance (inferred).
- what moves: the heading block, then the three step cards.
- from → to: translateY 24px → 0, opacity 0 → 1.
- range:
- Plays once, when each element's top reaches 85% of the viewport.
- Duration not measured, 500–700ms, ease-out.
- Cards stagger 80–120ms left to right.
- reduced motion: shown at rest, opacity 1.
**4. Core features**
- kind: entrance (inferred).
- what moves: the heading block, then the bento cells.
- from → to: translateY 24px → 0, opacity 0 → 1.
- range:
- Plays once per cell at 85% of the viewport.
- Duration not measured, 500–700ms, ease-out.
- Stagger 60–100ms in reading order.
- reduced motion: shown at rest. The before/after divider stays fixed at 50%.
**5. Statement**
- kind: scroll-linked (inferred from the half-grey text in the still).
- what moves:
- statement words;
- fan cards;
- floating role tags.
- from → to:
- Each word goes from colour `#B8ACA0` to `#2A1509`, in sequence. In the still, roughly the first 60% is filled.
- Fan cards go from closed (all rotate 0, overlapped) to splayed (the full ~70° spread).
- Role tags go from opacity 0 and scale 0.9 to opacity 1 and scale 1, each one as the words near it fill.
- range:
- Starts when the section top enters the viewport bottom.
- Ends when the statement's last line reaches ~40% of the viewport.
- Fully reverses when scrolling back up. Not pinned.
- reduced motion: all words render in `#2A1509`, the fan stays splayed and the tags stay visible.
**6. Solutions**
- kind: entrance (inferred).
- what moves: the heading row, then the list items and the image card.
- from → to:
- List items: translateY 20px → 0, opacity 0 → 1.
- Image card: scale 0.97 → 1 and opacity 0 → 1.
- range:
- Plays once at 85% of the viewport.
- Duration not measured, 500–800ms, ease-out.
- List stagger 60–100ms.
- reduced motion: shown at rest.
**7. Pricing**
- kind: entrance (inferred).
- what moves: the heading row, then the three cards.
- from → to: translateY 32px → 0, opacity 0 → 1.
- range:
- Plays once at 85% of the viewport.
- Duration not measured, 600–800ms, ease-out.
- Stagger 80–120ms left to right.
- reduced motion: shown at rest.
**8. Testimonials**
- kind: entrance (inferred).
- what moves: the heading block, then each masonry tile.
- from → to: translateY 24px → 0, opacity 0 → 1.
- range:
- Plays once per tile at 90% of the viewport.
- Duration not measured, 500–700ms, ease-out.
- Tiles that enter together stagger 60–100ms by column.
- reduced motion: shown at rest.
**9. Insights**
- kind: entrance (inferred).
- what moves: the left text column, then the two cards.
- from → to: translateY 24px → 0, opacity 0 → 1.
- range:
- Plays once at 85% of the viewport.
- Duration not measured, 500–700ms.
- Stagger 100ms.
- reduced motion: shown at rest.
**10. FAQ**
- kind: entrance (inferred).
- what moves: the heading block, then the accordion rows.
- from → to: translateY 16px → 0, opacity 0 → 1.
- range:
- Plays once at 85% of the viewport.
- Duration not measured, 400–600ms.
- Rows stagger 50–80ms.
- reduced motion: shown at rest.
**11. Closing CTA**
- kind: entrance (inferred).
- what moves: the heading group, then the card arc.
- from → to:
- Heading group: translateY 20px → 0, opacity 0 → 1.
- Card arc: translateY 80px → 0 and opacity 0 → 1, with rotations already applied.
- range:
- Plays once when the section top reaches 75% of the viewport.
- Duration not measured, 700–1000ms, ease-out.
- Cards stagger 50–80ms from the centre outward.
- reduced motion: shown at rest.
**12. Footer**
- kind: static.
- what moves: nothing.
- from → to: —
- range: —
- reduced motion: same.
**Interaction transitions** (separate from the scroll choreography; durations not measured, 150–300ms ranges):
- **Buttons:**
- Dark pills lighten to `#3A2416` on hover, and the ↗ arrow nudges 2px up and to the right.
- On press: scale 0.98.
- **Chips:** hover fill goes `#DBD4CB` → slightly darker. Selected chips are `#2A1509` with cream text.
- **Solutions list:**
- Hovering or clicking an item moves the dark active bar to it; the text colour inverts.
- The right image card crossfades to that audience's image over 300–400ms.
- **FAQ:**
- Opening a row animates its height open over 250–350ms ease-out. The plus icon rotates 45° to become an ×, or swaps to a minus.
- Only one row is open at a time.
- **Before/after:** the divider is draggable on pointer and moves with no easing.
- **Pricing toggle:** the knob slides across the track over 200ms, and prices crossfade.
- **Image cards (s8 and s9):** on hover the image scales 1 → 1.03 inside its rounded mask over 400ms.
- **Fan cards (s2 and s11):** on hover a card lifts translateY −8px and its rotation eases toward 0.
##### Responsive (<640px)
- **Layout:** container padding is 20px. Sections use 80px top and bottom padding.
- **Type:** H1 → 40px, H2 → 34px, statement → 26px. Body stays at 17px.
- **Hero:**
- The fan shows 4 cards at 120×160px, with rotations reduced to ±10°.
- The prompt card goes full width, its chips wrap to 2 rows and the generate button goes full width.
- **Steps (s3):** stack into one column.
- **Bento (s4):**
- Becomes one column in reading order.
- The before/after image becomes 4:5 at full width.
- The floating dropdown chip is dropped.
- **Statement (s5):**
- The fan shrinks to 260px wide.
- The floating role tags are hidden.
- The inline image chip shrinks to 48×28px.
- **Split heading rows (s6, s7, s9):** stack, with the paragraph below the H2.
- **Solutions (s6):** the list sits above the image card, which becomes full width at 4:3.
- **Pricing (s7):** the cards stack in source order with the featured card second.
- **Testimonials (s8):** become a single column of alternating quote and photo. Drop 2 of the photos.
- **Insights (s9):** the cards stack.
- **FAQ (s10):** full width.
- **Closing CTA (s11):** the arc keeps 5 cards.
- **Footer (s12):**
- The card loses its inset: 12px side margins, 20px radius, 28px padding.
- Columns stack: brand and newsletter, then the two link columns side by side, then the socials.
- The bottom bar stacks.
##### Don'ts
- **No sans-serif headlines and no bold serif.** Every H1, H2, statement, card title, price and stat is set in the serif at 400. If a headline looks heavy, the design is broken.
- **Keep the page cream and the text brown.** No pure white `#FFF` page, and no pure black text or buttons. The only near-white is the prompt card's `#FFFDF9`.
- **Keep the accent off controls.** Buttons, links, toggles and active states are all espresso brown. Blue lives only in and around imagery.
- **No purple-to-blue "AI" gradients.** Also no glowing orbs, glassmorphism, neon borders, sparkle emoji or dark-mode hero. Pricing is the only dark band and the footer the only dark card.
- **No icon-in-a-coloured-circle feature grid.** Features are shown with tiny UI mocks and line illustrations on quiet fills.
- **Pricing stays restrained.** Don't scale up the featured card, don't add a coloured "Most popular" ribbon, and don't give cards drop shadows. The featured card differs only by its lighter-brown fill and cream hairline.
- **Don't centre everything.** Sections 6, 7 and 9 are left-aligned split layouts. The centred blocks are only 3, 4, 8, 10 and 11.
- **No stock imagery of people at laptops, abstract 3D blobs or AI-robot art.** Every generated image is a pastel flower macro; people appear only in testimonials.
- **Keep the fan cards rotated.** Don't straighten them into a neat grid; the tilt and arc are the signature.
- **Statement fill must be scroll-linked.** Don't make it a one-shot fade or typewriter effect; it must scrub with scroll and reverse.
- **Keep the spacing roomy.** Don't shrink the 128px section spacing or the 64px heading-to-content gap.
- **Don't use radii below 12px on cards or over 24px on anything except pills.** No 1px-radius sharp boxes and no bubbly 32px+ cards.
- **Avoid heavy dividers, double borders and 2px outlines.** Hairlines are always 1px warm grey.
### Imagery — already generated
These pictures were made for this design and are hosted at the URLs below.
Use them as the `src` exactly as written, and keep the alt text. Do not
generate your own, do not reach for a stock library or a placeholder
service, and do not feed the Imagery section above back to an image model —
that work is done. Size and crop them with CSS (`object-fit: cover`) rather
than assuming their dimensions, and download them into the project if you
would rather not hotlink.
- https://ai-taste-vault.vercel.app/v/demo/imagio-ai-image-generator-landing/images/01-flower-cards-diptych.webp — Two pastel flower cards: an apricot ranunculus on pale sky blue and a pale pink poppy on blush
- https://ai-taste-vault.vercel.app/v/demo/imagio-ai-image-generator-landing/images/02-before-after-bloom.webp — A glowing magenta bloom on a deep plum background
- https://ai-taste-vault.vercel.app/v/demo/imagio-ai-image-generator-landing/images/03-solutions-daisy.webp — A single white daisy on a sky-blue to deep-teal gradient
- https://ai-taste-vault.vercel.app/v/demo/imagio-ai-image-generator-landing/images/04-testimonial-portraits-grid.webp — Six smiling customer headshots on plain warm-grey backdrops
### Image prompts
What each picture above was generated from, for anyone changing one.
**Two pastel flower cards: an apricot ranunculus on pale sky blue and a pale pink poppy on blush** (`01-flower-cards-diptych`)
MEDIUM AND FINISH: A soft, airy digital render that looks like an AI-generated pastel flower still. It is matte, hazy and very clean. The light is diffuse and casts no shadows, and the petals look translucent, like tissue paper. This is not a photograph: no film grain, no lens character, no crisp HDR micro-detail. The frame is a diptych of two separate portrait panels set edge to edge. The seam sits exactly on the vertical centre line. Each panel is exactly half the frame (3:4), with no gutter, no border and no blending across the seam. From the attached reference, take only the look of the fanned flower cards at the top of the page: their pastel grounds, soft petals and pale finish. Ignore all text, UI and layout. COLOUR AND VALUE: High-key and low-contrast. Almost the whole frame sits in a narrow band of light values. Left panel ground: a smooth vertical gradient from pale sky blue #A9D0E1 at the top to soft blush #F2D6CC at the bottom. Right panel ground: blush pink #F3CFC6 at the top to warm peach-cream #F8E4D2 at the bottom. Left flower: apricot to tangerine #F4A46A, with petal highlights at #FFE9D8. Right flower: pale shell pink #F4C1C4, with highlights at #FFF0EE. The lightest value is #FFF4EC. The darkest value anywhere is the small flower centre, at about #A0583A. There are no blacks, no deep shadows and no dark ground anywhere. EDGES: In each panel the ground runs flat and light to all four edges, with no vignette, frame or drop shadow. Rounded corners and shadows are added in code. SUBJECT: Left panel: one full, many-petalled ranunculus in apricot and tangerine on a short pale stem. Right panel: one pale pink poppy or cosmos with crinkled, translucent petals and a small golden centre. Each bloom is seen from slightly above at a gentle three-quarter angle, and is the only object in its panel. COMPOSITION: In each panel the bloom is centred horizontally, just above the vertical middle. It fills about 65% of the panel width and no more than 55% of its height. Leave clear ground above and below it so the panel can also be cropped to a 4:3 landscape strip through its middle. Petal edges melt softly into the ground. AVOID: saturated or neon colour, green foliage or leaves, vases, tables, water droplets, bokeh discs, sparkles, glows, moody or dark grounds, black vignettes, a visible line or gap between the panels, and any flower crossing the seam. Output a 3:2 landscape frame, 1536x1024, made of two 768x1024 portrait panels. No text, no lettering, no logos, no watermarks, no UI.
**A glowing magenta bloom on a deep plum background** (`02-before-after-bloom`)
MEDIUM AND FINISH: A soft, luminous digital render of a single flower. It is matte and clean, with a gentle inner glow coming from the bloom's core and evenly sharp detail across the whole frame. The blurred or pixelated 'before' half is made in code, so the entire image must be crisp. It is not a photograph: no film grain, no lens flare, no bokeh. From the attached reference, take only the colour and glow of the magenta flower image in the feature grid. Ignore all text, UI and layout. COLOUR AND VALUE: This is the one dark, rich image on the page. The ground is deep plum #4A1A3C behind the bloom, deepening to #2C0F24 at the corners. That corner plum is the darkest value: nothing reaches pure black. The bloom runs from magenta #D2468E through hot pink #EE7DB5 to pale pink #F9C6DE at petal tips and in the glowing core. The lightest value is #FBD6E8. Only plums, magentas and pinks appear: no green, no blue, no orange. EDGES: The plum ground fills the frame edge to edge with no frame or border. Rounded corners are added in code. The bottom 15% stays quiet plum because small 'Before' and 'After' pill labels sit there. The vertical centre line runs through the middle of the bloom, where a thin cream divider with a round handle sits. SUBJECT: One large, layered bloom, a peony- or dahlia-like flower with many curved petals radiating from a softly glowing centre. It is seen almost face-on from slightly above, and is close to symmetrical left to right so both halves show an equal share of flower. COMPOSITION: The bloom is centred horizontally, with its core about 45% down from the top, and fills about 80% of the frame width. The petals fade into the plum toward the outer edges. Nothing else is in the frame. AVOID: black backgrounds, harsh rim light, sparkles, light streaks, dewdrops, leaves, stems that dominate, neon purple-to-blue gradients, a lopsided or off-centre bloom. Output a 2:3 portrait frame, 1024x1536, which will be cropped to 3:4. No text, no lettering, no logos, no watermarks, no UI.
**A single white daisy on a sky-blue to deep-teal gradient** (`03-solutions-daisy`)
MEDIUM AND FINISH: A soft, airy digital render of a single white flower floating on a smooth colour gradient. It is matte, hazy and clean, with diffuse light and softly feathered petal edges. It is not a photograph: no grain, no lens flare, no bokeh discs. From the attached reference, take only the colour and softness of the blue stat card with the white flower in the solutions section. Ignore all text, UI and layout. COLOUR AND VALUE: The ground is a smooth vertical gradient. It runs from pale sky blue #97C5D6 at the top, through mid blue #5A9AB4, to deep teal #175B76 across the whole bottom edge. The petals are soft white #FBFCFA, shaded in cool pale blue #CFE0E6 where they curve. The centre is warm gold #E8B84A, and no part of it is darker than #A87420. The lightest value is the petal white. The darkest is the teal at the bottom edge: no blacks and no shadows below the flower. EDGES: The gradient fills the frame edge to edge, with no vignette or frame. The bottom edge must be an even, flat #175B76 from left to right, because the card's rounded corners and text are added in code on top of it. SUBJECT: One white daisy or cosmos with eight to twelve slightly translucent petals and a golden centre, on a short, slender stem that fades out below it. It is seen from slightly above and tilted a little toward the viewer. COMPOSITION: The flower is centred horizontally, with its centre about 38% down from the top. It spans about 32% of the frame width. The outer 8% on the left and right stays plain gradient because those strips will be cropped away. The lower 35% of the frame is empty gradient, because a large cream '500+' numeral and a one-line caption sit there. AVOID: other flowers, leaves, grass, sky or cloud textures, water, sparkles, glow rings, saturated cyan, purple tints, dark vignettes, a flower placed low in the frame. Output a 3:2 landscape frame, 1536x1024. No text, no lettering, no logos, no watermarks, no UI.
**Six smiling customer headshots on plain warm-grey backdrops** (`04-testimonial-portraits-grid`)
MEDIUM AND FINISH: Real natural-light portrait photographs: six separate chest-up headshots arranged as a seamless 3-by-2 grid. The light is soft, overcast window daylight, even and low in contrast. The colour is very muted, almost desaturated. The look is quiet and editorial, not glossy corporate. The six portraits match each other in light and finish. From the attached reference, take only the calm, low-contrast, warm-greige mood of the customer photos in the testimonials section. Ignore all text, UI and layout. COLOUR AND VALUE: Backgrounds are plain seamless studio paper in warm greige and stone, varying slightly per tile: #E4DDD3, #D8D1C7, #EAE4DC. The lightest value is #F1ECE5, never pure white. The darkest value is hair or dark clothing at about #2F2925, never pure black. Skin tones are natural but low-chroma. Clothing is oatmeal, stone, charcoal, faded denim or soft olive. EDGES: There are six tiles, each exactly 512x512, set edge to edge with no gutters, borders, rounded corners or film-strip frames. Each tile will be cropped out separately and rounded in code, so nothing may cross from one tile into another. SUBJECT: Six different adults aged roughly 25 to 50, a mix of men and women of varied ethnicity. Each is smiling naturally, some laughing openly and some with a closed-mouth smile. They face the camera or turn slightly to three-quarter view. Clothing is casual: knitwear, plain tees, open-collar shirts. One wears glasses, one has a short beard, one has curly hair. COMPOSITION: In every tile the head is centred horizontally, with the eyes about 40% down from the top. Head and shoulders fill about 60% of the tile width, with plain backdrop on both sides so each tile can also be cropped to a 4:5 portrait. AVOID: laptops, desks, offices, props, hands at the face, busy or outdoor backgrounds, coloured gels, dramatic rim light, deep shadows, heavy bokeh, glossy retouching, identical-looking faces, white gutters, numbers or labels between tiles. Output a 3:2 landscape frame, 1536x1024, as a 3-by-2 grid of 512x512 tiles. No text, no lettering, no logos, no watermarks, no UI.
---
## Dark AI video editor hero
- Page: https://ai-taste-vault.vercel.app/r/dark-ai-video-editor-hero
- Original: https://br.pinterest.com/pin/950400327659265158/
- Type: Landing page
- Tags: AI, Dark mode, Editorial, Full bleed, Generous whitespace, Hero, Minimal, Nav bar, Neon accent, Restrained motion
- Palette: #0C0A0A, #370C05, #671805, #F89838, #FDD469
- Captured: 2026-09-18
- Rebuilt with: Claude Code · Opus 5.5 · Extra high · skills: frontend-design, emil-design-eng, transitions-dev, humanizer, gsap
- Rebuild: https://ai-taste-vault.vercel.app/v/demo/dark-ai-video-editor-hero/index.html
### Prompt — Rebuild
_rebuild · html-css · opus_
#### Dark AI video editor hero — build prompt
A single-screen, full-bleed dark landing hero for an AI video-editing product. The entire page is one viewport: a photographic field of a hand reaching into a vertical shaft of warm light, with all type and chrome laid over it. Editorial, near-monochrome, one warm accent that lives only inside the photograph. Restrained motion.
No motion report accompanies this reference — only a single still. **Every motion value below is marked (inferred) and given as a range.** Do not invent exact durations, easings or spring parameters beyond the ranges stated.
##### Structure
- Viewport target: 1440 × 866 CSS px. The page is **full-bleed** — no outer margin, no page background behind it, no rounded corners on the page itself, no max-width wrapper with visible edges.
- Page gutters: **48px** left and right. Chrome (logo, nav pills, glyph cluster, right caption) aligns to those gutters.
- Content column: a second alignment edge at **x = 184px**. The nav link list, the headline, the hero CTA and the bottom-left paragraph all start there. This offset left rail is the layout's signature — the logo sits alone in it.
- Grid: 12 columns, 24px gutters, inside the 1344px content box. Headline occupies cols 1–5 measured from the content edge; the photograph's focal light column lands at ~58% of viewport width.
- No cards, no panels, no containers with visible bounds. Everything floats on the image.
Sections, top to bottom (numbers reused in every section below):
1. **Background image field** — z-0, full-bleed, covers the entire 1440 × 866 viewport, behind everything.
2. **Top nav row** — y 40 → 80. Logo left; comma-separated link list at the content edge; two pills flush right.
3. **Hero copy block** — y 228 → 517. Three-line headline, then the CTA pill. Left-aligned at x = 184.
4. **Tool-glyph cluster** — y ~177 → 193, flush to the right gutter. Three or four 16px line icons in a row.
5. **Bottom meta row** — bottom-anchored, 48px from the bottom edge (y 770 → 818). Support paragraph left at x = 184; small caption right, ending at x = 1392, preceded by a tiny mark glyph.
##### Scroll map
| # | Section | Height | In viewports | Scroll consumed | Kind |
|---|---------|--------|--------------|-----------------|------|
| 1 | Background image field | 866px (full layer) | 1.00 | 0 | static (with on-load settle) |
| 2 | Top nav row | 40px band | 0.05 | 0 | static (entrance on load) |
| 3 | Hero copy block | 289px band | 0.33 | 0 | static (entrance on load) |
| 4 | Tool-glyph cluster | 16px band | 0.02 | 0 | static (entrance on load) |
| 5 | Bottom meta row | 48px band | 0.06 | 0 | static (entrance on load) |
**Total page height: 866px = 1.00 viewport. The document does not scroll.** There is no scroll-linked motion, no pin, no stack. Do not add sections below the fold, and do not add a scroll cue, chevron or "scroll" label — the composition ends at the fold on purpose.
##### Spacing
- Page padding: `48px` inline, `40px` top, `48px` bottom.
- Nav row: logo mark at x = 48; gap from logo to the link list is `~120px` (the list starts at the content edge, 184). Links separated by commas with a `6px` gap on either side of the comma. Gap between the two right-hand pills: `12px`. Pill padding: `0 24px`, height `40px`.
- Nav bottom (80) → headline block top (228): `148px`.
- Headline → CTA pill: `32px`.
- CTA pill: `170 × 56px`, label centred, horizontal padding `32px`.
- Bottom meta row sits `48px` above the bottom edge; left paragraph and right caption share one baseline grid, both two lines tall.
- Glyph cluster: `12px` between icons, `~97px` below the nav row's bottom.
- Vertical hairline rail at `x = 72px`, running y 140 → 620 (inferred, very faint).
- Rhythm: the page has exactly three horizontal bands — nav at the top, copy at 26–60% height, meta pinned to the bottom — with a large, deliberately empty middle-right where the photograph does the work. Do not fill that void.
##### Type
Family class: **neo-grotesk** (Helvetica/Neue Haas lineage) — even widths, closed apertures, no quirks. Free stand-in: **Inter Tight** for the display line, **Inter** for UI and running text. One family throughout, no pairing, no mono.
Body anchor: **16px** running text at 1440. All other levels stated as a multiple of it.
| Level | Multiple | Size | Line-height | Tracking | Weight | Case | Colour | Max measure |
|---|---|---|---|---|---|---|---|---|
| Headline (3) | 4.0× | 64px | 1.05 (67px) | −0.02em | 400 | sentence | `#F6F1EB` | 560px, wraps to 3 lines (~16–20 chars/line) |
| Support paragraph (5, left) | 1.0× | 16px | 1.50 (24px) | 0 | 400 | sentence | `rgba(246,241,235,0.78)` | 480px (~60ch), exactly 2 lines |
| Caption (5, right) | 0.8× | 13px | 1.45 (19px) | 0 | 400 | sentence | `rgba(246,241,235,0.62)` | 240px (~34ch), exactly 2 lines |
| Nav link (2) | 0.875× | 14px | 1.2 | +0.06em | 500 | UPPERCASE | `rgba(246,241,235,0.72)` | — |
| Pill / CTA label (2, 3) | 0.875× | 14px | 1.0 | +0.06em | 500 | UPPERCASE | `#F6F1EB` | — |
Placeholder copy, by role and length:
- Headline: 6–8 words that break onto **three** lines, last line short (one word). Pattern: "[capability], redefined for the next generation."
- Nav: four links, 1–3 words each, comma-separated as a single sentence-like list.
- Pills: "LOG IN" (2 words max), "GET STARTED" (2 words).
- CTA: same 2-word label as the primary pill.
- Support paragraph (5): 18–22 words, chosen so it wraps to exactly two lines at 480px.
- Caption (5): 10–12 words, wrapping to exactly two lines at 240px.
The headline must stay at weight 400. At 64px a regular grotesk reads as the display face here; 600+ destroys it.
##### Colour
| Hex | Role |
|---|---|
| `#0C0A0A` | Dominant surface. Page background and the crushed left ~45% of the photographic field. Covers roughly 60% of the pixels. |
| `#370C05` | Deep umber. The transition mid-tone where black meets the glow, and the shadowed side of the hand. Structural, never a UI fill. |
| `#671805` | Burnt amber. Outer falloff of the light column and the deep right-hand wash. Structural. |
| `#F89838` | **The single accent.** The lit body of the vertical shaft and the rim light on the fingers. |
| `#FDD469` | Accent highlight — only the hottest core of the shaft and the sharpest knuckle rims. Never a flat fill. |
| `#F6F1EB` | Warm off-white. All type and icon strokes, at 100% / 78% / 72% / 62% opacity by level. |
Accent rule, strictly: `#F89838` and `#FDD469` exist **only inside the photograph**. No orange button, no orange text, no orange border, no orange logo, no orange glow div behind the headline. The one permitted UI appearance is a `2px` `#F89838` focus ring on keyboard focus. Everything else is off-white on near-black.
Scrims (needed for legibility, part of the colour system):
- Left scrim: `linear-gradient(90deg, #0C0A0A 0%, rgba(12,10,10,0.92) 28%, rgba(12,10,10,0.35) 48%, transparent 62%)`.
- Bottom scrim: `linear-gradient(180deg, transparent 0%, rgba(12,10,10,0.75) 100%)` over the lowest 180px.
- Top scrim: `linear-gradient(180deg, rgba(12,10,10,0.55) 0%, transparent 100%)` over the top 140px.
##### Surface
- Borders: `1px` only, colour `rgba(246,241,235,0.14)`. Used on the right-hand pill and the hero CTA. The hairline rail is `1px rgba(246,241,235,0.07)`.
- Radii: pills are fully rounded (`999px`) — the two nav pills (40px tall) and the hero CTA (56px tall). Nothing else has a radius. The page has square corners.
- Fills: left nav pill `rgba(246,241,235,0.20)`, no border. Right nav pill `rgba(246,241,235,0.08)` + hairline border. Hero CTA `rgba(12,10,10,0.72)` + hairline border, with `backdrop-filter: blur(12px)` on all three.
- **No shadows anywhere.** No `box-shadow`, no elevation, no glow behind text. All light in the composition comes from inside the photograph. A drop shadow on a pill immediately kills it.
- Optional film grain overlay at ≤3% opacity, `mix-blend-mode: overlay`. Anything heavier looks like a filter.
##### Imagery
One photograph, and nothing else.
**Image 1 — the field (section 1).** A bare human hand and forearm entering from the right edge of the frame, palm down, fingers extended leftward and slightly downward, reaching toward a narrow vertical shaft of warm light. The shaft runs floor-to-ceiling at ~58% of the viewport width, roughly 30px wide at its hot core with a soft bloom either side — read it as light spilling through a door left ajar in a black room. The light rims the knuckles, the back of the hand and the top edges of the fingers in pale gold, falls off through amber into umber along the forearm, and dies completely before the right edge. No background detail at all: no walls, no props, no horizon. Aspect ratio as used: fills 1440 × 866 (≈16:10) with `object-fit: cover`, `object-position: 60% 45%`. Fingertips land at x ≈ 60%, y ≈ 42% of the viewport — just clear of the headline's right edge. Treatment: single warm key, extreme contrast, clean (not grainy), no colour in the shadows other than the umber the light itself makes.
Vector marks, not images: the logo (a compact 32 × 24 monogram, off-white, left gutter); the three-to-four glyphs in section 4 (16 × 16, `1.25px` strokes — a crosshair/plus, a circular refresh arrow, an X) ; the small 10px mark preceding the caption in section 5.
##### Motion
###### 1 — Background image field
- **kind** — static (one on-load settle; no scroll-linked behaviour, the page does not scroll)
- **what moves** — the photographic layer as a whole, and separately the light shaft's luminance
- **from → to** — layer: `scale(1.06)`, `opacity 0` → `scale(1.00)`, `opacity 1`. Shaft: an ambient loop between `opacity 0.92` and `1.00` (inferred) on the light-column layer only
- **range** — entrance, on page load, no trigger element. Duration 1600–2400ms (inferred, not measured); easing a long ease-out such as `cubic-bezier(0.16, 1, 0.3, 1)` (inferred). Ambient loop period 6–9s (inferred), `ease-in-out`, infinite alternate
- **reduced motion** — renders at `scale(1)`, `opacity 1` immediately; no ambient loop
###### 2 — Top nav row
- **kind** — entrance (once, on load)
- **what moves** — logo, link list, two pills
- **from → to** — `opacity 0`, `translateY(-8px)` → `opacity 1`, `translateY(0)`
- **range** — triggered on load, starting 200–350ms after the image layer begins (inferred). Duration 400–600ms (inferred); easing ease-out; stagger 40–60ms in DOM order, left to right
- **reduced motion** — appears at final state, no transform
###### 3 — Hero copy block
- **kind** — entrance (once, on load)
- **what moves** — the three headline lines individually, then the CTA pill
- **from → to** — each headline line: `opacity 0`, `translateY(16px)` → `opacity 1`, `translateY(0)`, clipped by a per-line `overflow: hidden` wrapper so the line rises out of its own box. CTA pill: `opacity 0`, `translateY(12px)` → `opacity 1`, `translateY(0)`
- **range** — on load, beginning 350–500ms in (inferred). Duration 600–800ms per line (inferred); easing `cubic-bezier(0.22, 1, 0.36, 1)` (inferred); stagger 80–110ms between lines; CTA follows the last line by 120–160ms
- **reduced motion** — all lines and the CTA fade only, 150ms, no translate and no clip
###### 4 — Tool-glyph cluster
- **kind** — entrance (once, on load)
- **what moves** — the three/four icons
- **from → to** — `opacity 0` → `opacity 0.6`; no transform
- **range** — on load, after the nav, 700–900ms in (inferred). Duration 400–500ms (inferred); stagger 60–80ms right to left
- **reduced motion** — appears at `opacity 0.6` immediately
###### 5 — Bottom meta row
- **kind** — entrance (once, on load)
- **what moves** — left paragraph block, right caption block (each as a whole, not per line)
- **from → to** — `opacity 0`, `translateY(10px)` → `opacity 1`, `translateY(0)`
- **range** — on load, last in sequence, 900–1100ms in (inferred). Duration 500–700ms (inferred); easing ease-out; 80ms stagger between the two blocks
- **reduced motion** — fade only, 150ms
The whole load sequence should resolve inside ~2s. Nothing on this page reacts to scroll: no parallax on the photograph, no fade on the nav, no progress bar.
###### Interaction transitions (not part of the load choreography)
- Nav link hover: colour `rgba(246,241,235,0.72)` → `#F6F1EB`, 160ms ease. No underline, no colour shift to orange.
- Nav link press: `opacity 0.7`, 80ms.
- Pill hover (left, filled): fill `rgba(246,241,235,0.20)` → `rgba(246,241,235,0.30)`, 180ms ease.
- Pill hover (right, outlined) and hero CTA hover: border `rgba(246,241,235,0.14)` → `rgba(246,241,235,0.30)`, fill lightens by 4% alpha, 180ms ease. No scale, no lift, no shadow.
- Pill press: `scale(0.985)`, 90ms.
- Glyph hover: `opacity 0.6` → `1`, 140ms.
- Focus-visible: `2px` `#F89838` ring, `3px` offset, no transition.
- Cursor: default arrow. No custom cursor, no magnetic buttons.
##### Responsive (below 640px)
- Gutters drop from 48px to **20px**; the 184px content edge collapses to the gutter — everything left-aligns at 20px. The hairline rail is removed.
- Headline: 64px → **36px**, line-height 1.1, tracking −0.015em, still three lines, max-width 100%.
- Nav: link list is dropped entirely; keep logo left, the primary pill right, and a 20px hamburger. Pill height 40px stays, label stays 14px.
- Hero copy block moves up: top offset 148px → **96px** below the nav. CTA full-width-capped at 200px, height 52px.
- Photograph: `object-position` shifts to `72% 40%` so the light shaft and fingertips stay in frame; the left scrim becomes a vertical one — `linear-gradient(180deg, rgba(12,10,10,0.9) 0%, rgba(12,10,10,0.2) 55%, rgba(12,10,10,0.85) 100%)`.
- Section 4 (glyph cluster) is dropped.
- Section 5: right caption is dropped; the left paragraph stays at 16px, full width, three lines, still 32px above the bottom edge.
- Viewport height: `100svh`, min-height 640px. The composition must still end at the fold — no scroll.
##### Don'ts
- **Don't render the mockup's black mat.** No inset page, no rounded page corners, no coloured sheet behind the design. The viewport is the design.
- **Don't put the accent on a button.** The single most likely failure: an orange `#F89838` "Get Started" pill. Both nav pills and the CTA are neutral glass on near-black. Orange stays inside the photograph.
- **Don't reach for the AI-product palette** — no violet/indigo gradient, no cyan, no gradient text, no aurora blob behind the headline, no animated mesh.
- **Don't centre the hero.** It is left-aligned at an offset rail with a deliberately empty right-of-centre void. Centring collapses the composition.
- **Don't bold the headline.** 400 weight. And don't tighten tracking past −0.025em or letter-space it positively.
- **Don't use a "techy" display face** — no Space Grotesk, no mono headline, no variable-width flexing. Plain neo-grotesk only.
- **Don't add glassmorphism cards, bento tiles, feature grids, logo clouds, or a mock editor UI.** There is one photograph and five text elements. Additions read as a different, worse page.
- **Don't add shadows or glows to text and buttons.** Legibility comes from the scrims.
- **Don't use `#000000` or `#FFFFFF`.** Background is `#0C0A0A`, type is warm off-white `#F6F1EB`.
- **Don't animate the headline word-by-word, character-by-character, or with a typewriter/scramble effect.** Three whole lines, masked, rising once.
- **Don't add scroll behaviour of any kind** — no parallax, no pinned hero, no "scroll to explore", no sticky nav shrink. The page is one viewport.
- **Don't let the photograph go `object-fit: contain`, letterbox, or sit in a rounded container.** It bleeds to all four edges under the type.
- **Don't drop nav or button labels below 14px**, and don't drop the caption below 13px, however small they look in the reference.
- **Don't set the nav links as evenly-spaced items.** They are a comma-separated list, read as one line of editorial text — that comma is the detail that makes the nav.
### Imagery — already generated
These pictures were made for this design and are hosted at the URLs below.
Use them as the `src` exactly as written, and keep the alt text. Do not
generate your own, do not reach for a stock library or a placeholder
service, and do not feed the Imagery section above back to an image model —
that work is done. Size and crop them with CSS (`object-fit: cover`) rather
than assuming their dimensions, and download them into the project if you
would rather not hotlink.
- https://ai-taste-vault.vercel.app/v/demo/dark-ai-video-editor-hero/images/01-hero-field.webp — A bare hand reaching from the right toward a tall shaft of warm light in an otherwise black room
### Image prompts
What each picture above was generated from, for anyone changing one.
**A bare hand reaching from the right toward a tall shaft of warm light in an otherwise black room** (`01-hero-field`)
MEDIUM AND FINISH: A high-contrast studio photograph on a full-frame camera, roughly 50mm, single warm key light and nothing else — clean and grain-free, with a soft optical bloom only immediately around the light source. Real skin: visible pores, fine hairs catching the light along the back of the hand, natural subsurface warmth where the light passes through the lit fingertips. Focus is deep enough that the whole hand stays sharp; this is not a macro shot and not a soft diffusion render. COLOUR AND VALUE: Entirely warm and near-monochrome. The left 45% of the frame is a flat crushed near-black #0C0A0A with no detail in it at all; the transition where black meets the glow, and the shadowed underside of the hand and forearm, are deep umber #370C05; the outer falloff of the light and the broad wash across the right third are burnt amber #671805; the lit body of the light and the rim on the fingers are #F89838; the single hottest core of the shaft and the sharpest knuckle rims reach pale warm gold and go no brighter than #FDD469 — nothing in the frame is white, and nothing is neutral grey, blue, green or magenta. More than half the pixels sit darker than #1A1010. Shadows are warm black only; there is no cool tone anywhere in the picture. EDGES: The picture bleeds to all four edges of the frame with no border, no vignette shape and no rounded corners. The left edge and left third settle to flat #0C0A0A so the image dissolves invisibly into a #0C0A0A page background; the lowest sixth falls away to near-black; the top strip is dark except where the shaft crosses it; the far right edge dies back to near-black so the end of the forearm is almost lost in shadow before it leaves the frame. SUBJECT: A bare human hand and forearm entering from the right edge, palm down, fingers relaxed and extended leftward and slightly downward, reaching toward a narrow vertical shaft of warm light — read it as light spilling through a door left ajar in an empty black room. The shaft runs unbroken from the top edge to the bottom edge, with a crisp bright left edge and a soft bloom spreading rightward into amber. The light rims the knuckles, the back of the hand and the top edge of each finger in pale gold, then falls off through amber into umber along the forearm. There is no background detail whatsoever: no wall, no floor line, no horizon, no door frame, handle or hardware, no props, no body beyond the forearm. COMPOSITION: The shaft's hot core sits at about 60% of the frame width; the fingertips just reach the light at about 58% width and 40% height. The hand occupies the right third only. The left 40% of the frame is empty near-black because large headline type is laid over it, and the top and bottom strips must stay quiet and dark for the same reason — keep all incident and detail in the central-right band, away from the extreme top and bottom edges, which will be cropped. AVOID: No lens flare, sunburst or starburst; no separated light rays or god rays; no dust motes, smoke, fog or volumetric haze; no black corner vignette; no heavy film grain or dust-and-scratch texture; no HDR clarity or sharpening halos; no shallow-depth bokeh balls; no second light source, no fill light and no practical lamp; no cool or blue shadows and no purple tint; no jewellery, rings, watch, nail polish or long nails; no malformed or extra fingers, no second hand, no face or figure. Output a wide 3:2 landscape frame, 1536x1024. No text, no lettering, no logos, no watermarks, no UI.
---
## DeepSeek — Dark AI Model Landing
- Page: https://ai-taste-vault.vercel.app/r/deepseek-dark-ai-model-landing
- Original: https://dribbble.com/shots/25881029-Landing-Page-Design-for-DeepSeek-AI-Company
- Type: Landing page
- Tags: AI, CTA band, Feature grid, Footer, Hero, High contrast, Nav bar, Stats band, Technical / Developer
- Palette: #0A0A18, #F6F9FE, #D5DBF7, #98A9F7, #1C2467
- Captured: 2026-09-18
- Rebuilt with: Claude Code · Opus 5.5 · Extra high · skills: frontend-design, emil-design-eng, transitions-dev, humanizer, gsap
- Rebuild: https://ai-taste-vault.vercel.app/v/demo/deepseek-dark-ai-model-landing/index.html
### Prompt — Rebuild
_rebuild · html-css · opus_
#### Dark AI Model Landing Page — Rebuild Prompt
A full-bleed marketing page for a technical/AI product. Dark at the top, light through the middle, dark again from the halfway point down, with two full-width abstract "liquid light" plates doing the handoffs. Everything is left-aligned against a strict grid; the only decoration is the gradient artwork and a headline system that alternates roman and italic words.
Reference viewport for all numbers: **1440 × 900 CSS px**.
---
##### 1. Structure
**Grid.** Full-bleed page, no centred max-width wrapper. 12 columns, 40px outer page margins (1360px usable), 24px gutters → column width 91px.
- **Column 1** is a dedicated *label rail*. It holds only the section eyebrows and the nav/footer logo mark. Nothing else ever enters it.
- **Column 2** is always empty — it is the breathing space between rail and content.
- **Content starts at column 3** (x ≈ 271px). Every headline, paragraph, grid and chart begins on this line. This single alignment is what holds the page together.
- Content blocks end on different columns by design (accordion stops at col 10, cards run to col 12). Do not normalise them to one right edge — the ragged right margin is intentional.
**Sections, top to bottom:**
1. **Nav bar** — fixed overlay, 88px tall, transparent over the hero.
2. **Hero** — dark→light gradient field, headline, prompt-composer mock, bottom rail.
3. **Advantages accordion** — two-up: headline + button left, expandable list right. Light surface.
4. **Fluid plate A** — full-bleed abstract band, light edges.
5. **Core features** — headline + 4-up text columns. Light surface.
6. **Fluid plate B** — full-bleed abstract band; light at its top edge, solid near-black at its bottom edge. This is where the page flips to dark.
7. **Benchmarks** — headline, intro paragraph, 5 stacked bar-chart groups. Dark surface.
8. **Tools row** — headline + 4 image/text columns. Dark surface.
9. **CTA band** — headline, paragraph, one filled button, indigo bloom behind. Dark surface.
10. **Footer** — 4 link columns, hairline, bottom bar. Dark surface.
There are no horizontal rules between sections. The two fluid plates are the only dividers.
---
##### 2. Scroll map
Viewport = 900px. Nothing pins; nothing stacks. Scroll consumed equals height for every section.
| # | Section | Height | Viewports | Scroll consumed | Kind |
|---|---|---|---|---|---|
| 1 | Nav bar | 88px (overlay) | — | 0 (fixed) | scroll-linked (tint only) |
| 2 | Hero | 980px | 1.09 | 980px | entrance on load + scroll-linked |
| 3 | Advantages accordion | 560px | 0.62 | 560px | entrance |
| 4 | Fluid plate A | 520px | 0.58 | 520px | scroll-linked |
| 5 | Core features | 480px | 0.53 | 480px | entrance |
| 6 | Fluid plate B | 440px | 0.49 | 440px | scroll-linked |
| 7 | Benchmarks | 1300px | 1.44 | 1300px | entrance (per group) |
| 8 | Tools row | 800px | 0.89 | 800px | entrance |
| 9 | CTA band | 420px | 0.47 | 420px | entrance + scroll-linked |
| 10 | Footer | 520px | 0.58 | 520px | static |
**Total page height: 6,020px ≈ 6.7 viewports.**
---
##### 3. Spacing
**Section padding (top / bottom):**
- (2) Hero: 88 top (nav) / 220 bottom
- (3) Advantages: 120 / 120
- (4) Plate A: 0 / 0 — the plate is the section
- (5) Core features: 120 / 100
- (6) Plate B: 0 / 0
- (7) Benchmarks: 140 / 140
- (8) Tools: 140 / 140
- (9) CTA: 96 / 96
- (10) Footer: 96 / 64
**Internal:**
- Nav: link gap 48px; logo mark 24px square.
- Hero: nav bottom → headline top 112px. Headline → composer 48px. Composer → bottom rail 268px (a large deliberate void filled only by the gradient bloom). Rail sits ≈760px from the section top.
- Composer: width 864px (cols 3–10), padding 20px, internal radius stack of 44px input row + 16px gap + 36px chip row. Chip gap 8px. Send button 40px circle, right-aligned on the chip row.
- Eyebrow in the rail is **top-aligned to the cap line of the section headline**, not to the section's padding box.
- Headline → first content below it: 56px. Headline → button (section 3): 40px.
- Accordion (cols 6–10, 570px wide): row padding 26px top / 26px bottom, 1px hairline under every row including the last. Expanded row splits into a 200px title sub-column + 24px gap + body to the row's right edge.
- Core features: 4 columns of 266px, 24px gutter. Title → body 12px.
- Benchmarks: intro paragraph 56px below headline; chart 88px below paragraph. Group = 24px label-to-first-bar, bar height 24px, bar gap 8px, 5 bars per group, 48px between groups.
- Tools: image → title 20px, title → body 10px, body → button 24px. Column gap 24px.
- CTA: headline → paragraph 20px; button vertically centred against the paragraph block, right-aligned at cols 9–11.
- Footer: heading → first link 20px, link row gap 14px. Hairline 56px below the columns, bottom bar 80px tall.
**Rhythm.** Light sections breathe at 120px; dark sections at 140px. The plates have zero padding, so the page alternates *air → image → air → image → long dark run*. Do not equalise all sections to one padding value.
---
##### 4. Type
**Class:** a geometric-leaning grotesk with **true italics** (not obliques). Free stand-ins: **General Sans** (Fontshare) or **Inter Tight**. Tabular lining numerals for the benchmark figures.
**The headline system is the whole identity:** every headline mixes roman and italic in the same line — roman at weight 400, emphasis words at weight 500 *italic*, identical size, identical colour. Roughly a third to a half of each headline is italic.
Body anchor: **17px** at 1440.
| Level | Ratio | Size | Line-height | Tracking | Weight |
|---|---|---|---|---|---|
| Hero headline | 3.8× | 64px | 1.12 (72px) | −0.02em | 400 / 500 italic |
| Section headline (3,5,7,8) | 2.6× | 44px | 1.15 (51px) | −0.015em | 400 / 500 italic |
| CTA headline (9) | 2.1× | 36px | 1.2 (43px) | −0.015em | 400 / 500 italic |
| Body / running text | 1× | 17px | 1.55 (26px) | 0 | 400 |
| Accordion title, feature title, card title | 1.06× | 18px | 1.3 (23px) | −0.005em | 500 |
| Benchmark group label | 0.94× | 16px | 1.3 | 0 | 500 |
| Footer column heading | 0.94× | 16px | 1.4 | 0 | 500 |
| Small body (feature columns, card body, hero rail paragraph, footer links) | 0.82× | 14px | 1.5 (21px) | 0 | 400 |
| Nav links | 0.82× | 14px | 1.2 | 0.01em | 450 |
| Buttons | 0.82× | 14px | 1.0 | 0.08em (uppercase) / 0 (sentence case) | 500 |
| Eyebrow label (in rail) | 0.76× | 13px | 1.2 | 0.12em, uppercase | 500 |
| In-bar chart text + scores | 0.7× | 12px | 1.0 | 0.01em | 450, tabular |
| Bracketed metric, badges, footer legal | 0.7× | 12px | 1.2 | 0.08em, uppercase | 450 |
**Max line length:** 60–66 characters for all running text (≈560px at 17px). Hero headline breaks at **2 lines, ~22 characters each**. Section headlines break at **2 lines**. The 14px feature/card columns run ~30 characters — narrow and dense, that is correct.
**Eyebrows are literally parenthesised:** `( ADVANTAGES )`, `( CORE FEATURES )`, `( PASS@1 )` — with a space inside each bracket.
**Placeholder copy by role:**
- Hero eyebrow: none.
- Hero headline: 9–11 words on 2 lines, 2–3 of them italic.
- Composer placeholder: 3 words, sentence case.
- Hero rail paragraph: 18–24 words, 2 lines at 14px.
- Section eyebrows: 1–3 words.
- Section headlines: 5–7 words on 2 lines.
- Accordion titles: 2–3 words. Accordion body: 25–35 words.
- Feature titles: 2–4 words. Feature body: 18–26 words.
- Card badges: 1 word. Card titles: 2–4 words on 2 lines. Card body: 18–24 words.
- CTA paragraph: 28–34 words on 2 lines.
---
##### 5. Colour
| Hex | Role | Where |
|---|---|---|
| `#0A0A18` | **Dominant dark surface** — ~60% of the page | Hero top third, all of sections 7–10, plate B's bottom edge. Also the text colour on light surfaces. |
| `#F6F9FE` | **Dominant light surface** — ~40% | Sections 3 and 5, the light edges of both plates, hero's lower third. Also the primary text colour on dark, and the fill of the one solid button. |
| `#D5DBF7` | Muted / secondary text on dark, hairlines on dark, chip labels, footer links at rest, chart comparison-bar text | |
| `#1C2467` | Raised/inset surfaces and non-highlighted bar fills on dark; the mid-value inside the gradient artwork | |
| `#98A9F7` | **The single accent** | |
**The accent is allowed in exactly these places:** the highlighted (first) bar in each benchmark group; the send button fill in the composer; link and nav hover; the focus-visible ring; and as the transitional value inside the two gradient plates and the hero field. Nowhere else. It is never a page background, never a headline colour, never a large button fill, never a body text colour.
**Derived tokens (state them, don't improvise):**
- Body text on light: `#0A0A18` at 68% → `#4A4B5C`
- Muted text on dark: `#D5DBF7` at 72%
- Hairline on light: `#0A0A18` at 10%
- Hairline on dark: `#F6F9FE` at 10%
- Ghost button fill on hover: `#F6F9FE` at 6%
---
##### 6. Surface
- **Borders:** 1px only. There is no 2px border anywhere. On light `#0A0A18`/10%; on dark `#F6F9FE`/10%. The composer uses `#F6F9FE`/12%.
- **Radii:** pills (all buttons, all chips, badges) = 999px. Composer = 24px. Card image frames = 16px. Benchmark bars = 6px. Nothing else is rounded — sections, plates and the page itself are square.
- **Shadows: none.** No drop shadows, no inset shadows, no glow rings on cards. Depth comes entirely from the gradient light and the 1px hairlines. The composer's apparent lift is a soft background bloom *behind* it in the hero artwork, not a `box-shadow`.
- **No glassmorphism** on cards. The composer is the only translucent element (fill `#F6F9FE` at 7%, backdrop-blur 16px), and the nav after scroll.
---
##### 7. Imagery
No photographs. No people. No product UI screenshots except the composer, which is built in markup, not an image.
**IMG-1 — Hero field.** Full-bleed, 1440×980, ≈1.47:1. A vertical gradient reading near-black at the top, through deep indigo and periwinkle in the middle, to near-white by ~75% down. Superimposed: one wide, soft elliptical bloom centred behind the composer, and a faint high horizon of light. Smooth, no visible banding, no stars, no grain flecks.
**IMG-2 — Fluid plate A.** Full-bleed, 1440×520, ≈2.77:1. Abstract liquid-light: long horizontal flows of near-black ink dissolving into vapour across a white field, periwinkle only where the two values meet. It reads like a mountain ridge photographed through fog and then smeared sideways — very high frequency along the boundaries, glassy-smooth elsewhere. The top ~15% and bottom ~15% fade completely into `#F6F9FE` so the plate has no visible edge.
**IMG-3 — Fluid plate B.** Full-bleed, 1440×440, ≈3.27:1. Same family, denser and darker: heavy indigo masses with a blurred horizon. Top edge fades into `#F6F9FE`; bottom edge resolves to solid `#0A0A18`. This plate carries the page's light→dark flip, so its lower boundary must be an exact colour match with section 7's background.
**IMG-4 … IMG-7 — Four tiles in the tools row.** 266×213 each, 5:4. Dense parallel contour isolines — 1px, light periwinkle over indigo — warped into ridges, basins and folds. Each tile is a different region of the same imaginary field (one banded and flat, one peaked, one with tight nested rings, one with long sweeping curves) so they read as a set, not four unrelated graphics. Clipped to a 16px frame. Each carries one 12px uppercase pill badge in its top-left corner, 12px inset, fill `#0A0A18`/60%.
**IMG-8 — CTA bloom.** Full-bleed, 1440×420, ≈3.43:1. A single soft indigo bloom entering from the left edge and dissipating by ~60% across, over `#0A0A18`. Lowest contrast image on the page.
**Icons** (1.5px stroke, currentColor, 20px): paperclip, a "reasoning" glyph, a globe/search glyph, circled arrow-up (send), long down-arrow (hero rail), `↗` on every ghost button, `+` on collapsed accordion rows, small `⌄` on the one nav item with a menu.
---
##### 8. Motion
**No live-page motion measurements were supplied for this reference.** Everything below is read from the stills and marked **(inferred)**. All durations and easings are given as ranges and are explicitly **not measured** — do not present them as exact, and do not substitute spring/lerp parameters.
###### 1. Nav bar
- **kind** — scroll-linked (inferred)
- **what moves** — the bar's own background and bottom hairline. Links and logo do not move.
- **from → to** — background `transparent` → `#0A0A18` at 72% with backdrop-blur 12px; bottom hairline opacity 0 → 1; bar height stays 88px.
- **range** — scroll-linked across the first 120px of page scroll; fully reverses on the way back up.
- **reduced motion** — the tint snaps on at 120px with no blur ramp.
###### 2. Hero
- **kind** — entrance on load, plus scroll-linked departure (inferred)
- **what moves** — entrance: headline line 1, headline line 2, composer, bottom rail (arrow + paragraph + button as one unit). Scroll-linked: the background bloom and the headline block.
- **from → to** — entrance: opacity 0 → 1, translateY 24px → 0. Scroll-linked: bloom translateY 0 → −120px; headline translateY 0 → −60px and opacity 1 → 0.6.
- **range** — entrance plays **once on load**, ~200ms after paint; duration 700–900ms (not measured), ease-out cubic (not measured), stagger 80–120ms in the order listed. Scroll-linked part runs from scroll 0 until the hero's bottom reaches the viewport top, and reverses upward.
- **reduced motion** — entrance becomes opacity-only over ~200ms with no translate; the bloom and headline are static.
###### 3. Advantages accordion
- **kind** — entrance, plays once (inferred)
- **what moves** — eyebrow, headline, button, then each accordion row.
- **from → to** — opacity 0 → 1, translateY 20px → 0.
- **range** — triggers once when the section's top reaches 80% of the viewport; duration 500–700ms (not measured), ease-out (not measured), stagger 60–90ms, rows staggering top to bottom after the headline group.
- **reduced motion** — opacity only, no translate.
###### 4. Fluid plate A
- **kind** — scroll-linked, reverses on scroll up (inferred)
- **what moves** — the plate image inside its fixed-height frame.
- **from → to** — image scale held at 1.08; translateY −40px → +40px (a slow counter-parallax against the page).
- **range** — from the plate's top entering the viewport until its bottom leaves the viewport. Continuously mapped to scroll position.
- **reduced motion** — static image at scale 1.0, no translate.
###### 5. Core features
- **kind** — entrance, plays once (inferred)
- **what moves** — eyebrow, headline, then the four text columns.
- **from → to** — opacity 0 → 1, translateY 20px → 0.
- **range** — once, when the section's top reaches 80% of the viewport; 500–700ms (not measured), ease-out (not measured), stagger 60–80ms left to right across the four columns.
- **reduced motion** — opacity only.
###### 6. Fluid plate B
- **kind** — scroll-linked, reverses on scroll up (inferred)
- **what moves** — the plate image, and the page background colour behind it.
- **from → to** — image translateY −40px → +40px at scale 1.08; page background `#F6F9FE` → `#0A0A18` across the plate's final 40%.
- **range** — from the plate's top entering the viewport until its bottom reaches the viewport top.
- **reduced motion** — static image; background flips at a single threshold when the plate's midpoint crosses the viewport centre.
###### 7. Benchmarks
- **kind** — entrance, once, triggered **per chart group** (inferred)
- **what moves** — eyebrow, headline, intro paragraph as one group; then, independently, each of the 5 chart groups: its label, its bars, its in-bar text and scores.
- **from → to** — text: opacity 0 → 1, translateY 20px → 0. Bars: `scaleX` 0 → 1 with `transform-origin: left`, ending at each bar's own data width; in-bar labels and scores opacity 0 → 1 held until the bar reaches ~70% of its final width.
- **range** — each group triggers once when *its own* top reaches 80% of the viewport; bar duration 600–800ms (not measured), ease-out (not measured), stagger 60ms per bar within a group. Groups never re-run on scroll up.
- **reduced motion** — bars render at final width immediately; text fades over ~200ms.
###### 8. Tools row
- **kind** — entrance, once (inferred)
- **what moves** — eyebrow and headline, then the four columns as units (image + badge + title + body + button).
- **from → to** — opacity 0 → 1, translateY 28px → 0; the image additionally scales 1.06 → 1.00 inside its clipped 16px frame over the same interval.
- **range** — once, when the row's top reaches 80% of the viewport; 600–800ms (not measured), ease-out (not measured), stagger 80ms left to right.
- **reduced motion** — opacity only; no translate, no scale.
###### 9. CTA band
- **kind** — entrance for the content, scroll-linked for the bloom (inferred)
- **what moves** — entrance: eyebrow, headline, paragraph, button. Scroll-linked: IMG-8.
- **from → to** — entrance: opacity 0 → 1, translateY 20px → 0. Bloom: translateX −60px → +60px.
- **range** — entrance once, when the section's top reaches 80% of the viewport; 500–700ms (not measured), ease-out (not measured), stagger 70ms. Bloom is mapped to scroll across the section's full pass through the viewport and reverses.
- **reduced motion** — opacity only; bloom static.
###### 10. Footer
- **kind** — **static.** Nothing enters, nothing parallaxes, nothing fades. It is simply there when you reach it.
- **what moves** — nothing.
- **from → to** — n/a.
- **range** — n/a.
- **reduced motion** — no change; already static.
###### Interaction transitions (not part of the scroll choreography)
- Nav link hover: colour `#D5DBF7` → `#F6F9FE` over 120–160ms; a 1px underline wipes in from the left over ~180ms.
- Nav menu item open: panel opacity 0 → 1 and translateY −8px → 0 over 160–200ms; close over ~120ms. The `⌄` rotates 180°.
- Ghost/outline button hover: border 10% → 28% white, fill transparent → 6% white, and the `↗` shifts +2px x / −2px y, ~140ms.
- Solid button hover: fill `#F6F9FE` → `#D5DBF7`, ~120ms.
- Any button press: scale 0.985 over ~80ms, released on pointerup.
- Accordion open: the `+` rotates 45° into an `×` over ~200ms; the panel goes height 0 → measured height with opacity 0 → 1 over 260–320ms ease-out. Only one row open at a time; the previously open row closes over the same interval. One row is open by default on load.
- Composer focus: border 12% → 30% white and the background bloom brightens ~8% over ~180ms. The send button sits at 40% opacity until the field is non-empty, then 100% over ~120ms.
- Tools tile hover: image scale 1.00 → 1.03 inside the clipped frame over ~400ms ease-out; the badge does not move.
- Footer link hover: opacity 0.7 → 1 over ~120ms.
- Focus-visible, everywhere: 2px `#98A9F7` ring at 2px offset, no transition.
---
##### 9. Responsive (below 640px)
- Page margins 40px → 20px. Grid collapses to one column.
- **The label rail disappears as a column.** Each eyebrow moves inline above its section headline, same 13px style, with 16px below it.
- Nav: links and the language toggle are dropped into a full-screen sheet behind a 24px hamburger; only the logo mark and the trigger stay in the 64px bar.
- Hero: 980px → 700px. Headline 64px → 34px (2× body), 3 lines. Composer full-width, its chip row wraps to two lines, send button stays on the first chip row. The 268px void shrinks to 80px. Bottom rail: down-arrow dropped, paragraph then button stacked, button full-width.
- Advantages: headline block stacks above the accordion, 48px gap. Inside an expanded row the body drops **below** the title instead of beside it.
- Plates A and B: re-crop to a 4:5 portrait framing at 320px tall — do not letterbox the desktop crop, or the forms become unreadable stripes. Keep the fading edges.
- Core features: 4 columns → 1 column, separated by 1px hairlines with 24px padding above and below each.
- Benchmarks: the group label moves above its bars (full width). Bar height 24px → 20px; in-bar model names drop to 12px and truncate with an ellipsis; scores stay right-aligned inside the bar. The bracketed metric becomes a suffix on the label. **No horizontal scrolling.**
- Tools: 4 columns → a horizontal snap carousel showing 1.15 tiles, 16px gap, 20px start inset, no visible scrollbar. Images stay 5:4.
- CTA: headline, paragraph, then a full-width button below. Bloom crops to the left third.
- Footer: 4 columns → 2 columns, 40px row gap. Bottom bar stacks to logo / legal / language on three lines, left-aligned.
- Section padding: 120/140 → 72; plates stay at 0.
---
##### 10. Don'ts
- **Don't put a solid bar behind the nav at scroll position 0.** It is fully transparent over the dark hero; the tint only arrives after 120px.
- **Don't fake the fluid plates with a blurred radial gradient or a `filter: blur()` on a coloured blob.** That is the single most likely failure. The plates are organic, high-frequency ink-in-water fields with long horizontal flow and crisp value boundaries. Use layered noise-warped gradients, a displacement-mapped render, or real generated artwork — and always fade top and bottom edges into the adjacent background so the plate has no seam.
- **Don't use violet.** Not `#7C3AED`, not Tailwind `violet-500`/`indigo-500`. The accent is a desaturated periwinkle `#98A9F7` and the darks are blue-black, not purple.
- **Don't paint the accent onto buttons, headings or section backgrounds.** It appears in five named places only. A page where the accent shows up on a CTA button is the wrong page.
- **Don't substitute an oblique for the italic, or switch families for the emphasis words.** Same family, same size, weight 500, true italic. If your font has no real italic, pick a different font — the roman/italic alternation is the entire typographic idea and a slanted roman kills it.
- **Don't centre anything.** No centred headlines, no centred eyebrows, no centred CTA. Everything starts on column 3.
- **Don't normalise the right edge.** The accordion deliberately stops at column 10 with two empty columns beside it; the card row runs to column 12. That asymmetry is the composition.
- **Don't add horizontal rules or borders between sections.** The plates are the dividers.
- **Don't add drop shadows, glow borders, or glassmorphic cards.** One translucent surface (the composer) and one more after scroll (the nav). That's it.
- **Don't put the tools tiles in bordered card containers.** They are bare columns: image, then text directly on the page background.
- **Don't give each benchmark competitor its own colour.** Every comparison bar is the same `#1C2467`; only the first bar in each group is light. A rainbow chart destroys the point being made.
- **Don't count the benchmark numbers up, and don't spring/bounce the bar widths.** Linear-out width growth, numbers fade in with the bar.
- **Don't add icons above the four feature columns.** They are text only — title and paragraph, nothing else.
- **Don't pin, horizontally scroll, or scroll-jack the tools row on desktop.** Nothing on this page pins.
- **Don't use stock photography, 3D renders, mesh-gradient clip art, or people.** There is not one photograph on the page.
- **Don't put a large wordmark or logo lockup in the hero.** The only logo instances are 24px in the nav and in the footer bottom bar.
- **Don't drop body text below 16px** and don't use neutral grey `#666` for muted text — muted is always blue-tinted.
- **Don't let running text exceed ~66 characters**, and don't justify it.
- **Don't fade the entire page in on load.** Only the hero's own elements have a load entrance; every other section waits for its scroll trigger.
- **Don't make the composer functional-looking with a real cursor, autocomplete, or sample response.** It is a still, empty state: placeholder, two chips, one attachment icon, one send button at 40% opacity.
### Imagery — already generated
These pictures were made for this design and are hosted at the URLs below.
Use them as the `src` exactly as written, and keep the alt text. Do not
generate your own, do not reach for a stock library or a placeholder
service, and do not feed the Imagery section above back to an image model —
that work is done. Size and crop them with CSS (`object-fit: cover`) rather
than assuming their dimensions, and download them into the project if you
would rather not hotlink.
- https://ai-taste-vault.vercel.app/v/demo/deepseek-dark-ai-model-landing/images/01-hero-liquid-light.webp — Blurred periwinkle and navy liquid light field rising from dark to white
- https://ai-taste-vault.vercel.app/v/demo/deepseek-dark-ai-model-landing/images/02-fluid-band-a.webp — Blurred dark navy ridge with periwinkle and white bands flowing across it, fading to white top and bottom
- https://ai-taste-vault.vercel.app/v/demo/deepseek-dark-ai-model-landing/images/03-fluid-band-b.webp — Blurred periwinkle field dissolving from white at the top into solid navy black at the bottom
- https://ai-taste-vault.vercel.app/v/demo/deepseek-dark-ai-model-landing/images/04-contour-terrain-sheet.webp — Dense wavy contour striations in violet, lilac and white, shading from light at the left to dark at the right
### Image prompts
What each picture above was generated from, for anyone changing one.
**Blurred periwinkle and navy liquid light field rising from dark to white** (`01-hero-liquid-light`)
MEDIUM AND FINISH: a soft matte digital render of an out-of-focus liquid light field — heavily blurred, smooth and clean, with no visible brush texture, no paint, no impasto, and an even veil of very fine film grain across the entire frame. This is not a photograph and must not read as one: there is no lens, no optics, no focal subject, no glass or metal object, nothing sharp anywhere in the picture. The closest reference is long-exposure light bleeding through frosted glass, resolved as a flat matte digital image. COLOUR AND VALUE: only five colours appear anywhere in the frame — near-black navy #0A0A18, deep indigo #1C2467, electric periwinkle #98A9F7, pale lilac #D5DBF7 and paper white #F6F9FE. The frame uses the full range from top to bottom: the upper third sits between #0A0A18 and #1C2467 and is the darkest part of the picture, nothing is pure #000000, and nothing in the darks is warm, green or grey — every dark is blue-leaning navy. The lower third sits between #D5DBF7 and #F6F9FE and is the lightest. No cyan, no magenta, no teal, no purple-pink, no warm tone, no neutral grey anywhere; saturation stays restrained, closer to periwinkle than to electric blue at its most intense. EDGES: the image is placed full-bleed behind the entire top screen of the page with white type over it. The top edge must resolve to flat, even, structureless #0A0A18 across its full width so the dark page top is seamless. The bottom fifth must resolve to flat, even, structureless #F6F9FE across the full width, with no residual tint, banding or visible shape, so the image dissolves invisibly into the white section below it. Left and right edges bleed off with no border, no frame, no vignette and no darkened corners. SUBJECT: an enormous soft bloom of periwinkle-to-white light rising from the lower middle of the frame and filling the bottom half, built from broad horizontal contour striations — the banding of an elevation map seen through extreme defocus — flowing left to right and growing wider and softer as they rise. Crossing the upper-middle of the frame, one long dark elliptical smear of #0A0A18 and #1C2467 lies horizontally and softly, damping the bloom beneath the area where a headline will sit. COMPOSITION: all structure runs horizontally across the long axis; the upper-left two-thirds of the frame must stay dark, quiet, even and low in contrast so white type stays legible over it, with no bright streak, hotspot or high-contrast edge intruding there. Brightness peaks low and centre, then falls away gently to slightly darker, bluer corners at the lower left and lower right before the bottom fifth goes flat white. AVOID: no literal landscape, no sunset, no horizon line, no sun disc, no sky, no clouds, no starfield, no nebula or galaxy, no aurora, no ocean or water surface, no 3D liquid-metal or chrome blob, no glass sphere, no smoke or ink-in-water plume, no neural-network nodes, no circuitry, no lens flare, no sunburst, no bokeh, no depth-of-field blur around a sharp subject, no vignette, no HDR clarity or punchy photographic contrast, no visible line art, no geometric shapes, no symmetry, no mirrored composition. Output a wide 16:10 landscape frame, 1536x960. No text, no lettering, no logos, no watermarks, no UI.
**Blurred dark navy ridge with periwinkle and white bands flowing across it, fading to white top and bottom** (`02-fluid-band-a`)
MEDIUM AND FINISH: a soft matte digital render of blurred liquid topography — smooth, heavily defocused, matte, with a fine even film grain over the whole frame and no visible brush, paint or canvas texture. It is not a photograph: no lens, no optics, no sharp detail, no real-world object anywhere in the picture. COLOUR AND VALUE: only paper white #F6F9FE, pale lilac #D5DBF7, electric periwinkle #98A9F7, deep indigo #1C2467 and near-black navy #0A0A18 appear. The lightest value #F6F9FE occupies the top quarter and the bottom quarter; the darkest value #0A0A18 appears only inside the central ridge mass and nowhere near the outer edges. Nothing is pure black, nothing is warm, and every dark is blue-leaning navy — no cyan, magenta, teal, purple-pink, warm tone or neutral grey anywhere. EDGES: this is a full-bleed horizontal divider sitting between two paper-white page sections, so the top quarter and the bottom quarter must both feather completely to flat, even, structureless #F6F9FE right across the full width, with no residual tint, no banding, no hard boundary and no rectangle edge. The left and right edges bleed off the frame, growing paler and quieter as they approach the sides, with no border and no vignette. SUBJECT: a wide, soft, dark navy ridge silhouette running horizontally across the lower-middle of the frame like a blurred mountain horizon seen through frosted glass — its crest rising just left of centre, dipping and rising again toward the right, its outline entirely soft with no crisp skyline. Over, around and beneath it, broad horizontal bands of electric periwinkle and white flow left to right, pooling brightest just above the crest and again in a soft glow below it. COMPOSITION: every structure runs along the long horizontal axis; the frame is three times wider than it is tall and the striations must keep that long left-to-right run when cropped to a 1440x480 band. No type sits over this image, but the composition stays asymmetric — weight left of centre, air to the right. AVOID: no photographic mountains, rock, snow or terrain detail, no sky, no clouds, no sunset, no sun, no water reflection, no ink-in-water plume, no smoke, no marbling swirl, no 3D render of liquid or chrome, no glass, no lens flare, no sunburst, no bokeh, no vignette, no HDR contrast, no sharp horizon line, no visible outlines or line art, no symmetry or mirrored composition, no framing border. Output an ultra-wide 3:1 landscape banner, 1536x512. No text, no lettering, no logos, no watermarks, no UI.
**Blurred periwinkle field dissolving from white at the top into solid navy black at the bottom** (`03-fluid-band-b`)
MEDIUM AND FINISH: a soft matte digital render of blurred liquid topography, the same family as a heavily defocused elevation map — smooth, matte, entirely out of focus, with a fine even film grain across the whole frame and no brush, paint or canvas texture. Not a photograph: no lens, no optics, no object, nothing sharp in the frame. COLOUR AND VALUE: only paper white #F6F9FE, pale lilac #D5DBF7, electric periwinkle #98A9F7, deep indigo #1C2467 and near-black navy #0A0A18. The value runs one way only — lightest at the top, darkest at the bottom: the top edge is flat #F6F9FE, the middle passes through #D5DBF7 and #98A9F7 into #1C2467, and the bottom resolves to solid #0A0A18. Nothing is pure black, nothing warm, no cyan, no magenta, no teal, no purple-pink, no neutral grey; all darks are blue-leaning navy. EDGES: this is the full-bleed hinge between a paper-white section above and a near-black section below, so the top eighth must be flat, even, structureless #F6F9FE across the full width and the bottom eighth must be flat, even, structureless #0A0A18 across the full width — both seamless, with no visible boundary, banding or rectangle edge. Left and right edges bleed off with no border and no vignette. SUBJECT: broad horizontal bands of periwinkle and white flowing left to right across the upper half, thickening and darkening as they descend, until a soft dark landform mass rises from the lower third — a blurred ridge horizon whose crest peaks right of centre — and swallows the light into solid navy at the base. A single softer periwinkle glow lingers at the lower left, just above the black. COMPOSITION: all structure runs along the long horizontal axis and must survive a crop to a 1440x420 band; the tonal descent from white to black is even and unbroken, with no midway plateau and no second light source below the ridge. AVOID: no photographic mountains, rock or terrain detail, no sky, no clouds, no sunset or twilight scene, no sun, no stars, no nebula, no water or reflection, no smoke or ink plume, no marbling swirl, no 3D liquid or chrome render, no lens flare, no sunburst, no bokeh, no vignette, no HDR contrast, no crisp horizon line, no line art or outlines, no symmetry, no framing border. Output an ultra-wide 3.4:1 landscape banner, 1536x448. No text, no lettering, no logos, no watermarks, no UI.
**Dense wavy contour striations in violet, lilac and white, shading from light at the left to dark at the right** (`04-contour-terrain-sheet`)
MEDIUM AND FINISH: a soft matte digital render of dense flowing contour striations — thin, tightly packed wavy bands stacked like folded strata or the isolines of an elevation map, softly rendered with gentle edges rather than crisp vector strokes, matte throughout, with a fine even film grain over the whole frame. It is not a photograph and not a vector diagram: no lens, no optics, no shading from a light source, no 3D geometry, no gloss. COLOUR AND VALUE: only paper white #F6F9FE, pale lilac #D5DBF7, electric periwinkle #98A9F7, deep indigo #1C2467 and near-black navy #0A0A18. No cyan, magenta, teal, purple-pink, warm tone or neutral grey anywhere; every dark is blue-leaning navy and nothing is pure black. The frame carries a deliberate left-to-right tonal progression across four equal vertical zones: the far-left quarter is the lightest, mostly white with pale lilac ridges; the second quarter is mid-value, violet lines on white; the third quarter is darker, a navy field carrying white striations; the far-right quarter is the densest and deepest, tight violet and indigo ripples with only thin white threads left. Each zone stays internally even — no hotspot, no glow, no single bright flare. EDGES: this sheet is cut into four near-square 9:10 tiles, one per vertical quarter, each set behind a 12px rounded corner, so the artwork must run continuously and full-bleed to all four edges with no border, frame, mat, gutter, divider, caption or drop shadow, and every vertical quarter must read as a complete standalone composition with its own line flow. SUBJECT: one continuous field of contour lines flowing broadly left to right, undulating in soft peaks and troughs like wind-blown dunes or the layered strata of a topographic map, lines bunching where the terrain steepens and opening out where it flattens. COMPOSITION: the line flow is predominantly horizontal with slow diagonal drift; density varies across the frame so that no two quarters look alike; no focal point, no centre, no subject, no symmetry. AVOID: no photographic landscape, rock, sand or water, no sky, no sun, no map legend, contour numbers, grid, graticule or cartographic markings, no compass rose, no neural network graph, no waveform or audio visualiser, no circuit traces, no fingerprint motif, no 3D extrusion or parallax terrain render, no metallic sheen, no glow or bloom, no lens flare, no bokeh, no vignette, no HDR contrast, no mirrored or kaleidoscopic symmetry, no visible tiling seams. Output a wide 3:2 landscape frame, 1536x1024. No text, no lettering, no logos, no watermarks, no UI.
---
## Neon tennis club landing page
- Page: https://ai-taste-vault.vercel.app/r/neon-tennis-club-landing-page
- Original: https://dribbble.com/shots/23904402-Tennis-School-Website
- Type: Landing page
- Tags: Brutalist, Contact, Footer, Hero, High contrast, Light mode, Nav bar, Neon accent, Overlapping elements, Pricing table, Team
- Palette: #FCFBF4, #070705, #D2DB30, #96A704, #E6EA99
- Captured: 2026-09-18
- Rebuilt with: Claude Code · Opus 5.5 · High · skills: frontend-design, emil-design-eng, transitions-dev, gsap, humanizer
- Rebuild: https://ai-taste-vault.vercel.app/v/demo/neon-tennis-club-landing-page/index.html
### Prompt — Rebuild
_rebuild · html-css · opus_
#### Neon lime tennis club landing page
A light-mode sports club landing page. A warm off-white page carries huge black grotesk headlines. Fluorescent lime tennis balls overlap the type and the photos. The content is a flat, high-contrast set of tiles: rounded photo blocks, a three-way pricing row (white / lime / black), a bento team grid, and a black footer with a sign-up form. The brutalist feel comes from the scale of the type and the flat colour. It does not come from rough borders.
##### Structure
- Desktop canvas is 1440px. The content container is **1296px** wide, with 72px side margins and no max-width beyond that. The nav is the one exception: its links sit inset at 144px from each edge.
- Grid: 3 equal columns of **416px** with a **24px** gutter. All card rows use this grid.
Sections, top to bottom:
1. **Nav bar.** Three text links on the left, a centred two-line stacked wordmark, three text links on the right. It is not sticky.
2. **Hero.**
- A one-line display headline (two words, ~10–11 characters total) fills the full container width.
- Directly under it is a wide rounded photo banner.
- Two lime tennis-ball cutouts overlap the composition. A medium ball sits across the headline's bottom edge and the banner's top edge, over the 9th–10th letter. A large ball sits low on the banner, left of centre, and spills ~35px below the banner's bottom edge.
3. **Join / manifesto.** A free-floating editorial composition, not a grid:
- small portrait photo at top-left
- small right-aligned paragraph at top-right
- centred outlined pill label (1 word)
- centred three-line display headline (2 words / 1 word / 1 word + "!"). In the middle word, the two "O"s are replaced by two tennis-ball images sitting inline at cap height.
- small paragraph at bottom-left
- small square photo at bottom-right
4. **Pricing.**
- Centred pill label, then a centred Monthly / Yearly toggle.
- Three pricing cards in the 3-column grid: card 1 off-white with a hairline border, card 2 solid lime, card 3 solid black.
5. **Team.** Bento grid in the 3 columns:
- Column 1 has the pill label, a 4-line intro paragraph, then a 4:5 portrait card that bottom-aligns with the other columns.
- Column 2 is one tall card, the full height of the section.
- Column 3 has two stacked landscape cards.
- Each card is a coach photo with a dark bottom gradient, a white name, a 2-line bio and an outlined "Learn More →" pill.
6. **Footer.** Full-bleed black.
- Top row: wordmark at x=72, a vertical nav list at x≈403, and a sign-up form at x≈730–1368. The form has three underline fields, a consent radio with fine print, and an outlined pill button aligned right.
- Bottom bar: copyright at left, two legal links in the centre, three social links at right separated by "|".
##### Scroll map
The viewport is assumed to be 1440×900. No motion report was supplied, so every number here was read from the page composite.
1. Nav — 112px — 0.12 vp — consumes 112px — static
2. Hero — 718px (y 112–830) — 0.80 vp — consumes 718px — entrance (inferred)
3. Join — 810px (y 830–1640) — 0.90 vp — consumes 810px — entrance (inferred)
4. Pricing — 910px (y 1640–2550) — 1.01 vp — consumes 910px — entrance (inferred)
5. Team — 1050px (y 2550–3600) — 1.17 vp — consumes 1050px — entrance (inferred)
6. Footer — 574px (y 3600–4174) — 0.64 vp — consumes 574px — static
**Total page height ≈ 4174px (≈4.6 viewports).** Nothing pins or stacks.
##### Spacing
- **Section rhythm.** It is generous and slightly uneven, which keeps the page from feeling templated.
- Hero banner bottom → Join content top: ~180px.
- Join bottom → Pricing pill: ~170px.
- Pricing cards → Team top: ~150px.
- Team bottom → footer: ~250px of empty off-white. Keep this; it is a deliberate pause before the black footer.
- **Nav.** Height 112px, with link baselines at ~y58. The gap between links is ~64px.
- **Hero.**
- Headline cap top at ~y170.
- Headline bottom to banner top: ~20px. The headline nearly kisses the photo.
- Banner: y376–789, height ~413px, full 1296px wide.
- **Join.**
- Content block is ~595px tall.
- Left photo is 194×240 at the top-left corner of the container.
- Right photo is 194×196 at the bottom-right corner.
- Paragraphs are max 300px wide, pinned to the opposite corners (top-right, bottom-left).
- Pill to headline: 24px.
- Headline lines step at ~140px.
- **Pricing.**
- Pill to toggle: ~40px. Toggle to cards: ~44px.
- Cards are 416×~618 with **40px** internal padding.
- Inside a card:
- title, then 40px to the feature list
- feature rows step at 40px
- fine-print paragraph 32px below the list
- price block pushed to the bottom (flex column, `margin-top:auto`)
- 24px to the full-width button
- **Team.**
- Column 1: pill, then 20px to the intro paragraph (max 400px), then 40px to the card.
- Column 2 card: 416×726.
- Column 1 card: 416×522.
- Column 3 cards: 416×351 each, with a 24px gap.
- Card text inset is 24px from the left and bottom edges.
- Name, then 12px to the bio, then 20px to the button.
- **Footer.**
- Padding: 104px top, ~100px bottom.
- Nav list rows step at 40px.
- Form fields step at ~58px. Each is a 1px underline with the label as placeholder.
- Consent row sits 40px below the last field. The button is on the same row, aligned right.
- Bottom bar sits ~170px below the form.
##### Type
- **Families.**
- Display: a heavy, tightly-tracked neo-grotesk. Use **Inter Tight** at 800–900.
- Text: a neutral grotesk. Use **Inter** at 400–500.
- No serif or mono anywhere.
- **Body anchor: 16px.** The running paragraphs are short and small on this page.
| Level | Size | Line-height | Tracking | Weight | Notes |
|---|---|---|---|---|---|
| Hero display | 13.5× = **216px** | 0.85 | −0.06em | 900 | uppercase, one line, fills 1296px; size it to fit the container exactly |
| Join display | 9.5× = **152px** | 0.92 | −0.05em | 900 | uppercase, centred, 3 lines, max ~680px wide |
| Pricing card title | 2.75× = **44px** | 1.1 | −0.02em | 500 | sentence case |
| Price | 3× = **48px** | 1 | −0.02em | 600 italic | "/mo" suffix at 0.45× (≈22px), same italic, baseline-aligned |
| Team name | 2.6× = **42px** | 1.05 | −0.03em | 600 | white, one line |
| Toggle labels | 1.1× = **18px** | 1.2 | 0 | 500 | |
| Body / feature list | 1× = **16px** | 1.25 | 0 | 500 (list), 400 (paragraphs) | short paragraphs, max line ~38ch (300px) |
| Nav / footer links | 0.875× = **14px** | 1.2 | +0.02em | 500 | uppercase |
| Pill labels | 1× = **16px** | 1 | +0.02em | 500 | uppercase, inside a 1px outlined pill |
| Buttons | 0.875× = **14px** | 1 | 0 | 500 | sentence case |
| Fine print / bios / consent | 0.8× = **12.8px** | 1.3 | 0 | 400 | bios max ~2 lines, ~44ch |
The wordmark is a two-line stacked placeholder at 18px, weight 900, line-height 0.85. A 12px lime dot is tucked against the second line.
##### Colour
| Hex | Role |
|---|---|
| `#FCFBF4` | **Page surface**, ~70% of the page. Warm off-white. Card 1 uses it too, slightly lifted with a border. |
| `#070705` | **Ink**. Covers all text on light, the outlined pills, the Premium card fill, the toggle track, the Medium card's button and the footer background. Second-largest area. |
| `#D2DB30` | **The single accent: neon lime.** Allowed only on: the tennis balls, the featured (middle) pricing card fill, the Base card's CTA button and the wordmark dot. |
| `#96A704` | Deep olive. The 1px border of the lime card, the hover fill for lime buttons, and the shading on the balls. Never used for text. |
| `#E6EA99` | Pale lime. Used only as the hover fill for outlined pills/buttons on light surfaces. |
Text colours:
- White text: on photos, the black card and the footer.
- Footer secondary text and the footer button label: white at 55% opacity.
- Field underlines: white at 30%.
##### Surface
- **Borders.**
- Outlined pills: 1px solid ink on light surfaces; 1px white on photos and in the footer.
- Card 1: 1px `#070705` at 10% opacity.
- Card 2: 1px `#96A704`.
- Card 3: none.
- **Radii.**
- Hero banner: 24px.
- Join photos: 20px.
- Pricing cards: 28px.
- Team cards: 20px.
- All buttons, pills and the toggle: 999px.
- **Shadows.** None anywhere. Depth comes only from the balls overlapping edges.
- **Buttons.**
- Pricing CTAs are full-width filled pills, 54px tall. The label sits centred, followed by a long hairline arrow (~44px line, 1.5px stroke, small open head).
- Team buttons are outlined white pills, 234×50.
- The footer button is an outlined pill, 282×52.
- **Toggle.** A black 46×24 track with a 18px off-white knob sitting on the left (Monthly active).
- **Feature list.** Each item has a 12px thin check glyph in ink (on the black card, the check is white).
##### Imagery
- **Hero banner (≈3.1:1, 1296×413).**
- Shows a low-angle daylight action shot: a player in sunglasses and a visor leans toward the camera. Racket strings cross the foreground. Behind are blue sky, trees and stadium floodlights.
- Saturated and sunny. Use object-fit cover, with the subject right of centre.
- **Tennis balls.**
- Transparent cutouts of a fluorescent lime ball with white seams and soft internal shading. They must have no drop shadow beyond their own shading.
- Sizes: ~188px on the headline/banner seam (centre ≈ x985, y351); ~284px on the banner (centre ≈ x588, y682); two at ~125px inline in the Join headline, touching side by side.
- **Join photos.**
- Top-left, portrait 4:5: a full-length player in white on a clay court, mid-distance.
- Bottom-right, ~1:1: a close crop of a racket held over a clay court.
- **Team photos.** Four coach portraits in moody, warm, slightly muted tones: clay orange, brown and deep shadow, with court nets or fences behind.
- Column 1: ~4:5.
- Column 2: ~4:7, the full-length seated subject.
- Column 3: ~6:5 ×2.
- Each has a bottom gradient from transparent to rgba(7,7,5,0.75) over its lower 45%.
##### Motion
None of the motion below was measured. All of it is (inferred).
**1. Nav**
- kind: static
- what moves: nothing
- from → to: —
- range: —
- reduced motion: unchanged
**2. Hero**
- kind: entrance (inferred)
- what moves: the headline, the banner, then the two balls
- from → to:
- Headline: opacity 0→1, translateY 40px→0.
- Banner: opacity 0→1, scale 0.98→1.
- Balls: scale 0.6→1, rotate −30°→0, opacity 0→1.
- range: plays once on page load. Duration and easing not measured; use 600–900ms with a strong ease-out. Stagger 100–150ms between headline, banner and balls.
- reduced motion: all elements render in their final state with no transform; at most an opacity fade under 200ms.
**3. Join**
- kind: entrance (inferred)
- what moves: the pill, the three headline lines, the two inline balls and the two corner photos
- from → to:
- Pill: opacity 0→1.
- Each headline line: translateY 32px→0, opacity 0→1.
- Inline balls: scale 0→1.
- Photos: translateY 24px→0, opacity 0→1.
- range: plays once, when the section top reaches 80% of the viewport. Duration not measured (500–800ms), ease-out. Lines stagger 80–120ms; the balls land after the headline.
- reduced motion: final state, no movement.
**4. Pricing**
- kind: entrance (inferred)
- what moves: the three cards
- from → to: translateY 40px→0, opacity 0→1.
- range: plays once, when the card row's top reaches 80% of the viewport. Duration not measured (500–700ms), ease-out, stagger 80–120ms left to right.
- reduced motion: final state.
**5. Team**
- kind: entrance (inferred)
- what moves: the intro text, then the four cards
- from → to:
- Intro text: opacity 0→1, translateY 24px→0.
- Card wrappers: opacity 0→1, translateY 40px→0.
- Images inside the cards: scale 1.06→1.
- range: plays once, when each card's top reaches 85% of the viewport. Duration not measured (600–900ms), ease-out, stagger 80–120ms.
- reduced motion: final state.
**6. Footer**
- kind: static
- what moves: nothing
- from → to: —
- range: —
- reduced motion: unchanged
**Interaction transitions** (separate from the scroll choreography; 150–250ms ease-out, not measured):
- Nav and footer links: opacity 1 → 0.6 on hover.
- Outlined pills and buttons on light surfaces: fill to `#E6EA99` on hover.
- Outlined buttons on photos or black: fill white with ink text on hover.
- The long arrow in every button: translateX +6px on hover.
- Lime buttons: fill `#96A704` on hover. Black buttons: lift to `#2A2A26`. White buttons: go to `#E6EA99`.
- Every button: scale 0.98 on press.
- Pricing toggle: the knob slides 22px over 200ms, and the prices crossfade between the monthly and yearly values.
- Team cards: the image scales 1→1.04 on hover over 400ms. The card itself does not move.
- Footer fields: the underline goes from 30% to 100% white on focus.
##### Responsive (<640px)
- **Container.** 20px side padding; the grid becomes a single column with 16px gaps.
- **Nav.** Collapses to the wordmark on the left and a 44px outlined pill "Menu" button on the right. The links move into a full-screen black overlay.
- **Hero.**
- Headline still on one line, sized to fit the width (~17vw, around 64px). If it cannot fit, break it into two lines at line-height 0.85.
- Banner becomes 4:3 with an 18px radius.
- Balls scale proportionally (~28% and ~40% of the width) and keep their overlaps.
- **Join.**
- Order: pill, then the headline (~15vw, about 56px; the inline balls scale with it), then the two photos side by side as a 2-up row (4:5 and 1:1 cropped to equal height), then both paragraphs, left-aligned at full width.
- **Pricing.** Cards stack in order Base / Medium / Premium. Card height becomes auto with a 32px minimum gap above the price.
- **Team.**
- Pill and intro come first, then the cards one per row.
- Cards are 4:5 and keep their overlays.
- The bento height relationships are dropped.
- **Footer.**
- Order: wordmark, then the nav list (2 columns), then the form full-width with a full-width button, then the bottom bar.
- The bottom bar stacks into three centred rows at 12.8px.
- **Gaps.** Section gaps shrink to 96px. The empty band before the footer shrinks to 120px.
##### Don'ts
- Don't shrink the hero headline to a "safe" 96px or centre it with breathing room. It must be edge to edge, ultra-black and almost touching the banner below.
- Don't use a lighter weight, a geometric or rounded display face, or a serif. The look depends on a dense 900-weight grotesk with negative tracking.
- Don't spread the lime around. No lime text on off-white, no lime section backgrounds, no lime links or icons. It appears only on the balls, the featured card, one CTA and the logo dot.
- Don't use pure white `#FFFFFF` for the page or a cool grey neutral. The off-white is warm and the black is near-black.
- Don't add drop shadows, glassmorphism, gradients on surfaces, or glows on the "neon". Everything is flat; only the photos carry depth.
- Don't clip the balls inside their containers. They must overlap edges: headline into banner, and banner out into the page.
- Don't put the Join section in a tidy grid. The corner photos and corner paragraphs must stay in opposite corners, asymmetric around the centred headline.
- Don't make the pricing cards identical with a "Most popular" badge. The hierarchy comes from the three fills (off-white / lime / black), with the button colours inverted per card.
- Don't use chunky chevron icons or solid arrow glyphs in buttons. Use long hairline arrows.
- Don't make the team grid uniform. Keep the 522 / 726 / 351+351 bento heights, with text over the photos rather than under them.
- Don't add extra sections (stats, testimonials, logo strips, FAQ), and don't add any parallax or pinning. Motion is limited to one-shot entrances.
- Don't use boxed inputs in the footer form. Use underline fields only, on black.
### Imagery — already generated
These pictures were made for this design and are hosted at the URLs below.
Use them as the `src` exactly as written, and keep the alt text. Do not
generate your own, do not reach for a stock library or a placeholder
service, and do not feed the Imagery section above back to an image model —
that work is done. Size and crop them with CSS (`object-fit: cover`) rather
than assuming their dimensions, and download them into the project if you
would rather not hotlink.
- https://ai-taste-vault.vercel.app/v/demo/neon-tennis-club-landing-page/images/01-hero-banner.webp — Low-angle daylight shot of a female tennis player in a yellow visor and sunglasses leaning toward the camera behind racket strings, with sky, trees and stadium floodlights behind
- https://ai-taste-vault.vercel.app/v/demo/neon-tennis-club-landing-page/images/02-tennis-ball-cutout.webp — Fluorescent lime tennis ball cutout
- https://ai-taste-vault.vercel.app/v/demo/neon-tennis-club-landing-page/images/03-coach-tall-seated.webp — Female tennis coach in a white cap and light blue polo seated on a clay court holding a racket, with fencing and scaffolding behind
- https://ai-taste-vault.vercel.app/v/demo/neon-tennis-club-landing-page/images/04-coach-portrait-male.webp — Male tennis coach with a headband and dark navy polo seated against a white brick wall holding a racket
### Image prompts
What each picture above was generated from, for anyone changing one.
**Low-angle daylight shot of a female tennis player in a yellow visor and sunglasses leaning toward the camera behind racket strings, with sky, trees and stadium floodlights behind** (`01-hero-banner`)
MEDIUM AND FINISH: A real, sunny, saturated daylight sports photograph with clean commercial finish and natural colour. It is a crisp editorial action shot, not a render and not a cinematic grade. COLOUR AND VALUE: The lightest values are the pale hazy sky near the horizon at about #DCE8F2 and the small white highlights on the floodlight heads. The sky deepens to a clear mid blue at about #7FA9D6 toward the top. The darkest values are the dense tree foliage at the far left and centre-left, at about #1F2E1C, and no darker. The player's top is a bright sky blue at about #6E9FD4. Her visor is a sunny yellow at about #E7C02E. Her skin is warm and evenly lit. The racket frame is a cobalt blue at about #2F5FB0 with pale strings. Most of the frame sits in bright mid-to-high values. There are no crushed blacks, and only the tree mass is dark. EDGES: The image is placed inside a rounded rectangle with a 24px radius on a warm off-white #FCFBF4 page, so its edges are hard and nothing fades. A large lime tennis ball cutout will be laid over the lower left-of-centre area, so that region should hold only soft sky, trees and the lower edge of the scene, with no important detail. SUBJECT: Shot from a low angle looking up, a young woman with long dark hair in a yellow visor, yellow-tinted sunglasses and a light blue athletic top leans forward toward the camera. Her face and shoulders sit slightly right of centre, in the upper-middle of the frame. Her racket head crosses the lower right foreground diagonally, close to the lens, so its strings fill the bottom-right corner. Behind her is open blue sky with a few soft white clouds, a tall stadium floodlight mast on the left with its lamp head near the top-left, a line of leafy green trees across the lower left, and small floodlights on the right horizon. COMPOSITION: The final crop is a very wide 3.1:1 banner taken from the vertical centre of this frame. Keep her face, the visor and the racket strings all inside the middle horizontal band, about 30% to 80% from the top, and leave plain sky above and below. AVOID: Any tennis ball in the frame, lens flare or sunburst, a black vignette, a dramatic stormy sky, heavy HDR clarity, teal-and-orange grading, motion blur on the face, extreme fisheye distortion, extra people. Output a wide 3:2 landscape frame, 1536x1024. No text, no lettering, no logos, no watermarks, no UI.
**Fluorescent lime tennis ball cutout** (`02-tennis-ball-cutout`)
MEDIUM AND FINISH: A clean, photoreal product cutout of a single tennis ball, isolated on a fully transparent background (if transparency is unavailable, use a perfectly flat, even #FCFBF4 with no shadow or gradient). It has a crisp studio-product finish with a soft felt texture. COLOUR AND VALUE: The ball is a fluorescent neon lime at about #D2DB30 on its lit upper-left side. It shades smoothly toward a deeper olive at about #96A704 along its lower-right edge. That olive is the darkest value anywhere, and nothing goes near black. The curved seam is a soft off-white at about #EEF0D6, slightly fuzzy where it meets the felt. A gentle, broad highlight sits on the upper left at about #E6EA99. EDGES: The silhouette is a clean, sharp circle with a faint natural felt fuzz at the rim. It must have no cast shadow, no contact shadow, no reflection and no glow, because it will be layered over a headline, a photo and an off-white page at several sizes. SUBJECT: One standard tennis ball, seen almost straight on. The classic curved white seam sweeps across it in an elegant S-curve from upper right to lower left. The felt texture is visible but fine. COMPOSITION: The ball is centred and fills about 90% of the square frame with even margins. AVOID: A drop shadow, a neon glow or bloom, a yellow-orange or acid-green hue shift, a dirty or worn ball, logos or printed branding on the felt, multiple balls, a court or any background scenery, a plastic or glossy look, heavy hard rim light. Output a square 1:1 frame, 1024x1024. No text, no lettering, no logos, no watermarks, no UI.
**Female tennis coach in a white cap and light blue polo seated on a clay court holding a racket, with fencing and scaffolding behind** (`03-coach-tall-seated`)
MEDIUM AND FINISH: A real editorial sports-fashion photograph in moody, warm, slightly muted tones, with natural late-afternoon light and gentle contrast. It is not a glossy advertising look. COLOUR AND VALUE: The palette is clay orange-brown at about #A65A3A on the court, worn brown at about #6B4430, and deep warm shadow at about #22190F, which is the darkest value. There are no pure blacks. The lightest values are her white cap, socks and shoes at about #ECE7DF, slightly creamy rather than pure white. Her polo is a soft pale blue at about #9FC0DA with white panels. The background structure is dark charcoal-brown metal and netting. Overall the frame sits in low-to-mid values, with the white clothing as the only bright accents. EDGES: The image fills a rounded card with a 20px radius. A dark gradient will cover the lower 45% and white text will sit over the bottom fifth, so keep the lowest 20% of the frame simple: just the clay surface and her shoes, no busy detail. SUBJECT: A young woman with a serious, calm expression sits on the clay court with one knee raised and the other leg folded. She wears a white baseball cap, a pale blue and white short-sleeved tennis polo, a white skirt, white socks and white sneakers, and has a wristband on one arm. A tennis racket rests against her shoulder, its strings beside her head. Behind her is a tall dark metal scaffold with chain-link fence and court netting, receding up the frame, and a strip of court line runs across the clay. Her full body is visible. COMPOSITION: The frame is a tall portrait that will be cropped to about 4:7 from the centre. Keep her centred horizontally, with her head at about the top third and her feet in the lower quarter. AVOID: A bright sunny blue sky, saturated green grass, harsh direct flash, shallow depth of field with heavy bokeh, a cool or teal grade, a black vignette, smiling stock-photo posing, a visible brand logo on clothing. Output a tall 2:3 portrait frame, 1024x1536. No text, no lettering, no logos, no watermarks, no UI.
**Male tennis coach with a headband and dark navy polo seated against a white brick wall holding a racket** (`04-coach-portrait-male`)
MEDIUM AND FINISH: A real editorial portrait photograph with a moody, warm, slightly muted, retro-sport feel. It has soft directional daylight and gentle contrast, not a glossy commercial look. COLOUR AND VALUE: The lightest value is the painted white brick wall behind him at about #D9D3C8. It is warm and slightly dim, never pure white. His polo is a deep navy at about #1E2433 with thin white trim at the collar and placket. His skin is warm. Cast shadows across the wall and his body are warm brown-grey at about #3A3028. The darkest value is about #15130F, inside the shirt folds. The lower part of the frame drifts into warm brown floor tones at about #5A4232. Overall it is mid-key, with a dark lower half. EDGES: The image fills a rounded card with a 20px radius. A dark gradient will cover the lower 45% and white text will sit over the bottom fifth, so keep the lowest 20% quiet, with only dark clothing and floor. SUBJECT: A young man with curly dark hair and a white terry headband sits with his knees apart and his elbows resting on them. He looks directly at the camera with a calm, slightly serious expression. He wears a dark navy short-sleeved polo with white trim, and a tennis racket rests across his lap and leans to the right. Behind him is a white-painted brick wall with soft dappled shadows falling across it. COMPOSITION: The frame is a portrait that will be cropped to about 4:5. His face sits in the upper third, slightly left of centre, and his torso and racket fill the middle. AVOID: A bright sunny or high-key look, cool or teal grading, shallow depth of field with bokeh, a black vignette, a studio seamless backdrop, a cheesy smile, visible brand logos, saturated colours, HDR clarity. Output a portrait 4:5 frame, 1024x1280. No text, no lettering, no logos, no watermarks, no UI.
---
## Aetheron — Cosmic AI Hero
- Page: https://ai-taste-vault.vercel.app/r/aetheron-cosmic-ai-hero
- Original: https://br.pinterest.com/pin/333829391151725483/
- Type: Section
- Tags: AI, Dark mode, Editorial, Full bleed, Hero, Minimal, Muted palette, Nav bar, Restrained motion
- Palette: #181619, #29333B, #868A85, #744937, #385C73
- Captured: 2026-09-18
- Rebuilt with: Claude Code · Opus 5.5 · Extra high · skills: frontend-design, emil-design-eng, transitions-dev, humanizer, gsap
- Rebuild: https://ai-taste-vault.vercel.app/v/demo/aetheron-cosmic-ai-hero/index.html
### Prompt — Rebuild
_rebuild · html-css · opus_
#### Dark full-bleed cosmic hero with hairline crop frame
A single-viewport hero section: a solid dark nav band sitting directly above a full-bleed twilight-atmosphere photograph, with a 1px technical crop frame drawn over the image and a two-column text band resting on the bottom edge. Restrained, editorial, no glow, no gradient UI.
No live motion capture exists for this reference. Every value in **Motion** is marked **(inferred)** and no easing library parameters (lerp, stiffness, spring) are specified because none were measured.
---
##### 1. Structure
Design viewport: **1440 × 920 CSS px**. The page is full-bleed: no outer margin, no rounded corners on the page itself, no sheet colour behind it. The thing fills the browser edge to edge.
- Page container: 100vw, no max-width wrapper.
- Horizontal system (absolute, from the viewport's left edge):
- Header content inset: **64px** left and right.
- Hairline frame verticals: **x = 56** and **x = 1384**.
- Column divider (hero bottom band): **x = 747** (51.9% of viewport).
- Left text column starts at **x = 108**, max-width **620px**.
- Right text column starts at **x = 787**, max-width **500px**.
- Expressed as a grid if you prefer one: 12 columns, 1328px content width (1440 − 2×56), 32px gutters, 81px columns. Headline spans cols 1–6 (indented 52px), paragraph spans cols 8–12. The divider falls on the col 6/7 line.
Sections, top to bottom:
1. **Header bar** — solid dark band, 72px tall, full width. Wordmark left, 5 nav links optically centred, one filled button right. It is a band, *not* an overlay: the photograph begins underneath it, and the boundary is a hard horizontal edge.
2. **Hero** — 848px tall, full-bleed photograph covering the whole section. Over it: a 1px crop frame (two full-height verticals, one horizontal rule 639px down, one short vertical divider below that rule, registration crosses at the intersections) and a two-column text band occupying the bottom 209px — headline left, paragraph + CTA pair right.
That is the whole artefact. Total height 920px. If it is dropped into a longer page, section 2 is the top block and everything below it is out of scope.
---
##### 2. Scroll map
| # | Section | Height | Viewports | Scroll consumed | Kind |
|---|---------|--------|-----------|-----------------|------|
| 1 | Header bar | 72px | 0.08 | 72px | static |
| 2 | Hero | 848px | 0.92 | 848px | entrance on load (inferred) |
**Total page height: 920px ≈ 1.00 viewport.** Nothing pins, nothing stacks, nothing is scroll-linked — at this length there is no scroll to link to. The page must be composed so that the first paint *is* the finished frame: everything, including the CTA row, is above the fold by design. Do not add a scroll cue, a "scroll" word, a bouncing chevron or a mouse icon; there is nowhere to go.
If you extend the page below this section, the only scroll-linked behaviour permitted on section 2 is the parallax described in the Motion block, and it consumes no extra scroll (it does not pin).
---
##### 3. Spacing
- **Header (1):** height 72px, padding-inline 64px, items vertically centred. Nav item gap **40px** between link boxes. The header button's right edge lands on the 64px inset.
- **Header → hero:** 0px. They butt. No shadow, no gap, at most a 1px `rgba(255,255,255,0.06)` seam if the photo's top edge is too light to read against the band.
- **Hero (2) internal, measured down from the hero's own top edge:**
- Hairline verticals run the full 848px.
- Horizontal rule at **y = 639** (so 209px of hero remains below it).
- Left column: **48px** padding-top below the rule, then the two-line headline (128px), leaving ~33px of clearance to the hero's bottom edge.
- Right column: **34px** padding-top below the rule, then the 3-line paragraph (95px), **16px** gap, then the button row (40px tall), leaving ~24px of clearance to the bottom edge.
- Button row internal gap: ghost button, then **32px**, then the text link.
- Rhythm: the design has exactly three horizontal beats — 72 / 639 / 209. The large empty photographic field between the header and the rule is 70% of the hero's height and must stay empty. Resist filling it.
---
##### 4. Type
One family throughout. Class: **neo-grotesk, low stroke contrast, large x-height, slightly wide round bowls, double-storey `a`**. Free stand-in: **Switzer** (Fontshare). Acceptable substitutes: Inter, Instrument Sans, General Sans. Do not mix in a second family.
Body anchor: **18px** running text at 1440.
| Role | Ratio to body | Size | Line-height | Tracking | Weight | Colour | Max line length |
|---|---|---|---|---|---|---|---|
| H1 headline | 2.4× | **44px** | 1.45 (64px) | −0.015em | 400 | #F2F0EE | 620px, breaks to exactly 2 lines |
| Body paragraph | 1.0× | **18px** | 1.75 (31.5px) | 0 | 400 | #E4E2DF | 500px ≈ 55 characters |
| Wordmark | 1.17× | **21px** | 1.2 | −0.01em | 500 | #F2F0EE | — |
| Nav link | 0.83× | **15px** | 1.4 | 0 | 400 (active: 500) | #868A85 / active #F2F0EE | — |
| Header button label | 0.83× | **15px** | 1.2 | 0 | 500 | #F2F0EE | — |
| Ghost button label | 0.83× | **15px** | 1.2 | 0 | 450 | #E8E6E4 | — |
| Text link | 0.83× | **15px** | 1.2 | 0 | 400 | #E8E6E4 | — |
| Caption / meta (if needed) | 0.78× | **14px** | 1.4 | 0.01em | 400 | #868A85 | — |
Notes that matter:
- The headline is **generously leaded**. 64px of leading on 44px type is deliberate and is half the character of this hero — the two lines read as two separate statements sitting on top of each other. Do not tighten it to 1.05–1.1; that is the reflex and it kills the design. (inferred from the stills)
- The paragraph is loose too, 1.75. It should feel airy, not dense.
- Headline is set at **regular weight, not bold**. Nothing on this page is bolder than 500.
- Sentence case everywhere. No uppercase eyebrows, no letter-spaced all-caps labels.
- Both headline and paragraph end with a full stop; the wordmark carries a trailing full stop too.
Placeholder copy, by role and length:
- Wordmark: one invented word, 7–9 characters, plus a full stop.
- Nav: 5 items, 1–3 words each ("Home", "How it works", "Trending", "Features", "FAQs" shape). Item 1 is the active state.
- Header CTA: 3 short words.
- Headline: 7–8 words, on two lines, line 1 slightly longer than line 2.
- Paragraph: one sentence, 22–26 words, wrapping to exactly 3 lines at 500px.
- Primary button: 3 words. Text link: 4 words plus a chevron.
---
##### 5. Colour
| Hex | Role | Coverage |
|---|---|---|
| `#181619` | Base surface. The header band, the page background, and the fallback behind the photograph. | ~8% of the viewport, plus everything the photo does not cover |
| `#29333B` | Dominant photographic field — the deep desaturated blue of the upper sky and the dark cloud mass. | ~45% of the viewport, inside the image only |
| `#385C73` | Mid-tone steel blue — the lit atmosphere band on the left half of the arc. | ~20%, inside the image only |
| `#744937` | **The single accent.** Warm rust/copper where the light catches the cloud on the right. | ~12%, inside the image only |
| `#868A85` | Muted warm grey — inactive nav links, secondary text, and the hairline frame at reduced alpha. | text only |
| `#F2F0EE` | Near-white — headline, wordmark, active nav, button labels. Never pure `#FFFFFF`. | text only |
Accent rule, strictly: **`#744937` is a photographic accent, not a UI colour.** It appears only inside the image. No rust buttons, no rust underlines, no rust hover states, no rust focus rings, no rust gradient wash. If you need a UI accent — focus ring, active nav marker — use white at 60% alpha. The page's only "brand colour" is the sky itself.
Supporting values:
- Header button fill: `#2B2A2E`.
- Hairline frame: `rgba(255,255,255,0.22)`; registration crosses `rgba(255,255,255,0.55)`.
- Ghost button border: `rgba(255,255,255,0.35)`, fill fully transparent.
---
##### 6. Surface
- **Borders:** 1px only, ever. Two uses — the crop frame over the image, and the ghost button. Both white at low alpha. No 2px, no dashed, no double.
- **Radii:** header button **4px**. Ghost button **0px** — square corners, and the contrast between the two is intentional. Nothing else on the page has a radius. The page itself has no radius.
- **Shadows:** none. Zero `box-shadow`, zero `text-shadow`, zero glow. All depth in this design is photographic — the image's own vignette and bloom do the work.
- **Blur:** none. No backdrop-filter on the nav; it is an opaque band, not glass.
- **Fills:** the only filled surface is the 116×40 header button. Everything else is either the photograph or transparent.
---
##### 7. Imagery
One image. There is no second picture, no logo strip, no icon set.
**Hero photograph** — 1440 × 848, aspect **1.70:1**, `object-fit: cover`, focal point centre-right, sits behind the whole of section 2 edge to edge.
Subject: the curved limb of a planet photographed from just above its cloud deck at twilight. A thin, luminous arc of atmosphere sweeps up from the lower-left, crests just past centre in the upper third of the frame, and dives out through the right edge. Below it, a heavy dark cloud mass fills the bottom two-thirds, its ridge line running roughly parallel to the arc. The left half is cool steel-blue and nearly featureless; the right third turns warm rust and copper where the light rakes across the cloud tops.
Treatment: analogue, not CGI. Visible monochrome film grain (4–6% noise overlay), soft bloom along the arc rather than a hard edge, crushed blacks — the darkest corners land around `#12141A` — heavy corner vignette, desaturated overall. No stars, no lens flares, no sharp planetary surface detail, no starfield particles.
Legibility: the bottom band's text sits over the photo's naturally darkest region, which should be enough. If it is not, you may add a bottom-anchored linear gradient to `rgba(0,0,0,0.25)` over the bottom 260px only. Never a full-frame scrim — flattening the image to make text readable destroys the only thing on the page.
---
##### 8. Motion
All values below are **(inferred)** from the stills; no motion was measured on a live page. Durations and easings are given as ranges or as conventional values and should be treated as such. Everything here is a **load entrance** — nothing on this page is scroll-linked, because the page is one viewport tall.
###### Section 1 — Header bar
- **kind:** entrance (plays once, on load)
- **what moves:** the header band as one unit; then the nav links individually
- **from → to:** band `opacity 0 → 1`, `translateY −8px → 0`. Nav links `opacity 0 → 1` with no translate.
- **range:** trigger is page load, not scroll. Band: 120ms delay, 500ms duration, ease-out. Nav links: begin at 320ms, 40ms stagger left to right, 300ms each.
- **reduced motion:** no translate, no stagger — the header is present and opaque at full opacity on first paint.
###### Section 2 — Hero, photograph layer
- **kind:** entrance on load; optionally scroll-linked parallax *only* if the page is extended below this section
- **what moves:** the photograph
- **from → to:** entrance `opacity 0 → 1`, `scale 1.06 → 1.00`, transform-origin centre. Optional parallax: `translateY 0 → −60px` as a function of scroll position, reversing on the way back up.
- **range:** entrance triggers on load at 0ms, duration 1100–1300ms, easing `cubic-bezier(0.16, 1, 0.3, 1)`. Parallax range, if used: from the hero's top at the viewport top until the hero's bottom reaches the viewport top. Not measured.
- **reduced motion:** opacity only, 200ms; no scale, no parallax.
###### Section 2 — Hero, hairline crop frame
- **kind:** entrance (plays once, on load)
- **what moves:** the two verticals, the horizontal rule, the short column divider, and the registration crosses
- **from → to:** verticals `scaleY 0 → 1` from their top ends; horizontal rule `scaleX 0 → 1` from its left end; divider `scaleY 0 → 1` from the rule downward; crosses `opacity 0 → 0.55` with no transform, landing after the lines that cross them.
- **range:** triggers on load, begins at 400ms (over the still-settling photograph). Lines 600–800ms, `cubic-bezier(0.22, 1, 0.36, 1)`. Crosses 200ms, 120ms after their lines complete.
- **reduced motion:** frame is drawn at full extent on first paint, opacity fades in over 200ms.
###### Section 2 — Hero, bottom text band
- **kind:** entrance (plays once, on load)
- **what moves:** headline line 1, headline line 2, paragraph, ghost button, text link — five elements in that order
- **from → to:** headline lines `opacity 0 → 1`, `translateY 24px → 0`, each masked by its own line box so the type rises out from behind the baseline. Paragraph, button and link `opacity 0 → 1`, `translateY 16px → 0`, unmasked.
- **range:** triggers on load, begins at 700ms. Headline lines 700ms each, 90ms stagger, `cubic-bezier(0.16, 1, 0.3, 1)`. Paragraph/button/link 600ms each, 80ms stagger, starting 200ms after headline line 1.
- **reduced motion:** opacity only, 250ms, no stagger, no line masking.
###### Interaction transitions
These are hover/press/focus states and are not part of the load choreography above.
- Nav link hover: colour `#868A85 → #F2F0EE`, 160ms ease-out. No underline, no background pill, no movement.
- Nav active item: static white at weight 500, no indicator bar.
- Header button hover: fill `#2B2A2E → #37363B`, 160ms. Press: `scale 0.985`, 90ms.
- Ghost button hover: border `rgba(255,255,255,0.35) → rgba(255,255,255,0.70)`, fill `transparent → rgba(255,255,255,0.06)`, 180ms. Press: `scale 0.985`, 90ms.
- Text link hover: chevron `translateX 0 → 4px`, 180ms ease-out; label colour unchanged.
- Focus-visible, everywhere: 1px `rgba(255,255,255,0.6)` outline at 3px offset, square. Never rust, never a glow.
---
##### 9. Responsive
Below 640px (target 390 × 844):
- Page gutter drops to **24px**; the hairline frame verticals move to `x = 20` and `x = viewport − 20`.
- **Header (1):** height 56px. Nav links are removed from the bar entirely and go behind a hamburger; the header CTA button stays visible and shrinks to 100 × 36 with a 14px label. Wordmark drops to 18px.
- **Hero (2):** height `100svh`, minimum 560px. The horizontal rule moves up so the text band gets **300px** below it.
- The bottom band **stacks**: headline first, then paragraph, then the button row. The vertical column divider at x=747 is **dropped** — it has no meaning in a single column.
- Headline: **32px**, line-height 1.25 (40px), still two lines, still regular weight. The loose 1.45 leading does not survive the narrow measure; tighten it here only.
- Paragraph: **17px**, line-height 1.65, full column width.
- Button row: ghost button goes full-width (100%, 48px tall, still square corners); the text link sits centred **20px** below it rather than beside it.
- Image: shift `object-position` to `65% 50%` so the warm arc still crosses the frame rather than sitting off-canvas.
- Registration crosses: keep the two at the rule's ends, drop the middle one.
---
##### 10. Don'ts
- **Don't put the design on a sheet.** No outer margin, no rounded page corners, no light-grey surround, no `max-width` on the body. The hero touches all four edges of the browser.
- **Don't overlay the nav on the photograph.** It is a solid `#181619` band with a hard edge; the picture starts beneath it. Turning it into a floating transparent or glassmorphic bar is the single most common way to get this wrong.
- **Don't reach for the AI gradient.** No violet-to-cyan, no indigo mesh, no animated aurora blob, no gradient-filled headline text. The only colour in this design is photographic.
- **Don't add a glow.** No text-shadow on the headline, no glowing button, no neon border, no `filter: drop-shadow` on anything. Zero shadows on the page.
- **Don't centre the hero text.** The band is asymmetric — headline left at x=108, paragraph right at x=787, divider at 51.9%. Centring it makes it a generic SaaS hero.
- **Don't move the text into the middle of the image.** It belongs on the bottom edge, below the rule, in the darkest part of the frame. The empty upper 70% is the composition.
- **Don't tighten the headline leading.** 44/64 is correct. `line-height: 1.1` is the reflex and it is wrong here.
- **Don't make the headline bold or huge.** Regular weight, 2.4× body. This is not a 96px display hero.
- **Don't scrim the photograph.** A full-frame dark overlay to "help contrast" flattens the arc and the rust, which are the entire design. Bottom 260px at 25% maximum, or nothing.
- **Don't let the rust `#744937` become UI.** No rust CTA, no rust hover, no rust accent line. The accent lives inside the picture only.
- **Don't thicken or multiply the hairlines.** 1px, white at 0.22 alpha, four lines and three crosses. It is a registration mark, not a grid overlay — do not draw a full 12-column grid over the image.
- **Don't round the ghost button.** It is square. The 4px radius on the filled header button is the only radius on the page.
- **Don't add a pill eyebrow** with a dot and "AI-powered" above the headline, and don't add a logo cloud, stat row, scroll indicator, or floating chat bubble. The section has exactly the elements listed.
- **Don't use Poppins, Montserrat, or a geometric with a single-storey `a`.** It needs a grotesk with a large x-height and a double-storey `a`.
- **Don't animate the headline letter by letter**, and don't loop or replay anything. Every entrance plays once, on load, and then the page is still.
- **Don't use pure `#000000` or `#FFFFFF`** anywhere, including the photo's blacks.
### Imagery — already generated
These pictures were made for this design and are hosted at the URLs below.
Use them as the `src` exactly as written, and keep the alt text. Do not
generate your own, do not reach for a stock library or a placeholder
service, and do not feed the Imagery section above back to an image model —
that work is done. Size and crop them with CSS (`object-fit: cover`) rather
than assuming their dimensions, and download them into the project if you
would rather not hotlink.
- https://ai-taste-vault.vercel.app/v/demo/aetheron-cosmic-ai-hero/images/01-hero-planet-limb.webp — The curved limb of a planet at twilight, a thin luminous arc of atmosphere crossing a dark cloud mass that turns from steel blue on the left to rust and copper on the right
### Image prompts
What each picture above was generated from, for anyone changing one.
**The curved limb of a planet at twilight, a thin luminous arc of atmosphere crossing a dark cloud mass that turns from steel blue on the left to rust and copper on the right** (`01-hero-planet-limb`)
MEDIUM AND FINISH: A grainy analogue colour photograph on pushed film — soft, slightly out-of-focus optics, no micro-contrast, fine monochrome grain across the whole frame (roughly 5% noise), gentle halation and bloom along the brightest edge rather than a hard specular edge, crushed blacks, desaturated overall, matte and atmospheric like a 1970s space-probe plate rescanned; not CGI, not a glossy digital space render, no HDR clarity or sharpening. COLOUR AND VALUE: The frame is dark and narrow in range. The darkest values are the four corners and the bottom eighth at #101116 to #141118 — dark but never pure black. The upper sky is a deep desaturated blue-black, #141B22 grading to #29333B. Beneath and left of the arc sits mid-tone steel blue, #385C73 through #4A6373, cool and almost featureless. The only warm colour is on the right third, where the cloud tops take rust and copper, #744937 down into a deep maroon-brown #3C2018. The single brightest thing in the picture is the thin arc of atmosphere: pale cool blue-white #A8BFC8 on its left half, warming to peach and pale copper #C68B6A on its crest and right, with the very lightest pixel no brighter than #D9A585. Nothing anywhere in the frame is brighter than that — no white highlights, no blown areas, no glow pools. Saturation stays low everywhere except that short warm passage. EDGES: The picture runs full-bleed to all four edges with no border, no frame, no mat and no rounded corners. The top eighth must be deep, even and quiet, sitting around #141B22 so it meets a flat dark #181619 nav band above it with an invisible seam. The bottom fifth must be the darkest, calmest, least detailed part of the frame, falling to near-black #141118, because headline and paragraph type is set over it; keep cloud structure there soft and low-contrast. A heavy, soft corner vignette darkens all four corners. SUBJECT: The curved limb of a planet seen from just above its own cloud deck at twilight. A single thin luminous arc of atmosphere rises from the lower-left, crests just past the horizontal centre in the upper third of the frame, and dives out through the right edge at about 60% height — a long, shallow, asymmetric curve, only a few pixels thick at its thinnest, softened by bloom. Below and parallel to it, a heavy dark cloud mass fills the bottom two-thirds, its ridge line echoing the arc; the left half of that mass is cool, smooth and nearly featureless steel blue, while the right third breaks into billowed, backlit cloud tops raked by warm light. COMPOSITION: Wide and horizontal, the empty upper-left sky occupying a large quiet field, the arc as the only line, focal interest centre-right. Keep the upper 60% of the frame near-empty. AVOID: no stars, no starfield, no nebula, no purple or magenta, no lens flare, no sunburst, no visible sun disc, no spacecraft, no astronaut, no moon, no planetary rings, no continents, coastlines or city lights, no sharp surface terrain, no crisp hard horizon line, no teal-and-orange HDR punch, no saturated turquoise, no neon rim light, no bokeh balls or shallow-focus blur circles, no chromatic aberration fringing, no light leaks, no added grid, border or scan lines, no clean CGI gradient sky. Take the palette, grain and dark low-contrast value range from the attached reference; ignore its text, hairlines, buttons and layout entirely. Output a wide landscape frame at roughly 1.70:1, 1536x904 (it will be cropped with object-fit: cover). No text, no lettering, no logos, no watermarks, no UI.
---
## Duna — Compliance platform homepage
- Page: https://ai-taste-vault.vercel.app/r/duna-compliance-platform-homepage
- Original: https://br.pinterest.com/pin/438467713747177619/
- Type: Landing page
- Tags: Feature callout, Fintech, Footer, Hero, Light mode, Logo wall, Neon accent, Organic, Pastel, Restrained motion, Stats band, Testimonials
- Palette: #FDFDFD, #D9D8D6, #F9C9A7, #E7A549, #89D4ED
- Captured: 2026-09-18
- Rebuilt with: Claude Code · Opus 5.5 · Extra high · skills: frontend-design, emil-design-eng, transitions-dev, humanizer, gsap
- Rebuild: https://ai-taste-vault.vercel.app/v/demo/duna-compliance-platform-homepage/index.html
### Prompt — Rebuild
_rebuild · html-css · opus_
#### Painterly pastel compliance homepage — build prompt
A light-mode B2B/fintech marketing homepage built on one unusual decision: a **full-bleed painterly landscape illustration** at the very top and the very bottom, with a **narrow 860px content column** floating on near-white in between. Everything is quiet, hairline-bordered and restrained — except a single glowing amber lozenge at the centre of the page's one diagram. That contrast is the whole design.
---
##### 1. Structure
**Container**
- Page is full-bleed white; no outer mat, no rounded page corners.
- **Content container: 860px, centred** (left/right margin ≈ 290px at 1440). This is deliberately narrow — resist widening it.
- **Nav is the exception:** a wider 1360px bar with 40px gutters, so the logo and CTA sit near the window edges while all body content is inset.
- Illustration sections (hero art, footer art) are 100vw, ignoring the container.
- Column systems used inside the 860 container:
- 3-col: three 244px columns, 64px gaps (value props, news cards).
- 2-col: two 398px columns, 64px gap (all four feature sections).
- 4-col mosaic: four ~203px cells, 16px gaps, cells may span 2 (testimonials).
**Sections, top to bottom**
1. **Nav** — fixed overlay on the illustration, 76px tall.
2. **Hero** — full-bleed painterly landscape occupying the top ~460px, fading to white; centred eyebrow-free headline, subhead, one pill CTA on the white below.
3. **Logo wall** — one small centred caption line + six greyscale partner wordmarks in a row.
4. **Stats band** — three stats, left-aligned, spread across the container.
5. **Value trio** — one left-aligned H2 spanning the container, then three icon + title + paragraph columns.
6. **Testimonials** — centred H2 + one-line sub, then a 4×2 tile mosaic mixing portraits, logo tiles and quote tiles.
7. **Platform diagram** (warm grey band) — left header block + right "Explore" button, then a centred hub diagram: one glowing amber lozenge with four white pills orbiting it.
8. **Feature A** — header row, then mock panel LEFT / checklist RIGHT.
9. **Feature B** — header row, then checklist LEFT / mock panel RIGHT.
10. **Feature C** — header row, then mock panel LEFT / checklist RIGHT.
11. **Feature D** — header row, then checklist LEFT / logo-chip panel RIGHT.
12. **Trust band** (warm grey) — heading + paragraph + button left, three certification seals right.
13. **News** — "News" H2 left, "See more" link right, three article cards.
14. **Footer** — full-bleed painterly dusk landscape; 5 link columns over its top third, legal row at the very bottom.
---
##### 2. Scroll map
Viewport assumed 1440 × 900. Nothing pins; nothing stacks. Total scroll = total height.
| § | Section | Height | Viewports | Scroll consumed | Kind |
|---|---|---|---|---|---|
| 1 | Nav | 76 (overlay, 0 flow) | — | 0 | static (state change at 120px scroll) |
| 2 | Hero | 820 | 0.91 | 820 | entrance + scroll-linked parallax |
| 3 | Logo wall | 180 | 0.20 | 180 | entrance |
| 4 | Stats band | 250 | 0.28 | 250 | entrance |
| 5 | Value trio | 440 | 0.49 | 440 | entrance |
| 6 | Testimonials | 820 | 0.91 | 820 | entrance |
| 7 | Platform diagram | 820 | 0.91 | 820 | entrance + scroll-linked |
| 8 | Feature A | 780 | 0.87 | 780 | entrance |
| 9 | Feature B | 780 | 0.87 | 780 | entrance |
| 10 | Feature C | 780 | 0.87 | 780 | entrance |
| 11 | Feature D | 780 | 0.87 | 780 | entrance |
| 12 | Trust band | 420 | 0.47 | 420 | entrance |
| 13 | News | 600 | 0.67 | 600 | entrance |
| 14 | Footer | 520 | 0.58 | 520 | scroll-linked parallax |
**Total page height: ~7,990px ≈ 8.9 viewports.** (All heights inferred from the page composite; no motion report accompanied this capture.)
---
##### 3. Spacing
- **Section padding:** white sections 120px top / 120px bottom. Warm-grey bands (§7, §12) 100px / 100px. §3 logo wall is the tight one: 56px / 56px.
- **Hero:** illustration band 460px from the top edge; 100px from the bottom of the art's fade to the H1; H1 → subhead 24px; subhead → CTA 40px; CTA → section end 120px.
- **Section header block** (§7–§13): eyebrow → H2 **12px**; H2 → paragraph **20px**; header block → content grid **64px**. The "Explore" button sits on the H2's first-line baseline row, flush right of the container.
- **Grid gaps:** 3-col 64px; 2-col 64px; testimonial mosaic 16px; feature checklist rows separated by hairlines with 18px padding above and below; news cards 64px.
- **Inside cards:** mock panels 40px padding; white callout cards 20px padding; news card image → title 20px, title → meta 14px.
- **Stats:** number → label 10px; the three stat blocks are spaced by `justify-content: space-between` inside the 860, not by an even grid.
- **Rhythm:** the page alternates white → white → grey → white ×4 → grey → white → illustration. Keep the 120px section rhythm absolutely constant; the only breathing changes come from the grey bands, not from varying padding.
---
##### 4. Type
**Class:** a neutral **neo-grotesk** with slightly narrow, low-contrast letterforms and a tall x-height. Headings are *medium*, never bold. Free stand-ins: **Inter Tight**, **Geist Sans**, or **Instrument Sans**. One family for the whole page; no serif, no mono, no display face.
Body anchor: **17px** at 1440. All other levels given as a multiple of it.
| Level | Multiple | Size | Line-height | Tracking | Weight |
|---|---|---|---|---|---|
| Hero H1 (§2) | 3.3× | 56px | 1.12 (63px) | −0.02em | 500 |
| Section H2 (§5, §7–§13) | 2.35× | 40px | 1.20 (48px) | −0.015em | 500 |
| Centred H2 (§6) | 2.1× | 36px | 1.20 | −0.015em | 500 |
| Stat number (§4) | 2.1× | 36px | 1.10 | −0.02em | 500 |
| Diagram lozenge label (§7) | 1.65× | 28px | 1.0 | −0.01em | 500 |
| Hero subhead / lead | 1.06× | 18px | 1.55 | 0 | 400 |
| Body / running text | 1× | **17px** | 1.60 | 0 | 400 |
| Card & feature title | 1.2× | 20px | 1.35 | −0.01em | 500 |
| Small body (feature, card, band) | 0.88× | 15px | 1.55 | 0 | 400 |
| Nav links, buttons | 0.88× | 15px | 1.0 | 0 | 450–500 |
| Eyebrow label (§8–§11) | 0.76× | 13px | 1.2 | +0.06em, uppercase | 500 |
| Stat label, logo-wall caption, news meta, footer links | 0.76× | 13px | 1.4 | 0 | 400 |
Nothing below 13px anywhere; nav and buttons stay at 15px.
**Max line length:** hero subhead 44ch (hard-wrap to 2 lines); section paragraphs 62ch; feature small body 46ch; card body 38ch; footer links single-word to 3-word.
**Placeholder copy by role**
- Hero H1: 5–6 words, forced onto **two lines** of similar length.
- Hero subhead: 2 lines, ~18 words total.
- Hero CTA: 2 words.
- Logo-wall caption: 1 line, 6–9 words, 13px grey.
- Stats: value like `10.6x` / `37%` / `4.8x`, label 2–3 words under each.
- §5 H2: one line, 6–7 words, two sentences of 3 words each reads well here.
- §5 columns: title 2–3 words, body 3 lines / ~24 words.
- §6 H2: 3 words centred; sub 1 line, ~14 words.
- §7–§11 H2: 5–7 words on **two lines**; eyebrow 1 word; paragraph 2 lines.
- Feature checklist rows: 2–4 words each; the expanded one adds a 2-line body.
- §12: heading 3 words, paragraph 2 lines.
- §13: heading 1 word; card titles 6–9 words over 2 lines; meta = category + date.
---
##### 5. Colour
| Hex | Role |
|---|---|
| **#FDFDFD** | Page surface — the dominant colour, ~65% of all pixels. Every non-band section, every card fill. |
| **#F4F3F0** | Warm grey band (§7, §12) and the fill of every mock panel. The only "second surface". (inferred) |
| **#D9D8D6** | Hairlines: all 1px borders, dividers, mock-UI chrome, pill outlines. Never used as a text colour. |
| **#16160F** | Ink — headings, stat numbers, primary button fill, footer legal text. (inferred warm near-black) |
| **#6B6B64** | Secondary ink — all body paragraphs, labels, meta, nav links at rest. (inferred) |
| **#E7A549** | **The single accent.** Allowed in exactly three places: the diagram lozenge's gradient end (§7), its outer glow, and nowhere else in UI chrome. |
| **#F9C9A7** | Accent's pastel half — the lozenge gradient start, the hero sky's apricot band, and the fill of one testimonial quote tile. |
| **#89D4ED** | Illustration only: hero upper sky and water. Forbidden in buttons, links, icons or focus rings. |
| **#8CA86A / #4F7A5E** | Illustration greens — hero hills (lighter) and footer dusk foliage (deeper). (inferred) |
Rules: buttons are **ink on white / white on ink**, never amber. Links do not get a colour — they get an underline. There is no success-green, no error-red, no brand blue anywhere in the interface layer. Check-marks in feature lists are ink at 60%, not green.
---
##### 6. Surface
- **Borders:** 1px solid #D9D8D6 on every card, pill, mock panel and input. Hairlines between checklist rows are the same colour at 60% opacity. No 2px borders anywhere.
- **Radii:** buttons and orbit pills `999px`; news cards, testimonial tiles and mock panels **16px**; white callout cards inside panels **12px**; mock-UI rows **8px**; certification seals are circles.
- **The lozenge is the one organic shape:** a superellipse / blob, roughly `border-radius: 50% / 46%` on a 380×150 box, slightly asymmetric — not a plain pill.
- **Shadows:** essentially none. Cards are defined by borders alone. Two exceptions: the four orbit pills carry `0 1px 2px rgba(0,0,0,0.06)` so they read as floating above the grey band, and the lozenge carries a glow, not a shadow: `0 0 90px rgba(231,165,73,0.38), 0 0 30px rgba(249,201,167,0.55)`.
- Mock panels: #F4F3F0 fill, 1px border, 16px radius, containing one white sub-card with its own 12px radius and border — a card inside a card, never an image of a screenshot.
---
##### 7. Imagery
1. **Hero landscape** — full-bleed, 1440 × 460 (≈3.1:1 crop of a wider scene). A flat, painterly gouache illustration: layered rolling hills in sage and olive, a pale river curving from mid-frame to the lower left, soft blue ridges behind, a long banded sunset sky going apricot near the horizon to pale cyan at the top. Slight paper grain, no outlines, no vector gradients-as-art. Its bottom 140px fades to #FDFDFD so the headline sits on clean white.
2. **Testimonial mosaic, six tiles**, all 16px-radius, filling a 4×2 grid:
- Row 1: [1 col] flat pale tile carrying a greyscale customer wordmark · [1 col] square portrait, one person, neutral clothing, daylight, slightly desaturated, looking at camera · [2 col] apricot-gradient quote tile with a small top-left label and a 3-line quote in ink.
- Row 2: [2 col] photographic tile — a green landscape with a white quote overlaid and a small wordmark bottom-left · [1 col] deep navy tile with a reversed wordmark · [1 col] second square portrait, different background tone.
3. **Four product-UI mocks** (§8, §9, §10) — rendered interface fragments, not photographs: a verification step list with one row selected; a case-review queue with collapsible rows; a vertical timeline of compliance events. Grey chrome, one ink-coloured active state each.
4. **Data-provider chip grid** (§11) — 6–7 greyscale logo chips scattered around a small ink star/asterisk glyph at the centre of a grey panel; chips are white pills with hairline borders.
5. **Three news thumbnails** — 4:3, 12px radius: one abstract illustrated card in the same painterly language, one editorial portrait, one geometric pattern in warm tones.
6. **Certification seals** (§12) — three ~72px greyscale marks in a row, one of them a dotted-ring circular seal.
7. **Footer landscape** — full-bleed, 1440 × 520 (≈2.8:1), same painterly hand as the hero but at dusk: a foreground tree at left, still water, distant peaks, deeper greens, a muted violet-to-peach sky. Darker in its lower half so white legal text stays legible.
---
##### 8. Motion
> No motion report accompanied this capture. **Every value below is (inferred)** from the stills and the page composite; durations and easings are build targets, not measurements. Where timing genuinely cannot be inferred, it is marked "not measured" with a range.
**§1 Nav**
- kind — static (with one non-scroll-choreographed state change)
- what moves — the bar background and its bottom hairline
- from → to — background `transparent` → `rgba(253,253,253,0.88)` + `backdrop-filter: blur(12px)`; bottom border `transparent` → 1px #D9D8D6; link colour unchanged
- range — threshold state, not scroll-linked: crosses at 120px of scroll, reverses above it; transition 200–260ms (not measured)
- reduced motion — the state still swaps, instantly, with no blur transition
**§2 Hero**
- kind — entrance + scroll-linked parallax (inferred)
- what moves — (a) illustration layers: sky, far ridges, near hills; (b) H1 lines, subhead, CTA
- from → to — entrance: H1 lines `opacity 0, translateY 20px` → `opacity 1, translateY 0`; subhead and CTA same, smaller travel (12px). Scroll-linked: far ridges `translateY 0 → −40px`, near hills `translateY 0 → +24px`, sky `scale 1 → 1.04`; the white fade band holds still.
- range — entrance fires **once on load**, 600–750ms (not measured), easing `cubic-bezier(0.22, 1, 0.36, 1)`, stagger 90ms in the order H1 line 1 → H1 line 2 → subhead → CTA. Parallax is **scroll-linked and reverses**: from page scroll 0 until the hero's bottom reaches the viewport top (820px of scroll).
- reduced motion — no parallax at all, illustration is fixed; text appears at final position with a 150ms opacity fade only
**§3 Logo wall**
- kind — entrance, plays once
- what moves — caption line, then the six wordmarks
- from → to — `opacity 0 → 0.55` for the marks (they rest greyscale at 55%), `translateY 10px → 0`
- range — trigger: section top reaches 85% of viewport height; 450–550ms (not measured); easing `ease-out`; stagger 50ms left to right
- reduced motion — opacity only, no stagger, 150ms
**§4 Stats band**
- kind — entrance, plays once
- what moves — each stat block (number + label together)
- from → to — `opacity 0, translateY 16px` → `opacity 1, translateY 0`
- range — trigger: element top reaches 80% of viewport; 500–600ms (not measured); easing `cubic-bezier(0.22, 1, 0.36, 1)`; stagger 80ms across the three
- reduced motion — opacity fade, 150ms, no translate
**§5 Value trio**
- kind — entrance, plays once
- what moves — H2 first, then the three columns
- from → to — `opacity 0, translateY 18px` → `opacity 1, translateY 0`
- range — trigger: element top reaches 80% of viewport; 500–600ms (not measured); `ease-out`; H2 leads, columns follow with 80ms stagger
- reduced motion — opacity only
**§6 Testimonials**
- kind — entrance, plays once
- what moves — centred header, then the six mosaic tiles
- from → to — tiles `opacity 0, translateY 24px, scale 0.985` → `opacity 1, translateY 0, scale 1`
- range — trigger: each tile's top reaches 85% of viewport; 550–650ms (not measured); easing `cubic-bezier(0.22, 1, 0.36, 1)`; stagger 70ms in reading order (row 1 left→right, then row 2)
- reduced motion — tiles fade in together, no scale, no travel
**§7 Platform diagram**
- kind — entrance + scroll-linked (inferred)
- what moves — header block; the four orbit pills; the amber lozenge and its glow
- from → to — entrance: lozenge `opacity 0, scale 0.92` → `opacity 1, scale 1`; pills `opacity 0, translate 14px *outward-to-home*` (top pill from +14px Y, left pill from −14px X, etc.) → `0`. Scroll-linked: the lozenge's glow radius/opacity ramps `0.5 → 1` and the whole diagram `translateY +30px → −30px` as the section crosses the viewport.
- range — entrance once, when the diagram's top reaches 80% of viewport; 650–800ms (not measured); lozenge leads, pills stagger 90ms clockwise from the top pill. The glow and drift are **scroll-linked and reverse**: from the section top entering the viewport until the section bottom leaves the viewport top.
- reduced motion — no drift, glow held at its mid value, lozenge and pills fade in together over 150ms
**§8 Feature A / §9 Feature B / §10 Feature C / §11 Feature D** *(identical treatment, four times)*
- kind — entrance, plays once, per section
- what moves — eyebrow + H2 + paragraph + "Explore" button as one header group; then the mock panel; then the checklist rows individually
- from → to — header group `opacity 0, translateY 18px` → `0`; panel `opacity 0, translateY 28px` → `0`; checklist rows `opacity 0, translateY 12px` → `0`; the expanded callout card also goes `scale 0.98 → 1`
- range — trigger: element top reaches 80% of viewport; 500–650ms (not measured); easing `cubic-bezier(0.22, 1, 0.36, 1)`; order header → panel → rows, rows stagger 60ms top to bottom. The panel and the list start together, not sequentially, so the two columns arrive as a pair.
- reduced motion — opacity only, all elements at once, 150ms
**§12 Trust band**
- kind — entrance, plays once
- what moves — left copy group, then the three seals
- from → to — `opacity 0, translateY 16px` → `opacity 1, translateY 0`; seals additionally `opacity 0 → 0.7` (they rest greyscale)
- range — trigger: section top reaches 80% of viewport; 500ms (not measured); `ease-out`; seals stagger 70ms
- reduced motion — opacity only
**§13 News**
- kind — entrance, plays once
- what moves — header row, then the three cards
- from → to — cards `opacity 0, translateY 24px` → `opacity 1, translateY 0`; card images `scale 1.04 → 1` inside their clipped frames
- range — trigger: card top reaches 85% of viewport; 550–650ms (not measured); easing `cubic-bezier(0.22, 1, 0.36, 1)`; stagger 80ms left to right
- reduced motion — opacity only, images at scale 1 throughout
**§14 Footer**
- kind — scroll-linked (inferred)
- what moves — the dusk illustration behind the static link grid
- from → to — illustration `translateY −50px → 0` and `scale 1.03 → 1`; link columns and legal row do not move
- range — scroll-linked and reversing: from the footer's top entering the viewport until the page bottom is reached (520px of scroll)
- reduced motion — illustration fixed at its final position
###### Interaction transitions (not part of the scroll choreography)
- **Nav link hover:** colour #6B6B64 → #16160F, 150ms; a 1px underline wipes in from left, 180ms `ease-out`.
- **Primary pill button hover:** background #16160F → #2C2C26, 160ms; **press:** `scale 0.98`, 90ms.
- **Secondary / "Explore" pill hover:** border #D9D8D6 → #16160F, background stays white, the trailing arrow glyph nudges +3px x, 160ms.
- **Testimonial tile hover:** border darkens to #C9C8C5 and the inner photo scales 1 → 1.03 within its clip, 300ms `ease-out`. No lift, no shadow.
- **News card hover:** image `scale 1 → 1.04`, 350ms; title gains a 1px underline.
- **Orbit pill hover (§7):** background white → #FDFDFD with border → #16160F, 160ms; the lozenge glow brightens ~10%.
- **Checklist row open/close (§8–§11):** height auto-transition 260–320ms `cubic-bezier(0.4, 0, 0.2, 1)`, body content fades 0 → 1 over the last 160ms; the chevron rotates 0 → 180°.
- **Focus:** 2px ink outline at 2px offset. Never amber, never blue.
---
##### 9. Responsive (below 640px)
- Container becomes full width minus **20px** gutters; the 860 cap is irrelevant, but keep the page feeling inset — do not let text touch the edges.
- **Nav:** links collapse to a hamburger; logo left, CTA pill stays visible but shrinks to 14px text and 12px horizontal padding.
- **Hero:** illustration band drops to 320px tall; H1 to 2.0× body (34px), line-height 1.15, still two lines; subhead 17px; CTA becomes full-width within the gutters.
- **§3 Logo wall:** six marks wrap to 3 × 2 with 24px gaps, or become a slow marquee — never shrink below 60% of their desktop size.
- **§4 Stats:** three across → a single column, 28px number, 32px gap, left-aligned, hairline dividers between.
- **§5 Value trio:** stacks to one column, 40px gaps.
- **§6 Mosaic:** collapses to a **1-column stack of square tiles**, 12px gaps; drop the second logo tile if length becomes a problem. Alternatively a horizontal snap carousel — do not try to preserve the 4-col spans.
- **§7 Diagram:** the orbit dies. Vertical stack: top pill, lozenge (full width minus gutters, 120px tall), then the remaining three pills in a row that wraps. Kill the parallax drift, keep the glow.
- **§8–§11:** always stack copy → panel, **ignoring the desktop alternation** — every section reads the same way on mobile. Mock panels go 4:3 and 24px padding. The "Explore" button moves below the paragraph, left-aligned.
- **§12:** copy then seals; seals shrink to 56px, centred row.
- **§13:** three cards → single column, or a horizontal snap row with the third peeking.
- **§14:** 5 link columns → 2 columns; illustration height 380px; parallax dropped; legal row wraps to two lines.
---
##### 10. Don'ts
- **Don't widen the container.** The narrow 860px measure against a 1440 window is the composition. A 1200px or full-width grid destroys it instantly.
- **Don't make the hero a photograph, a gradient mesh, or a 3D render.** It's a flat painterly illustration with visible brush-flat colour fields and grain. And don't let it be a card with rounded corners — it is full-bleed and fades to white at its base.
- **Don't spread the amber around.** The instinct will be to colour the buttons, icons, check-marks, links and eyebrow labels with #E7A549. Resist all of it. The amber appears on one shape, once, at §7. Its power is scarcity.
- **Don't reach for a SaaS blue, indigo or violet.** The only blue on the page is inside the illustration's sky.
- **Don't bold the headings.** Max weight 500 anywhere on the page, including the stat numbers. 700 headings make it look like a generic startup template.
- **Don't uppercase headings** — only the 13px eyebrow labels are uppercase.
- **Don't add card shadows.** Borders do all the work. The only soft light on the page is the lozenge glow, and that's a glow, not a drop shadow.
- **Don't centre the body sections.** Only the hero, logo wall, §6 header and the §7 diagram are centred; §5 and §8–§13 are left-aligned within the container.
- **Don't pin anything.** No sticky scenes, no horizontal scroll, no scroll-jacking. Two parallaxes and a set of 500ms entrances is the entire motion budget — the page is 8.9 viewports of deliberate calm.
- **Don't count up the stat numbers.** They fade in already at their final value.
- **Don't convert the §7 diagram into a flowchart** with arrows, connector lines and boxes. There are no lines; the four pills simply orbit the lozenge and the relationship is positional.
- **Don't make the orbit pills the same size as the lozenge** — they're small, white, hairline-bordered, roughly a third of its width.
- **Don't over-round.** 16px on cards, 12px inside, 999px on pills. A 24px+ radius on cards makes it soft in the wrong way.
- **Don't screenshot a real product** for the mock panels. Build them from grey rows, hairlines and one ink-coloured active state — abstract enough to read as "interface", never legible as a specific app.
- **Don't let the footer illustration be a solid dark block.** It's the same painterly hand as the hero, at dusk, with white text sitting over its darker lower half.
- **Don't add a dark mode toggle, a gradient headline, a glassmorphic card, or an "AI" glow border.** None of those belong to this system.
### Imagery — already generated
These pictures were made for this design and are hosted at the URLs below.
Use them as the `src` exactly as written, and keep the alt text. Do not
generate your own, do not reach for a stock library or a placeholder
service, and do not feed the Imagery section above back to an image model —
that work is done. Size and crop them with CSS (`object-fit: cover`) rather
than assuming their dimensions, and download them into the project if you
would rather not hotlink.
- https://ai-taste-vault.vercel.app/v/demo/duna-compliance-platform-homepage/images/01-hero-landscape.webp — Painterly pastel landscape at golden hour with a pale river winding through rolling green hills toward distant blue ridges
- https://ai-taste-vault.vercel.app/v/demo/duna-compliance-platform-homepage/images/02-footer-dusk-landscape.webp — Painterly dusk landscape with a tall tree at the left, a still lake and distant mountains under a violet-to-peach sky
- https://ai-taste-vault.vercel.app/v/demo/duna-compliance-platform-homepage/images/03-testimonial-portrait.webp — Portrait of a customer in a plain dark shirt against a soft warm grey interior wall
- https://ai-taste-vault.vercel.app/v/demo/duna-compliance-platform-homepage/images/04-editorial-portrait.webp — Editorial portrait of a person in a deep teal top against a plain cool grey studio backdrop
### Image prompts
What each picture above was generated from, for anyone changing one.
**Painterly pastel landscape at golden hour with a pale river winding through rolling green hills toward distant blue ridges** (`01-hero-landscape`)
MEDIUM AND FINISH: A flat painterly gouache illustration — broad, soft-edged fields of opaque matte colour, airbrush-soft blending only within the sky, and a fine paper-tooth grain over the whole frame; no ink outlines, no cel-shaded hard edges, no vector shapes, no photographic texture, no lens behaviour of any kind. It should read as hand-painted on paper, slightly chalky and completely flat-lit. COLOUR AND VALUE: High-key pastel throughout, low contrast, everything sitting in the upper two thirds of the value range. The lightest value in the frame is a cream highlight on the water at #FCF7F0; the darkest value anywhere is the deepest hill green at #6C8F5E — nothing is darker than that, there are no blacks, no brown shadows and no silhouettes. Sky: pale powder cyan #89D4ED at the top corners, softening downward through cream #FBEBD8 into a warm apricot band #F9C9A7 just above the horizon, crossed by a few long soft horizontal cloud bands in dusty rose #EEBDBB and pale mauve #DCC3D2. Distant ridges: hazy periwinkle #8E9BC4 flattening toward #A9B3D3 as they recede. Hills: light sage #C2CE93 on the lit faces, mid olive-green #8CA86A in the middle planes, the deeper #6C8F5E reserved for the nearest hill mass only. Water: pale glacial cyan #CFE7EE grading to near-white. EDGES: Full-bleed at left, right and top. The bottom 22% of the frame dissolves gradually into flat #FDFDFD so it blends seamlessly into the white page below with no visible edge. The top 12% must stay quiet, even and low-contrast pale sky with no clouds and no busy detail, because dark navigation text and a small dark button sit over it. SUBJECT: A wide, calm, uninhabited valley at golden hour. A pale river winds out of the middle distance right of centre and runs down and out through the lower-left corner, widening as it comes forward. Layered rolling hills step back on both sides in three or four overlapping planes, each flatter and hazier than the one in front, and behind them sit two or three soft blue mountain ridges. COMPOSITION: The horizon sits about 55% down the frame; the centre of the image is open sky and open water so the composition stays quiet; there is no focal object and nothing that pulls the eye to a single point. AVOID: no sun disc, no sunburst, no lens flare, no god-rays, no vignette, no dramatic or stormy clouds, no saturated travel-photo greens or teals, no HDR clarity, no depth-of-field blur, no photographic realism, no 3D render, no isometric or low-poly look, no thick black outlines, no anime or Ghibli styling, no birds, no people, no buildings, no roads, no fences, no trees in silhouette. Output a wide 2.4:1 landscape frame, 1536x640. No text, no lettering, no logos, no watermarks, no UI.
**Painterly dusk landscape with a tall tree at the left, a still lake and distant mountains under a violet-to-peach sky** (`02-footer-dusk-landscape`)
MEDIUM AND FINISH: The same flat painterly gouache hand as a matte hand-painted landscape — opaque fields of colour, soft airbrushed blending in the sky only, fine paper grain across the frame, no outlines, no photographic texture, no lens behaviour. COLOUR AND VALUE: Dusk — cooler and deeper than daylight but still muted, matte and gently graded, never dramatic. The lightest value is a pale hazy glow along the horizon at #E3DCD2; the darkest value anywhere is deep foliage green at #2E4438 — nothing darker than that, no black, no cut-out silhouettes, no vignette. The sky graduates from dusty slate-blue #6E87A0 at the top, through muted violet #8E8AA8, into a soft peach band #E4B79A at the horizon. Mountains in hazy blue-grey #7C90A4 and #63788E. Still water in pale slate-cyan #A8C0C6 with cream #DCD5C8 reflections. Foliage in deep sage #4F7A5E and #3A5C46. The darkening toward the bottom is gradual, not a hard falloff. EDGES: Full-bleed at left, right and bottom; the top meets the white page above at a clean horizontal cut. Keep the top 20% an even, almost featureless expanse of the dusty slate-blue sky, with no clouds, no branches and no peaks intruding, because five columns of white link text sit over it. Keep the bottom 15% the darkest and most even part of the frame so a row of small white legal text stays legible across it. SUBJECT: A still lake at dusk. A single tall broadleaf tree stands in the left third, its canopy reaching to about the vertical middle of the frame, painted as a soft layered mass of green rather than a silhouette. Beyond it, flat calm water, a low far shore, and two or three receding mountain ridges toward the right. A dark green bank runs across the very bottom edge. COMPOSITION: The horizon sits at roughly 62% down the frame; the right half and the whole top band stay open and quiet; the tree is the only vertical element in the picture. AVOID: no stars, no moon, no night sky, no black silhouettes, no neon or magenta sunset, no volumetric haze beams, no reflected sun disc, no lens flare, no vignette, no photographic realism, no 3D render, no cel-shaded outlines, no birds, no boats, no people, no buildings, no dock or jetty. Output a wide 2.4:1 landscape frame, 1536x640. No text, no lettering, no logos, no watermarks, no UI.
**Portrait of a customer in a plain dark shirt against a soft warm grey interior wall** (`03-testimonial-portrait`)
MEDIUM AND FINISH: A real photograph — a relaxed corporate portrait taken indoors on soft diffuse daylight from a large window, natural colour, gently desaturated in the grade, mild fine grain, no heavy retouching and no beauty smoothing. COLOUR AND VALUE: Muted and warm-neutral, with a narrow value range. The lightest value is the background wall at #EFEAE3; the darkest is the shirt at #2A2E33 — nothing is pure black, no highlight is blown, and there is no strong shadow anywhere on the face because the light is broad and nearly shadowless. Skin tones natural but slightly cool and low in saturation. The background is a plain warm grey-beige running #D8D3CB to #C3BDB4, softly unfocused but not creamy-blurred. EDGES: The image will be cropped into a small square tile with 16px rounded corners, so keep the subject centred with even headroom and no important detail within 8% of any edge; a small logo badge will be overlaid in the lower-left corner, so leave that area plain background or plain clothing. SUBJECT: One person, mid-thirties, chest-up, facing the camera with a slight closed-mouth smile, wearing a plain dark navy-charcoal shirt or fine knit with no pattern, no logo and no lanyard. Shoulders square, arms relaxed and falling out of frame below. COMPOSITION: Head centred in the upper half, eyes at about 38% down the frame, framed loosely enough that a square crop still leaves air above the head; the background is empty. AVOID: no studio strobe punch, no black or white seamless backdrop, no dramatic rim light or hair light, no coloured gels, no high-contrast editorial grade, no HDR skin clarity, no extreme shallow-focus bokeh balls, no glasses glare, no hands in frame, no office clutter or plants behind, no stock-photo overacted grin. Output a square 1:1 frame, 1024x1024. No text, no lettering, no logos, no watermarks, no UI.
**Editorial portrait of a person in a deep teal top against a plain cool grey studio backdrop** (`04-editorial-portrait`)
MEDIUM AND FINISH: A real photograph — an editorial business portrait on a plain studio backdrop, lit by one large soft key so the result is even and flat, natural colour with a slightly cool and desaturated grade, fine grain, minimal retouching. COLOUR AND VALUE: A quiet, narrow value range. The lightest value is the backdrop at #DEDCD8; the darkest is the clothing at #24332F — no pure black, no blown white, no hard shadow edges anywhere. The backdrop is a flat cool grey #CFCEC9 falling only very slightly darker toward the corners. Clothing is a deep muted teal-green #2F4A45. Skin natural, low in saturation, with no warm orange cast. EDGES: The frame will be cropped both to 4:3 and to a square, so keep the subject centred with generous headroom and clear space on both sides, and keep the outer 8% of the frame plain empty backdrop. SUBJECT: One person, mid-thirties to forties, chest-up, facing the camera with a calm, composed, closed-mouth expression, wearing a plain deep teal-green knit or blouse with no pattern and no logo; arms lightly folded low in the frame, mostly below the crop line. COMPOSITION: Head centred, eyes at about 35% down the frame; nothing at all behind the subject — the backdrop is completely empty. AVOID: no black or white backdrop, no coloured gel, no rim light, no dramatic chiaroscuro, no high-contrast magazine grade, no HDR skin texture, no heavy bokeh, no office or bookshelf background, no props, no hands near the face, no wide-angle distortion, no overacted smile. Output a square 1:1 frame, 1024x1024. No text, no lettering, no logos, no watermarks, no UI.
---
## The Social Club — Events landing page
- Page: https://ai-taste-vault.vercel.app/r/the-social-club-events-landing-page
- Original: https://br.pinterest.com/pin/649503577554601917/
- Type: Landing page
- Tags: About, Editorial, Full bleed, Hero, Nav bar, Process steps, Restrained motion, Stats band
- Palette: #FEFEFE, #736F4E, #1A120D, #FDFC96, #65361B
- Captured: 2026-09-18
- Rebuilt with: Claude Code · Opus 5.5 · High · skills: frontend-design, emil-design-eng, transitions-dev, gsap, humanizer
- Rebuild: https://ai-taste-vault.vercel.app/v/demo/the-social-club-events-landing-page/index.html
### Prompt — Rebuild
_rebuild · html-css · opus_
#### Events club landing page: full-bleed photo hero, olive about band, staircase steps grid
Build a three-section landing page for a social-events community. It should feel like a printed editorial: a big night-flash photo with an oversized pale-lemon wordmark headline, then a flat olive band with a large paragraph and three stats, then a white "how it works" section where three numbered cards and one photo card step diagonally across a 3-column grid. Use a single grotesk family throughout. Bracketed uppercase labels like `[ LABEL ]` act as section markers. Nothing has shadows or gradients except the photo scrim. Motion is restrained.
Design width is 1440px. Pages edges are flat: no outer margin, no rounded page corners.
##### Structure
- **Content container:** 1280px wide, with an 80px gutter each side at 1440.
- **Nav row:** sits slightly wider, at 64px from each edge.
- **Grid:** 12 columns, 0 gutter, inside the container. Section 3 uses 3 equal columns of ~426.67px with no gap.
Sections, top to bottom:
1. **Hero.** Full-bleed photograph with the nav overlaid at the top.
- Small intro block, upper left.
- Pill badge and a giant one-line headline at the bottom left.
2. **About and stats band.** Flat olive background, two columns:
- Left: bracketed label at column 1.
- Right: a large paragraph starting at ~x 688px (column 7), with a row of three stats below it.
3. **How it works.** White background.
- Two-line heading on the left, bracketed label on the right.
- A staircase grid of 3 numbered step cards and 1 photo card with a CTA.
- The page ends here, with no footer in the reference.
##### Scroll map
Reference viewport is 1440×900.
1. Hero: 1020px, 1.13 vh. Consumes 1020px. Entrance on load, plus a subtle scroll-linked photo drift (inferred).
2. About and stats band: 720px, 0.80 vh. Consumes 720px. Entrance.
3. How it works: 1012px, 1.12 vh. Consumes 1012px. Entrance.
Nothing pins or stacks. **Total page height ≈ 2752px (≈3.06 viewports).**
##### Spacing
All values are at 1440, on an 8px base.
**1. Hero**
- Nav: top padding 40px, side padding 64px. The logo top aligns with the CTA top.
- Nav links: 56px apart; 40px between the last link and the CTA pill.
- Intro block: top edge ~250px from the page top, left edge at 80px, ~340px wide.
- Inside the intro block: intro text, then 20px, then the text link. A 1px hairline runs under the link the full block width, 8px below the link text.
- Pill badge: bottom edge 28px above the headline's cap top. Its left edge sits at 80px.
- Headline: left edge ~96px (optically inset ~16px from the badge). Its baseline sits ~64–72px above the section bottom.
**2. About and stats band**
- Padding: 144px top, 160px bottom.
- Left column holds only the label, top-aligned with the first paragraph line.
- Paragraph: starts at x ≈ 688px, max width ~660px.
- Paragraph to stats row: 72px.
- Stats row: 3 columns of ~230px each, inset 16px from the paragraph's left edge. Inside each stat, number then 12px then caption.
**3. How it works**
- Padding: 64px top, 120px bottom.
- Heading: max width ~880px. The label is right-aligned to the container edge and top-aligned with the heading.
- Heading bottom to grid top: 88px.
- Grid rows are 316px tall. Cards share 1px borders; there is no gap.
- Card padding: 32px on all sides.
**Rhythm:** sections butt against each other with colour changes, not dividers or white space. Inner padding is generous at the top of the olive band (144px) and tight at the top of the white section (64px). That asymmetry is intentional.
##### Type
The only family is a neo-grotesk with tight display tracking. Free stand-in: **Inter Tight**, or Inter with display optical sizing. It is not geometric, not a serif, not a mono. **Body anchor is 17px.**
| Level | Size | Line-height | Letter-spacing | Weight | Notes |
|---|---|---|---|---|---|
| Hero display headline | 12.25× → 208px | 0.88 | −0.055em | 500 | One line, spans ~1240px; pale lemon |
| Trademark-style superscript | 1.5× → 26px | 1 | 0 | 400 | Top-right of the headline, cream/white |
| About paragraph | 1.9× → 32px | 1.3 | −0.015em | 400 | Max ~40ch (660px), 6 lines |
| Section heading (sec. 3) | 3× → 51px | 1.12 | −0.025em | 400 | 2 lines, max ~42ch per line |
| Stat number | 1.6× → 28px | 1.1 | −0.02em | 400 | Leading "+" or trailing "%" |
| Card title | 1.5× → 26px | 1.15 | −0.02em | 400 | Olive colour |
| Hero intro text | 1.1× → 19px | 1.35 | −0.01em | 400 | 2 lines, max ~34ch |
| Body / card text | 1× → 17px (16px allowed in cards) | 1.5 | 0 | 400 | Max ~34ch in cards |
| Stat caption | 0.85× → 14px | 1.4 | 0 | 400 | 2 lines, max ~22ch |
| Nav links | 0.82× → 14px | 1 | +0.04em | 500 | UPPERCASE |
| Buttons (pills) | 0.88× → 15px | 1 | 0 | 500 | Sentence case, followed by an arrow → |
| Text link (hero) | 0.82× → 14px | 1 | 0 | 400 | Small sparkle/asterisk glyph before it, arrow after |
| Bracket labels `[ LABEL ]` | 0.75× → 12–13px | 1 | +0.06em | 400 | UPPERCASE, spaces inside the brackets |
| Step index `[ 01 ]` | 0.75× → 13px | 1 | +0.04em | 400 | Same style as the labels |
| Badge label | 0.72× → 12px | 1 | +0.06em | 500 | UPPERCASE |
| Logo wordmark | 1.3× → 22px | 0.95 | −0.03em | 600 | 3 stacked short lowercase lines, 1 word each |
All weights are 400–500. Nothing is bold; the display size alone carries the hierarchy.
##### Colour
- **#1A120D (near-black brown):** text on white, card text, button text on lemon pills. Also the scrim tint over the hero photo.
- **#FEFEFE (white):** surface of section 3 and the card backgrounds.
- **#736F4E (olive):** the full surface of section 2 and the step card titles. It is the page's "middle" colour.
- **#FDFC96 (pale lemon): the single accent.** Allowed only in these places:
- The hero headline.
- Nav links.
- Pill CTA fills (nav CTA, photo-card CTA, the badge's "+N" circle).
- All text on the olive band (paragraph, label, numbers).
- Never on white backgrounds as text.
- **#65361B (burnt brown):** lives only inside the photography (warm skin and shadow tones). Use it as the image placeholder fill while photos load. It is never used for UI.
- **Supporting tints derived from the palette:**
- Card borders: 1px #E4E2DA (warm light grey).
- Hero hairlines and badge outline: rgba(254,254,254,0.45).
- Stat captions on olive: #FEFEFE at 85%.
##### Surface
- **Borders:** 1px everywhere.
- Step cards: #E4E2DA. Adjacent cards share one border, so it is never doubled.
- Hero pill badge: translucent white.
- **Radii:**
- Step cards and photo card: 4px.
- Pills (nav CTA, badge, photo CTA): 999px.
- Avatars and the "+N" circle: 50%.
- Sections and the hero image: 0.
- **Shadows:** none, anywhere.
- **Hero scrim:**
- Top gradient: rgba(26,18,13,0.6) → transparent across the top 40%, for nav and intro legibility.
- Light bottom gradient: rgba(26,18,13,0.25) → transparent across the bottom 30%, behind the headline.
##### Imagery
1. **Hero photo (section 1):** full-bleed, 1440×1020 (~1.41:1), `object-fit: cover`, focal point upper-centre.
- Candid on-camera-flash night shot of three young adults laughing at a party.
- Shallow depth, motion blur on the edges, and a heavy warm cast: amber skin, deep brown shadows, one saturated green garment.
- Film grain. It should feel candid, not posed.
2. **Pill badge avatars (section 1):** two overlapping 32px circular face crops, overlapped by 10px. They are followed by a 32px lemon circle holding "+N" in 11–12px dark text, then the uppercase badge label.
3. **Photo card (section 3, row 2 / column 3):** ~426×316 (~4:3), 4px radius.
- Flash-lit fashion detail: a figure cropped from waist to knee, holding a patterned beaded or woven handbag.
- Behind it, a pleated olive-green velvet curtain.
- Retro and slightly kitsch, with saturated greens matching the olive band.
- A lemon CTA pill sits inside, 32px from the bottom-left corner.
##### Motion
No motion report was supplied, so everything below is inferred from the "restrained motion" characteristic. Durations and easings are **not measured**; ranges are given instead.
**1. Hero**
- **kind:** entrance on load. Optional scroll-linked photo drift (inferred).
- **what moves:**
- Hero photo.
- Nav row.
- Intro block.
- Pill badge.
- Display headline.
- **from → to:**
- Photo: scale 1.06 → 1, opacity 0 → 1.
- Nav and intro block: opacity 0 → 1, translateY 12px → 0.
- Badge: opacity 0 → 1, translateY 16px → 0.
- Headline: revealed line-masked, translateY 100% → 0 inside an `overflow: hidden` wrapper.
- Drift (scroll-linked, reverses on scroll up): photo translateY 0 → 80px while the hero scrolls from top-at-viewport-top until its bottom reaches the viewport top.
- **range:**
- Plays once on page load.
- Photo: 900–1400ms, ease-out (inferred, not measured).
- Text: 500–800ms, cubic-bezier(0.2,0.7,0.2,1)-like ease-out. Stagger 60–100ms in the order nav → intro → badge → headline.
- **reduced motion:**
- Everything appears at its final state.
- The photo drift is disabled.
**2. About and stats band**
- **kind:** entrance.
- **what moves:**
- Label.
- Paragraph.
- The three stats.
- **from → to:** opacity 0 → 1, translateY 24px → 0.
- **range:**
- Plays once, when the paragraph's top reaches 80% of the viewport.
- 500–700ms ease-out.
- Stats stagger 80–120ms left to right.
- Optional: numbers count up from 0 over 800–1200ms (inferred).
- **reduced motion:**
- Static and fully visible.
- Numbers show their final values.
**3. How it works**
- **kind:** entrance.
- **what moves:**
- Heading and label.
- The four grid cells.
- **from → to:**
- Heading and label: opacity 0 → 1, translateY 20px → 0.
- Cells: opacity 0 → 1, translateY 24px → 0.
- **range:**
- Plays once, when each element's top reaches 80% of the viewport.
- 500–700ms ease-out.
- Cells stagger 80–120ms in reading order: 01 → 02 → 03 → photo card.
- **reduced motion:** static and fully visible.
**Interaction transitions** (not part of the scroll choreography):
- **Lemon pills:**
- Hover: background darkens slightly to #F4F27A and the arrow nudges 3px right. 150–200ms ease-out.
- Press: scale 0.98.
- **Nav links:** hover fades opacity 1 → 0.7, or a 1px underline grows from left. 150ms.
- **Hero text link:** on hover, the hairline under it goes from 45% to 100% white and the arrow shifts 3px right.
- **Step cards:** hover changes the border to #736F4E. 200ms. No lift, no shadow.
- **Photo card:** hover scales the image 1 → 1.03 inside its clip. 400–600ms ease-out.
##### Responsive (below 640px)
- **Gutter:** 20px everywhere, nav included.
- **Nav:** text links are dropped. The logo and lemon CTA pill stay; a minimal menu trigger is optional.
- **Hero:**
- Height becomes 100svh, minimum 640px.
- Intro block stays top-left at full width.
- Headline scales with the viewport (≈17–18vw, so ~64–70px) and may wrap to two lines ("first two words / last word"), line-height 0.9.
- Badge sits above it.
- **About and stats band:**
- Label stacks above the paragraph.
- Paragraph drops to 22px / 1.35.
- Padding becomes 80px top and 96px bottom.
- Stats become a single column, each separated by a 1px rgba(253,252,150,0.3) hairline with 20px vertical padding.
- **How it works:**
- Heading drops to 30px / 1.15; the label moves above it.
- The staircase collapses to one column in the order 01, 02, 03, photo card.
- Each card is a full-width cell with auto height (min 220px). Cards still share 1px borders.
- Photo card keeps 4:3.
##### Don'ts
- **Don't** draw the dark #2E2C1F presentation mat, an outer margin, a rounded page frame or a drop shadow around the page. The page is edge-to-edge.
- **Don't** make the hero headline bold, centred, or wrapped at desktop. It is one weight-500 line in pale lemon, nearly the full container width, tightly tracked and sitting low in the hero.
- **Don't** use the lemon accent as text on white, or add a second accent colour (no blue links, no green success states). Olive and lemon do all the work.
- **Don't** lay the steps out as a neat 3-up row of equal cards with gaps and shadows. They are a zero-gap staircase:
- Row 1: card 01 in column 1, card 02 in column 2, column 3 empty.
- Row 2: column 1 empty, card 03 in column 2, photo card in column 3.
- The empty cells are part of the design.
- **Don't** put icons, emoji or illustrations in the step cards. Each card is just `[ 0N ]`, an olive title and bottom-anchored body text, with empty space in between.
- **Don't** centre-align anything except the contents of the pills and badge. Everything is left-aligned except the right-aligned section-3 label.
- **Don't** use stock-bright, evenly lit photography. Images must be flash-lit, warm, grainy, candid and slightly blurred.
- **Don't** add card shadows, glassmorphism, gradient buttons or rounded corners larger than 4px on rectangles.
- **Don't** add dividers, coloured section seams or extra white space between sections. The colour change is the divider.
- **Don't** set the about paragraph at body size. It is a 32px statement, and the stats under it are smaller than it, not bigger.
- **Don't** reach for a geometric sans (Poppins, Montserrat) or a serif display. It is one neo-grotesk family at regular/medium weights.
- **Don't** add parallax layers, marquee tickers, cursor followers or pinned scroll sequences. Motion is a few gentle entrances and, at most, one slow photo drift.
### Imagery — already generated
These pictures were made for this design and are hosted at the URLs below.
Use them as the `src` exactly as written, and keep the alt text. Do not
generate your own, do not reach for a stock library or a placeholder
service, and do not feed the Imagery section above back to an image model —
that work is done. Size and crop them with CSS (`object-fit: cover`) rather
than assuming their dimensions, and download them into the project if you
would rather not hotlink.
- https://ai-taste-vault.vercel.app/v/demo/the-social-club-events-landing-page/images/01-hero-flash-party.webp — Three friends laughing together at a night party, caught in warm on-camera flash with motion blur
- https://ai-taste-vault.vercel.app/v/demo/the-social-club-events-landing-page/images/02-photo-card-handbag.webp — Flash-lit detail of a person holding a beaded woven handbag in front of a pleated green velvet curtain
### Image prompts
What each picture above was generated from, for anyone changing one.
**Three friends laughing together at a night party, caught in warm on-camera flash with motion blur** (`01-hero-flash-party`)
MEDIUM AND FINISH: a real candid 35mm night photograph shot with direct on-camera flash at a slow shutter, so the people are sharp-ish where the flash hits but smeared with dragged motion blur at the edges; visible film grain, slightly soft focus, a snapshot not a staged shoot. COLOUR AND VALUE: a heavy warm amber cast over everything. The background is a near-black warm brown around #140D09 to #1F150F with no neutral or blue-black. Skin tones run from deep burnt brown #65361B in the shadows through amber #B8764A to flash-lit highlights no lighter than #F2CFB2. Exactly one saturated garment: a vivid grass-green top around #3E9E3A. One pale off-white shirt #E6DED2 is the brightest fabric. Apart from the green, there are no cool tones, no blue light and no neon. EDGES: the photo runs full-bleed with no border and is cropped with object-fit cover on a 1.41:1 box, so keep the important content away from the far left and right tenths. The top 15% and the upper-left quarter must be a dark, quiet warm-brown void, because a nav bar and a small text block sit there. The lower third must stay mid-to-dark and low in detail, with no bright highlights, because a huge pale-lemon headline runs across it. SUBJECT: three young adults at a party, mid-laugh, unposed. In the centre, slightly left, is a young woman with light skin and loose curly brown hair tied back. Her head is tilted, her eyes are squinting and she is laughing open-mouthed with teeth showing. She wears a gold hoop earring and a bright green top, and her face fills about a quarter of the frame height, with her eyes about 30% down from the top. To the right, larger and closer to the camera, is a young man with dark skin and short curly hair. He is grinning broadly and leaning in, and his face is partly cropped by the right edge. To the left, smaller and heavily motion-blurred, is a second young man in profile wearing a pale shirt, at mid-height. The shoulders and the green top fill the bottom third as soft dark-and-green shapes. COMPOSITION: an intimate, crowded close-up from slightly below eye level, with the faces clustered in the upper-middle band and some streaked flash smear across the frame. AVOID: evenly lit studio light, stock-photo smiles looking at the camera, crisp HDR clarity, cool or teal grading, neon club lights, bokeh light balls, black vignettes, lens flare, clean digital sharpness, and any added bright areas in the top-left or bottom third. Output a wide 3:2 landscape frame, 1536x1024. No text, no lettering, no logos, no watermarks, no UI.
**Flash-lit detail of a person holding a beaded woven handbag in front of a pleated green velvet curtain** (`02-photo-card-handbag`)
MEDIUM AND FINISH: a real flash-lit fashion snapshot on film with hard direct on-camera flash, a slightly kitsch retro editorial feel, fine film grain and mild softness, not a polished studio product shot. COLOUR AND VALUE: dominated by saturated olive-to-bottle greens. The pleated curtain runs from deep shadowed folds around #1E2A14 to flash-lit ridges around #6E8A3A, and the floor is a similar green #4F6A2A. The handbag is warm tan and gold, #B89A5E to #D9C48A. The figure's clothing is mid-blue denim #4A6A9A with a pale cream top edge #E8E2D0. Light skin has warm highlights no brighter than #F0D2B8. Nothing in the frame is pure white, and the deepest values are dark green-black #141A0E in the curtain folds, never neutral black. EDGES: the image fills a 4:3 card with a 4px radius and is clipped on all sides. The bottom-left quarter must stay fairly dark and uncluttered, because a pale-lemon pill button sits there 32px in from the corner. SUBJECT: a person cropped from roughly the waist to the knees, standing centred and slightly right, facing the camera. One arm hangs down holding a structured rectangular handbag at hip height in the centre of the frame. The bag is densely covered in tan, gold and cream beads or woven raffia with a small pattern, and has a short top handle. The figure wears straight-leg denim, and a little bare forearm shows with a bracelet or two. Behind them, a heavy pleated green velvet stage curtain fills the whole background with vertical folds catching the flash. COMPOSITION: frontal and flat with a slightly low camera, the bag as the bright focal point, and the curtain pleats as a strong vertical rhythm on both sides. AVOID: faces or heads in frame, white seamless studio backdrops, soft beauty lighting, bokeh, shallow-depth blur on the bag, red or burgundy curtains, cool blue grading, luxury-ad gloss, black vignettes and lens flare. Output a 4:3 landscape frame, 1024x768. No text, no lettering, no logos, no watermarks, no UI.
---
## Solara — Solar Energy Landing Page
- Page: https://ai-taste-vault.vercel.app/r/solara-solar-energy-landing-page
- Original: https://dribbble.com/shots/27661414-Solara-Solar-Energy-Landing-Page
- Type: Landing page
- Tags: CTA band, FAQ, Feature grid, Footer, Full bleed, Hero, High contrast, Light mode, Minimal, Neon accent, Pastel, Testimonials
- Palette: #FCFDFD, #00131E, #D7D9DA, #1878B8, #6CB4E4
- Captured: 2026-09-18
- Rebuilt with: Claude Code · Opus 5.5 · Extra high · skills: frontend-design, emil-design-eng, transitions-dev, gsap, humanizer
- Rebuild: https://ai-taste-vault.vercel.app/v/demo/solara-solar-energy-landing-page/index.html
### Prompt — Rebuild
_rebuild · html-css · opus_
#### Giant-wordmark clean-energy landing page
A bright, airy marketing page for a renewable-energy installer. It has a near-white surface and deep navy ink, with one saturated blue used only on pill buttons. The photography is high-key daylight: turbines, panels, wheat fields and sky. A huge wordmark runs edge to edge at both ends of the page. At the top it is white over the hero photo. At the bottom it is white on navy, with its lower edge cut off where the page ends. The layout is an asymmetric 12-column editorial grid with a lot of white space, flat tinted cards, hairline lists and no shadows. Treat the design as a full-bleed page with no outer margin or frame.
No motion report or motion strips came with this reference. Every motion value below is inferred from the stills.
##### Structure
- Reference width is 1440px, and viewport maths assumes a 1440×900 viewport.
- Every section is full-bleed. Content sits inside 40px side gutters, so the content box is 1360px. Above 1440, cap the content at 1360 and center it. Backgrounds and the hero photo stay full-bleed.
- Use a 12-column grid with 20px gaps, giving columns of about 95px. Column 6 starts at x≈615. The **content column** is columns 6–12 (x≈615–1400, about 785px wide). In asymmetric sections the eyebrow sits in column 1, top-aligned, and everything else goes in the content column.
Sections, top to bottom:
1. **Hero:** full-bleed photo, nav laid over it, giant wordmark, and a bottom row with the headline, a paragraph and stats.
2. **Value intro and feature grid:** asymmetric header with a two-tone lead, then three cards at 1fr / 2fr / 1fr.
3. **Solutions:** centered header, then a 2×2 card grid split by a tall arch image in the middle.
4. **Featured projects:** asymmetric header, then a 3-row accordion list with row 2 open.
5. **Testimonials:** centered header, then a full-bleed card track cut off by both viewport edges.
6. **FAQ:** asymmetric header, then a side card (columns 1–3) and a 6-row accordion in the content column.
7. **CTA band:** a photo card inset on the dark navy surface, which starts here.
8. **Footer:** navy; a blurb and 3 link columns, a legal/badge row, and a giant wordmark cut off at the bottom.
###### 1 · Hero (y 0–920)
- The photo covers the section. Add a bottom scrim: `linear-gradient(to top, rgba(0,19,30,.45) 0%, transparent 40%)`.
- **Nav row:** 80px tall and transparent, with items centered at y≈40.
- Left: 5 one-word links in uppercase, white, 36px apart, starting at x=40. There is no logo in the nav.
- Right: a white pill CTA with ink text, label 3–4 words, 40px tall, padding 0 20px, no arrow circle.
- **Wordmark:** one word of 5–7 letters in sentence case, white. It starts at x=40 and is sized to fill the full 1360px content width. Cap top sits at y≈210 and the baseline at y≈560, so it fills the sky area of the photo.
- **Bottom row:** top-aligned, starting at y≈790, with 40px left below it.
- Columns 1–5: headline, 2 lines of about 5 words each, white, max-width 600.
- Columns 7–9: paragraph of about 25 words on 4 lines, white at 85%, max-width 270.
- Columns 10–12: three stats in equal sub-columns. Each value is 2 digits, a space and a unit letter. Below it goes a 2-word label on 2 lines, white at 70%, 6px gap.
###### 2 · Value intro (y 920–1796)
- **Header:**
- Eyebrow (`/ ` plus 2 words) in column 1.
- Lead in the content column: 2 sentences, about 25 words, on 4 lines. The first sentence is ink and the second is muted gray, running on in the same paragraph.
- **Cards:** 56px below the header. Grid 1fr 2fr 1fr, gap 20, height 500.
- **Side cards** (≈330×500):
- #F3F5F6 fill, radius 12, padding 20, no border.
- A portrait thumbnail (2:3, ≈150×225, radius 8) sits top-left.
- Title (3–4 words, one line) and description (2–3 lines, about 15 words, gray) are pinned to the bottom, 8px apart.
- **Middle card** (≈660×500):
- Full-bleed photo, radius 12, overflow hidden, padding 32.
- Top-left: a 36px white circle holding an 18px ink line icon (a house).
- 32px below it, the title (3–4 words, one line, white).
- 12px below that, the description: 2 lines, white at 80%, max-width 440.
- All the text sits over the sky part of the photo.
###### 3 · Solutions (y 1796–2649)
- **Centered header:**
- Eyebrow (`/ ` plus 1 word).
- 12px gap, then an H2 on one line (5–6 words).
- 20px gap, then a subtitle: 2 lines, about 25 words, gray, max-width 520.
- **Grid:** 56px below the header. Columns 1fr / 380px / 1fr, gap 20.
- Each outer column holds 2 stacked cards, 260px tall each with a 20px gap, so each stack is 540px.
- The center column holds the arch image, 380×470, top-aligned with the stacks.
- **Cards:**
- #F3F5F6 fill, radius 12, padding 24, no border.
- A 56px glossy 3D illustrated icon sits in the card's outer top corner.
- A bottom-aligned text block holds:
- title (2 words)
- description (2 lines, about 14 words, gray)
- 16px below, a meta line of 3–5 words in ink at 14px/600.
- **Mirroring:** the left cards have the icon top-left and left-aligned text. The right cards have the icon top-right and right-aligned text. Everything hugs the outer edges, and the arch is the axis.
###### 4 · Featured projects (y 2649–3560)
- **Header:**
- Eyebrow in column 1.
- In the content column: an H2 of about 9 words on 2 lines with an explicit break.
- 24px below it, a one-line gray subtitle of about 12 words.
- **List:** 64px below the header, spanning the full 1360px. A 1px #D7D9DA hairline sits above and between rows.
- **Collapsed row** (≈96px tall, padding 24 top and bottom):
- Index ("01", 14px ink) at x=40.
- In the content column: a label (12px uppercase gray, 2 words), 6px gap, then a title (18px/500, 6–8 words).
- At the far right: a 32px circle with a 1px #D7D9DA border and a chevron pointing right.
- **Expanded row** (≈330px tall):
- The row becomes a #F3F5F6 card with radius 12 and padding 24.
- Index top-left. A landscape thumbnail (≈400×215, about 1.85:1, radius 8) is pinned bottom-left.
- The content column shows the label and title as in the collapsed row. The chevron is replaced by a blue pill (2 words) at top-right.
- 24px below the title: one category word in uppercase at 20px, in very light gray #C3C8CB.
- 16px below that: a 3-row spec table across the content column.
- Rows are 40px with a hairline on top.
- The label (12px uppercase gray) sits at the column start.
- The value (14px/500 ink) sits at x≈1160. Values cover money saved, a percentage offset and tons per year.
- Row 02 is open by default. Rows 01 and 03 are collapsed.
###### 5 · Testimonials (y 3560–4472)
- **Centered header:**
- Eyebrow.
- H2 on one line, about 7 words.
- Subtitle on 2 lines, max-width 560, gray.
- **Track:** 56px below the header. A full-bleed row that breaks out of the gutters, with cards 430×550 and a 20px gap.
- The page center falls in the gap between two full cards, at x≈280–710 and x≈730–1160.
- The cards on either side are cut off by the viewport edges, with about 260px of each visible.
- **Card order:** photo · mint logo · blue logo · photo, repeating.
- **Logo card:**
- An 8px frame of saturated pastel (#C4F2B8 mint, or #C7E5F7 sky).
- Inside the frame, on top: a white panel, radius 8, about 210px tall, with a black company-logo placeholder (about 120px wide) centered.
- 8px below that, a pale tint panel (#E8FAE4 or #E5F3FB, radius 8) fills the rest, padding 20. It holds:
- a quote of about 40 words on 4–5 lines, ink, at the top
- name (14/600) and role (12px gray) at the bottom.
- **Photo card:**
- Radius 12.
- A portrait photo fills the top ~55% and fades into #00131E over ~80px.
- On the navy part: the quote in white, the name in white, the role in white at 60%.
- There are no arrows, dots or counters.
###### 6 · FAQ (y 4472–5518)
- **Header:** built like §4. The H2 is 2 lines with an explicit break (about 7 words). The subtitle is 2 lines, gray, max-width 520.
- **Body:** starts 72px below the header.
- **Left:** a card in columns 1–3 (≈316×510), the same component as the §2 side cards. It has:
- a 2:3 thumbnail at top-left
- a title (3–4 words, a question)
- a 2-line gray description
- 16px below that, a blue pill CTA of 3–4 words.
- **Content column:** 6 rows, each 86px.
- The question (18/500, 6–10 words, ending in "?") sits on the left.
- A 16px gray chevron pointing down sits on the right.
- Each row has a hairline at the bottom.
- The first row's top lines up with the top of the card.
- 160px of padding below, then the navy begins.
###### 7 · CTA band (y 5518–5992, navy #00131E from here to the end)
- 40px of padding above the card and at the sides.
- **Card:** 1360×392, radius 12, cover photo.
- **Overlay:** `linear-gradient(90deg, rgba(0,19,30,.38) 0%, transparent 55%)`.
- **Text block:** inset 80px from the card's left edge and centered vertically.
- Headline: about 10 words on 2 lines, white.
- 16px gap, then a paragraph of about 18 words on 2 lines, white at 75%, max-width 380.
- 24px gap, then a blue pill CTA of about 4 words.
###### 8 · Footer (y 5992–6708)
- The footer grid starts 92px below the CTA card.
- **Row 1:**
- Blurb at x 40–360: about 12 words on 3 lines, white, 20/500.
- Link columns start at x≈640, ≈915 and ≈1190.
- Each column has a heading (1 word, 14/500, white).
- 16px below it, 4 items in uppercase 12px, white at 60%, 10px apart.
- The third column is contact details: email, phone and hours.
- **Copyright:** 154px below the top of row 1, under the blurb. Uppercase 12px, white at 50%.
- **Legal and badge row:** 120px below the copyright.
- Under the blurb: three outlined pills, each 24px tall, with a 1px rgba(255,255,255,.2) border, 12px text and white at 70%, 2–4 words each.
- Three uppercase 12px legal links, one aligned to each link column.
- **Wordmark:** 80px below that row. White, the same size and left edge as the hero wordmark. The page ends inside the letters, cutting off the bottom 10–15% of the glyphs. Use overflow hidden, with no padding below.
##### Scroll map
All values are measured from the stills (inferred) at a 900px viewport. Nothing pins or stacks, so the scroll each section consumes equals its height.
1. Hero: 920px · 1.02 vp · consumes 920 · entrance (on load)
2. Value intro: 876px · 0.97 vp · consumes 876 · entrance
3. Solutions: 853px · 0.95 vp · consumes 853 · entrance
4. Projects: 911px · 1.01 vp · consumes 911 · entrance
5. Testimonials: 912px · 1.01 vp · consumes 912 · entrance
6. FAQ: 1046px · 1.16 vp · consumes 1046 · entrance
7. CTA band: 474px · 0.53 vp · consumes 474 · entrance
8. Footer: 716px · 0.80 vp · consumes 716 · static
**Total page height ≈ 6,708px ≈ 7.45 viewports.**
##### Spacing
- **Gutters:** 40px. **Grid gap and card gap:** 20px everywhere, including the testimonial track.
- **Space between sections** (previous section's content to the next eyebrow):
| Before section | Space |
|---|---|
| §2 | 160 |
| §3 | 144 |
| §4 | 200 |
| §5 | 192 |
| §6 | 168 |
| After §6, before the navy | 160 |
The base rhythm is about 160px, opening up to about 200px around Projects and Testimonials.
- **Headers:**
- Asymmetric headers: the eyebrow sits on the same top line as the H2 or lead, and H2→subtitle is 24px.
- Centered headers: eyebrow→H2 is 12px and H2→subtitle is 20px.
- **Header to content:** §2 56 · §3 56 · §4 64 · §5 56 · §6 72.
- **Card padding:**
- 20: §2 side cards, §6 card, testimonial text panels
- 24: §3 cards, the expanded project row
- 32: §2 middle card
- 80: left inset of the CTA text
- **Rows:** project rows are 96 collapsed and 330 expanded. FAQ rows are 86. Spec rows are 40.
- **Navy area:** 40 above the CTA card · 92 from the CTA to the footer grid · 154 from the grid top to the copyright · 120 from the copyright to the legal row · 80 from the legal row to the wordmark · 0 below the wordmark.
##### Type
- **Family class:** a neo-grotesk sans with a large x-height and tight display tracking. The free stand-in is **Inter**, using Inter Display, or opsz on, for sizes of 28px and up. Use one family for everything; no serif, no mono.
- **Weights:** only 400 and 500, plus 600 for buttons and names.
- **Body anchor:** 16px.
| Level | × body | px | line-height | tracking | weight / notes |
|---|---|---|---|---|---|
| Wordmark (§1, §8) | ≈30× | ≈475 (fit to 1360 width, ~33vw) | 0.8 | −0.03em | 500, sentence case |
| Hero headline | 2.5× | 40 | 1.08 | −0.025em | 500, white |
| H2 | 2.375× | 38 | 1.12 | −0.025em | 500 |
| Lead (§2) | 2× | 32 | 1.3 | −0.02em | 500, two-tone |
| Display card title (§2 middle, §7 headline) | 1.875× | 30 | 1.15 | −0.02em | 500 |
| Stat value (§1) | 1.75× | 28 | 1.0 | −0.01em | 500 |
| Card title, footer blurb | 1.25× | 20 | 1.25 | −0.01em | 500 |
| Category ghost tag (§4) | 1.25× | 20 | 1.2 | +0.04em | 500 uppercase, #C3C8CB |
| Row title, FAQ question | 1.125× | 18 | 1.35 | −0.005em | 500 |
| Testimonial quote | 1.0625× | 17 | 1.45 | 0 | 400 |
| Body, subtitles, card descriptions | 1× | 16 | 1.5 | 0 | 400, gray |
| Nav links, buttons | 0.875× | 14 | 1.0 | +0.02em | 500 / 600 uppercase |
| Meta line, spec value, testimonial name | 0.875× | 14 | 1.4 | 0 | 600 / 500 |
| Eyebrow, label, footer link, role, copyright | 0.75× | 12 | 1.3 | +0.04em | 500 uppercase |
- **Eyebrows** always start with `/ `, for example `/ TWO WORDS`.
- **Line lengths:**
- body ≤ 60ch
- hero paragraph ≈ 30ch
- lead ≤ 48ch (in the 785px column)
- H2 lines ≤ 34ch, using explicit two-line breaks in §4 and §6
- centered subtitles ≤ 70ch per line.
##### Colour
| Hex | Role |
|---|---|
| **#FCFDFD** | Main surface. Background of §1–§6 (about 75% of the page). Also the inner logo panels, and all text and the wordmark on navy. |
| **#00131E** | Ink for every heading and body text on light. The surface of §7–§8 (the last ~1,190px). The lower half of photo testimonial cards. The tint of the photo scrims. |
| **#D7D9DA** | Hairlines (project list, spec table, FAQ), the border of the chevron circles, the hover fill of the white nav pill. |
| **#1878B8** | **The single accent.** Only on the fill of pill CTAs: the project "learn more" pill, the FAQ card pill and the CTA band pill. Inside each is a white circle with a blue arrow. Never on headings, links, icons, eyebrows or backgrounds. |
| **#6CB4E4** | Light blue support. Focus rings and hover of accent pills. The base of the sky testimonial frame. Otherwise it only appears inside photographs. |
Derived tints that were not sampled:
| Hex | Use |
|---|---|
| #F3F5F6 | Card fill |
| #5E6A72 | Secondary text |
| #9AA3A9 | Muted second sentence of the lead |
| #C3C8CB | Ghost category tag |
| #C4F2B8 frame / #E8FAE4 panel | Mint testimonial card. This is the page's only "neon" moment, and it appears only there. |
| #C7E5F7 frame / #E5F3FB panel | Sky testimonial card |
Blue covers well under 1% of the surface. High contrast comes from navy ink on near-white, not from colour.
##### Surface
- **No shadows anywhere.** No card borders either. Cards are flat #F3F5F6 fills.
- **Radii:**
- 12px: cards, testimonial cards, the CTA card, the expanded project row
- 8px: thumbnails and inner panels
- 999px: pills
- 50%: icon and chevron circles
- 0: the page itself
- **Arch (§3):** the top edge is a full semicircle (radius 190px, half the width). The bottom corners are 40px (inferred).
- **Hairlines:** 1px #D7D9DA on light, 1px rgba(255,255,255,.2) on navy.
- **Blue pill CTA:**
- 40px tall, padding-left 18px, padding-right 6px.
- Label 14px/600, uppercase, white.
- Then a 28px white circle holding a 14px blue arrow pointing right.
- **Nav pill:** white fill, ink label, 40px tall, padding 0 20px, no circle.
##### Imagery
All imagery is bright, high-key daylight photography with saturated blue skies, natural colour and no filters or duotones.
1. **§1 hero (1440×920, ≈1.57:1, cover, full-bleed).**
- The upper 60% is deep blue sky with puffy white cumulus clouds.
- A single white three-blade wind turbine stands at about 33% from the left, with its hub at about 45% height, behind the wordmark.
- A golden ripe wheat field fills the bottom ~30%.
- A small white farmhouse with trees sits on the horizon at about 85% across.
2. **§2 left thumbnail (2:3):** a lone turbine on a green grassy hill under a pale sky.
3. **§2 middle card (≈4:3 crop of 660×500):**
- Low-angle view of tilted solar panel rows under a deep blue sky.
- A technician in an orange hard hat and hi-vis stands at the right.
- The sky occupies the upper-left, where the text sits.
4. **§2 right thumbnail (2:3):** a suburban house with dark panels on a pitched roof, warm late-afternoon light, blue sky.
5. **§3 arch (380×470, ≈4:5):** a single turbine against a pale, hazy blue sky over flat white or snowy ground. Very airy, with the lower part fading toward white.
6. **§3 icons (56px):** four glossy 3D clay-style objects in candy pastels:
- a house with a sun
- a green battery
- a sprouting seedling
- a factory with a sun.
7. **§4 expanded thumbnail (≈1.85:1):** aerial dusk view of a modern flat-roofed villa with rooftop arrays, palm trees and warm lit windows.
8. **§5 photo cards:**
- Portrait 1: a smiling man in a mustard shirt beside a desk lamp, in a bright studio.
- Portrait 2: a woman with long brown hair against a plain light wall.
- Both are head-and-shoulders and fill the top ~55% of the card.
9. **§5 logo cards:** black monochrome logo placeholders, about 120px wide.
10. **§6 thumbnail (2:3):** two turbines on a green rolling hill under a blue sky.
11. **§7 CTA (1360×392, ≈3.5:1, cover):**
- Wide panorama of three white turbines on sunlit green rolling hills under a soft, hazy, warm sky.
- The turbines sit in the right half, and the haze on the left holds the text.
##### Motion
**1 · Hero**
- **kind:** entrance, on page load (inferred)
- **what moves:** nav, then the wordmark, then the bottom row (headline, paragraph, stats)
- **from → to:**
- nav: opacity 0→1
- wordmark: opacity 0→1 and translateY 40px→0
- bottom-row items: opacity 0→1 and translateY 16px→0 (all inferred)
- **range:** once, on load. Duration not measured, 700–1000ms for the wordmark and 500–700ms for the others. Strong ease-out. Stagger not measured, 80–120ms between the bottom-row items.
- **reduced motion:** render at the final state with no transforms. An opacity fade of ≤150ms at most.
**2 · Value intro**
- **kind:** entrance (inferred)
- **what moves:** the eyebrow and lead, then the three cards
- **from → to:** opacity 0→1 and translateY 24px→0 (inferred)
- **range:** once, when the element's top reaches 85% of the viewport. Duration not measured, 500–800ms. Ease-out. Cards stagger left→right, 80–120ms (not measured).
- **reduced motion:** content is visible at once, no transforms.
**3 · Solutions**
- **kind:** entrance (inferred)
- **what moves:** the centered header, the arch image, then the four cards
- **from → to:**
- header and cards: opacity 0→1 and translateY 24px→0
- arch: opacity 0→1 and scale 1.04→1 (inferred)
- **range:** once, when each element's top reaches 85% of the viewport. Duration not measured, 500–800ms. Ease-out. Cards stagger 60–100ms, top row before bottom row.
- **reduced motion:** final state, no transforms or scale.
**4 · Featured projects**
- **kind:** entrance (inferred)
- **what moves:** the header, then each list row
- **from → to:** opacity 0→1 and translateY 20px→0 (inferred)
- **range:** once, when the row's top reaches 85% of the viewport. Duration not measured, 400–700ms. Ease-out. Rows stagger 60–100ms.
- **reduced motion:** final state.
**5 · Testimonials**
- **kind:** entrance (inferred)
- **what moves:** the header, then the card track as one unit
- **from → to:** opacity 0→1 and translateY 24px→0 (inferred). There is no horizontal auto-scroll and no marquee.
- **range:** once, when the track's top reaches 85% of the viewport. Duration not measured, 500–800ms. Ease-out.
- **reduced motion:** final state.
**6 · FAQ**
- **kind:** entrance (inferred)
- **what moves:** the header, the side card, then the six rows
- **from → to:** opacity 0→1 and translateY 20px→0 (inferred)
- **range:** once, at 85% of the viewport. Duration not measured, 400–700ms. Rows stagger 50–80ms.
- **reduced motion:** final state.
**7 · CTA band**
- **kind:** entrance (inferred)
- **what moves:** the CTA card, then its text block
- **from → to:**
- card: opacity 0→1 and translateY 32px→0
- text: opacity 0→1 and translateY 12px→0 (inferred)
- **range:** once, when the card's top reaches 85% of the viewport. Duration not measured, 600–900ms. Ease-out. Text follows after 100–150ms.
- **reduced motion:** final state.
**8 · Footer**
- **kind:** static
- **what moves:** nothing. The wordmark does not move, scale or parallax.
- **from → to:** none
- **range:** none
- **reduced motion:** same as default.
**Interaction transitions** (these are separate from the scroll choreography, and all timings are inferred):
- **Nav links:** on hover, opacity 1→0.7, 150–200ms.
- **White nav pill:** on hover, fill #FCFDFD→#D7D9DA, 150–200ms.
- **Blue pills:**
- Hover: fill darkens slightly from #1878B8, a 2px #6CB4E4 focus/hover ring appears, and the arrow inside the circle shifts 3px right. 150–250ms.
- Press: scale 0.98.
- **Project rows (accordion, one open at a time):**
- Clicking a row animates its height to auto over 300–450ms with ease-out.
- The #F3F5F6 fill fades in.
- The thumbnail, ghost tag and spec table fade in about 80ms later.
- The chevron circle cross-fades into the blue pill.
- Closing reverses this.
- **FAQ rows:** clicking reveals a 2–4 line answer. Height animates to auto over 250–350ms and the chevron rotates 0→180°. All rows start closed.
- **Testimonial track:** horizontal drag and trackpad scroll with scroll-snap to cards. The scrollbar is hidden and there are no visible controls (inferred).
- **Card images (§2, §4):** optional hover scale 1→1.03 inside the radius, 400–600ms. No lift and no shadow.
##### Responsive (below 640px)
- **Global:**
- Gutters become 20px.
- H2 → 28px, lead → 24px, hero headline → 28px, display card titles → 24px.
- Body stays 16px.
- Section spacing shrinks to 96px.
- **§1 Hero:**
- Height 100svh, min 640.
- Nav links collapse into a menu pill. The white CTA pill stays but is shortened to 2 words.
- The wordmark still spans the full width between gutters (≈30vw).
- The bottom row stacks: headline, paragraph, then the 3 stats in a single 3-column row.
- **§2:**
- The header stacks, with the eyebrow above the lead.
- The cards go to one column. The middle photo card comes first, at 420px tall.
- Side cards become horizontal: a 96×144 thumbnail on the left, text on the right, auto height.
- **§3:**
- The arch goes first, full width, max 320 wide and 400 tall, centered.
- Cards become one column, all left-aligned, with the icon top-left. Drop the mirroring.
- **§4:**
- The index moves inline above the label, and the chevron stays at the right.
- The expanded row stacks: a full-width 16:9 thumbnail, then label and title, then the blue pill, then the ghost tag, then the spec table.
- In the spec table, the label sits left and the value right on the same line.
- **§5:** the track becomes a scroll-snap carousel with cards at 82vw × 520. The first card aligns to the 20px gutter and the next card peeks in.
- **§6:** the header stacks, the FAQ list comes first, and the side card goes below it at full width with the thumbnail dropped.
- **§7:**
- The card height becomes auto, min 440, with the photo positioned to the right.
- The overlay becomes a bottom-up navy gradient.
- The text sits at the bottom with a 24px inset.
- **§8:**
- The blurb goes full width.
- The two link columns sit side by side, with contact details full width below them.
- The badges wrap, and the legal links stack.
- The wordmark stays edge to edge and is still cut off at the bottom.
##### Don'ts
- **Don't** treat the grey mat around the mockup as part of the design. The page is full-bleed white, with no outer margin, no rounded page corners and no grey behind it.
- **Don't** put a logo in the nav or a logo mark in the footer. The giant wordmark is the brand, used twice, and it must fill the width. Never shrink it to a "big heading" with space beside it, and never let it wrap.
- **Don't** center the §2, §4 and §6 headers. Their asymmetry is the system: a tiny eyebrow in column 1 and the text in the content column from x≈615. Only §3 and §5 are centered.
- **Don't** use the blue for anything but pill CTA fills. No blue headings, links, icons, eyebrows, underlines or section backgrounds.
- **Don't** add shadows, card borders, glows or hover lifts. Depth comes only from the #F3F5F6 fills, photos and hairlines.
- **Don't** alternate grey and white section bands. All light sections share #FCFDFD. The only surface change is the single switch to navy at the CTA.
- **Don't** make it a dark-mode page or a dark hero. Only the last ~18% is navy, and the hero is a sunny photo.
- **Don't** use bold (700+) headings or uppercase headlines. Headings are 500 with tight negative tracking. Uppercase is only for 12–14px labels, nav and buttons.
- **Don't** set display sizes at Inter's default tracking. It looks loose and generic.
- **Don't** use outline line icons for the solution cards. They are small glossy 3D illustrated objects. The one line icon is the house in the §2 chip.
- **Don't** contain the testimonials in a tidy 3-up grid inside the gutters. The track bleeds off both viewport edges with cropped neighbours.
- **Don't** make square or 8px-radius buttons, or ghost buttons. CTAs are pills with an inset white circle and an arrow.
- **Don't** spread the mint/sky pastels to other components or use them as page accents. They live only on the two logo testimonial cards.
- **Don't** use stock-moody, desaturated or dusk-heavy photography for the hero, or illustrations instead of photos. The page needs high-noon blue skies and real landscapes. Only the one project thumbnail is at dusk.
- **Don't** add parallax, pinning, scroll-scrubbed wordmarks, marquees, counters that tick up, or bouncy springs. The page's motion is quiet one-time fade-ups.
- **Don't** give the footer wordmark bottom padding. The page has to end inside the letters.
### Imagery — already generated
These pictures were made for this design and are hosted at the URLs below.
Use them as the `src` exactly as written, and keep the alt text. Do not
generate your own, do not reach for a stock library or a placeholder
service, and do not feed the Imagery section above back to an image model —
that work is done. Size and crop them with CSS (`object-fit: cover`) rather
than assuming their dimensions, and download them into the project if you
would rather not hotlink.
- https://ai-taste-vault.vercel.app/v/demo/solara-solar-energy-landing-page/images/01-hero-turbine-wheat-field.webp — A lone white wind turbine in a golden wheat field under a blue sky with scattered cumulus clouds, a small white farmhouse on the far horizon
- https://ai-taste-vault.vercel.app/v/demo/solara-solar-energy-landing-page/images/02-value-card-solar-technician.webp — A technician in an orange hard hat stands among tilted rows of solar panels under a clear blue sky
- https://ai-taste-vault.vercel.app/v/demo/solara-solar-energy-landing-page/images/03-solutions-arch-snow-turbine.webp — A single white wind turbine on a flat snowy plain under a pale hazy blue sky
- https://ai-taste-vault.vercel.app/v/demo/solara-solar-energy-landing-page/images/04-cta-turbines-rolling-hills.webp — Three white wind turbines on sunlit green rolling hills in a soft warm haze
### Image prompts
What each picture above was generated from, for anyone changing one.
**A lone white wind turbine in a golden wheat field under a blue sky with scattered cumulus clouds, a small white farmhouse on the far horizon** (`01-hero-turbine-wheat-field`)
MEDIUM AND FINISH: A real, bright midday landscape photograph with natural, unfiltered colour, crisp and evenly lit, in the clean editorial stock style of a renewable-energy brand. Everything from the foreground wheat to the horizon is in focus. No grading, no duotone, no stylisation. Use the attached screenshot only for the palette and finish of the photo behind the hero at the top. Ignore the giant white 'Solara' wordmark, the nav links, the white pill, the headline, the paragraph, the stats and every other piece of UI. COLOUR AND VALUE: The sky runs from a deep, clear cobalt #2B6CC0 at the top of the frame to a soft pale blue #B4D4EE just above the horizon. The clouds are pure white #FFFFFF on their sunlit tops, with gentle grey-blue undersides no darker than #B9C8D6. The field is ripe wheat: golden #C9A85A with a faint olive cast near the horizon, warming to #A08848 in the foreground, with stalk shadows no darker than #5E5130. The only darker note is a small clump of trees beside the farmhouse, no darker than #3A4630. There are no blacks, no crushed shadows and no near-navy sky anywhere. EDGES: A full-bleed cover image running edge to edge behind the whole hero section, with no fade, frame or vignette. The page adds its own dark scrim along the bottom, so the image must stay bright all the way to the bottom edge. SUBJECT: A single white three-blade wind turbine standing alone in a wide, flat field of ripe wheat under a blue summer sky full of scattered puffy cumulus clouds. Far off on the horizon at the right, a small white farmhouse with a grey roof sits beside a few dark green trees. COMPOSITION: The horizon is low and straight, about 72% of the way down, so sky fills the upper ~70%. The turbine tower stands about 32% from the left with its base on the horizon. Its hub is at about 45% height, and its slender blades are each about 10% of the frame width long, one pointing nearly straight up. It should read as a distant, elegant landmark, not a close-up. The farmhouse is tiny, about 5% of the frame width, about 88% across, on the horizon. Spread the clouds across the whole sky with plenty of open blue between them, especially in the band from 20% to 62% height. A huge white wordmark sits there and needs blue behind it to stay readable, so no single solid white cloud bank. Keep the top 8% clean sky for the navigation, and keep the bottom 25% as unbroken wheat texture for a white headline. AVOID: a sun disc, lens flare, sunburst, golden-hour or sunset orange, dramatic storm clouds, a sky darkened to navy by a polariser, HDR clarity, black vignette, shallow depth of field or bokeh, green grass instead of golden wheat, more than one turbine, a wind farm, power lines, people, roads, a large close-up turbine. Output a wide 3:2 landscape frame, 1536x1024. No text, no lettering, no logos, no watermarks, no UI.
**A technician in an orange hard hat stands among tilted rows of solar panels under a clear blue sky** (`02-value-card-solar-technician`)
MEDIUM AND FINISH: A real, bright daylight photograph taken from a low angle, with natural colour, crisp and clean like a commercial solar-installer brochure. No grading or filters. Use the attached screenshot only for the palette and finish of the large blue photo card in the middle of the three cards just below the hero. Ignore the white circle icon, the white heading and description over it, the grey side cards and all other UI. COLOUR AND VALUE: A clear sky, saturated mid blue #2F86D8 across most of the frame, easing slightly lighter to #6FB0E8 toward the upper left and the horizon. At most one or two faint, thin wisps of cloud, no brighter than #DCEBF8. The solar panels are deep blue #1C3F73 with silver-white aluminium frames and fine white cell lines, and they reflect the sky in lighter #4C78B0 sheens. Their shadowed undersides are the darkest values in the frame, no darker than #0F2440. The technician's hard hat is a clean safety orange #F0781E, the vest is high-visibility yellow, and the skin is natural. No pure black anywhere. EDGES: The image sits inside a 12px-radius card with white text laid over it. The edges are hard crops with no fade or vignette. The card crops the frame to about 4:3, so up to 6% may be lost on each side. SUBJECT: Rows of tilted photovoltaic panels in a ground-mounted solar farm, seen from low down near the closest row, under an empty blue sky. A single technician in an orange hard hat, a yellow high-visibility vest and a light blue work shirt stands among the rows at the right, visible from the waist up, looking across the panels. COMPOSITION: The panel array fills the lower ~50% of the frame as a strong diagonal. Its top edge rises from about 70% height at the left edge to about 45% height at the right, and the panels recede in perspective. The technician stands about 72% from the left, head at about 50% height, about a quarter of the frame tall. The upper-left area, meaning the left 60% of the frame down to 45% height, is pure open sky with no panels, clouds, birds or detail, because an icon, a white headline and two lines of white body text sit there. AVOID: the sun in frame, lens flare, sunburst, dusk or golden hour, dramatic clouds, HDR, black vignette, shallow depth of field or bokeh, rooftop panels or houses, more than one worker, close-ups of tools, a posed thumbs-up stock cliché, panels so dark they read as black. Output a wide 3:2 landscape frame, 1536x1024. No text, no lettering, no logos, no watermarks, no UI.
**A single white wind turbine on a flat snowy plain under a pale hazy blue sky** (`03-solutions-arch-snow-turbine`)
MEDIUM AND FINISH: A bright, airy, high-key daylight photograph with soft, low-contrast, slightly hazy light, almost minimalist. Natural colour, no grading, no drama. Use the attached screenshot only for the palette and finish of the tall arch-shaped image in the centre of the solutions section, between the four grey cards. Ignore the cards, icons and text around it. COLOUR AND VALUE: The whole frame sits in a narrow, light band of values. The sky is a clear soft blue #5E9ED8 at the very top, fading smoothly through #9CC6EA to a pale haze #E4EFF7 at the horizon. The ground is a flat expanse of snow, white #F5F8FA, with faint cool blue shadows #D3E0EA. The turbine is white, with soft grey shading no darker than #B4BEC7. A thin, distant treeline on the horizon is the darkest thing in the frame, a muted grey-blue no darker than #6F7E8A. No blacks, no deep shadows, and no saturated colour other than the sky blue. EDGES: The image is masked into an arch, with a full semicircle at the top and gently rounded bottom corners, on a near-white #FCFDFD page. The lower part of the frame should turn almost white so the bottom of the arch melts into the page. The semicircle clips away the top corners, so nothing important goes there. SUBJECT: One white three-blade wind turbine standing alone on a wide, flat, snow-covered plain under a calm, clear, hazy winter-blue sky. No other structures. COMPOSITION: Tall portrait. The tower stands just left of centre, about 45% across, and rises from the horizon at about 80% height. The hub sits at about 38% height, and each blade is about a quarter of the frame width long. The whole rotor must fit inside the central 70% of the width and below the top 15%, so the arch mask does not cut it. The frame will be cropped to about 4:5 by trimming roughly 9% from the top and 9% from the bottom, so keep the hub and blades inside that area. Below the horizon, the snow is a smooth, near-white plane with almost no texture. AVOID: a deep blue polarised sky, clouds, sun or flare, strong contrast, dark ground, grass or crop fields, more than one turbine, a wind farm, fences, people, vehicles, HDR, vignette, bokeh, warm or golden light. Output a tall 2:3 portrait frame, 1024x1536. No text, no lettering, no logos, no watermarks, no UI.
**Three white wind turbines on sunlit green rolling hills in a soft warm haze** (`04-cta-turbines-rolling-hills`)
MEDIUM AND FINISH: A real wide landscape photograph in soft, warm, hazy late-afternoon light, with natural colour and gentle contrast. Atmospheric haze softens the distance. No grading or filters. Use the attached screenshot only for the palette and finish of the wide photo card on the dark navy band near the bottom of the page. Ignore its headline, paragraph and blue button, the navy surface and all other UI. COLOUR AND VALUE: The sky is a pale, warm, hazy blend. It is soft grey-blue #A9B9C4 at the upper left and warms toward a luminous cream #F2E9CF in a broad glow behind the turbines at centre-right. It never gets brighter than #FBF5E4 and has no visible sun disc. The rolling hills are sunlit yellow-green #A7B556 on their crests and mid green #6A8A3E on their slopes. The darkest values are in the shadowed foreground at lower left, no darker than #34482C. The turbines are white catching warm light, #F4F1E8, with soft grey shading #B9BDB8. No blacks and no deep shadows. EDGES: Placed as a cover image inside a 12px-radius card on a navy band. The page lays its own soft dark gradient over the left half, so the image itself has no fade or vignette. SUBJECT: A wide panorama of three white three-blade wind turbines on gently rolling green hills in warm, sunlit haze, with the farther hills fading into soft blue-grey atmosphere. COMPOSITION: The card crops this frame to a very wide 3.5:1 strip, and only the middle band from about 28% to 72% of the frame height survives. All the content must sit in that band. The top 28% is just continuous hazy sky and the bottom 28% is just continuous grassy hillside, both plain enough to be cut away. Within the band, the hill crests run at about 60 to 65% height. All the turbines are in the right half. The largest and nearest stands about 60% across, with its top blade tip reaching about 30% height and its base on a crest near 68%. Two smaller, more distant turbines stand at about 75% and 88% across. The left 45% of the frame holds only soft hazy sky over low, gently rolling hills with little detail, because a two-line white headline, a paragraph and a button sit there. AVOID: a sun disc, lens flare, sunburst, saturated orange sunset, dramatic clouds, vivid travel-photo greens, HDR clarity, black vignette, bokeh, turbines on the left side, more than three turbines, power lines, buildings, roads, people. Output a wide 3:2 landscape frame, 1536x1024. No text, no lettering, no logos, no watermarks, no UI.
---
## Runcycle — AI sales agent hero
- Page: https://ai-taste-vault.vercel.app/r/runcycle-ai-sales-agent-hero
- Original: https://br.pinterest.com/pin/1018024690796202232/
- Type: Landing page
- Tags: AI, CTA band, Editorial, Full bleed, Hero, High contrast, Light mode, Logo wall, Minimal, Nav bar, Restrained motion
- Palette: #FEFEFE, #483925, #695536, #294965, #E8D7B7
- Captured: 2026-09-18
- Rebuilt with: Claude Code · Opus 5.5 · Extra high · skills: frontend-design, emil-design-eng, transitions-dev, humanizer, gsap
- Rebuild: https://ai-taste-vault.vercel.app/v/demo/runcycle-ai-sales-agent-hero/index.html
### Prompt — Rebuild
_rebuild · html-css · opus_
#### Full-bleed tapestry hero landing page
An editorial, light-mode landing page for a software product. Its whole idea is a collision: one enormous, machine-rendered picture band running edge to edge, a classical serif headline set underneath it on plain white, and a completely plain grotesk UI around both. Nothing glows, nothing is a card, nothing is centred.
**What the capture covers.** The reference still is a single 1440×900 viewport — sections 1–4 only. Sections 5–12 extend the same system downward and every number in them is marked **(inferred)**. No motion report accompanies this reference, so *all* motion values below are inferred from the stills plus the "restrained motion" read; durations are given as ranges rather than invented exact values. Nothing here uses a measured library parameter.
---
##### 1. Structure
**Grid.** 12 columns, 64px side gutters, 32px column gap at 1440 → 80px columns, 1312px content width. Three container types:
- `full` — breaks the gutters, edge to edge (sections 2, 4, 8, 11's image strip).
- `wide` — 1312px, the default.
- `measure` — 720px, centred, for running editorial text (sections 9, 10).
**Sections, top to bottom:**
1. **Nav bar** — sticky, 74px tall, transparent over page white.
2. **Artwork band** — full-bleed picture, 514px tall, square corners, touching left, right and the nav's underside.
3. **Hero copy band** — headline left (cols 1–5), support column right (cols 10–12), on page white.
4. **Logo wall** — full-bleed tinted band, hairline rules top and bottom, 8 wordmarks in one row.
5. **Value triptych** — three columns, cols 1–4 / 5–8 / 9–12. **(inferred)**
6. **Product surface** — sticky copy column (cols 1–4) beside a stack of three framed interface stills (cols 6–12). **(inferred)**
7. **Process** — a pinned section heading with three full-height cards that stack over each other. **(inferred)**
8. **Metrics band** — full-bleed, accent blue, four figures in a row. **(inferred)**
9. **Quote** — `measure` container, one long pull-quote, attribution beneath. **(inferred)**
10. **Objections** — four-item accordion, `measure` container, all closed at rest. **(inferred)**
11. **CTA band** — a second full-bleed artwork strip (280px) directly above a copy row, repeating the section 2 + 3 rhythm. **(inferred)**
12. **Footer** — four link columns plus the wordmark, hairline rule on top. **(inferred)**
---
##### 2. Scroll map
Viewport assumed 1440×900.
| # | Section | Height | Viewports | Scroll consumed | Kind |
|---|---------|--------|-----------|-----------------|------|
| 1 | Nav bar | 74px | 0.08 | 74px | static (sticky after 48px) |
| 2 | Artwork band | 514px | 0.57 | 514px | scroll-linked |
| 3 | Hero copy band | 233px | 0.26 | 233px | entrance |
| 4 | Logo wall | 120px **(inferred — cut off in capture)** | 0.13 | 120px | entrance |
| 5 | Value triptych | 620px | 0.69 | 620px | entrance **(inferred)** |
| 6 | Product surface | 1560px | 1.73 | 1560px | pinned (copy column) **(inferred)** |
| 7 | Process | 2700px | 3.00 | 2700px | stacked **(inferred)** |
| 8 | Metrics band | 420px | 0.47 | 420px | entrance **(inferred)** |
| 9 | Quote | 560px | 0.62 | 560px | scroll-linked **(inferred)** |
| 10 | Objections | 720px | 0.80 | 720px | static **(inferred)** |
| 11 | CTA band | 640px | 0.71 | 640px | entrance **(inferred)** |
| 12 | Footer | 400px | 0.44 | 400px | static **(inferred)** |
Sections 1+2+3 = 821px, so the logo wall's top rule lands just above the fold — that alignment is load-bearing, keep it. **Total page height: 8,569px ≈ 9.5 viewports.**
---
##### 3. Spacing
- **Nav:** 74px tall, 64px side padding, links centred in the bar, 26px gap between links, 20px between logo glyph and wordmark.
- **Section 2 → 3:** 48px only. The hero copy sits deliberately tight under the picture — this is the page's most distinctive spacing decision.
- **Hero copy band:** 48px top, 64px bottom. Headline block max-width 528px. Support column 304px wide, its cap-line aligned with the headline's first cap-line. Deck → buttons gap 28px. Button-to-button gap 14px.
- **Logo wall:** 1px rule, 36px vertical padding **(inferred)**, logos distributed `space-between` across the full 1312px.
- **Standard section padding (5, 8, 9, 10, 12):** 128px top and bottom. **(inferred)**
- **Large sections (6, 7, 11):** 160px top and bottom. **(inferred)**
- **Triptych column gap:** 32px; within a column, eyebrow → title 16px, title → body 12px. **(inferred)**
- **Rhythm:** section headings sit 64px above their content; every block inside a section uses 12 / 16 / 28 / 48 as its internal steps, and 128 is the only gap between sections. Do not introduce a 96 or a 112.
---
##### 4. Type
Two families, no third.
- **Display serif** — transitional/old-style, moderate stroke contrast, sharp bracketed serifs, classical proportions. Free stand-in: **Newsreader** (400/500). Alternates: Instrument Serif, EB Garamond.
- **UI grotesk** — neutral, tight apertures, no personality. Free stand-in: **Inter** (400/500).
Body anchor: **17px** at 1440.
| Level | Family | Ratio | Size | Line-height | Letter-spacing | Weight |
|---|---|---|---|---|---|---|
| Hero headline (H1) | serif | 3.75× | 64px | 1.04 (67px) | −0.015em | 400 |
| Section heading (H2) | serif | 2.6× | 44px | 1.10 | −0.01em | 400 |
| Metric figure | serif | 4.2× | 72px | 0.95 | −0.02em | 400 |
| Card / step title (H3) | grotesk | 1.35× | 23px | 1.25 | −0.005em | 500 |
| Body & hero deck | grotesk | 1× | 17px | 1.50 (25.5px) | 0 | 400 |
| Small body, meta | grotesk | 0.88× | 15px | 1.50 | 0 | 400 |
| Nav link | grotesk | 0.88× | 15px | 1.0 | 0 | 450 |
| Button label | grotesk | 0.88× | 15px | 1.0 | −0.005em | 500 |
| Eyebrow / label | grotesk | 0.76× | 13px | 1.20 | 0.12em, uppercase | 500 |
| Footnote / legal | grotesk | 0.76× | 13px | 1.45 | 0 | 400 |
**Max line length:** body 62–68 characters; hero deck 40 characters (it must break onto exactly 2 lines); H1 ≈ 19 characters per line, 2 lines; H2 ≤ 24 characters per line.
The wordmark is lowercase grotesk at 20px, 500, set two-tone — first half ink, second half muted — preceded by a 16px eight-point asterisk glyph.
---
##### 5. Colour
| Hex | Role |
|---|---|
| `#FEFEFE` | **Dominant surface.** Page background everywhere outside the artwork bands — roughly 70% of the page. |
| `#241D14` | Ink (derived by darkening the sampled brown). Headline, body, nav links, primary button fill. Never pure black. |
| `#695536` | Muted text: deck secondary lines, captions, footer links at rest, accordion body. |
| `#483925` | The artwork's dominant brown. Outside the pictures it appears only as the dark ground of section 11's copy row **(inferred)**. |
| `#E8D7B7` | Warm sand. Lives inside the artwork; outside it, permitted only as the section 4 band tint stepped to `#FAF8F4` and as a 20%-opacity fill behind eyebrows. |
| `#294965` | **The single accent.** Deep blue. |
| `#E6E0D6` | Hairline rules and secondary button borders (derived, warm). |
| `#8C8577` | Logo-wall wordmarks, flat monochrome (derived). |
**Where the accent is allowed:** the sea and sky inside the artwork; the full-bleed metrics band (section 8) as its background; the underline that grows under a hovered nav or footer link; the focus ring. That is the complete list. It is never a button fill, never a body text colour, never a gradient stop.
---
##### 6. Surface
- **Borders:** 1px, `#E6E0D6`. Used on the logo-wall band (top and bottom), the product-still frames, accordion dividers and the footer rule. Nothing else has a border.
- **Radii:** buttons and pills `999px`; product-still frames `16px`; small artwork chips `12px`; the full-bleed artwork bands `0` — square corners, flush to the viewport edges on all sides.
- **Shadows:** none. Zero drop shadows, zero glass, zero glow. Separation comes from hairlines and the `#FAF8F4` band tint. The one exception: once the nav is stuck, a single hairline `#E6E0D6` appears along its bottom — a rule, not a shadow.
---
##### 7. Imagery
1. **Hero artwork (section 2)** — 1440×514, **2.8:1 panorama, full-bleed.** A classical scene rebuilt by a machine out of tiny units: a shaded stone loggia with three arches and slender columns, opening onto a sunlit bay with a mountain across the water and a small weathered statue on the balustrade; flowering vines with gold blossoms fill the dark foreground on both sides. The whole image is quantised into a dense grid of ~2px cells — a cross-stitch or dot-matrix reconstruction, visibly woven rather than photographed, soft at every edge, dark warm brown at the frame and bright `#294965` water at the centre. The technique *is* the message; the subject is antique on purpose.
2. **Product stills (section 6)** — three, 16:10, interface on white, inside a 16px-radius 1px-ruled frame, no shadow, no browser chrome, no perspective tilt. **(inferred)**
3. **Process chips (section 7)** — three 1:1 crops pulled from the hero artwork (a column, the water, the blossoms), 96px, 12px radius, one per card. **(inferred)**
4. **Quote (section 9)** — no photograph. Typography only; the attribution is text. **(inferred)**
5. **CTA strip (section 11)** — 1440×280, **5.1:1**, a different crop of the *same* artwork (the vine and gold blossoms against dark brown, no architecture), full-bleed. **(inferred)**
If the woven rendering cannot be produced, use a public-domain painting and apply the quantisation yourself. Do not substitute a photograph.
---
##### 8. Motion
> No motion report exists for this reference. Everything below is inferred from the stills and the restrained-motion read; durations are ranges.
**1 — Nav bar**
- kind: static (scroll-triggered state change, not choreography)
- what moves: the bar's own background and bottom rule
- from → to: background `transparent` → `rgba(254,254,254,0.9)` + 12px backdrop blur; bottom rule opacity 0 → 1
- range: crosses once at 48px of scroll, reverses above it; crossfade 160–220ms, ease-out
- reduced motion: same state change, no blur, instant
**2 — Artwork band**
- kind: scroll-linked (reverses on the way back up) + a one-time load entrance
- what moves: the picture inside its fixed 514px window
- from → to: scroll-linked — image scale held at 1.06, translateY `−18px → +18px`. Load entrance — opacity `0 → 1`, scale `1.04 → 1.06`
- range: scroll-linked from page top until the band's bottom edge leaves the viewport; entrance fires once on load, 800–1000ms, ease-out
- reduced motion: no parallax, no scale; static crop, opacity fade only
**3 — Hero copy band**
- kind: entrance, once
- what moves: the two headline lines, the deck, the button row
- from → to: opacity `0 → 1`, translateY `16px → 0`
- range: on load, 120ms after section 2 begins; 500–700ms, ease-out; stagger 80ms between headline lines, deck at +100ms, buttons at +180ms
- reduced motion: opacity only, no translate
**4 — Logo wall**
- kind: entrance, once
- what moves: the eight wordmarks
- from → to: opacity `0 → 1`, translateY `12px → 0`
- range: when the band's top reaches 90% of the viewport; 400–500ms, ease-out, 40ms stagger left to right
- reduced motion: opacity only
**5 — Value triptych (inferred)**
- kind: entrance, once
- what moves: the three columns as units
- from → to: opacity `0 → 1`, translateY `20px → 0`
- range: when the section's top reaches 80% of the viewport; 500–700ms, ease-out, 90ms stagger
- reduced motion: opacity only
**6 — Product surface (inferred)**
- kind: pinned (the copy column only)
- what moves: the left copy column sticks; the three stills scroll past it; the active eyebrow/title pair crossfades
- from → to: copy column `position: sticky` at 200px from the top; outgoing title opacity `1 → 0` translateY `0 → −10px`, incoming `0 → 1`, `10px → 0`
- range: the copy column is pinned for ~1.3 viewports — from the section's top reaching 200px until the last still's bottom reaches the column's bottom; the crossfade is scroll-linked to each still crossing the viewport midpoint and reverses upward
- reduced motion: sticky released, copy repeats above each still, no crossfade
**7 — Process (inferred)**
- kind: stacked
- what moves: three cards, each 100vh, stacking over one another under a heading pinned for the section's full length
- from → to: incoming card translateY `100vh → 0`; the card beneath scales `1 → 0.96` and drops opacity `1 → 0.7` as it is covered
- range: pinned for 3.0 viewports total, one viewport of scroll per card, scroll-linked and fully reversible
- reduced motion: no pin, no stack — the three cards become a plain vertical list at auto height
**8 — Metrics band (inferred)**
- kind: entrance, once
- what moves: the four serif figures
- from → to: clip-path `inset(0 0 100% 0)` → `inset(0 0 0 0)`, i.e. wiped upward from the baseline; opacity stays 1
- range: when the band's top reaches 85% of the viewport; 600–800ms, ease-out, 70ms stagger. No count-up
- reduced motion: no wipe, figures simply present
**9 — Quote (inferred)**
- kind: scroll-linked
- what moves: the pull-quote's colour, line by line
- from → to: each line's colour `#695536 → #241D14` as it crosses the viewport's upper third; reverses downward
- range: from the quote's top entering the viewport until its last line reaches 35% of the viewport height
- reduced motion: all lines rendered at `#241D14` from the start
**10 — Objections (inferred)**
- kind: static. Nothing animates on scroll. Its only movement is the open/close interaction listed below.
- what moves: nothing
- from → to: n/a
- range: n/a
- reduced motion: unchanged
**11 — CTA band (inferred)**
- kind: entrance, once
- what moves: the artwork strip and the copy row beneath it
- from → to: strip clip-path `inset(0 0 100% 0)` → `inset(0 0 0 0)`; copy opacity `0 → 1`, translateY `16px → 0`
- range: when the band's top reaches 80% of the viewport; strip 700–900ms ease-out, copy at +150ms, 500ms
- reduced motion: strip fades in, copy opacity only
**12 — Footer (inferred)**
- kind: static. No entrance, no parallax, no reveal.
###### Interaction transitions (not part of the scroll choreography)
- **Nav link hover** — a 1px `#294965` underline grows from the left edge, 160ms ease-out; label colour unchanged.
- **Primary button hover** — fill `#241D14 → #3A2F22`, translateY `0 → −1px`, 140ms.
- **Secondary button hover** — fill `#FEFEFE → #F1EFEA`, border unchanged, 140ms.
- **Any button press** — scale `0.98`, 80ms, then release.
- **Focus (keyboard)** — 2px `#294965` ring, 2px offset, no transition.
- **Accordion open/close** — `grid-template-rows: 0fr → 1fr`, 240–280ms ease-out; the chevron rotates 180°; one item open at a time.
- **Logo wall and artwork** — no hover state at all. No zoom-on-hover on any image.
---
##### 9. Responsive (below 640px)
- Gutters drop 64 → 20px. Section padding 128 → 72px; large sections 160 → 88px.
- Nav keeps logo + pill only; the five links move into a full-screen white sheet with 28px serif entries.
- **Section 2** re-crops to 4:3 (centre on the arches and water), height 380px, still full-bleed and square-cornered.
- **Section 3** stacks: headline 34px / 1.08 (2× the unchanged 17px body), then deck at full width, then the two buttons stacked full-width with a 12px gap. Gap from the artwork stays tight at 32px.
- **Section 4** becomes a two-row 4-up grid, 180px tall; keep the rules.
- **Section 5** stacks to one column, 48px between items.
- **Section 6** drops the sticky column entirely — copy block, then its still, three times.
- **Section 7** drops the pin and the stack; three plain cards in a column, entrance fade only.
- **Section 8** becomes 2×2; figures 48px.
- **Section 11** drops its artwork strip; copy row only.
- **Dropped below 640:** all parallax, the pin, the stack, and the second artwork crop.
---
##### 10. Don'ts
- **Don't inset the artwork in a rounded card.** If the source appeared to sit on a coloured mat with rounded corners, that was the photograph's framing. The band is square-cornered, edge to edge, flush against the nav.
- **Don't put the headline over the image.** Picture and type never overlap. The picture is a band; the words live underneath it on white. No overlay scrim, no text-on-image hero.
- **Don't centre the hero.** Headline hard left at the gutter, support column hard right in cols 10–12, a 500px empty gap between them. That emptiness is the composition.
- **Don't give the hero copy generous breathing room.** 48px under the picture, not 96. The tightness is the point.
- **Don't set the headline at 1.2 line-height.** 1.02–1.06, so the descenders of line one nearly touch the caps of line two.
- **Don't use a geometric sans (or any sans) for the headline.** The entire tension is a classical serif against a characterless grotesk UI. Equally: don't let the serif leak into buttons, nav, or body.
- **Don't reach for the AI palette.** No indigo/violet, no gradient, no mesh, no glow, no aurora blur, no "shimmer" on the CTA. The only signal that this is an AI product is the artwork's reconstruction technique and one 16px sparkle glyph on the primary button.
- **Don't add shadows or glassmorphism.** Not on buttons, not on cards, not on the product stills.
- **Don't use pure black or cool grey.** Every neutral is warm-shifted; `#000`, `#111827` and `#6B7280` are all wrong here.
- **Don't let the accent blue spread.** It is the sea, one band, a hover underline, a focus ring. It is not a button, not a link colour at rest, not a heading.
- **Don't make the logo wall colourful or high-contrast.** One flat `#8C8577`, optically sized, evenly distributed — it should read as texture, not as a feature.
- **Don't use 8px rounded rectangles for buttons.** Full pills, 999px, 44px tall in the hero, 38px in the nav.
- **Don't right-align the nav links against the button.** They are centred on the viewport's midpoint with the button far right.
- **Don't animate the headline per character or per word,** and don't blur-in. Whole lines, 16px, once, ease-out.
- **Don't overdo the parallax.** ≤20px of translate, ≤1.06 scale. If the movement is noticeable as movement, it's wrong.
- **Don't replace the woven artwork with a stock photograph, a 3D render, an abstract gradient or a dashboard screenshot.** A generic image collapses the whole design.
- **Don't count up the metrics numbers.** They wipe in once and hold.
### Imagery — already generated
These pictures were made for this design and are hosted at the URLs below.
Use them as the `src` exactly as written, and keep the alt text. Do not
generate your own, do not reach for a stock library or a placeholder
service, and do not feed the Imagery section above back to an image model —
that work is done. Size and crop them with CSS (`object-fit: cover`) rather
than assuming their dimensions, and download them into the project if you
would rather not hotlink.
- https://ai-taste-vault.vercel.app/v/demo/runcycle-ai-sales-agent-hero/images/01-hero-artwork.webp — A classical stone loggia with three arches opening onto a blue bay and a distant mountain, rendered as a dense cross-stitch weave, with gold-blossomed vines filling the dark foreground
- https://ai-taste-vault.vercel.app/v/demo/runcycle-ai-sales-agent-hero/images/02-cta-artwork-strip.webp — Gold mimosa blossoms and dark olive vine leaves against a deep warm brown ground, rendered as a dense cross-stitch weave
### Image prompts
What each picture above was generated from, for anyone changing one.
**A classical stone loggia with three arches opening onto a blue bay and a distant mountain, rendered as a dense cross-stitch weave, with gold-blossomed vines filling the dark foreground** (`01-hero-artwork`)
MEDIUM AND FINISH: A dense cross-stitch and woven-tapestry reconstruction of a nineteenth-century Italian landscape painting — not a photograph and not a painting, but a painting rebuilt out of many thousands of tiny square embroidery stitches on a visible regular grid, roughly two pixels per cell across a 1440px width, so it reads as continuous tone at arm's length and dissolves into discrete flat coloured units up close. Matte thread, no gloss, no specular highlight, every contour soft and stepped by the weave, slight irregularity in the cloth, the whole surface evenly and flatly lit as a textile. There is no camera in this image: no lens, no depth of field, no film grain, no exposure falloff. COLOUR AND VALUE: a warm brown-and-gold surround against cool blue openings. The darkest value anywhere is #241C10, a deep warm brown — there is no black, no neutral grey, no cool shadow. The lightest is #F4EDDC, a warm off-white in the clouds and sunlit stone — no pure white, no blown highlight. Between those: loggia shadow and foliage mass #3A2E1C to #5E4E2C, olive-gold leaves #6B5A2E, blossom gold #D7B14C and #EBD494, pale limestone columns #CFC0A2 to #E0D4B8, sea #1F4A72 deepening to #3A6E96, sky #6F9EC4 at the top softening to #AEC9DA at the horizon, distant mountain a dusty blue-grey #7C93A6, and one terracotta note #B07A52 low in the frame. About sixty percent of the frame sits inside the dark warm brown band and the bright cool blue is confined to the arch openings; the darks stay open and full of visible stitch texture, never crushed and never contrasty. EDGES: full-bleed, placed edge to edge in a wide band with square corners against a plain warm white page above and below. The picture runs to all four edges with no border, no mat, no rounded corner, no vignette, no darkening or fading at the margins and no white margin anywhere; the top and bottom edges are hard crops straight through the scene. SUBJECT: a shaded stone loggia seen from within, looking out over a sunlit Mediterranean bay. Three tall round-headed arches span the centre two thirds of the frame, divided by two slender pale stone columns with plain capitals and square bases, standing on a low stone balustrade that runs across the lower third. Through the arches lies a calm deep-blue bay, a long low blue-grey mountain across the water on the horizon, and a few soft white cumulus clouds in the upper sky. A small weathered pale stone statue of a crouching eroded figure, about a quarter the height of a column, sits on the balustrade in the centre arch. The left and right thirds of the frame are filled with dark hanging foliage and flowering vine — masses of small round gold mimosa blossoms scattered through olive-brown leaves, densest at the top corners and trailing down both sides. At the far left a pale vertical sliver of a distant building; at the bottom left the rim of a terracotta planter. COMPOSITION: near-symmetrical and centred on the middle arch, horizon at roughly sixty percent of the height, the dark foliage framing the bright opening like a proscenium; one flat plane of focus throughout. AVOID: photographic rendering of any kind, lens flare, sun star, bokeh, shallow focus, HDR clarity, black vignette, a dramatic sunset or stormy sky, saturated travel-poster blues and greens, glossy varnish, oil impasto or visible brushstrokes, a blocky retro 8-bit pixel-art look with large cells, halftone dots or CMYK print rosettes, cartoon or vector flatness, people, boats, birds, or any modern object. Output a wide panoramic 2.8:1 frame, 1440x514. No text, no lettering, no logos, no watermarks, no UI.
**Gold mimosa blossoms and dark olive vine leaves against a deep warm brown ground, rendered as a dense cross-stitch weave** (`02-cta-artwork-strip`)
MEDIUM AND FINISH: A dense cross-stitch and woven-tapestry reconstruction of a detail from a nineteenth-century Italian landscape painting, in exactly the same technique and stitch scale as a wider companion image — thousands of tiny square embroidery stitches on a visible regular grid, roughly two pixels per cell across a 1440px width, reading as continuous tone from a distance and as discrete flat coloured units up close. Matte thread, no gloss, no specular highlight, soft stepped contours, slight cloth irregularity, flat even illumination of the textile itself. No camera: no lens, no depth of field, no film grain, no exposure falloff. COLOUR AND VALUE: a narrow warm range, much darker overall than a landscape view. The darkest value anywhere is #241C10, a deep warm brown — no black, no neutral grey, no cool shadow. The lightest is #F0DFA8, the pale edge of a sunlit blossom — no pure white and no blown highlight. The body of the frame sits between #2E2515 and #6B5A2E in shadowed brown and olive-gold leaf, with blossom gold #D7B14C and #EBD494 scattered through it and a few deeper umber #3A2E1C pockets behind. No blue, no sky, no water, no stone anywhere in this crop. The darks stay open and full of visible stitch texture, never crushed. EDGES: full-bleed, placed edge to edge as an extreme-wide banner with square corners, sitting directly above a dark brown copy row and below plain warm white. The picture runs to all four edges with no border, no mat, no rounded corner, no vignette, no fade and no margin; all four edges are hard crops straight through the foliage, with leaf and blossom clusters clearly continuing past the frame. SUBJECT: a close crop of flowering vine hanging in deep shade — trailing branches of small round gold mimosa blossoms among narrow olive-brown leaves, densest along the upper edge and thinning into dark ground toward the lower edge, with a few slender bare stems crossing the frame. Nothing architectural, no horizon, no figure, no ground plane; only the foliage mass and the dark space behind it. COMPOSITION: evenly distributed across the full width with no single focal point, slightly heavier at the left and right ends and a little more open through the middle, so the strip reads as texture rather than as a picture of something. AVOID: photographic rendering of any kind, macro lens look, bokeh, shallow focus, HDR clarity, black vignette, a dramatic light shaft, saturated botanical greens, glossy varnish, oil impasto or visible brushstrokes, a blocky retro 8-bit pixel-art look with large cells, halftone dots or print rosettes, cartoon or vector flatness, insects, birds, hands, or any modern object. Output an extreme-wide 5.1:1 panoramic banner, 1440x280. No text, no lettering, no logos, no watermarks, no UI.
---
## Stride — Fitness coaching page
- Page: https://ai-taste-vault.vercel.app/r/stride-fitness-coaching-page
- Original: https://br.pinterest.com/pin/902549581584358048/
- Type: Landing page
- Tags: Footer, Full bleed, Health, Hero, Logo wall, Minimal, Nav bar, Pricing table, Restrained motion
- Palette: #026B95, #FCFCFC, #03080B, #03465A, #A9D8E7
- Captured: 2026-09-18
- Rebuilt with: Claude Code · Opus 5.5 · High · skills: frontend-design, emil-design-eng, transitions-dev, gsap, humanizer
- Rebuild: https://ai-taste-vault.vercel.app/v/demo/stride-fitness-coaching-page/index.html
### Prompt — Rebuild
_rebuild · html-css · opus_
#### Full-bleed athletic coaching hero: one viewport with glass cards
A single-screen landing page. One studio photograph fills the whole viewport: an athlete mid-leap against a saturated cerulean backdrop. All UI floats on top of it. Headline, chips and newsletter sit in a left column. Two cards sit in a right rail: a solid white "personal trainer" card and a glass pricing card. A thin bottom strip holds contact links and a monochrome logo wall. The effect is calm, airy and premium, with one strong photo and very little chrome.
##### Structure
- **Stage:** full-bleed. `width: 100vw; min-height: 100vh`, designed at 1440 × 938. It has no outer container box. Content uses a 64px side gutter, so the inner width is 1312px.
- **Grid:** 12 columns, 24px gaps, over the 1312px inner width.
- Left column: columns 1–6, max 700px wide.
- The photo's subject owns the middle. Keep columns 5–9 visually clear of text, and let the athlete's arm and ball cross between the columns.
- Right rail: columns 10–12, about 296px wide, right-aligned to the gutter.
- **Sections, top to bottom.** All of them sit inside the one stage.
1. **Nav bar.** An overlay band, 100px tall, at the top of the stage.
2. **Hero stage (photo).** A full-bleed background photograph covering the entire 938px.
3. **Left column copy.** Topic chips, a two-line headline, a short paragraph and a newsletter pill in the upper half. Lower down: a thumbnail strip card and an icon plus two-line tagline.
4. **Right rail cards.**
- 4a: the white personal-trainer card, upper right, with a small vertical progress bar to its left.
- 4b: the glass pricing card, lower right.
5. **Footer strip / logo wall.** An overlay band pinned to the bottom of the stage, with contact at left, three partner logos centred and email at right.
##### Scroll map
- **1 Nav bar:** 100px (0.11 vh). Overlay at the top of 2, so it consumes no scroll of its own. Kind: entrance (inferred).
- **2 Hero stage:** 938px (1.04 viewports at 900px viewport height). Consumes 938px of scroll. Kind: static background with a load entrance (inferred).
- **3 Left column copy:** occupies y 200–820 inside 2. Consumes no extra scroll. Kind: entrance (inferred).
- **4 Right rail cards:** 4a occupies y 182–510 and 4b occupies y 667–833, both inside 2. Consumes no extra scroll. Kind: entrance (inferred).
- **5 Footer strip:** 64px tall, overlaying y 858–922 inside 2. Consumes no extra scroll. Kind: static.
- **Total page height:** about 938px, roughly one viewport. Nothing pins, stacks or scrolls beyond the stage.
##### Spacing
- **Stage padding.** 64px left and right. The nav's vertical centre sits 50px from the top, and the footer strip's centre sits 44px above the bottom.
- **Left column vertical rhythm**, top to bottom. The column starts at y ≈ 205.
- Chips row: 28px tall, with 8px between chips.
- 20px down to the headline.
- Headline: 2 lines, about 150px block.
- 24px down to the paragraph (2 lines).
- 24px down to the newsletter pill (44px tall).
- An open gap of about 140px, where the photo breathes.
- Thumbnail strip card, 64px tall.
- 24px down to the tagline row (56px tall).
- **Nav bar.**
- Pills are 42px tall.
- Menu pill: centred, 104px wide, with 18px horizontal padding.
- Right cluster: two 42px circular icon buttons 8px apart, then 12px, then the member pill (about 128 × 42, 20px horizontal padding).
- **Trainer card (4a).**
- Size: 276 × 328, with 20px internal padding.
- Label pill at the top.
- 20px down to the statement.
- Statement block: 4 lines.
- Auto space, then the full-width button (50px tall), sitting 20px above the card bottom.
- Progress bar: sits 20px to the left of the card, at y 225–295.
- **Pricing card (4b).**
- Size: 296 × 166.
- Header band: 36px tall, with 16px horizontal padding.
- Body: 18px padding, split into two columns (price left, feature list right) with a 24px gap.
- Feature list items sit 14px apart.
- **Thumbnail strip card.**
- Size: 350 × 64, with 8px padding.
- Four 48–56px thumbs, 6px apart.
- 12px gap before the caption.
- **Footer strip.**
- Left: label, then 12px, then three 16px icons 8px apart.
- Centre: logos 40px apart.
- Right: label, then 16px, then the address.
##### Type
- **Family:** geometric sans with round bowls, a single-storey feel and friendly terminals. Use **Outfit** (Google Fonts); Urbanist is an acceptable substitute. Use one family throughout.
- **Anchor:** body = 16px.
| Level | Ratio | Size | Line-height | Letter-spacing | Weight |
|---|---|---|---|---|---|
| H1 headline (2 lines) | 4.25× | 68px | 1.08 | −0.02em | 500 |
| Price figure | 2.75× | 44px | 1.0 | −0.02em | 500 |
| Card statement (4 lines) | 1.75× | 28px | 1.18 | −0.01em | 500 |
| Tagline beside burst icon (2 lines) | 1.75× | 28px | 1.15 | −0.01em | 400 |
| Body paragraph | 1× | 16px | 1.5 | 0 | 400 |
| Nav pills / buttons | 0.9× | 15px (min 14) | 1 | 0 | 500 |
| Pricing header label, "Monthly" label | 0.9× | 14–15px | 1.2 | 0 | 500 |
| Chips, feature list, thumb caption, footer meta, "/Month" suffix | 0.8× | 13px | 1.3 | 0 | 400 |
| Card label pill | 0.75× | 12px | 1 | 0 | 400 |
- **Line lengths.**
- Paragraph: max-width 360px, about 45 characters per line, 2 lines.
- Headline: breaks after word 2 of about 4. The second line is the longer one and runs to about 700px.
- Card statement: forced into 4 short lines of 1–2 words each.
- **Two-tone statement.** In the trainer card statement, words alternate between near-black #03080B and a light grey, `rgba(3,8,11,0.35)`. Roughly: grey word, black word / black word, grey word / black word, grey word / grey word, black figure. The black words carry the meaning, and the grey words are connective.
##### Colour
- **#026B95 cerulean.** This is about 80% of the surface. It is the photo's studio backdrop, not a CSS fill. Use it as the fallback `background-color` behind the image.
- **#03465A deep teal-navy.** The photo's darker vignette toward the edges and bottom. Also the tint behind glass surfaces: `rgba(3,70,90,0.25)` under the backdrop blur.
- **#FCFCFC near-white.** All text over the photo, the trainer card fill, the pricing header band, the member pill, the Subscribe button and the logos. White is the page's real "accent": solid white marks the three action/primary surfaces (member pill, trainer card, pricing header) and nothing else gets a solid fill.
- **#03080B near-black.** Used only for text sitting on white surfaces (the card statement, button labels in white pills, the pricing header label). Never use it as a background.
- **#A9D8E7 pale sky.** The single secondary accent. It is allowed in three places only:
- the offset plate stacked behind the trainer card, as a solid fill;
- translucent fills for the nav's menu pill, the icon buttons and the newsletter input, at `rgba(169,216,231,0.30)`;
- the thumbnail strip card, at 0.22.
- **Neutral button fill.** The trainer card button is `rgba(3,8,11,0.06)` on white, about #EEEFEF.
- **No other hues.** Accidental colours in the photos (shoes, thumbnails) are fine. Never introduce them into UI.
##### Surface
- **Radii.**
- Pills (nav, chips, input, buttons): 999px.
- Trainer card and its offset plate: 24px.
- Pricing card: 16px, with the white header band taking the top radius only.
- Thumbnail strip card: 14px. Thumbnails: 8px.
- **Borders.**
- Chips: 1px `rgba(252,252,252,0.6)` with a transparent fill. Each chip has a 4px white dot before its label, 6px gap, and 12px horizontal padding.
- Card label pill: 1px `rgba(3,8,11,0.25)`.
- No other borders.
- **Glass.** The pricing body, the thumbnail strip card, the nav translucent pills and the input use `backdrop-filter: blur(16px) saturate(1.2)` over their translucent fill. The athlete's foot passes behind the pricing card and must read as blurred through it.
- **Shadows.** None. Depth on the trainer card comes only from the solid #A9D8E7 plate, offset +10px x / +10px y, which peeks out on the right and bottom edges.
- **Progress bar.** 2px wide, 70px tall, radius 1. The top 40% is solid #FCFCFC and the rest is `rgba(252,252,252,0.3)`. It implies the trainer card is one of a set.
- **Burst icon.** 40px, about 10 short white strokes, 2px weight, radiating from a centre with an open core.
##### Imagery
- **Hero photograph (section 2).**
- Aspect: a full-bleed cover at 1440 × 938 (about 3:2), with `object-fit: cover` and `object-position: 55% 30%`.
- Subject: one athlete shot in the studio mid-leap, body diagonal and one arm fully extended upward, palm under a basketball near the top edge.
- Clothing: a white long-sleeve top, black trousers and bright teal shoes.
- Placement: the athlete sits just right of centre (x 30%–88%). The ball rises into the top 20% between the nav's menu pill and the right cluster. The legs sweep toward the bottom right, behind the pricing card.
- Background: a seamless saturated cerulean backdrop (#026B95) with a soft natural vignette darkening to #03465A at the corners and bottom.
- Treatment: crisp, bright and high-key on the subject. No grain, no duotone and no added gradient overlay.
- **Four thumbnails (in section 3's strip card).** Square, 1:1, 52px. Each is an outdoor training venue shot small and slightly muted:
1. a grass field;
2. an open track under an overcast sky;
3. a lone runner on a path;
4. terracotta running-track lanes.
A 2-line caption follows the thumbnails: a "+N" count plus a 2–3 word noun phrase.
- **Logos (section 5).** Three monochrome white sportswear-style marks at about 28px tall. Use neutral placeholder glyph marks, not real brands.
- **Social icons.** Nav has X and Instagram-style glyphs at 18px inside the 42px circles. The footer has messaging-app glyphs at 16px.
##### Placeholder copy (by role)
- **Nav.** Wordmark at top-left: one short word plus a small chevron glyph, 22px, weight 600. Centre: "Menu" with a hamburger icon. Right: two social icons, then a white pill CTA of 2–3 words.
- **Chips.** Three topics, 1–2 words each.
- **H1.** A 3–4 word imperative across 2 lines.
- **Paragraph.** 2 sentences, about 20 words.
- **Newsletter pill.** About 350 × 44. Placeholder of 3 words. An inset white "Subscribe" pill button, 84 × 34, sits 5px from the right edge.
- **Tagline.** 5–6 words on 2 lines.
- **Trainer card.**
- Label: 3 words.
- Statement: about 7 words plus a "24/7"-style figure.
- Button: 3 words.
- **Pricing card.**
- Header: 1 word.
- Body: a period label of 1 word, a price of 2–3 digits with a "$" and a "/period" suffix, and 3 features of 2 words each.
- **Footer.** Left: "Contact"-style label. Right: an "Email" label plus an address.
##### Motion
No Motion report exists for this page. Every value below is **(inferred)**, and durations are ranges, not measurements.
**1 Nav bar**
- kind: entrance (inferred)
- what moves: wordmark, menu pill, right cluster
- from → to: opacity 0 → 1, translateY −12px → 0
- range: once on page load; 500–700ms (not measured), ease-out; the three groups staggered 60–80ms
- reduced motion: appears at full opacity with no translate
**2 Hero stage (photo)**
- kind: entrance (inferred); static once settled
- what moves: the background photograph
- from → to: scale 1.04 → 1.0, opacity 0.6 → 1
- range: once on load; 900–1200ms (not measured), a gentle ease-out
- reduced motion: static image, no scale
**3 Left column copy**
- kind: entrance (inferred)
- what moves: in order — chips, H1 (line by line), paragraph, newsletter pill, thumbnail strip, tagline row
- from → to: opacity 0 → 1, translateY 20px → 0
- range: once on load, starting about 150ms after the nav; 600–800ms each (not measured), ease-out; stagger 70–100ms
- reduced motion: all visible immediately with no translate
**4 Right rail cards**
- kind: entrance (inferred)
- what moves: 4a (trainer card together with its offset plate), then the progress bar, then 4b (pricing card)
- from → to:
- cards: opacity 0 → 1, translateY 24px → 0
- the plate settles last, moving from offset 0,0 to +10px,+10px
- progress bar fill: height 0 → 40%
- range: once on load, after section 3 starts, about 300ms in; 700–900ms (not measured), ease-out; 120ms between 4a and 4b
- reduced motion: final state shown at once, plate already offset
**5 Footer strip**
- kind: static
- what moves: nothing
- from → to: n/a
- range: n/a
- reduced motion: n/a
**Interaction transitions** (not part of the load choreography)
- **White pills (member CTA, Subscribe).** On hover, the background goes to #A9D8E7. 200ms ease.
- **Translucent pills and icon circles.** On hover, the fill opacity goes 0.30 → 0.45. 200ms.
- **Chips.** On hover, the border goes to full-opacity white. 150ms.
- **Trainer card button.** On hover, the fill goes to #03080B with #FCFCFC text. 220ms. On press: scale 0.98.
- **Menu pill.** On click, the hamburger morphs to ×, and a full-height panel fades in over the stage (opacity 0 → 1, 250ms) as a #03465A overlay at 0.9 with blur. Close reverses it.
- **Footer logos.** Opacity 0.8 at rest, 1 on hover.
##### Responsive (below 640px)
- **Stage.** Becomes auto height. The photo stays full-bleed as the top block at 100svh with `object-position: 60% 20%`.
- **Nav.** Reduces to wordmark plus a menu icon button. Social icons and the member pill move into the menu.
- **Left column.**
- Gutter: 20px.
- H1: 40px (2.5×), line-height 1.1.
- Chips wrap.
- The paragraph and newsletter pill go full width.
- **Cards.** The copy block sits over the lower photo. Below it, cards stack on a #026B95 background in this order:
1. trainer card, full width minus the 10px plate offset;
2. pricing card, full width;
3. thumbnail strip.
Gap between cards: 16px.
- **Dropped.** The progress bar and the tagline row.
- **Footer strip.** Stacks as three centred rows: logos, contact, email. 16px gap.
- **Pricing body.** Stays two-column down to 360px width, then stacks.
##### Don'ts
- Don't add sections below the stage. There are no features grid, no testimonials and no FAQ. The whole page is one composed viewport.
- Don't lay a dark gradient scrim over the photo to "help legibility". The white text sits directly on the blue backdrop, and the vignette is the photo's own.
- Don't centre the headline or put the copy inside a card. It floats at the left, top-aligned with the trainer card's zone, and never overlaps the athlete's torso.
- Don't make every card glass. The trainer card is **solid** near-white with a solid pale-blue plate, and that contrast with the glass pricing card is the point.
- Don't use drop shadows, glows or coloured borders anywhere. Depth comes from the plate offset and backdrop blur only.
- Don't introduce a warm accent: no orange CTA, no neon green, no gradient buttons. Primary actions are white pills with near-black text.
- Don't go bold. Headline 500, never 700 or 800, and no uppercase headings. Don't use Inter, Roboto or system-ui; the rounded geometric sans carries the friendliness.
- Don't render the statement all in one colour. The alternating grey and black words are the signature.
- Don't colour the logo wall or give it a light band. Three small white marks sit on the photo, spaced wide, centred under the athlete.
- Don't use tight 8px corner radii on the cards, or sharp corners on anything. Pills are fully round and the cards are soft (16–24px).
- Don't add scroll-linked parallax, pinning or looping animations. The motion is a single restrained load-in, then stillness.
- Don't pick a generic gym or dumbbell stock photo. It needs one studio athlete in a dramatic upward reach on a seamless saturated-blue backdrop, bright enough to act as the page's colour.
### Imagery — already generated
These pictures were made for this design and are hosted at the URLs below.
Use them as the `src` exactly as written, and keep the alt text. Do not
generate your own, do not reach for a stock library or a placeholder
service, and do not feed the Imagery section above back to an image model —
that work is done. Size and crop them with CSS (`object-fit: cover`) rather
than assuming their dimensions, and download them into the project if you
would rather not hotlink.
- https://ai-taste-vault.vercel.app/v/demo/stride-fitness-coaching-page/images/01-hero-athlete.webp — Athlete in a white long-sleeve top and black trousers leaping diagonally with one arm stretched up, palm under a basketball, against a seamless cerulean studio backdrop
- https://ai-taste-vault.vercel.app/v/demo/stride-fitness-coaching-page/images/02-venue-thumbnails.webp — Four small outdoor training venues: a grass field, an open track under overcast sky, a lone runner on a path, and terracotta running-track lanes
### Image prompts
What each picture above was generated from, for anyone changing one.
**Athlete in a white long-sleeve top and black trousers leaping diagonally with one arm stretched up, palm under a basketball, against a seamless cerulean studio backdrop** (`01-hero-athlete`)
MEDIUM AND FINISH: A real studio sports photograph, clean commercial advertising style. The subject is crisply lit and bright, with the soft even key light of a large softbox. It is sharp from head to shoes, with a very slight natural motion softness only at the trailing foot. No film grain, no duotone, no colour grade over the subject, no added gradient overlay. COLOUR AND VALUE: About 80% of the frame is a seamless painted studio backdrop in saturated cerulean. It is brightest, around #2A86B4, in a soft pool at the upper centre around the ball. It settles to #026B95 across most of the frame and darkens gently and smoothly to deep teal-navy #03465A in the bottom-left corner, the bottom edge and the far corners. The backdrop is never darker than #033E52 and never lighter than #3590BC. It has no texture, no seam and no floor line, and it has no black. The only near-whites in the frame are the athlete's top, around #F4F4F2, with soft cool-grey folds. The only near-blacks are the trousers, around #0B1014. The basketball is a warm matte brown-orange, around #B0663A. The shoes are bright teal. There are no other colours. EDGES: The backdrop runs off all four edges as a continuous blue, so the image goes full-bleed behind a page whose fallback colour is #026B95. The left 40% of the frame, from the top down to about 60% height, must be flat, empty cerulean, because a white headline, a paragraph and a pill input sit there. The top-left and top-right corners must also stay empty, because nav pills sit there. The right 20% of the frame should be mostly empty backdrop, because white cards sit over it. SUBJECT: A single athletic Black man in his twenties, shot from a low angle in a dramatic mid-air leap. His body runs on a diagonal from lower right to upper centre. His right arm is fully extended straight up, with the palm flat under a basketball that balances on his fingertips. His other arm reaches out low and to the left with fingers spread. He wears a loose white long-sleeve crewneck sweatshirt, slim black track trousers and bright teal running shoes. His head is tilted up, with a focused expression. COMPOSITION: 3:2 landscape. The ball sits at about 59% across and 12–22% down, near the top edge. His head is at about 44% across and 45% down. The white torso fills roughly 36–54% across and 50–78% down. The outstretched lower hand reaches to about 26% across and 68% down. His legs sweep out toward the bottom right, with the black trousers extending to about 80% across. The leading teal shoe ends at about 86% across and 88% down. The hips and thigh run off the bottom edge between 38% and 60% across. The whole figure spans roughly 25–88% of the width. AVOID: A gym, court, floor, hoop or any environment. Studio lights or stands in frame. Black vignettes or heavy dark corners. Rim light halos or glows. Lens flare. Bokeh. HDR clarity. A desaturated or teal-orange cinematic grade. A second person. Text on the clothing or the ball. Output a wide 3:2 landscape frame, 1536x1024. No text, no lettering, no logos, no watermarks, no UI.
**Four small outdoor training venues: a grass field, an open track under overcast sky, a lone runner on a path, and terracotta running-track lanes** (`02-venue-thumbnails`)
MEDIUM AND FINISH: A contact sheet of four real outdoor sports photographs. They are slightly muted and softly desaturated, in natural daylight, and read like small preview thumbnails. No grain, no vignette, no heavy grade. COLOUR AND VALUE: A soft, mid-key, slightly hazy look across all four. The lightest values are a pale overcast sky of about #C9D2D6. The darkest are small shadows of about #2E3A36; nothing is black. Greens are muted olive-sage (#7E8F5A to #5E6E45), not saturated. Terracotta is a dusty brick (#A55A42). EDGES: The frame is split into an exact 2×2 grid of four equal squares, each 512×512. The panels butt directly against each other with hard, straight edges. There are no gutters, borders, rounded corners or white lines, and nothing crosses between panels, so each quadrant can be cropped out cleanly as its own square. SUBJECT: Top-left: a wide, flat grass training field seen from low height, with a pale sky strip at the top. Top-right: an open athletics track and infield under a flat overcast grey sky, seen from the stands at a distance. Bottom-left: a lone small runner on a pale paved path through muted green parkland, seen from behind at a distance. Bottom-right: a close, slightly high-angle view of terracotta running-track lanes with thin white lane lines running diagonally across the frame. COMPOSITION: Each square is simple and legible at 52px, with one clear dominant surface and a single subject. Take only the muted, cool, restrained finish from the reference screenshot. Do not take any of its blue, its layout or its UI. AVOID: Saturated neon-green grass. Dramatic skies, sunsets or sun flare. Crowds. Readable signage. Bokeh. HDR clarity. Visible borders or gaps between panels. Output a square 1:1 frame, 1024x1024. No text, no lettering, no logos, no watermarks, no UI.
---
## Tenista — Tennis academy landing page
- Page: https://ai-taste-vault.vercel.app/r/tenista-tennis-academy-landing-page
- Original: https://br.pinterest.com/pin/70437491511961/
- Type: Landing page
- Tags: Editorial, Feature callout, Full bleed, Gallery, Hero, Light mode, Nav bar, Overlapping elements, Restrained motion, Stats band
- Palette: #FAFAFA, #174B84, #C6C5C7, #298CC5, #984926
- Captured: 2026-09-17
- Rebuilt with: Claude Code · Opus 5.5 · High · skills: frontend-design, emil-design-eng, transitions-dev, gsap, humanizer
- Rebuild: https://ai-taste-vault.vercel.app/v/demo/tenista-tennis-academy-landing-page/index.html
### Prompt — Rebuild
_rebuild · html-css · opus_
#### Sporty editorial academy landing page: light mode, motion-blur hero, tilted card overlapping a giant headline
A light-mode landing page for a sports training academy. A full-bleed action photo fills the hero and sits behind and in front of a huge thin grotesk headline. Below it, a tilted photo card cuts through a two-tone, two-line display headline, and a white rounded panel holds a horizontal gallery of cards with notched corners. The tone is editorial and calm. Display type is very large, all other type is very small, frosted-glass chips sit over the photos, and every bit of colour comes from the court-blue photography. The design is 1440px wide, edge to edge, with no outer frame.
##### Structure
- Viewport reference: 1440 × 900. Page gutter: **40px** each side, so the content width is **1360px**. There is no centred max-width box. Content runs gutter to gutter, and the two display headlines are allowed to run past the right gutter and get clipped.
- Grid: 12 columns, 24px gutters, inside the 1360px. Most of the composition is absolutely positioned on top of this grid rather than flowing in its columns.
Sections, top to bottom:
1. **Hero.** A full-bleed photo panel inset 8px from the top, left and right edges of the viewport. It holds the nav bar, a giant two-word headline, three small name labels, a two-line slogan bottom-left, a glass "featured" hotspot card mid-right and a glass stats card bottom-right.
2. **Instructor carousel.** No panel; it sits on the page canvas. Top-left is a white stat circle, top-right a white notched "#01" trust card. The centre holds a two-line display headline in mixed grey and black, with a tilted portrait photo card overlapping its middle. A prev/next circle-button pair flanks the bottom of the card.
3. **Facilities tour.** A large white rounded panel inset 20px from the viewport sides. The left column has a small thumbnail, a three-line headline, a short paragraph and a CTA. On the right, a horizontally scrolling gallery of notched photo cards bleeds off the panel's right edge.
The capture ends partway through section 3. Finish section 3 with a text CTA under the paragraph and close the page with 40px of canvas. Do not invent further sections.
##### Scroll map
There was no motion report, so every value here is inferred from the still. Viewport height is 900px.
1. Hero: 1043px (1.16 vh) including the 8px top inset. Consumes 1043px. Kind: entrance (on load).
2. Instructor carousel: ~1160px (1.29 vh) including its top and bottom padding. Consumes 1160px. Kind: entrance.
3. Facilities tour: ~900px (1.0 vh) panel, plus 40px canvas below. Consumes ~940px. Kind: entrance. Its gallery scrolls horizontally on drag or arrow input, not on page scroll.
Total page height is about **3140px (≈3.5 viewports)** (inferred). Nothing pins or stacks.
##### Spacing
- **Hero panel:** 8px from the viewport on top, left and right; height 1035px; inner padding 40px left and right.
- **Hero nav:** 28px from the panel top, 72px tall.
- **Hero headline:** sits 140px below the panel top.
- **Name labels:** 24px under the headline baseline.
- **Slogan:** 56px from the panel bottom.
- **Stats card:** 24px from the panel's right and bottom edges.
- **Section 1 → 2:** 80px of canvas between the hero bottom and the top of the stat circle.
- **Section 2 top row:** the stat circle sits 80px in from the left. The trust card's right edge is 40px from the right edge.
- **Section 2 headline:** the first headline row starts 290px below the top of section 2. The two rows touch each other (line-height under 1).
- **Section 2 buttons:** the prev/next buttons sit 40px below the second headline row. They are centred 270px to the left and 270px to the right of the page's centre line.
- **Section 2 → 3:** 120–140px between the carousel buttons and the top of the facilities panel.
- **Facilities panel:** 20px from the viewport sides, padding 150px top, 80px left, 120px bottom. Right padding is 0 because the gallery bleeds.
- **Facilities left column:** 520px wide.
- Thumbnail → headline: 64px.
- Headline → paragraph: 40px.
- Paragraph → CTA: 32px.
- **Gallery:** starts 60px right of the left column. Cards are 400px wide with a **52px gap**. Even-numbered cards are pushed **60px down** from the odd ones, giving a staggered baseline.
- **Glass chips inside photos:** 16px padding, 16px from the photo's bottom-left corner.
- **Rhythm:** big vertical air (80–140px) between blocks. Inside each block, everything is tight (4–16px).
##### Type
The family class is a **neo-grotesk** (Helvetica Now / Neue Haas style). Free stand-in: **Inter Tight**, with Inter for small text. Use one family for everything; there is no serif and no mono.
The anchor is body text at **17px / 1.5**. Every other level is a ratio of it:
| Level | Ratio | Size | Line-height | Tracking | Weight | Notes |
|---|---|---|---|---|---|---|
| Hero display ("two-word imperative", all caps) | 14× | 240px | 0.85 | −0.06em | 400 | white at ~88% opacity, spans the full panel width on one line |
| Section 2 display (4 words, 2 rows) | 11× | 187px | 0.92 | −0.055em | 400 | sentence case; words alternate grey / near-black |
| Hero slogan (2 short lines, caps) | 5× | 85px | 0.92 | −0.05em | 400 | white at 55% opacity |
| Section 3 headline (4–5 words, 3 lines) | 4.5× | 76px | 1.0 | −0.04em | 500 | title case, near-black |
| Big numerals ("#01", stats like "18K+") | 3.3× | 56px | 1.0 | −0.04em | 500 | |
| Stat-circle numeral ("100%") | 2.6× | 44px | 1.0 | −0.03em | 500 | |
| Card title ("trust" heading, 4–5 words) | 1.4× | 24px | 1.2 | −0.02em | 500 | |
| Card paragraph | 1.05× | 18px | 1.4 | −0.01em | 400 | the second half of the sentence switches to grey |
| Body (facilities paragraph) | 1× | 17px | 1.5 | 0 | 400 | max 44ch |
| Nav links (two-line stacked, 2–3 words) | 0.82× | 14px | 1.15 | 0 | 400 | |
| Nav CTA ("let's talk", caps, underlined) | 0.82× | 14px | 1 | 0.02em | 500 | |
| Glass chip title | 0.88× | 15px | 1.2 | 0 | 500 | |
| Glass chip meta, hero name labels, captions | 0.76× | 13px | 1.25 | 0 | 400 | |
| Smallest meta (inside the hero glass cards) | 0.7× | 12px | 1.3 | 0 | 400 | |
- Max line lengths: body 44ch, the trust card paragraph about 34ch, and the stat-circle caption about 22ch (two centred lines).
- Use title case for small headings ("Every Word Capitalised"). This is part of the look.
##### Colour
| Hex | Role |
|---|---|
| `#F3F3F4` | Page canvas (inferred; one step below the cards so the white shapes read) |
| `#FFFFFF` / `#FAFAFA` | Cards, the stat circle, the facilities panel, and white text and glass on photos. `#FAFAFA` is the dominant light value on the page. |
| `#0E0E0F` | Primary text and the filled "next" button |
| `#C6C5C7` | The grey half of the two-tone display headline, and the grey tail of card paragraphs |
| `#8A8A8E` | Secondary small text (inferred) |
| `#298CC5` | Bright court blue. Appears **only inside photography** (hard courts, sky-lit surfaces) and as a faint tint on hero glass. |
| `#174B84` | Deep court blue. Shadow tone of the hero photo, and the colour the hero fades into at the bottom. |
| `#984926` | Clay-court terracotta. Appears **only in a gallery photo**; never used in UI. |
There is no UI accent colour. The photography carries the blue, and the interface stays white, grey and black. The only "accent" in the UI is the solid black "next" button and the underline on the nav CTA. Never use blue for buttons, links or headings.
##### Surface
- **Radii:**
- Hero panel: 20px.
- Facilities panel: 40px.
- Trust card and gallery cards: 28px.
- Glass cards on the hero: 18px.
- Glass chips: 10px.
- Thumbnail: 12px.
- Stat circle, buttons and avatars: full circles.
- **Notched shapes** are the signature. Build them with an SVG `clip-path` path or a mask, and use 24px concave fillets at every inside corner.
- **Trust card (section 2):** a wide top band about 600 × 160px, with a narrower lower block about 420px wide aligned to the right edge, hanging 130px further down. The "#01" numeral sits in the band's left lobe, which has nothing beneath it.
- **Gallery cards and the tilted instructor card:** the top-right corner is stepped down. The top edge stops about 70% of the way across, drops 40px, and continues to the right edge, with concave and convex fillets at the step.
- **Glass** (all hero cards and the chips on photos):
- background `rgba(255,255,255,0.16)`
- `backdrop-filter: blur(16px) saturate(1.2)`
- 1px border `rgba(255,255,255,0.35)`
- white text
- **Borders:** none on white cards. The "prev" button has a 1px `#C6C5C7` ring.
- **Shadows:** essentially none. At most, give the tilted card `0 30px 60px -20px rgba(23,75,132,0.35)` so it lifts off the headline. No other shadows.
##### Imagery
1. **Hero photo** (fills the 1424 × 1035 panel, object-fit cover).
- Subject: a tennis player in white lunging hard to the right across a blue hard court. Heavy motion blur on the body, racquet and limbs, a blurred yellow ball streak on the left, and blue court filling the frame.
- Grade: cool and saturated, shading into `#174B84` at the bottom.
- Layering: the player's head and shoulders sit **in front of** the right half of the headline. Use a second cut-out PNG layer of the figure above the text, so the letters pass behind the player.
2. **Hero featured-card thumbnail.** About 1:1, 80px. A small player on a blue court.
3. **Hero stats-card image.** About 3:4, filling the right half of the stats card. A player serving on a blue court, seen from a distance.
4. **Avatar stack** in the stats card. Four 28px circular member portraits, overlapping by −8px.
5. **Instructor card** (about 440 × 660, 2:3, rotated **+12°** clockwise).
- Subject: a coach seen from behind, in a grey polo and cap, mid-forehand in front of a net, on a bright blue court with white lines.
- Overlays: a glass name chip (name plus role) near the bottom, and 4 white pagination dots under it, with the active dot stretched to a 16px pill.
6. **Facilities thumbnail.** 136 × 100, roughly 4:3. A small action shot on a blue court.
7. **Gallery cards** (400 × 520, about 3:4; there should be 4–5 of them).
- Alternate between court surfaces: one terracotta clay court with a player in blue mid-stance, one blue hard court shot from above with a small player.
- Each card has a glass chip at the bottom: venue name (2 words) plus a one-line description truncated with an ellipsis.
All photography is real action sport, saturated, lit by daylight, and shot in close crop or from above. No illustrations, gradients or abstract art.
##### Motion
None of these values were measured; all are inferred. Durations below are given as ranges.
**1. Hero**
- **Kind:** entrance, on page load.
- **What moves:** the display headline, the player cut-out layer, the slogan, and the two glass cards.
- **From → to:**
- Headline: opacity 0 → 1, translateY 40px → 0.
- Cut-out: opacity 0 → 1, scale 1.04 → 1.
- Glass cards and slogan: opacity 0 → 1, translateY 24px → 0.
- **Range:** once, on load. Duration not measured; use 700–1000ms with ease-out (e.g. `cubic-bezier(0.22,1,0.36,1)`). Stagger 80–120ms in the order headline → cut-out → slogan → featured card → stats card.
- **Reduced motion:** everything renders in its final state; no movement or fade.
**2. Instructor carousel**
- **Kind:** entrance.
- **What moves:** the stat circle and trust card, then the two headline rows, then the tilted card, then the buttons.
- **From → to:**
- Circle and trust card: opacity 0 → 1, translateY 24px → 0.
- Headline rows: opacity 0 → 1, translateY 32px → 0.
- Tilted card: opacity 0 → 1, rotate 4° → 12°, translateY 40px → 0.
- Buttons: opacity 0 → 1.
- **Range:** once, when the section top reaches 80% of the viewport. Duration not measured; use 600–900ms ease-out with a 100ms stagger.
- **Reduced motion:** final state, no movement.
**3. Facilities tour**
- **Kind:** entrance.
- **What moves:** the panel, the left column elements and the gallery cards.
- **From → to:**
- Panel: opacity 0 → 1, translateY 32px → 0.
- Left column: opacity 0 → 1, translateY 20px → 0, staggered.
- Gallery cards: opacity 0 → 1, translateX 40px → 0, staggered left to right.
- **Range:** once, when the panel top reaches 80% of the viewport. Duration not measured; use 600–900ms ease-out with an 80–100ms stagger.
- **Reduced motion:** final state, no movement.
**Interaction transitions** (not part of the scroll choreography):
- **Carousel next/prev:** the outgoing tilted card fades out and slides 40px sideways. The incoming card fades in at +12°. Pagination dots update and the active pill width animates. Use 400–500ms ease-in-out.
- **Gallery:** drag or wheel-x scroll with CSS scroll-snap (start alignment). Cards do not scale.
- **Buttons:**
- "Next" (black, filled): the background lightens to `#2A2A2C` on hover.
- "Prev" (ringed): the ring darkens to `#0E0E0F` on hover.
- Press on either: scale 0.96, 150ms.
- **Nav links and CTA:** the underline slides in on hover from left to right, 200ms. The CTA's underline shrinks and regrows.
- **Glass cards and chips:** background alpha goes 0.16 → 0.26 on hover, 200ms. The arrow in the hero card's "see collections" link nudges 4px right.
- **Menu button** (white 40px circle with a two-bar icon): it opens a full-screen white overlay that fades in over 300ms, and closes in reverse.
- **Optional:** a 40px translucent grey cursor-follower circle over section 2 (inferred from a stray grey dot over the headline). It eases toward the pointer.
##### Responsive (below 640px)
- **Gutters:** 20px. The hero panel is inset 6px with a 16px radius.
- **Hero:**
- The panel becomes 100svh tall.
- The headline wraps to two lines at 18vw (about 68px) with line-height 0.85.
- The three name labels and the featured hotspot card are dropped.
- The stats card stays, full width minus gutters, pinned to the bottom.
- The slogan goes to 40px and sits above the stats card.
- The nav keeps the logo and menu button only; the two text links and "let's talk" move into the menu.
- **Instructor carousel:**
- The stat circle (160px) and trust card stack, full width, above the headline. The trust card keeps its notch but scales down.
- The display headline drops to 64px, still two-toned, and can wrap to four lines.
- The tilted card shrinks to 280 × 420 at +8°, centred, and still overlaps the text.
- The buttons move under the card at 56px.
- **Facilities tour:**
- The panel goes to 24px radius with 24px padding.
- The left column stacks above the gallery, and the headline drops to 44px.
- Gallery cards become 78vw wide with no vertical stagger, and the gallery stays a swipeable row that bleeds right.
##### Don'ts
- **Background colour:** don't put the page on a coloured or grey mat, and don't give the page itself rounded corners. Only the hero panel and the facilities panel are rounded, and they sit on a near-white canvas.
- **Blue:** don't make blue the UI accent. No blue buttons, links, headings or section backgrounds. Blue lives in the photos only.
- **Display weight:** don't set the display headlines bold or heavy. They are **regular (400) with very tight negative tracking**. The impact comes from size, not weight. Bold display type makes this look like a gym flyer.
- **Hero overlap:** don't put the hero headline fully above the photo or fully behind it. The player must break through it, which takes the two layers described in Imagery.
- **Section 2 headline:** don't centre it in one colour, and don't keep it inside the gutters. The rows are offset, alternate grey and black word by word, and the second row is clipped by the viewport's right edge.
- **Instructor card:** don't straighten it. The +12° tilt and the notched corner are the composition.
- **Notches:** don't replace the notched/stepped card shapes with plain rounded rectangles. They're the brand gesture. Keep them on the trust card, the instructor card and every gallery card.
- **Shadows and borders:** no drop shadows on white cards, no 1px grey borders around them, and no card grid with equal heights. The gallery is staggered and bleeds off the edge.
- **Glass:** use it only where something sits over a photo. Never on a white background.
- **Small text sizes:** don't inflate the small text to "readable" 16px everywhere. Nav, labels and chips stay 12–15px, so the contrast with the 187–240px display type is extreme.
- **Placeholder content:** no gradient blobs, illustrations, icons-in-circles feature rows, emoji, or stock "smiling team" photos. Every image is mid-action on a court.
- **Motion:** no parallax, scroll-jacking, pinning, marquee tickers or count-up number animations. Motion is short entrances and carousel transitions only.
### Imagery — already generated
These pictures were made for this design and are hosted at the URLs below.
Use them as the `src` exactly as written, and keep the alt text. Do not
generate your own, do not reach for a stock library or a placeholder
service, and do not feed the Imagery section above back to an image model —
that work is done. Size and crop them with CSS (`object-fit: cover`) rather
than assuming their dimensions, and download them into the project if you
would rather not hotlink.
- https://ai-taste-vault.vercel.app/v/demo/tenista-tennis-academy-landing-page/images/01-hero-action.webp — Tennis player in white lunging hard to the right across a blue hard court, body and racquet blurred with motion, a yellow ball streaking on the left
- https://ai-taste-vault.vercel.app/v/demo/tenista-tennis-academy-landing-page/images/02-instructor-coach.webp — Tennis coach seen from behind in a grey polo and navy cap, swinging a forehand in front of the net on a bright blue court
- https://ai-taste-vault.vercel.app/v/demo/tenista-tennis-academy-landing-page/images/03-gallery-clay-court.webp — Player in a blue shirt and white shorts in a wide ready stance on a terracotta clay court
- https://ai-taste-vault.vercel.app/v/demo/tenista-tennis-academy-landing-page/images/04-gallery-blue-aerial.webp — Overhead view of an open-air blue hard court with white lines and a small player at the edge of the frame
### Image prompts
What each picture above was generated from, for anyone changing one.
**Tennis player in white lunging hard to the right across a blue hard court, body and racquet blurred with motion, a yellow ball streaking on the left** (`01-hero-action`)
MEDIUM AND FINISH: A real daylight sports photograph with heavy panning motion blur, like a fast shutter-drag action frame from a professional tennis broadcast. It is clean and smooth, with no visible grain. COLOUR AND VALUE: The frame is dominated by saturated cool court blue running from #2E8FCB in the mid-court to a deeper #1E5F9E. The bottom fifth shades into deep court blue #174B84. The lightest values are the player's white shirt, shorts, headband and wristband at about #F2F5F8. The darkest value anywhere is about #123C6E in the lower court. There are no blacks and no warm tones except the player's skin and a single pale yellow-green ball streak about #D9F05A. Tones are mostly mid blues with soft gradations. EDGES: The image fills a rounded panel edge to edge, with nothing fading to white. The bottom edge settles into flat, even #174B84 so that light caps text over the bottom-left corner stays legible. The left 45% of the frame is calm, blurred blue court with no detail, because a huge thin white headline runs across the upper third and small text sits bottom-left. SUBJECT: One male tennis player dressed all in white, with a white headband and white wristband, lunging low and hard to the right of frame. His right arm reaches back across his body holding a racquet that is smeared by motion. His torso leans forward, his legs are stretched wide, and his shoes are blurred. His face and head are the sharpest part but still slightly soft. A short, bright yellow tennis-ball streak flies horizontally in the left-centre of the frame. The background is only an empty blue hard court, softly blurred. COMPOSITION: Seen from a low side angle at court level. The player occupies the centre-right half of the frame. His head and shoulders sit in the upper fifth, about 55–65% across, so they can overlap a headline set at that height. His body sweeps diagonally down to the lower right, and his trailing foot is near the bottom-right corner. The racquet is around the centre at mid-height. There is open blue space at the top-left and the whole left side. AVOID: Crowds, stands, sponsor boards, net, visible court lines dominating the frame, sky, a black vignette, lens flare, warm golden light, HDR clarity, a crisp frozen-motion look, green or purple courts, extra players, and any logos on clothing. Output a wide 3:2 landscape frame, 1536x1024. No text, no lettering, no logos, no watermarks, no UI.
**Tennis coach seen from behind in a grey polo and navy cap, swinging a forehand in front of the net on a bright blue court** (`02-instructor-coach`)
MEDIUM AND FINISH: A real daylight sports photograph, crisp and evenly lit by bright overcast sun. It is clean, saturated and editorial, with a natural look and no stylisation. COLOUR AND VALUE: Bright court blue fills most of the frame, from #2F93D0 to #2278B8. The white court lines and the net tape are about #F4F6F8. The coach wears a mid-grey polo around #8E9196, white shorts, and a navy cap about #1F2D4A. The navy cap is the darkest value in the frame, and nothing is darker than #1A2640. There are no deep shadows, only a soft cast shadow on the court. There is no warmth except skin. EDGES: The image fills a tilted card with a notched corner, cropped edge to edge. The bottom quarter must stay simple: open blue court and the coach's white shorts and legs, because a small frosted-glass name chip and pagination dots sit over it. SUBJECT: A male tennis coach seen from directly behind, standing on a blue hard court. He wears a short-sleeved grey polo, white shorts and a navy baseball cap. Both arms are spread wide mid-forehand, with the racquet arm extended out to the right. Directly in front of him is a tennis net with white top tape crossing the upper third of the frame. Beyond the net there is only more blue court. One white court line runs vertically down the right side of the frame. COMPOSITION: Shot from slightly above and behind at close range. The coach's back and shoulders fill the centre of the frame, his head is at about 25% from the top, and his body is cropped at the mid-thigh to knees near the bottom. The net spans the full width above his shoulders. AVOID: Showing his face, crowds, fences, sky, trees, a black vignette, shallow-depth bokeh, lens flare, warm golden-hour light, HDR clarity, logos on his clothing, and extra people. Output a tall 2:3 portrait frame, 1024x1536. No text, no lettering, no logos, no watermarks, no UI.
**Player in a blue shirt and white shorts in a wide ready stance on a terracotta clay court** (`03-gallery-clay-court`)
MEDIUM AND FINISH: A real daylight sports photograph, sharp and evenly lit, with a clean, saturated, editorial finish. COLOUR AND VALUE: The background is almost entirely terracotta clay court, ranging from #B0613A to #984926, with a fine, even, dusty texture. The player wears a saturated royal-blue shirt about #2B7FC4 and white shorts. A white headband and the white baseline are the lightest values, at about #F3F1EE. The darkest value is about #4A2414 in the small shadow under the player's feet. There are no blacks and no dramatic contrast. EDGES: The image fills a rounded card with a notched corner, cropped edge to edge. The bottom fifth must stay quiet, plain clay and the player's feet, because a frosted-glass caption chip sits over it. SUBJECT: One male tennis player facing the camera in a low, wide ready stance, knees bent and arms out to both sides, holding a racquet in his right hand. He wears a royal-blue short-sleeved shirt, white shorts, a white headband and white shoes. Behind him is only empty clay court, with a white baseline crossing horizontally around his knees and a white centre mark below him. COMPOSITION: Seen at eye level from slightly in front. The player is centred and fills about 70% of the frame height, with his head near the top at about 12%. Clay fills all the space around him. AVOID: Crowds, stands, sponsor boards, sky, green trees, a black vignette, shallow-depth bokeh, lens flare, orange over-saturation, HDR clarity, and logos on clothing. Output a tall 2:3 portrait frame, 1024x1536. No text, no lettering, no logos, no watermarks, no UI.
**Overhead view of an open-air blue hard court with white lines and a small player at the edge of the frame** (`04-gallery-blue-aerial`)
MEDIUM AND FINISH: A real daylight aerial sports photograph taken from high above, sharp and evenly lit, with a clean, graphic, editorial finish. COLOUR AND VALUE: Saturated court blue fills almost the whole frame, from #2A8CC8 to a slightly deeper #1F6EAD in the outer run-off area. The crisp white court lines are about #F2F5F8 and are the lightest value. The darkest value is about #164A80 in the small cast shadow of the player. There are no blacks and no warm colours apart from skin. Values sit mostly in the mid blues. EDGES: The image fills a rounded card with a notched corner, cropped edge to edge. The bottom third must stay plain blue court with no lines crossing it heavily, because a frosted-glass caption chip sits there. SUBJECT: An open-air blue hard tennis court seen from almost directly overhead. Several thin white lines (sidelines, service line and the centre line) form a clean geometric grid across the upper half. One small player in a white shirt and blue shorts stands near the right edge, partly cropped, holding a racquet, with a short shadow cast to one side. COMPOSITION: A top-down view at a slight angle so the lines run diagonally. The player is small, about 15% of the frame height, at the upper right. Most of the frame is empty blue surface. AVOID: Net shadows dominating, crowds, buildings, trees, sky, a black vignette, a tilt-shift miniature effect, lens flare, HDR clarity, green or purple surfaces, and logos. Output a tall 2:3 portrait frame, 1024x1536. No text, no lettering, no logos, no watermarks, no UI.
---
## Cinematic night-sky landing hero
- Page: https://ai-taste-vault.vercel.app/r/cinematic-night-sky-landing-hero
- Original: https://br.pinterest.com/pin/901001469210186861/
- Type: Section
- Tags: Creative tool, Dark mode, Editorial, Full bleed, Hero, Nav bar, Organic, Restrained motion, Single column
- Palette: #1A3A54, #272925, #140D08, #FDFC8B, #D4C659
- Captured: 2026-09-17
- Rebuilt with: Claude Code · Opus 5.5 · Extra high · skills: frontend-design, emil-design-eng, transitions-dev, humanizer, gsap
- Rebuild: https://ai-taste-vault.vercel.app/v/demo/cinematic-night-sky-landing-hero/index.html
### Prompt — Rebuild
_rebuild · html-css · opus_
#### Cinematic night-sky landing hero
A single full-bleed hero section: one photographic night scene edge to edge, an overlaid transparent nav, and a centred serif headline sitting in the upper third so the lower 40% of the frame stays pure photograph. Everything is restrained — the image does the work, the interface is four translucent elements floating on top of it.
> Note on the source: the reference capture shows this design inset on a blurred mat with its own corners rounded. That mat is the photograph's framing, not part of the design. Build this as a full-bleed page: no outer rounded card, no margin, no visible page border, corners square.
>
> No live-page motion report was available for this reference. Every motion value below is marked **(inferred)** and given as a range where it is a duration or an easing. Do not invent exact spring/lerp parameters.
##### 1. Structure
Layout grid at 1440 CSS px:
- **Page container:** full-bleed, no max-width. The background photograph bleeds to all four edges.
- **Nav container:** full-bleed with 40px left/right gutters (inferred). Three zones — wordmark left, links centred, CTA right — laid out as a flex row with `justify-content: space-between` and the link group absolutely centred to the viewport, not to the space between the two outer items.
- **Hero copy column:** centred, `max-width: 920px`, all content centre-aligned. The paragraph inside it is capped tighter at 600px.
- **Column structure:** single column throughout. No grid, no sidebar, no cards.
Sections top to bottom:
1. **Top nav** — overlay bar, ~100px tall, transparent, sits on top of section 2 and scrolls away with the page.
2. **Hero** — 100vh (960px at a 1440×960 viewport), full-bleed photograph, centred copy block in the upper third.
3. **Continuation sentinel** — a plain 600px block in the base sky colour below the hero. It carries no content; it exists so the hero's scroll-linked behaviour and the nav's exit can be judged at scroll positions past the fold. If the hero is being dropped into an existing page, replace this with the real next section.
##### 2. Scroll map
| # | Section | Height | In viewports | Scroll consumed | Kind |
|---|---------|--------|--------------|-----------------|------|
| 1 | Top nav | 100px (overlay) | 0.10vh | 0px — overlays section 2 | entrance (on load), then static |
| 2 | Hero | 960px | 1.00vh | 960px | entrance (on load) + scroll-linked (background parallax, copy fade-out) |
| 3 | Continuation sentinel | 600px | 0.63vh | 600px | static |
**Total page height: 1560px (1.63 viewports).** Nothing pins, nothing stacks, nothing consumes more scroll than its own height. If the sentinel is dropped, total page height is 960px (1.00vh).
##### 3. Spacing
Base unit 4px. Used steps: 8 / 12 / 16 / 24 / 28 / 36 / 40 / 48 / 64 / 100.
- **Nav:** 28px padding-top, 40px left/right gutters, nav row is 48px tall (set by the CTA pill), so the nav band measures 100px from the page top to the pill's bottom edge. No bottom border, no bottom padding — the nav does not reserve space, it floats.
- **Nav link group:** 36px gap between links. The links sit on the same optical centreline as the wordmark and the pill.
- **Hero copy block:** top edge of the headline's cap height at **320px** from the top of the hero — that is 33% of hero height, deliberately above optical centre. Implement as `justify-content: flex-start; padding-top: 296px` on the hero flex column (296px + headline's half-leading ≈ 320px cap-top) rather than centring and nudging.
- **Inside the copy block:** headline → paragraph **28px**; paragraph → button **36px**.
- **Below the block:** the copy block bottom lands at ~568px, leaving **392px (41% of the hero)** of uninterrupted photograph before the bottom edge. Protect this. It is the composition.
- **Rhythm:** there is only one internal rhythm here — 28 / 36 between the three copy elements, widening downward. The section-to-section rhythm is a hard cut: the hero ends at 960px with no padding, and section 3 begins immediately in a flat colour.
##### 4. Type
Two families.
- **Display:** high-contrast transitional serif with sharp bracketed serifs and a vertical stress — the kind that looks engraved rather than calligraphic. Free stand-in: **Playfair Display** (alt: Instrument Serif for a tighter, more modern cut).
- **UI / running text:** neutral grotesk, low contrast, normal width. Free stand-in: **Inter**.
Body anchor: **17px at 1440**. Everything else is a multiple of it.
| Level | Ratio | Size | Line-height | Letter-spacing | Weight | Family |
|---|---|---|---|---|---|---|
| H1 headline | 3.8× | **64px** | 1.12 (72px) | -0.01em | mixed: **400** for the outer words, **700** for the emphasised middle phrase, same size and same baseline | Display serif |
| Paragraph / subhead | 1.0× | **17px** | 1.55 (26px) | 0em | 400 | Grotesk |
| Wordmark | 1.2× | **20px** | 1.0 | 0.01em | 400 | Display serif |
| Nav link | 0.88× | **15px** | 1.0 | 0.01em | 400 | Grotesk |
| Nav CTA label | 0.82× | **14px** | 1.0 | 0.02em | 500 | Grotesk |
| Primary button label | 0.94× | **16px** | 1.0 | 0.02em | 500 | Grotesk |
| Meta / caption (if needed) | 0.76× | **13px** | 1.4 | 0.06em, uppercase | 500 | Grotesk |
- The headline's weight mix is the single typographic idea of the page: one line of text where two or three consecutive words are bold and the rest is regular. No colour change, no italic, no size change — weight only.
- The ® or trademark mark beside the wordmark is a superscript glyph at 0.45em, baseline-shifted up ~0.5em. It is a symbol, not type, and is exempt from the 12px floor.
- **Max line length:** headline sits on one line up to 920px (5–7 words); below ~1100px viewport it wraps to two lines, balanced (`text-wrap: balance`). Paragraph capped at **600px ≈ 58–62 characters**, two lines at 1440.
Placeholder copy by role:
- Wordmark: 1 word, 6–7 characters.
- Nav links: 5 items, 1 word each (4–7 characters).
- Nav CTA: 2 words.
- H1: 5–7 words on one line, with words 2–3 set bold.
- Paragraph: 2 lines, 22–28 words total, describing who the product is for and what it protects.
- Primary button: 2 words, same label as the nav CTA.
##### 5. Colour
| Hex | Role | Share of surface |
|---|---|---|
| **#1A3A54** | Deep teal-blue. The dominant field — the night sky across the top two thirds, and the page's base `background-color` behind the image so any load gap or letterbox matches. | ~55% |
| **#272925** | Near-black olive-charcoal. The lower mass: horizon, foliage in shade, and the base of the vignette. | ~25% |
| **#140D08** | Near-black warm brown. Deepest shadow — bottom edge, silhouetted figures, the ground under the flowers. Also the darkening used under translucent controls when pressed. | ~12% |
| **#FDFC8B** | Pale warm yellow. **The single accent.** | ~5% |
| **#D4C659** | Muted gold. The accent's falloff — warm rim light on the figures, flower mid-tones. Never used on its own. | ~3% |
Text and UI colour, sampled off the headline and hairlines (inferred): ivory **#F3EFE4**. Headline and active nav link at 100%; paragraph at 78%; inactive nav links at 62%; hairlines at 22%.
**Where the accent is allowed:** inside the photograph only — the emitted light of the small glowing screens, and the brightest flower highlights. Plus one exception: a radial glow of #FDFC8B at ≤12% opacity behind the primary button on hover. It is never a text colour, never a solid fill, never a link colour, never an underline, never a focus ring tint.
##### 6. Surface
- **Borders:** 1px hairline, `rgba(243, 239, 228, 0.22)`. Only on the two pill buttons. No divider under the nav, no section rules.
- **Radii:** buttons fully rounded, `border-radius: 999px`. Nothing else in the design has a radius — no cards, no image corners, no container corners.
- **Fills:** both buttons are translucent — `rgba(26, 58, 84, 0.35)` with `backdrop-filter: blur(12px) saturate(1.1)`. They read as tinted glass over the photograph, not as solid chips.
- **Sizes:** nav CTA pill 150×48px, label centred, 24px horizontal padding. Primary hero button 190×60px, 40px horizontal padding.
- **Shadows:** none. No drop shadows, no box-shadows, no text-shadows. Contrast between the type and the photograph is bought with the vignette (see Imagery), not with a shadow.
- **Vignette:** a single overlay on the hero — radial, from `transparent` at 45% of the radius to `rgba(20, 13, 8, 0.45)` at the corners, plus a linear top-down `rgba(20, 13, 8, 0.35) → transparent` over the first 220px to seat the nav. Nothing heavier.
##### 7. Imagery
One image. There are no icons, no logos beyond the wordmark, no illustrations.
**Hero background — 3:2, full-bleed, 1440×960, `object-fit: cover`, focal point centre-bottom.**
A night meadow, shot at blue hour with a long exposure feel. The top two thirds are open sky in deep teal-blue with faint scattered stars — visible but not graphic, no constellation shapes, no lens flares. The bottom third is a dense band of wildflowers lit warm from within the frame. Three figures sit at small desks set directly in the flowers, backs to the camera, each in front of a small screen that emits pale yellow light; the centre figure is closest and largest, the outer two are smaller and further back, creating depth. The warm screen light is the only light source below the horizon — it rims the figures' shoulders and picks out the flower heads nearest each desk, falling off to near-black between them.
Treatment: cinematic and soft. Low micro-contrast in the sky, gentle bloom around the light sources, fine film grain across the whole frame, slight lens softening at the edges. Colour graded cool overall with the warm sources left saturated — the tension between #1A3A54 and #FDFC8B is the entire image. Not a crisp product photo, not HDR, no clarity slider.
Composition constraint: the horizon and the figures' heads must fall below 62% of the frame height so the copy block at 320–568px sits entirely against open sky. If the supplied image does not allow this, shift the `object-position` up rather than moving the copy down.
##### 8. Motion
Restrained by intent. Two gestures total: one entrance on load, one slow scroll link. Nothing bounces, nothing springs, nothing pins.
###### Section 1 — Top nav
- **kind:** entrance (on load), then static; scrolls away with the page (not sticky, not fixed) (inferred)
- **what moves:** the wordmark, the link group as one unit, the CTA pill
- **from → to:** opacity 0 → 1; translateY -8px → 0
- **range:** fires once on page load, immediately, before the hero copy. Duration 500–700ms (inferred), ease-out. Stagger 60–80ms across the three zones, left to right (inferred).
- **reduced motion:** all three appear at opacity 1, translateY 0, no transition.
###### Section 2 — Hero
Two independent behaviours on the same section.
**2a — copy entrance**
- **kind:** entrance — plays once on arrival, does not reverse
- **what moves:** headline, paragraph, primary button
- **from → to:** opacity 0 → 1; translateY 24px → 0. The headline additionally goes `filter: blur(6px) → blur(0)` (inferred) — this is what makes it read as emerging from the photograph rather than sliding onto it.
- **range:** fires once on page load, 150–250ms after the nav begins (inferred). Duration 900–1100ms per element (inferred), long ease-out — slow start of deceleration, very long tail. Stagger 120–160ms in DOM order: headline → paragraph → button.
- **reduced motion:** all three render at opacity 1, translateY 0, blur 0, no transition.
**2b — background parallax and copy fade-out**
- **kind:** scroll-linked — a direct function of scroll position, fully reversible on the way back up
- **what moves:** the hero background image; separately, the copy block as one unit
- **from → to:** background `translateY: 0 → -120px` and `scale: 1.06 → 1.10` (the image starts at 1.06 so the translate never exposes an edge). Copy block `opacity: 1 → 0` and `translateY: 0 → -40px`.
- **range:** from scroll position 0 until the hero's bottom edge reaches the top of the viewport (0 → 960px of scroll). The copy fade runs on a shorter window inside that — 0 → 60% of the hero's scroll (0 → 576px) — so the text is gone before the photograph is.
- **reduced motion:** no parallax, no fade. The image holds `scale: 1.06, translateY: 0` and the copy stays at opacity 1 for the whole scroll.
###### Section 3 — Continuation sentinel
- **kind:** static
- **what moves:** nothing
- **from → to:** n/a
- **range:** n/a
- **reduced motion:** identical — it is already static.
###### Interaction transitions
Separate from the scroll choreography above. All are state changes on input, not scroll.
- **Nav link hover:** opacity 62% → 100%, 160ms ease-out. No underline, no colour shift, no movement.
- **Nav link active state:** held at 100% opacity permanently; it is not a hover state and has no indicator dot or underline.
- **Pill button hover (both):** border opacity 0.22 → 0.40, fill `rgba(26,58,84,0.35) → rgba(26,58,84,0.50)`, and a radial #FDFC8B glow fading in behind the pill at 0 → 12% opacity, 90px radius. 200ms ease-out. No scale, no lift.
- **Pill button press:** fill darkens toward `rgba(20,13,8,0.45)`, scale 1 → 0.985, 90ms. Releases over 140ms.
- **Focus-visible:** 2px ivory `#F3EFE4` outline at 60% opacity, 3px offset, square-cornered against the pill. Never tinted with the accent.
- **Wordmark hover:** no change.
##### 9. Responsive
Below 640px (design at 390px wide):
- **Hero height:** `100svh`, not `100vh`, so mobile browser chrome does not clip the composition. Minimum 640px.
- **Nav:** gutters drop 40px → 20px, padding-top 28px → 20px. The centred link group is **dropped** and replaced with a text menu trigger ("Menu", 14px grotesk) on the right. The nav CTA pill is **dropped** on mobile — the hero button is the only call to action. Layout becomes wordmark left, menu trigger right.
- **Copy block:** top of headline moves from 33% to **26%** of hero height (~180px at 700px). Max-width 100% minus 24px gutters.
- **Headline:** 64px → **41px** (2.4× body), line-height 1.12 → 1.18, wraps to three lines. The bold/regular weight mix survives — do not flatten it to one weight.
- **Paragraph:** stays 17px, line-height 1.55, max-width 88vw, wraps to 4 lines. Gap headline → paragraph 28px → 20px; paragraph → button 36px → 28px.
- **Button:** 190×60 → 100% width capped at 260px, height 56px, label stays 16px.
- **Image:** `object-position` shifts to 55% vertical so the centre figure and the flower band stay in frame as the aspect narrows toward portrait. The two outer figures will crop out; that is correct.
- **Motion:** the entrance stagger tightens to 80–100ms. The scroll-linked parallax range shrinks to `translateY: 0 → -60px` — keep it, do not disable it.
- **Vignette:** top linear gradient extends from 220px → 160px; radial vignette unchanged.
##### 10. Don'ts
- **Don't build the mat.** No rounded outer container, no coloured sheet behind the page, no inset shadow, no blurred duplicate of the hero image around the edges. The page is full-bleed and its corners are square.
- **Don't darken the photograph with a flat overlay.** The instinct is `rgba(0,0,0,0.5)` under the text — it kills the image and turns teal-blue into grey. Use the specified radial vignette at 45% maximum and nothing else. If the headline still lacks contrast, move the copy up, don't dim the picture.
- **Don't centre the copy block vertically.** It sits at 33% from the top. Vertically centring it drops the text onto the figures' heads and destroys the 392px of clean photograph at the bottom, which is the whole composition.
- **Don't set the headline in a geometric sans or a slab.** It is a high-contrast transitional serif. Also don't reach for a script or a display slab — the contrast between an engraved serif headline and a plain grotesk paragraph is the typographic idea.
- **Don't letterspace the serif headline.** No `letter-spacing: 0.05em`, no small caps, no uppercase. It is sentence case, tight (-0.01em).
- **Don't colour the emphasised words.** The middle phrase differs by weight only — same ivory, same size, same baseline. Making it yellow or gradient-filled breaks the accent rule.
- **Don't let the accent yellow out of the photograph.** No yellow buttons, no yellow links, no yellow focus ring, no yellow underline, no yellow eyebrow label. Its only life outside the image is a ≤12% glow on button hover.
- **Don't use pure black or pure white.** Text is #F3EFE4, the darkest value is #140D08. `#000` and `#fff` will both look wrong against the graded image.
- **Don't make the nav sticky with a blurred bar.** It scrolls away with the page. A frosted sticky header that appears on scroll-up is the default move here and it is wrong for a one-section hero.
- **Don't add a scroll indicator.** No bouncing chevron, no "scroll" label, no animated mouse outline in the bottom centre — that area is reserved for the photograph.
- **Don't animate the stars.** No twinkle, no particle canvas, no CSS keyframe sparkle. The sky is a still photograph.
- **Don't parallax the copy against the image in opposite directions.** Both move up; the copy simply moves faster and fades out first.
- **Don't add shadows to the buttons.** They are glass on an image. A drop shadow makes them look pasted on.
- **Don't constrain the nav to the copy column's max-width.** The nav runs edge to edge at 40px gutters while the copy is capped at 920px — that width difference is deliberate.
- **Don't add a second CTA, a trust bar, a logo strip, or a stat row.** The section is four elements on a photograph. Anything added to fill the lower 40% is a regression.
### Imagery — already generated
These pictures were made for this design and are hosted at the URLs below.
Use them as the `src` exactly as written, and keep the alt text. Do not
generate your own, do not reach for a stock library or a placeholder
service, and do not feed the Imagery section above back to an image model —
that work is done. Size and crop them with CSS (`object-fit: cover`) rather
than assuming their dimensions, and download them into the project if you
would rather not hotlink.
- https://ai-taste-vault.vercel.app/v/demo/cinematic-night-sky-landing-hero/images/01-hero-night-meadow.webp — Three people sitting at small desks in a night meadow of wildflowers, lit only by the pale yellow glow of their screens, under a deep teal star-scattered sky
### Image prompts
What each picture above was generated from, for anyone changing one.
**Three people sitting at small desks in a night meadow of wildflowers, lit only by the pale yellow glow of their screens, under a deep teal star-scattered sky** (`01-hero-night-meadow`)
MEDIUM AND FINISH: A soft cinematic digital render — photoreal in its subject but matte and painterly in finish, with low micro-contrast, gentle bloom haloing every light source, fine even grain across the whole frame and a slight optical softening toward the edges; it is a rendered scene, not a captured photograph, so no crisp specular detail, no HDR clarity, no lens artefacts. COLOUR AND VALUE: The frame holds only two value zones. The upper two thirds sit in a narrow dark band of cool teal-blue between #16334B and #1E4661 — nothing in the sky is lighter than #2A5A78 except pinprick stars, and nothing in the sky is warm. The lower third carries every bright value: screen faces at pale warm yellow #FDFC8B, their bloom falling off through muted gold #D4C659 into amber flower heads around #C98B3A, with the deepest shadows between the desks and along the ground at warm near-black #140D08. Nothing anywhere is pure black or pure white; the transition from sky to lit flower band happens in a soft horizontal haze, not a hard line. EDGES: Placed full-bleed, so all four edges are picture. The top edge is a flat, even deep teal #1A3A54 with no brightening and no banding, because overlaid type sits on it; the bottom 6% falls to near-black warm brown #140D08; the left and right edges fall off gently darker with a natural falloff, never a hard ring of black vignette. SUBJECT: A night meadow at blue hour. The bottom third is a dense band of wildflowers running edge to edge — small round gold, amber and rust heads on dark green stems. Set directly among the flowers, backs to camera, three figures sit at small desks: the centre one nearest and largest, roughly centred, in a pale shirt the screen light turns warm; two smaller figures further back at left and right, establishing depth. Each faces a small glowing screen that is the only light source below the horizon, rimming shoulders and hair and picking out the flower heads nearest each desk before falling to near-black between them. Tall stacks of books rise beside each desk, page edges catching the same warm light. Above it all, open sky with faint scattered stars, visible but not graphic. COMPOSITION: The horizon, the figures' heads and the tallest book stack must all fall below 62% of the frame height. The band between 30% and 60% of the height is open, quiet, almost featureless sky — a headline sits there — so keep stars sparse and tiny in that band with no bright star, no cluster, no recognisable shape. AVOID: no moon, no milky way, no constellations or star trails, no lens flare or starburst, no shallow depth of field or bokeh balls, no fireflies or floating particles, no dramatic clouds, no aurora, no city glow on the horizon, no saturated travel-photo blues or greens, no crunchy HDR micro-contrast, no crushed black vignette, no visible faces (every figure is seen from behind), and no imagery or text on the screens — they are featureless panels of pale light. Output a wide 3:2 landscape frame, 1536x1024. No text, no lettering, no logos, no watermarks, no UI.
---
## ADLN — Earth-tone skincare hero
- Page: https://ai-taste-vault.vercel.app/r/adln-earth-tone-skincare-hero
- Original: https://br.pinterest.com/pin/792563234470876255/
- Type: Landing page
- Tags: Earth tones, E-commerce, Feature grid, Full bleed, Hero, Luxury, Nav bar, Organic, Restrained motion
- Palette: #65492B, #040202, #B4967B, #A96439, #E3CDB7
- Captured: 2026-09-17
- Rebuilt with: Claude Code · Opus 5.5 · Extra high · skills: frontend-design, emil-design-eng, transitions-dev, humanizer, gsap
- Rebuild: https://ai-taste-vault.vercel.app/v/demo/adln-earth-tone-skincare-hero/index.html
### Prompt — Rebuild
_rebuild · html-css · opus_
#### Earth-tone skincare landing page
A warm, monochrome-brown e-commerce landing page. One full-bleed beauty portrait fills the first viewport, cream serif type sits over its left third, and a row of four translucent "quick entry" cards floats across the bottom of the hero. Everything below continues in the same earth palette with generous white space and very restrained motion.
**No motion report was supplied with this reference, and only the first viewport was captured.** Every measurement below is read off the still at 1200×800 image px mapped to a 1440 CSS px layout (1 CSS px ≈ 0.83 image px) and is marked **(inferred)**. Sections 4–9 are not in the capture at all; they are specified as a consistent continuation of the same system and are marked **(inferred — beyond the capture)**. Build them; the page is judged at scroll positions, not just the top.
---
##### Structure
Reference viewport: **1440 × 960** (inferred). Container: full-bleed page, content constrained to **1320px** with **60px** left/right gutters at 1440 (max-width 1320, centred above 1440). There is no narrower inner "reading" container in the hero — the wordmark, headline and card row all hang off the same 60px left gutter.
1. **Nav bar** — fixed overlay on the hero, 104px tall, transparent at rest. Left: wordmark lockup (4-letter uppercase mark + tiny uppercase sub-label beneath). Right: three line icons (search, bag, menu), 26px box, 1.5px stroke, 48px apart. No text links.
2. **Hero** — 960px (100vh), full-bleed photograph, square corners, bleeding edge to edge and top to bottom behind the nav. Text block on the left: eyebrow-less, headline → subhead → one solid button.
3. **Quick-entry card row** — 4 equal cards on a 4-column grid, absolutely positioned inside the hero, `bottom: 44px`, spanning the full 1320px container. Each card 318 × 210px, 16px gaps. This row belongs to the hero layer; the photo continues behind and below it.
4. **Statement band** — (inferred — beyond the capture) 520px, solid cream sheet, one centred serif sentence, max 20ch, plus a 13px uppercase eyebrow above it.
5. **Product grid** — (inferred — beyond the capture) 1080px, 3 columns × 2 rows, 4:5 product images, title / one-line descriptor / price under each.
6. **Editorial split** — (inferred — beyond the capture) 900px, 2 columns (7/5 split): 4:5 image left, a numbered 3-step ritual list right.
7. **Full-bleed quote** — (inferred — beyond the capture) 720px, dark photographic band with a centred pull quote, max 24ch.
8. **Testimonials** — (inferred — beyond the capture) 640px, 3 columns of short quotes on the cream sheet.
9. **Newsletter + footer** — (inferred — beyond the capture) 560px, dark brown, email field + 4 link columns + a bottom meta line.
---
##### Scroll map
All values (inferred). Nothing pins; nothing stacks. Scroll consumed equals section height everywhere.
| # | Section | Height | Viewports | Scroll consumed | Kind |
|---|---------|--------|-----------|-----------------|------|
| 1 | Nav bar | 104px (fixed overlay) | — | 0 | scroll-linked (background only) |
| 2 | Hero | 960px | 1.00 | 960px | entrance on load + scroll-linked parallax |
| 3 | Card row | 210px (inside hero) | 0.22 | 0 (shares hero scroll) | entrance |
| 4 | Statement band | 520px | 0.54 | 520px | entrance |
| 5 | Product grid | 1080px | 1.13 | 1080px | entrance |
| 6 | Editorial split | 900px | 0.94 | 900px | entrance + scroll-linked image |
| 7 | Full-bleed quote | 720px | 0.75 | 720px | scroll-linked |
| 8 | Testimonials | 640px | 0.67 | 640px | entrance |
| 9 | Newsletter + footer | 560px | 0.58 | 560px | static |
**Total page height: 5380px ≈ 5.6 viewports.**
---
##### Spacing
- Page gutters: 60px each side at 1440. Below 1200: 40px. Below 640: 24px.
- Nav: 40px padding-top, wordmark lockup and icon row optically centred on the same 104px band; sub-label sits 10px under the wordmark baseline.
- Hero text block: top edge 254px from the top of the viewport (so it reads slightly above centre, not centred). Internal rhythm — headline → **32px** → subhead → **40px** → button.
- Button: 288 × 58px, 40px horizontal padding, label optically centred.
- Button bottom → card row top: **99px**.
- Card row → viewport bottom: **44px**. Card grid gap: **16px**.
- Card internals: left thumbnail occupies 55% of card width and the full 210px height, flush to the card's left/top/bottom edges; text column gets 20px padding on all sides; title → **6px** → two-line descriptor.
- Section rhythm below the hero (inferred): **120px** top and bottom padding on cream sections (4, 5, 8), **0** on full-bleed bands (7) which use 160px internal padding, **96px** on the footer. Grid row gap in section 5: 64px; column gap 32px.
---
##### Type
Two families only.
- **Display / headlines:** serif display — transitional, moderate stroke contrast, sharp bracketed serifs, round generous bowls, single weight. Free stand-in: **Instrument Serif** (400). Alternatives: EB Garamond 400, or Fraunces at `opsz 96, SOFT 0, WONK 0`.
- **Everything else:** neutral grotesk, slightly humanist, tabular-friendly. Free stand-in: **Inter** (300/400/500/600).
**Body anchor: 17px at 1440.** Every other level below is a ratio of it.
| Role | Ratio | Size / line-height | Tracking | Weight | Family |
|---|---|---|---|---|---|
| Hero headline (5–7 words, 2 lines) | 5.2× | 88px / 0.95 (84px) | −0.015em | 400 | serif |
| Hero subhead (2 lines, ~34ch) | 1.25× | 21px / 1.6 | 0 | 400 | grotesk |
| Wordmark (4 uppercase letters) | 1.9× | 32px / 1.0 | +0.16em | 300 | grotesk |
| Wordmark sub-label (2 words, uppercase) | 0.7× | 12px / 1.0 | +0.22em | 400 | grotesk |
| Button label (uppercase, 2 words) | 0.88× | 15px / 1.0 | +0.14em | 500 | grotesk |
| Card title (1 word, uppercase) | 1.05× | 18px / 1.2 | +0.06em | 600 | grotesk |
| Card descriptor (2 lines) | 0.88× | 15px / 1.5 | 0 | 400 | grotesk |
| Section eyebrow (2–3 words, uppercase) | 0.75× | 13px / 1.0 | +0.20em | 500 | grotesk |
| Section headline (4–6 words) | 2.6× | 44px / 1.1 | −0.01em | 400 | serif |
| Statement sentence (§4, ~18ch) | 2.1× | 36px / 1.25 | −0.01em | 400 | serif |
| Running body | 1.0× | 17px / 1.65 | 0 | 400 | grotesk |
| Product title | 1.15× | 20px / 1.3 | 0 | 400 | serif |
| Price / meta | 0.94× | 16px / 1.4 | +0.02em | 500 | grotesk |
| Pull quote (§7, ~24ch) | 2.1× | 36px / 1.3 | −0.005em | 400 | serif |
| Footer link | 0.94× | 16px / 1.9 | 0 | 400 | grotesk |
| Footer meta / legal | 0.76× | 13px / 1.5 | +0.04em | 400 | grotesk |
Max line length: hero headline **16ch** (hard-break it onto two lines, do not let it reflow into three at 1440); hero subhead **max-width 380px** (~34ch, two lines); running body **62ch / 620px**; card descriptor **14ch** so it wraps to exactly two lines; pull quote **24ch**.
Never go below 12px (labels/meta) or 14px (nav, buttons).
---
##### Colour
The page is a single warm brown family. Nothing is neutral grey, nothing is pure white, nothing is pure black.
| Hex | Role |
|---|---|
| `#65492B` | **Dominant surface.** The photographic backdrop tone and the base of every dark band (§7, §9). Reads as the page's "background" even though most of it is photograph. |
| `#B4967B` | Second-largest area: the lighter half of the hero backdrop gradient and the mid-tone of the skin/light falloff. Also the resting colour of dividers and disabled states. |
| `#E3CDB7` | **Cream.** All type over the photograph, the fill of the quick-entry cards and the button, and the sheet colour of sections 4, 5 and 8. |
| `#A96439` | **The single accent** — a warmer, more saturated clay. Allowed only on: the price figure, the numbered step markers in §6, the active nav/underline state, focus rings, and the newsletter submit button. Never as a large fill, never behind type, never more than ~2% of any viewport. |
| `#040202` | Near-black, present only inside the photography (hair, shadow cores). Use it for text **only** inside the cream cards and cream sections, mixed up to `#3A2A1B` — never as flat `#000`. |
Derived tokens: card fill `rgba(227,205,183,0.85)` with `backdrop-filter: blur(14px)`; card title text `#3A2A1B`, card descriptor `#65492B`; button fill `rgba(227,205,183,0.92)`, button label `#3A2A1B`; hero headline `#F2E6D8` (cream lifted for legibility), hero subhead `#E3CDB7`. Hero legibility scrim: `linear-gradient(90deg, rgba(20,12,6,0.50) 0%, rgba(20,12,6,0.18) 38%, transparent 58%)` over the photo — it must stay invisible as a shape.
---
##### Surface
- **Borders:** effectively none. The only hairline is `1px solid rgba(242,230,216,0.18)` on the quick-entry cards, present just to hold their edge against the photo. No borders on the button, no dividers in the hero. Below the hero, section dividers are `1px solid rgba(101,73,43,0.14)` and used sparingly.
- **Radii:** cards **12px**; button **8px**; product images and editorial images **8px**; input fields **8px**; icons unrounded. The hero photo itself has **square corners and bleeds** — no rounding anywhere on a full-bleed element.
- **Shadows:** none. Depth comes entirely from the backdrop blur and the photograph's own falloff. If you must separate the card row from a busy part of the photo, deepen the scrim, don't add a box-shadow.
---
##### Imagery
All photography is shot on the same warm seamless backdrop under one soft directional key from the upper right, so the whole library shares the `#65492B → #B4967B` gradient. Warm highlights, deep but coloured shadows, visible skin and material texture. No cool tones, no clinical white, no cut-outs on white.
1. **Hero portrait** (§2) — a close three-quarter/profile portrait of a person, eyes closed, chin lifted, wet dark hair swept back, skin glossy with visible sheen along cheekbone, nose bridge and collarbone. Framed so the face occupies the right two-thirds and the empty lit backdrop fills the left third, leaving a clean area for type. Aspect **3:2**, `object-fit: cover`, `object-position: 62% center` so the face stays intact as the viewport narrows. Bleeds full width, full height of the hero.
2. **Card thumbnail — Shop** (§3) — a pump bottle in cream-coloured glass standing against rough, pale stone. Aspect roughly **4:5**, cropped to fill the card's left 55%.
3. **Card thumbnail — Routine** (§3) — extreme macro of a thick white cream swatch smeared once across the brown backdrop, showing the ridge and drag marks. Same crop.
4. **Card thumbnail — Journal** (§3) — a flat-lay from above: a folded paper card, a small shallow ceramic dish, and a slim pen laid diagonally. Same crop.
5. **Card thumbnail — Profile** (§3) — the neck and shoulder of an unglazed matte ceramic vessel, lit so the curve reads as a single soft gradient. Same crop.
6. **Product shots** (§5, inferred) — six bottles and jars, each standing alone, one per frame, same backdrop and key light, **4:5**, product occupying ~60% of frame height.
7. **Editorial image** (§6, inferred) — hands applying product, cropped tight, **4:5**, sits in the left column.
8. **Quote band image** (§7, inferred) — a darker, more shadowed frame of the same portrait session, **16:6**, full bleed, darkened to ~35% luminance behind the quote.
---
##### Motion
Restrained is the brief: nothing bounces, nothing slides more than 32px, nothing spins. All values below are **(inferred)** — no live measurement was available. Durations and easings are given as ranges where the exact value cannot be known.
###### 1 — Nav bar
- **kind** — scroll-linked (background only); the content is static.
- **what moves** — nav background plate and its bottom hairline.
- **from → to** — background `transparent` → `rgba(101,73,43,0.80)` with `backdrop-filter: blur(12px)`; hairline opacity 0 → 1. Wordmark, sub-label and icons do not move, resize, or change colour.
- **range** — from scroll 0 to scroll 120px; reverses on the way back up.
- **reduced motion** — same, but switch at 120px with no transition.
###### 2 — Hero
- **kind** — entrance on load, then scroll-linked parallax.
- **what moves** — (a) headline lines, subhead, button on load; (b) the photograph on scroll.
- **from → to** — entrance: each element `opacity 0 → 1`, `translateY 24px → 0`. Parallax: photo `translateY 0 → −80px` and `scale 1.0 → 1.04` while the hero scrolls out.
- **range** — entrance fires once, on load, after fonts resolve; duration 700–900ms, easing `cubic-bezier(0.22, 1, 0.36, 1)`, stagger 90ms in order headline line 1 → headline line 2 → subhead → button. Parallax is scroll-linked from scroll 0 until the hero's bottom reaches the top of the viewport, and reverses on the way back up.
- **reduced motion** — no entrance translate, elements render at final position with a 200ms opacity fade; parallax disabled, photo fixed.
###### 3 — Card row
- **kind** — entrance, once.
- **what moves** — the four cards as units (thumbnail and text move together).
- **from → to** — `opacity 0 → 1`, `translateY 32px → 0`. No scale, no blur reveal.
- **range** — fires once, on load, beginning 400ms after the hero entrance starts; duration 600–800ms, easing `cubic-bezier(0.22, 1, 0.36, 1)`, stagger 80ms left to right.
- **reduced motion** — opacity only, 200ms, no stagger.
###### 4 — Statement band *(inferred — beyond the capture)*
- **kind** — entrance, once.
- **what moves** — eyebrow, then the serif sentence.
- **from → to** — `opacity 0 → 1`, `translateY 20px → 0`.
- **range** — once, when the section's top reaches 80% of the viewport; duration 600ms, easing `cubic-bezier(0.22, 1, 0.36, 1)`, stagger 120ms (eyebrow first).
- **reduced motion** — opacity only, 200ms.
###### 5 — Product grid *(inferred — beyond the capture)*
- **kind** — entrance, once, per card.
- **what moves** — each product cell (image + its text block as one unit).
- **from → to** — `opacity 0 → 1`, `translateY 28px → 0`.
- **range** — each cell fires once when its own top reaches 85% of the viewport; duration 600ms, easing `cubic-bezier(0.22, 1, 0.36, 1)`, stagger 70ms across a row, rows independent.
- **reduced motion** — opacity only, 200ms, no stagger.
###### 6 — Editorial split *(inferred — beyond the capture)*
- **kind** — entrance (text) + scroll-linked (image).
- **what moves** — the left image inside its 8px-radius frame; the three numbered steps on the right.
- **from → to** — image `translateY +40px → −40px` inside an `overflow: hidden` frame (the frame itself does not move). Steps `opacity 0 → 1`, `translateY 20px → 0`.
- **range** — image is scroll-linked from the section's top entering the viewport until its bottom leaves, and reverses upward. Steps fire once, when each step's top reaches 85% of the viewport; duration 500ms, stagger 100ms.
- **reduced motion** — image static and centred; steps fade only.
###### 7 — Full-bleed quote *(inferred — beyond the capture)*
- **kind** — scroll-linked.
- **what moves** — the background photograph and the quote's opacity.
- **from → to** — photo `scale 1.06 → 1.0`; quote `opacity 0.15 → 1` reaching full opacity when the section is centred, then holding.
- **range** — from the section's top entering the viewport until the section is centred in the viewport; reverses on the way back up. The section never pins.
- **reduced motion** — photo fixed at `scale 1.0`, quote at full opacity.
###### 8 — Testimonials *(inferred — beyond the capture)*
- **kind** — entrance, once.
- **what moves** — the three quote blocks.
- **from → to** — `opacity 0 → 1`, `translateY 24px → 0`.
- **range** — once, when the section's top reaches 80% of the viewport; duration 600ms, stagger 90ms left to right.
- **reduced motion** — opacity only, 200ms.
###### 9 — Newsletter + footer *(inferred — beyond the capture)*
- **kind** — static. Nothing animates on scroll or on arrival; the footer is simply there when you reach it.
- **reduced motion** — unchanged.
###### Interaction transitions (not part of the scroll choreography)
- **Quick-entry card hover** — thumbnail `scale 1.0 → 1.03` inside its clip; card fill `0.85 → 0.93` alpha. 240ms, `ease-out`. The card itself does not lift or translate.
- **Quick-entry card press** — card `scale 1.0 → 0.995`, 90ms.
- **Button hover** — fill `rgba(227,205,183,0.92) → #E3CDB7`, label stays `#3A2A1B`. 200ms `ease-out`. No shadow, no growth, no arrow slide.
- **Button press** — `scale 0.99`, 80ms.
- **Nav icon hover** — stroke `#E3CDB7 → #FFFFFF` at 0.9 alpha, 160ms. No rotation, no background circle.
- **Product card hover** — image crossfades to a second frame over 300ms; price shifts to `#A96439`.
- **Menu open/close** — full-height right panel, 420px wide, slides `translateX 100% → 0` over 380ms `cubic-bezier(0.22, 1, 0.36, 1)`; scrim `rgba(4,2,2,0)` → `rgba(4,2,2,0.5)`. Close reverses at 280ms.
- **Focus-visible** — 2px `#A96439` outline at 3px offset, no animation.
---
##### Responsive
- **1200–1440**: gutters 40px, hero headline scales to 72px, card row stays four across with 12px gaps.
- **900–1200**: card row becomes 2 × 2, still absolutely positioned but the hero grows to `min-height: 1040px` to hold it; headline 60px.
- **640–900**: hero text block full width under the nav; card row leaves the hero and becomes a normal 2 × 2 block on the cream sheet below it; product grid to 2 columns; editorial split stacks image over text.
- **Below 640**:
- Container gutters 24px. Hero becomes `100svh`, minimum 620px.
- Headline drops to **40px** (2.35× a 17px body) / 1.05, hard-broken to three lines. Subhead 18px / 1.55, full width.
- Button goes full width (max 340px), height 54px, label stays 15px.
- Card row: **horizontal scroll strip**, one-and-a-bit cards visible, each 240 × 180px, 12px gaps, 24px scroll padding, snap to start. Do not stack them vertically — four stacked cards destroy the hero.
- Nav: wordmark + hamburger only; the search and bag icons move into the menu panel.
- Product grid 1 column; editorial steps become a plain numbered list; testimonials become a 1-column stack (drop the third).
- Section padding 120px → 72px. Statement sentence 28px.
- Parallax (§2, §6) and the §7 scale are disabled on touch; keep only the fades.
---
##### Don'ts
- **Don't centre the hero text.** It hangs off the 60px left gutter, top at 254px, with the face occupying the right two-thirds. A centred headline over a face is a different, worse design.
- **Don't set the headline in a grotesk.** The whole tension of the page is serif display over photography against grotesk UI. And don't reach for Playfair Display — it is too high-contrast and too ubiquitous; use Instrument Serif or EB Garamond.
- **Don't let the headline line-height exceed 1.0.** It is set tight at 0.95; loosening it to a default 1.2 immediately makes the page look like a template.
- **Don't add a dark overlay across the whole photo.** The scrim is a left-to-right gradient that dies by 58% width. A flat `rgba(0,0,0,0.4)` over everything kills the skin luminance the design is built on.
- **Don't use grey or pure white anywhere.** No `#FFF` text, no `#F5F5F5` sections, no grey borders. Every neutral is warmed toward `#E3CDB7` or `#65492B`.
- **Don't put shadows on the cards.** They sit on a photograph and rely on backdrop blur plus a 0.18-alpha cream hairline. A drop shadow reads as a Material card pasted on top.
- **Don't make the cards opaque.** The photo must be faintly visible through them; that translucency is the single most characteristic detail of the hero.
- **Don't stack the card thumbnail above the card text.** The image is on the left, edge-to-edge in the card, at 55% width, with text right. Vertical card layouts change the whole rhythm of the row.
- **Don't add text nav links.** The nav is a wordmark lockup and three icons. Adding "Shop / About / Contact" fills the space the design deliberately leaves empty.
- **Don't round the hero photo's corners or inset it.** It bleeds to all four edges and behind the nav.
- **Don't animate on every scroll.** Sections 4, 5 and 8 play once and stay; only the hero photo, §6's image and §7 are scroll-linked. Re-triggering entrances on scroll-up makes a "restrained motion" page feel twitchy.
- **Don't exceed 32px of travel on any entrance,** and never use spring/bounce easing. The easing is a single decelerating curve everywhere.
- **Don't spread the accent `#A96439` around.** It is a price, a step number, a focus ring and a submit button. The moment it becomes a section background or a large button fill, the palette collapses into generic "autumn".
- **Don't let the subhead run wider than 380px.** Two lines is the design; three or one both break the block's proportion against the button below it.
- **Don't add a scroll-progress bar, a cursor follower, or a marquee of logos.** None of them belong to this system.
### Imagery — already generated
These pictures were made for this design and are hosted at the URLs below.
Use them as the `src` exactly as written, and keep the alt text. Do not
generate your own, do not reach for a stock library or a placeholder
service, and do not feed the Imagery section above back to an image model —
that work is done. Size and crop them with CSS (`object-fit: cover`) rather
than assuming their dimensions, and download them into the project if you
would rather not hotlink.
- https://ai-taste-vault.vercel.app/v/demo/adln-earth-tone-skincare-hero/images/01-hero-portrait.webp — Close profile portrait of a woman with wet dark hair swept back and glossy skin, lit against a warm brown seamless backdrop
- https://ai-taste-vault.vercel.app/v/demo/adln-earth-tone-skincare-hero/images/02-card-thumbnails-sheet.webp — Four warm-toned skincare still lifes: a cream pump bottle on stone, a thick cream swatch, a paper-and-pen flat lay, and a matte ceramic vessel
- https://ai-taste-vault.vercel.app/v/demo/adln-earth-tone-skincare-hero/images/03-product-shots-sheet.webp — Six skincare bottles and jars photographed separately on the same warm brown backdrop
- https://ai-taste-vault.vercel.app/v/demo/adln-earth-tone-skincare-hero/images/04-editorial-hands.webp — Close crop of hands smoothing cream onto skin, warm brown light
### Image prompts
What each picture above was generated from, for anyone changing one.
**Close profile portrait of a woman with wet dark hair swept back and glossy skin, lit against a warm brown seamless backdrop** (`01-hero-portrait`)
MEDIUM AND FINISH: A real glossy editorial beauty photograph, medium-format digital, shot in a studio on a seamless paper backdrop — genuine specular highlights on skin, visible pores and fine skin texture, a trace of natural grain, deep focus so the whole face stays sharp; retouched like a magazine beauty page, not smoothed to plastic. COLOUR AND VALUE: The entire frame is one warm brown family, no greys, no cool tones, no true white. The seamless backdrop is warmest and lightest along the upper left at about #9C7E59, falling gently and evenly to #6E5535 at the right edge and #5A4429 at the bottom; skin mid-tones sit around #B98A63 with warm shadow sides no darker than #6A4830, lips around #C08A6E. The only genuinely dark values in the frame are the wet hair and its shadow core, reaching #120C08, and they are confined to the hair mass. The lightest values are the specular sheen on the cheekbone, nose bridge, lower lip, jaw and collarbone, peaking near #F5E2C6 — nothing in the frame is whiter than that. One large soft source sits in front of and slightly above the subject, catching the whole profile edge; no second light, no rim light behind, no coloured gels. EDGES: The image is used full-bleed, filling an entire browser viewport, square corners, no border and no rounding. The backdrop must run flat and even to all four edges with no vignette, no darkened corners and no visible falloff at the frame border, because page type and icons sit over the top and left of it. The top of the head is cropped off by the upper edge and one bare shoulder enters the bottom right corner. SUBJECT: A close three-quarter-to-profile beauty portrait of a woman facing right, eyes closed, chin lifted slightly, jaw and neck extended, expression calm and still. Her dark hair is wet and slicked straight back from the forehead, with a few defined wet strands falling along the cheek and down the neck. Her skin is glossy with a thin film of moisture or serum — luminous sheen along the forehead, cheekbone, nose, lips, chin, throat and collarbone — bare skin, no makeup graphics, no jewellery, no clothing visible beyond the top of a bare shoulder. COMPOSITION: The head is large in the frame and sits to the right: the face and hair occupy the right two-thirds, and the left third of the frame is nothing but empty, evenly lit backdrop — that area must stay completely quiet and free of hair, shoulder or shadow because a large headline is set over it. The bottom strip of the frame must also stay uncluttered. AVOID: no black vignette, no dark overlay, no dramatic chiaroscuro, no hard side rim light, no glitter, shimmer particles, water droplets in mid-air or splashes, no jewellery, earrings, nails or hands in frame, no clinical white or grey studio backdrop, no cool or pink skin rendering, no HDR clarity halos, no shallow-focus blur across the face, no second person, no text, no lettering, no logos, no watermarks, no UI. Output a wide 3:2 landscape frame, 1536x1024. No text, no lettering, no logos, no watermarks, no UI.
**Four warm-toned skincare still lifes: a cream pump bottle on stone, a thick cream swatch, a paper-and-pen flat lay, and a matte ceramic vessel** (`02-card-thumbnails-sheet`)
MEDIUM AND FINISH: Four separate still-life product photographs arranged as one clean 2x2 contact sheet, each shot on the same warm seamless paper backdrop under the same single soft source from above and slightly right — matte, tactile, real surface texture on stone, cream, paper and unglazed ceramic, gentle soft-edged shadows, no gloss beyond the natural sheen of glass. COLOUR AND VALUE: One warm brown family throughout, identical grade in all four cells. Backdrop between #6E5233 and #8A6A46; the pale objects are warm off-whites and creams between #E6DCCB and #F2EDE4; stone about #C9B49A, kraft paper about #D9C3A6, brass pen about #C0A070. Nothing in the frame is darker than #4A3520 — there are no blacks, no deep shadow cores and no hard shadow edges anywhere. The overall sheet sits in a light, warm, mid-to-high band; keep contrast gentle. EDGES: The sheet is sliced into four equal quadrants and each quadrant is used as a small thumbnail inside a card, so the four cells must be a strict 2x2 with no gutters, no white margins, no borders, no frames and no drop shadows between them; the backdrop runs continuously to all four outer edges. Each object is centred well inside its own quadrant with generous breathing room and never crosses or touches a quadrant boundary. SUBJECT: Top left — a cream-coloured opaque glass pump bottle with a dark pump head standing upright beside rough pale stone fragments. Top right — extreme macro of one thick white cream swatch smeared once across the brown backdrop, showing the raised ridge and drag marks of the stroke. Bottom left — a flat lay seen from directly above: a folded warm paper card, a small shallow ceramic dish, and a slim pen laid on a diagonal. Bottom right — the neck and shoulder of an unglazed matte off-white ceramic vessel, lit so its curve reads as a single soft gradient. COMPOSITION: Each cell is a simple, centred, uncluttered arrangement of one idea, filling roughly sixty percent of its cell height, all four sharing the same camera distance and the same backdrop tone so the sheet reads as one shoot. AVOID: no white or grey studio backdrop, no cut-outs on white, no reflective tabletop, no hard cast shadows, no black, no cool green or blue tints, no water splashes, no flowers, leaves or botanical props, no hands, no grid lines, borders, captions, labels, packaging text, branding, text, lettering, logos, watermarks or UI. Output a square frame, 1024x1024, as a seamless 2x2 grid. No text, no lettering, no logos, no watermarks, no UI.
**Six skincare bottles and jars photographed separately on the same warm brown backdrop** (`03-product-shots-sheet`)
MEDIUM AND FINISH: Six separate product photographs arranged as one clean 3-across by 2-down contact sheet, all shot on the same warm seamless paper backdrop under one soft directional key from the upper right — calm catalogue photography, matte and tactile, real glass and ceramic surfaces, soft-edged shadows falling short and to the lower left, deep focus so each object is sharp front to back. COLOUR AND VALUE: One warm brown family, identical grade in every cell. Backdrop graduating from #8A6A46 down to #65492B; containers in warm off-white, cream, pale sand and warm amber glass between #E3CDB7 and #F2EDE4, with amber pieces around #C08A5A. Nothing in the frame is darker than #4A3520 — no blacks, no deep shadow cores, no glossy black caps. Highlights on glass stay soft and never blow past #F5E7D4. Gentle contrast throughout; the whole sheet sits in a warm mid band. EDGES: The sheet is sliced into six equal cells and each cell is used on its own, so the grid must be strict and even with no gutters, no margins, no borders, no frames and no shadows between cells; the backdrop runs continuously to all four outer edges. Every object is centred in its own cell and never crosses a cell boundary. SUBJECT: Six different skincare containers, one per cell, each standing alone and upright: a tall cylindrical pump bottle, a short wide-mouth cream jar, a slim dropper bottle in amber glass, a squat ceramic jar with a flat lid, a tapered serum bottle, and a small unlabelled tube standing on its cap. All are plain and unbranded with clean unprinted surfaces. COMPOSITION: Each product occupies about sixty percent of its cell height, dead centre, same camera height and same distance in every cell, backdrop tone matched across the sheet so the six read as one shoot. AVOID: no labels, no printed packaging, no brand marks, no white or grey seamless, no cut-outs on white, no reflective mirror tabletop, no hard cast shadows, no black plastic, no cool blue or green tints, no water droplets, no flowers, leaves or botanical props, no hands, no grid lines, borders or captions, no text, no lettering, no logos, no watermarks, no UI. Output a wide 3:2 landscape frame, 1536x1024, as a seamless 3x2 grid. No text, no lettering, no logos, no watermarks, no UI.
**Close crop of hands smoothing cream onto skin, warm brown light** (`04-editorial-hands`)
MEDIUM AND FINISH: A real editorial beauty photograph from the same studio session as the portrait — soft directional key from the upper right, matte skin with visible texture, a trace of grain, natural specular sheen on the cream, sharp through the hands with only the far backdrop falling soft. COLOUR AND VALUE: One warm brown family, no greys and no cool tones. The seamless backdrop behind the hands sits between #8A6A46 and #65492B; skin mid-tones around #B4967B with warm shadow sides no darker than #6A4830; the cream itself is the lightest thing in the frame, a warm off-white peaking near #F2E6D8. Nothing in the frame reaches black — the darkest value anywhere is about #3A2A1B, confined to the crease between the fingers. Contrast stays gentle; no dramatic falloff. EDGES: The image is placed inside a portrait frame with 8px rounded corners and is slowly panned vertically behind that frame, so the composition must stay comfortable when cropped a little from the top or the bottom — keep the important gesture central and leave even backdrop at the top and bottom edges. No vignette, no darkened corners; the backdrop meets all four edges evenly. SUBJECT: A tight crop of two hands, fingertips smoothing a small amount of pale cream across the back of the opposite hand or along a bare forearm, caught mid-gesture — calm, unhurried, a faint sheen where the cream has already spread and a small unblended dab still sitting proud. Bare skin, no jewellery, no watch, no nail polish, no sleeves or clothing in frame. COMPOSITION: Hands fill roughly the middle two-thirds of a vertical frame, backdrop plain and empty around them. AVOID: no face, no product container in frame, no white or grey backdrop, no clinical spa styling, no water splashes, no flowers, leaves or botanical props, no rings, bracelets or manicured painted nails, no black vignette, no heavy shallow-focus bokeh, no HDR clarity, no cool or pink colour grade, no text, no lettering, no logos, no watermarks, no UI. Output a tall 4:5 portrait frame, 1024x1280. No text, no lettering, no logos, no watermarks, no UI.
---
## Skinn — Dark skincare hero
- Page: https://ai-taste-vault.vercel.app/r/skinn-dark-skincare-hero
- Original: https://br.pinterest.com/pin/595882594492171558/
- Type: Landing page
- Tags: Dark mode, E-commerce, Full bleed, Hero, Luxury, Minimal, Nav bar, Restrained motion
- Palette: #160A0C, #471816, #B84B32, #D4835B, #E4BAA7
- Captured: 2026-09-17
- Rebuilt with: Claude Code · Opus 5.5 · Extra high · skills: frontend-design, emil-design-eng, transitions-dev, humanizer, gsap
- Rebuild: https://ai-taste-vault.vercel.app/v/demo/skinn-dark-skincare-hero/index.html
### Prompt — Rebuild
_rebuild · html-css · opus_
#### Dark skincare hero — full-bleed portrait landing
A one-screen, full-bleed landing page: a single extreme close-up portrait graded deep red-orange, filling the entire viewport, with a transparent nav across the top and a centred headline / subhead / pill-button stack floating over the face. Everything is overlaid on the photograph — there is no second background, no card, no container edge. The whole design is one viewport tall; it does not scroll.
Reference frame for every number below: **1440 × 1090 CSS px** (the capture's inner proportions, 4:3-ish). In production the hero is `100svh` with `min-height: 760px`; the vertical numbers are given at 1090 and should be expressed as percentages or `clamp()` so they hold at other heights.
---
##### Structure
- **Container:** none. The page is full-bleed, edge to edge, no `max-width` wrapper, no page margin, no rounded corners, no border. `html, body { background: #160A0C; margin: 0 }` and the hero covers all of it.
- **Columns:** no grid. Two independent layers:
- Layer A — top bar: a single flex row, `justify-content: space-between`, full width, `padding: 44px 40px 0`.
- Layer B — hero content: one centred column, `max-width: 720px`, `margin-inline: auto`, `text-align: center`.
- **Sections, top to bottom:**
1. **Top bar** — transparent, overlaid on the hero, not in flow (`position: absolute; inset: 0 0 auto 0; z-index: 10`). Occupies the top 136px band.
2. **Hero** — full-bleed portrait photograph, `100svh`, with the centred content column over it.
That is the entire page. There is no section 3, no footer, no second fold.
---
##### Scroll map
| # | Section | Height | In viewports | Scroll consumed | Kind |
|---|---------|--------|--------------|-----------------|------|
| 1 | Top bar | 136px band, 0px in flow (absolute overlay) | 0.12 vh visually, 0 in flow | 0 | static (plays an on-load entrance) |
| 2 | Hero | 1090px (`100svh`, min 760px) | 1.00 | 1.00 viewport | static (plays an on-load entrance) |
**Total page height: 1090px = 1.00 viewport.** No scrollbar. Nothing pins, nothing stacks, nothing is scroll-linked — there is no scroll range for anything to be linked to. (No motion report was supplied for this reference; every motion value below is marked **(inferred)** and read from the still.)
---
##### Spacing
- Top bar: `padding: 44px 40px 0`. Bar content height 46px, so the bar's visual band ends at y≈136.
- Logo mark → wordmark gap: **12px**.
- Nav link group: `display:flex; gap: 56px`, absolutely centred on the viewport's horizontal centre (not centred in the space between logo and button — it is optically centred on the page).
- Nav pill: 106 × 46px, `padding: 0 26px`.
- Hero content column: `max-width: 720px`, centred, and vertically placed so the block's optical centre sits ~5% below the viewport centre (`place-content:center` plus `transform: translateY(5%)`, or `padding-top: 60px` on the centred column). Headline cap-top lands at y≈414, CTA bottom at y≈801 in the 1090 frame.
- Headline block → subhead: **32px**.
- Subhead → CTA: **40px**.
- CTA pill: 211 × 70px, `padding: 0 20px 0 32px`, label → arrow-circle gap **14px**.
- Rhythm: only two vertical intervals exist on the whole page — 32px and 40px. Keep it that way; do not introduce a third.
---
##### Type
Family class: **neo-grotesque sans** — tight apertures, straight-sided lowercase, single-storey-feeling `a` at display size, no humanist flare. Free stand-in: **Inter** (variable, 400/500). Acceptable alternates: Archivo, Public Sans. One family for the entire page, two weights only.
Body anchor: **17px** at 1440. Every level is a multiple of it.
| Role | Multiple | Size | Line-height | Letter-spacing | Weight | Colour |
|------|----------|------|-------------|----------------|--------|--------|
| Hero headline (2 lines) | 6.6× | **112px** | 0.88 | −0.02em | 400 | `#FFFFFF` |
| Headline ghost word (last word) | 6.6× | 112px | 0.88 | −0.02em | 400 | `rgba(255,255,255,0.55)` |
| Hero subhead (2 lines) | 1.12× | **19px** | 1.55 | 0 | 400 | `rgba(255,255,255,0.82)` |
| Wordmark | 1.4× | **24px** | 1.1 | −0.01em | 500 | `#FFFFFF` |
| Nav link | 0.94× | **16px** | 1.2 | 0.01em | 400 | `rgba(255,255,255,0.88)` |
| Button label (both pills) | 0.88× | **15px** | 1.0 | 0.01em | 500 | `#FFFFFF` |
- Headline max line length: **~700px**, forced to exactly two lines (`max-width: 720px; text-wrap: balance` off — set the break manually with a `
` so line 1 is the longer line).
- Subhead max line length: **480px** (≈52 characters), two lines, line 2 shorter than line 1.
- Placeholder copy by role: headline — 4–5 words on two lines, the final word being the emphasised "ghost" word; subhead — one sentence, 10–12 words, breaking onto two lines; nav — 4 single-word links; pills — "2 words" (nav) and "2 words" (hero CTA).
- All hero text carries a faint legibility shadow: `text-shadow: 0 2px 24px rgba(22,10,12,0.45)`. Nothing else on the page has a shadow.
---
##### Colour
| Hex | Role |
|-----|------|
| `#160A0C` | **Dominant surface (~45% of the frame).** Warm near-black. The page background, the shadow side of the face, the vignette at all four edges, and the scrim gradients. This is the "black" of the design — never use `#000`. |
| `#471816` | Deep oxblood. The mid-shadow mass of the photograph and the transition from the dark side of the face into the lit side. Also the pressed/hover fill of pills. |
| `#B84B32` | **The single accent.** Terracotta. Allowed in exactly three places: the nav pill fill, the hero CTA pill fill, and the CTA's arrow circle. Nowhere else — no underlines, no dividers, no icon tints elsewhere. |
| `#D4835B` | Warm tan. The lit midtone of the skin; used in UI only for the focus ring. |
| `#E4BAA7` | Pale blush. The brightest highlights on the cheek and lip in the photo; used in UI only as an optional hover tint on the arrow glyph. |
| `#FFFFFF` | Type and hairlines. Headline and wordmark at full white; body and nav at 0.82–0.88 alpha; borders at 0.28–0.35 alpha. |
Pill fills are **translucent**, not solid: `background: rgba(184,75,50,0.52)` over the photograph, so the image reads faintly through them. Do not flatten them to opaque `#B84B32` at rest.
Overlays on the photograph, in this order:
1. `linear-gradient(180deg, rgba(22,10,12,0.50) 0%, rgba(22,10,12,0) 22%)` — top scrim for nav legibility.
2. `radial-gradient(120% 90% at 50% 42%, rgba(22,10,12,0) 30%, rgba(22,10,12,0.60) 100%)` — vignette.
---
##### Surface
- **Borders:** 1px only, and only on the two pills and the ghost-word chip. `1px solid rgba(255,255,255,0.32)` on the pills, `1px solid rgba(255,255,255,0.35)` on the chip. No border on the nav, no rule under it, no dividers anywhere.
- **Radii:** pills are fully rounded (`border-radius: 999px` — 23px and 35px respectively). The ghost-word chip is **304 × 115px, `border-radius: 22px`** — a rounded rectangle, not a pill. The arrow circle is 37px, fully round. The page itself has **no radius**.
- **Fills behind glass:** the ghost chip is `rgba(255,255,255,0.05)` with `backdrop-filter: blur(6px)`. The pills may carry `backdrop-filter: blur(8px)`.
- **Shadows:** none. No box-shadow anywhere on the page. The only shadow-like value is the headline's text-shadow listed above.
---
##### Imagery
**1. The hero photograph (the only photo).** An extreme close-up of a single face, cropped just above the eyebrows to just below the lower lip — the eyes sit in the upper third, the mouth near the bottom edge. Lit hard from the upper right with a warm key, so the left third of the face falls almost entirely into `#160A0C` and only the brow, cheekbone, nose bridge and lower lip catch light. Graded heavily red-orange: skin reads as `#471816` in shadow through `#B84B32` in midtone to `#D4835B`/`#E4BAA7` on the highlights, with no neutral or cool tones surviving anywhere in the frame. Shallow depth of field — the near eye and cheek are sharp with visible skin texture and lash detail; the lips and the far edge of the face fall soft. Grain is fine but present. Aspect ratio as delivered **4:3**, placed as `object-fit: cover; object-position: 50% 38%` at `width:100%; height:100svh` so the eyes stay above the headline at every viewport height. Serve at 2880px wide.
**2. The logo mark.** A 32 × 32px white line-drawn octagonal rosette — eight rounded lobes around a small circular hole, drawn in ~2px strokes, like a cog or a flower seen flat. Pure `#FFFFFF`, no fill, sits to the left of the wordmark.
**3. The CTA arrow.** A 37px circle, `1px solid rgba(255,255,255,0.7)`, transparent fill, containing a 14px arrow-right glyph in white, stroke 1.5px.
---
##### Motion
The page fits one viewport and does not scroll, so there is no scroll choreography at all. Both sections play a single on-load entrance and then rest. Every value here is **(inferred)** from the still; no live measurement was supplied. Durations and easings were **not measured** — the ranges given are the intended feel, not recorded numbers.
###### 1. Top bar
- **kind** — entrance, once, on load (inferred). Static thereafter; it never hides, shrinks, blurs or gains a background, because there is no scroll.
- **what moves** — logo mark + wordmark, the 4-link group, the nav pill.
- **from → to** — opacity 0 → 1; translateY −12px → 0.
- **range** — trigger: page load, after fonts resolve. Duration 500–700ms. Easing `cubic-bezier(0.22, 1, 0.36, 1)`. Stagger 60ms in the order logo → links → pill.
- **reduced motion** — no transform, no fade; the bar is present at its final state on first paint.
###### 2. Hero
- **kind** — entrance, once, on load (inferred), plus one optional ambient loop on the image.
- **what moves** — the photograph; headline line 1; headline line 2; the ghost-word chip (border and word separately); the subhead; the CTA pill.
- **from → to**
- photograph: opacity 0 → 1, scale 1.06 → 1.00, `transform-origin: 50% 38%`.
- headline lines: `clip-path: inset(105% 0 0 0)` → `inset(0 0 0 0)`, with translateY 24px → 0 on the text inside the mask.
- ghost chip: border opacity 0 → 1, `scaleX 0.94 → 1`; the word itself opacity 0 → 0.55, no transform.
- subhead: opacity 0 → 1, translateY 16px → 0.
- CTA: opacity 0 → 1, translateY 16px → 0, scale 0.96 → 1.
- **range** — trigger: page load. Timeline: photograph 0ms, 1400–1800ms, `ease-out`; headline lines from 200ms, 800–1000ms each, `cubic-bezier(0.22, 1, 0.36, 1)`, 90ms stagger between the two lines; ghost chip from 1000ms, 500–700ms; subhead from 1100ms, 500–700ms; CTA from 1250ms, 500–700ms. Total sequence ≈1.8s.
- **ambient (optional, off by default)** — the photograph alone drifts `scale(1.00) → scale(1.03)` and back on a 16–20s `ease-in-out` alternating loop. Nothing else moves, ever. If in doubt, omit it: this design is meant to be still once it has arrived.
- **reduced motion** — under `prefers-reduced-motion: reduce`, drop every transform and clip-path; the photograph and all text cross-fade in together over 200ms, and the ambient loop is disabled entirely.
###### Interaction transitions (not part of the above)
- **Nav link hover** — colour `rgba(255,255,255,0.88)` → `#FFFFFF`; a 1px `rgba(255,255,255,0.6)` underline scales in from the left (`transform-origin: left`, `scaleX 0 → 1`), 180ms `ease-out`. Reverses on leave.
- **Nav link active/current** — full white, underline permanently at `scaleX 1`.
- **Pill hover (both)** — fill `rgba(184,75,50,0.52)` → `rgba(184,75,50,0.82)`, border `rgba(255,255,255,0.32)` → `rgba(255,255,255,0.55)`, 200ms `ease-out`.
- **CTA hover** — additionally, the arrow circle's glyph translates `+3px` on X and the circle border brightens to `rgba(255,255,255,0.9)`, 200ms.
- **Press (both pills)** — `scale(0.98)`, 90ms, fill settles to `#471816`.
- **Focus-visible** — `outline: 2px solid #D4835B; outline-offset: 3px` on links and pills. No glow, no colour change.
- **Mobile menu open/close** — full-screen `#160A0C` panel at 0.96 alpha with `backdrop-filter: blur(20px)`, fades in over 220ms while the links stagger up 12px at 40ms intervals; close reverses at 160ms with no stagger.
---
##### Responsive
**Below 640px** (design at 390 × 844):
- Section 1: the 4-link group is **dropped** from the bar and moves into a hamburger sheet — a 24px three-line icon on the right. The nav pill is **dropped** entirely at this width; its action is the first item in the sheet. Bar padding becomes `20px 20px 0`. Wordmark 20px, mark 26px.
- Section 2: stays full-bleed `100svh`. `object-position: 50% 34%` so the eyes survive the taller crop.
- Headline 40px (2.35× the 17px body), line-height 1.0, still two lines, `max-width: 320px`. The ghost chip scales with it: radius 12px, padding 0 10px.
- Subhead 16px (never below 16), line-height 1.55, `max-width: 300px`, may run to three lines.
- CTA pill: 56px tall, `padding: 0 16px 0 24px`, arrow circle 30px, label stays 15px. It does **not** go full-width — keep it an intrinsic-width pill, centred.
- Gaps compress: headline → subhead 20px, subhead → CTA 28px. Content column still centred, nudged 4% below centre.
- Nothing stacks or reflows into columns, because there are no columns.
---
##### Don'ts
- **Don't wrap the page in a container or round its corners.** The reference image shows the design inset on a flat black presentation mat — that mat is photography, not design. The page is edge to edge with square corners and nothing behind it.
- **Don't use `#000000` for the dark.** The entire dark mass is warm `#160A0C`. Pure black next to this grade reads as a hole.
- **Don't bold the headline.** It is weight 400 at 112px. A 600/700 headline instantly turns this from a fragrance ad into a SaaS landing page.
- **Don't loosen the headline's line-height.** 0.88 is the point of it — the two lines nearly touch. `1.1` kills it.
- **Don't make the nav a bar.** No solid background, no `backdrop-filter`, no `border-bottom`, no shadow, no shrink-on-scroll. It is transparent type sitting directly on the photograph. (There is no scroll anyway.)
- **Don't left-align or right-align the nav links.** They are optically centred on the viewport's midline, independent of the logo and pill widths — use absolute centring, not `justify-content: space-between` on three groups.
- **Don't render the ghost word as a form input.** No dashed border, no caret, no underline, no placeholder styling. It is a solid 1px hairline rounded rectangle with a faint glass fill, and the word inside is the same size and weight as the rest of the headline at 55% opacity.
- **Don't give the pills opaque fills at rest.** They are 52%-alpha terracotta over the photo; you should be able to see the face through them.
- **Don't spread the accent.** `#B84B32` appears on two pills and one arrow circle. Not on links, not on the logo, not on a divider, not on a scroll indicator.
- **Don't add a scroll-down chevron, a "scroll" label, or a bouncing arrow.** There is nothing below.
- **Don't add a second CTA.** No ghost "Learn more" button beside the primary. One pill.
- **Don't add parallax, mouse-tracking tilt, or a particle/grain canvas overlay.** "Restrained motion" means the page arrives and then holds still. The film grain lives in the photograph, not in a blend-mode layer.
- **Don't animate the headline per-letter or per-word.** It reveals as two whole lines behind a mask. Typewriter and letter-stagger effects are wrong for this weight and size.
- **Don't desaturate, cool down, or "tastefully" duotone the photograph.** The red-orange grade is the whole design. And don't crop it wider — if the eyes are not in the upper third and the lips not near the bottom edge, the composition is gone.
- **Don't `object-fit: contain` or letterbox the image**, and don't set a background colour that would show if it failed to cover.
- **Don't reach for a serif, a condensed display face, or a variable-width "luxury" wordmark.** One neo-grotesque, two weights, the wordmark in the same family as everything else.
- **Don't add shadows to anything.** The only depth cue on the page is the photograph's own falloff.
### Imagery — already generated
These pictures were made for this design and are hosted at the URLs below.
Use them as the `src` exactly as written, and keep the alt text. Do not
generate your own, do not reach for a stock library or a placeholder
service, and do not feed the Imagery section above back to an image model —
that work is done. Size and crop them with CSS (`object-fit: cover`) rather
than assuming their dimensions, and download them into the project if you
would rather not hotlink.
- https://ai-taste-vault.vercel.app/v/demo/skinn-dark-skincare-hero/images/01-hero-portrait.webp — Extreme close-up portrait of a face lit hard from the right, graded deep red-orange, the left side of the face falling into warm near-black
### Image prompts
What each picture above was generated from, for anyone changing one.
**Extreme close-up portrait of a face lit hard from the right, graded deep red-orange, the left side of the face falling into warm near-black** (`01-hero-portrait`)
MEDIUM AND FINISH: a genuine photograph — full-frame digital, ~85mm portrait lens near wide open, extreme close-up, then heavily colour-graded so the whole image lives in one red-orange channel; a light diffusion filter over the lens gives a soft bloom in the highlights and a slight glow where light meets shadow; fine, even film grain throughout; matte contrast curve with a lifted, warm shadow toe — not a crisp punchy commercial beauty shot, no HDR clarity, no micro-contrast sharpening. COLOUR AND VALUE: monochromatic warm red-orange from end to end, with no neutral, cool, pink or magenta tone surviving anywhere. The darkest value in the frame is a warm near-black #140809 — there is no pure black and no true grey. Shadowed skin reads #471816, the mid-tone mass of the face reads #B84B32, lit skin reads #D4835B, and the very brightest highlights — the top of the lit cheekbone, the nose bridge and the lower lip — reach #E8C3AE and go no lighter; the only pure-white points in the entire image are two pinpoint catchlights in the eyes. Roughly 45% of the frame sits at or below #2A1012, most of the remainder lives in the #471816–#B84B32 transition band, and less than 10% is brighter than #D4835B. EDGES: all four edges and all four corners fall away into the same flat warm near-black #160A0C so the picture seams invisibly into the page behind it; the entire left third is in darkness, the top corners and the bottom corners are dark, the bottom edge sinks to near-black under the chin, and only the band right of centre at mid-height stays lit. SUBJECT: one face in extreme close-up, filling and overflowing the whole frame — cropped just above the eyebrows at the top and just below the lower lip at the bottom, cheeks running off both sides. The head is slightly turned and tilted, the nose sitting close to the horizontal centre, both eyes visible and level in the upper third, gaze just past the camera. The key light is hard, warm and comes from the upper right, so the left third of the face — far temple, far eye socket, side of the nose — drops almost entirely into #140809 with only the brow ridge and a faint glint in the far iris surviving, while the near brow, cheekbone, nose bridge and lower lip carry all the light. Bare skin with a matte lip, no jewellery, no visible clothing, no hair falling across the face — hair registers only as darkness at the edges. No background is visible at all; the face is the entire frame. COMPOSITION: shallow depth of field — the near eye, its lashes and the cheek beneath it are sharp with visible pores and real skin texture, while the lips, the far side of the face and the outer right of the frame fall progressively soft. The horizontal band from 35% to 75% of the height across the middle 60% of the width must stay quiet, even and low-contrast — smooth lit cheek and nose, no busy detail, no hard highlight edge — because large white type is set over it. AVOID: no pure #000000 black and no crushed blacks; no cool, grey, pink or duotone shift; no plastic beauty-retouched skin, no smoothing that erases pores; no studio backdrop, seamless paper or visible environment; no jewellery, earrings, glitter, shimmer makeup or styled hair; no lens flare, sunburst, bokeh balls or chromatic fringing; no added dark vignette ring; no sharpening halos; no second face, no hands, no product, no bottle; do not pull the crop wider so the whole head fits — the head must run off every edge. Output a 4:3 landscape frame, 1536x1152. No text, no lettering, no logos, no watermarks, no UI.
---
## Full-bleed photography studio hero
- Page: https://ai-taste-vault.vercel.app/r/full-bleed-photography-studio-hero
- Original: https://br.pinterest.com/pin/942167184566869783/
- Type: Section
- Tags: Earth tones, Editorial, Full bleed, Hero, Minimal, Nav bar, Portfolio, Restrained motion, Stats band
- Palette: #B8663B, #281D1B, #884925, #D4B7A5
- Captured: 2026-09-17
- Rebuilt with: Claude Code · Opus 5.5 · Extra high · skills: frontend-design, emil-design-eng, transitions-dev, humanizer, gsap
- Rebuild: https://ai-taste-vault.vercel.app/v/demo/full-bleed-photography-studio-hero/index.html
### Prompt — Rebuild
_rebuild · html-css · opus_
#### Full-bleed portrait photo hero — rebuild prompt
A single full-viewport section: one edge-to-edge photograph carrying the whole surface, with a transparent nav, a left-aligned copy column, and a small two-item stats band floating on the right. No cards, no panels, no coloured fills. Everything warm in the design comes out of the photograph itself.
No live-page motion report was supplied for this reference. Every motion value below is marked **(inferred)** and durations are given as ranges, not exact measurements.
---
##### 1. Structure
- **Container:** max-width **1200px**, centred, **120px** side margin at 1440 (so content runs x=120 → x=1320). 12 columns, **24px** gutter. The photograph ignores the container and bleeds to all four edges.
- **Section height:** exactly **100vh = 1024px** at 1440, `min-height: 720px`. It does not grow with content; content is vertically centred in it.
- **Layering:** one stacking context — photograph (z0) → gradient scrim (z1) → nav + copy + stats (z2). The copy column and stats band are overlay layers *inside* section 2, not siblings below it.
Sections top to bottom:
1. **Header / nav bar** — transparent, overlaid on the photograph, not fixed at this size. Row is 48px tall with 40px of padding above it, so link centres sit 64px from the page top. Logo left at x=120; links + outlined button right, flush to x=1320.
2. **Hero stage** — the full-bleed photograph plus its scrim. Spans 0 → 1024px, full 1440 width.
3. **Hero copy column** — overlay on 2. Left edge at x=120, spans cols 1–6, max-width 720px. Vertically: eyebrow top at y=382, button bottom at y=712 — i.e. the block's optical centre sits at ~53% of the viewport height, a touch below true centre.
4. **Stats band** — overlay on 2. A 220px-wide left-aligned column with its left edge at **x=1100** and right edge flush to the container at 1320. Two stacked stat items; first item's glyph top at y=440, second item's glyph top at y=577.
---
##### 2. Scroll map
| # | Section | Height | Viewports | Scroll consumed | Kind |
|---|---------|--------|-----------|-----------------|------|
| 1 | Header / nav bar | 88px (inside 2) | 0.09 | 0 (overlay) | entrance, then scroll-linked scrim over the first 120px of scroll *(inferred)* |
| 2 | Hero stage | 1024px | 1.00 | 1024px | scroll-linked (parallax on the image only) *(inferred)* |
| 3 | Hero copy column | 330px (inside 2) | 0.32 | 0 (overlay) | entrance *(inferred)* |
| 4 | Stats band | 195px (inside 2) | 0.19 | 0 (overlay) | entrance *(inferred)* |
**Total page height: 1024px (1.00 viewport).** Nothing pins, nothing stacks. As a standalone section that is the entire scrollable height; when dropped onto a longer page, the section-2 parallax runs from the section top at the viewport top until the section bottom reaches the viewport top — one viewport of scroll, and no more.
---
##### 3. Spacing
- Page gutters: **120px** left and right, everywhere.
- Header: `padding: 40px 120px 0`. Nav link-to-link gap **36px**. Gap from the last link to the outlined button **40px**. Logo is optically centred against the link row.
- Copy column internal rhythm (all margin-bottom):
- eyebrow → headline: **28px**
- headline → sub-paragraph: **28px**
- sub-paragraph → button row: **36px**
- Eyebrow dot → eyebrow text: **12px**.
- Button row: pill and circular arrow are siblings with a **4px** gap, not one merged shape.
- Stats band: glyph → heading **12px**; heading → sub-label **6px**; item 1 → item 2 **128px**. That large inter-item gap is the point — the band reads as two separate marks in space, not a list.
- Vertical rhythm between the copy column and the stats band: they are not aligned to each other. The stats band starts ~58px lower than the headline's cap line. Do not line them up.
---
##### 4. Type
Two families only.
- **Wordmark:** heavy slab serif, all caps, 4 letters. Free stand-in: **Roboto Slab 800** or **Bitter 800**.
- **Everything else:** neo-grotesk with a double-storey *a* and *g* and slightly narrow caps. Free stand-in: **Inter** (or **Inter Tight** for the headline).
Body anchor: **17px** running text at 1440. All other levels stated as a multiple of it.
| Level | Multiple | Size | Line-height | Letter-spacing | Weight | Max line length |
|---|---|---|---|---|---|---|
| Headline (2 lines) | 4.25× | **72px** | **1.06** (76px) | −0.02em | 400 | 720px, ~20–22 chars/line |
| Stat heading | 1.4× | **24px** | 1.25 | −0.01em | 400 | 220px |
| Body / sub-paragraph | 1.0× | **17px** | **1.6** (27px) | 0 | 400 | **420px, ~46 characters** |
| Nav links | 0.88× | **15px** | 1.4 | −0.005em | 450 | — |
| Button labels (both) | 0.88× | **15px** | 1 | 0 | 500 | — |
| Eyebrow | 0.82× | **14px** | 1.4 | 0.01em | 450 | — |
| Stat sub-label | 0.76× | **13px** | 1.4 | 0.02em | 400 | — |
| Wordmark | 1.2× | **20px** | 1 | 0.08em | 800 | — |
The headline is **regular weight at display size** — the contrast comes from scale, not from bold. Nothing on this page is above 500 except the four-letter wordmark.
Placeholder copy by role:
- Eyebrow: 2–3 words, availability-style, sentence case.
- Headline: 6–8 words on exactly two lines, each line ending in a full stop. Balance so line 2 is slightly wider than line 1.
- Sub-paragraph: one sentence, 12–16 words, wrapping to exactly two lines at 420px.
- Primary button: 3 words.
- Nav: 4 single-word links + 1 three-word button.
- Stat heading: 2 words. Stat sub-label: a short value — a quarter/year, or a number with a `+`.
---
##### 5. Colour
The photograph covers ~100% of the surface, so the palette is read *out of* the image rather than painted onto the page.
| Hex | Role |
|---|---|
| **#B8663B** | The dominant mid-tone — lit skin and the shaft of light. The single accent of the design, and it is delivered **only by the photograph**. It is never used as a fill, a button, a border or a link colour. |
| **#281D1B** | Deep shadow. Occupies the upper-right wedge (~25% of the frame). Also the page background behind the image (what shows before load / on overscroll) and the ink colour of the white solid button. |
| **#884925** | The shadowed half of the accent — the tone the left-edge scrim resolves toward. Used for the scrim mix, not as a flat surface. |
| **#D4B7A5** | The palest note, the lower-left wedge. Also the tint for de-emphasised text: stat sub-labels sit at `rgba(212,183,165,0.82)`. |
| **#FFFFFF** | All primary text, the solid pill button's fill, the circular arrow button's fill, and the stats glyphs. |
Text opacities over the image: headline and button labels **100%** white; nav links and eyebrow **92%**; sub-paragraph **86%**; stat headings **88%**; stat sub-labels **72%**.
Scrims (the only fills on the page):
- Left-to-right linear gradient, `rgba(40,29,27,0.48)` at x=0 → `rgba(40,29,27,0)` at 58% width.
- Top-down linear gradient, `rgba(40,29,27,0.34)` at y=0 → transparent at 200px, for the nav.
Rule: if you want a warmer page, regrade the photograph. Do not introduce an orange fill.
---
##### 6. Surface
- **Radii:** buttons are full pills (`999px`); the arrow button and the eyebrow dot are perfect circles. **Everything else is 0.** The photograph has no corner radius — it is edge to edge.
- **Borders:** exactly one. The nav button: `1px solid rgba(255,255,255,0.45)`. No other rules, dividers or outlines exist on the page.
- **Shadows:** none. No drop-shadow on buttons, no text-shadow for legibility — legibility is the scrim's job. The only soft edge in the composition is inside the photograph (the bloom along the light shaft).
- **Backdrop blur:** none. No glass, no frosted panel behind the copy.
- Component sizes: solid pill **44px** tall, `padding: 0 24px`; arrow circle **44px** diameter with a 45°-up arrow glyph ~16px, stroke 1.5px, in #281D1B; nav button **40px** tall, `padding: 0 20px`; eyebrow dot **12px** ring with a 5px filled core.
---
##### 7. Imagery
**One photograph**, plus two vector glyphs.
**Hero photograph** — aspect ratio delivered at **1.41:1 (1440×1024)**, `object-fit: cover`, focal point ~**48% horizontal / 55% vertical**.
Subject: an extreme close crop of a human face, tight enough that a single eye sits near the optical centre of the frame and the nose and brow run off the edges. The eye is open and looking just past the camera — sharp iris, visible lashes, skin texture retained (pores, fine hairs), nothing retouched smooth.
Treatment — this is the part that carries the design: the frame is cut by **three parallel hard-edged diagonal bands running lower-left → upper-right at roughly 50–55° off horizontal**, as if the face were lit through a gap.
- Upper-right wedge: deep shadow, crushed to #281D1B, holding almost no detail.
- Centre band: the face in full warm light, terracotta #B8663B, with a slight bloom along the band's upper boundary.
- Lower-left wedge: a pale, out-of-focus fall-off to #D4B7A5.
Grade: heavy warm split-tone, orange highlights against brown shadows, **no neutral whites and no pure black anywhere in the image**. One cool accent is allowed and only one: a faint teal-green cast in the hair at the very top-left corner. Grain is fine and present; the image should not look digitally clean.
**Two stats glyphs** — 18×18px, white at ~90%, 1.5px stroke, abstract and geometric (e.g. a small corner/flag mark and a radial burst). Line-art marks, not filled icons, not from a rounded UI icon set.
---
##### 8. Motion
Restrained by design. Nothing travels far; nothing plays twice. All values inferred from the stills — no live measurement was available, so durations are ranges.
###### Section 1 — Header / nav bar
- **kind:** entrance, then scroll-linked *(inferred)*
- **what moves:** the wordmark, the link row, the outlined button; separately, the top scrim.
- **from → to:** entrance — `opacity 0 → 1`, `translateY −10px → 0`. Scroll-linked — the top scrim goes `rgba(40,29,27,0.34) → rgba(40,29,27,0.62)`; no transform on the nav itself.
- **range:** entrance triggers once on load, no scroll trigger. Duration **0.45–0.6s** *(not measured — use 0.5s)*, easing `cubic-bezier(0.22,1,0.36,1)`, stagger **50ms** across wordmark → links → button. Scroll-linked scrim runs from scroll 0 to scroll 120px and **reverses on the way back up**.
- **reduced motion:** entrance becomes an opacity-only fade at 0.2s, no translate. Scrim change still applies (it is not motion).
###### Section 2 — Hero stage
- **kind:** scroll-linked *(inferred)*
- **what moves:** the photograph layer only. The scrim, the copy and the stats do not move with it.
- **from → to:** `translateY 0 → −80px` and `scale 1.00 → 1.04`, as a direct function of scroll position. On load only, a separate entrance settles `scale 1.06 → 1.00` with `opacity 0 → 1`.
- **range:** scroll-linked from the section top at the viewport top until the section bottom reaches the viewport top (1.00 viewport of scroll), linear mapping, **reverses on the way back up**. The load settle is a one-shot entrance, **0.8–1.1s** *(not measured — use 0.9s)*, easing `cubic-bezier(0.16,1,0.3,1)`.
- **reduced motion:** parallax removed entirely — the image is static at `translateY 0, scale 1`. The load settle becomes a plain fade.
###### Section 3 — Hero copy column
- **kind:** entrance, plays once on arrival, does not reverse *(inferred)*
- **what moves:** eyebrow dot, eyebrow text, headline line 1, headline line 2, sub-paragraph, button row — six items as one stagger chain. Whole lines move; the headline is **not** split into words or characters.
- **from → to:** `opacity 0 → 1`, `translateY 24px → 0`. No scale, no clip-path, no blur.
- **range:** triggers once when the element's top reaches 80% of the viewport (on first load, fires immediately after the section-2 settle begins, at +0.15s). Duration **0.6–0.8s** per item *(not measured — use 0.7s)*, easing `cubic-bezier(0.22,1,0.36,1)`, stagger **80ms**.
- **reduced motion:** opacity 0 → 1 only, 0.2s, no translate, stagger reduced to 0.
###### Section 4 — Stats band
- **kind:** entrance, plays once on arrival, does not reverse *(inferred)*
- **what moves:** each stat item as a unit (glyph + heading + sub-label together — the three lines do not stagger internally).
- **from → to:** `opacity 0 → 1`, `translateY 16px → 0`. Shorter travel than the copy column, deliberately — this band should arrive quietly.
- **range:** triggers once when the element's top reaches 80% of the viewport; on load it begins **after** the copy chain, at roughly +0.55s. Duration **0.6–0.8s** *(not measured — use 0.7s)*, same easing, stagger **120ms** between the two items.
- **reduced motion:** opacity only, 0.2s, no stagger.
###### Interaction transitions (not part of the scroll choreography)
- Nav link hover: colour `rgba(255,255,255,0.92) → #FFFFFF`, 150ms ease-out. No underline slide, no colour shift to orange.
- Nav button hover: border `rgba(255,255,255,0.45) → rgba(255,255,255,0.8)`, background → `rgba(255,255,255,0.08)`, 180ms ease-out. It never fills solid.
- Solid pill hover: background `#FFFFFF → #D4B7A5`, label stays #281D1B, 180ms ease-out.
- Arrow circle hover: the arrow glyph translates `+3px, −3px` and a second copy enters from `−3px, +3px`, 220ms `cubic-bezier(0.22,1,0.36,1)`; circle background matches the pill's hover tint. Pill and circle respond together when either is hovered.
- Press (all buttons): `scale 0.97`, 90ms ease-out.
- Focus-visible: `2px solid #FFFFFF` outline, `3px` offset, no glow.
- Eyebrow dot: a slow 2.4s opacity pulse `1 → 0.45 → 1` on the 5px core only. Disabled under reduced motion.
---
##### 9. Responsive (below 640px)
- Section height becomes `min-height: 100svh` with content top-aligned at 96px rather than centred, so the face's eye stays visible in the lower two-thirds.
- Gutters **120px → 20px**. Container is full width.
- Nav links (4) collapse behind a 40px circular menu button at the right; the wordmark stays at 20px; the outlined "book" button is **dropped from the header** and re-appears nowhere — the solid pill in the copy column is the only CTA.
- Headline **72px → 2.5× body = 40px**, line-height 1.1, still forced to two lines (shorter placeholder if needed). Body **17 → 16px**, max-width 100%. Eyebrow 14px, stat headings **24 → 20px**.
- Stats band leaves the right edge and stacks **below** the button row as a left-aligned pair with a **32px** gap between items (not 128px), separated from the button by 48px. It does not become a horizontal 2-up row and does not gain a border.
- Photograph focal point shifts to **62% horizontal / 48% vertical** to keep the eye in frame at portrait crop; the left-edge scrim becomes a bottom-up scrim, `rgba(40,29,27,0.6)` at the bottom → transparent at 55% height.
- Parallax (section 2) is disabled below 640px. Entrances stay.
---
##### 10. Don'ts
- **Don't flatten the photo under a uniform black overlay.** The whole composition depends on the image's own diagonal light bands surviving. Use the directional left + top gradients and nothing else. A 50% black `::before` kills this design instantly.
- **Don't paint the accent.** #B8663B must never appear as a button fill, a link colour, a border, an underline or a badge. It exists only inside the photograph. A page with an orange CTA is a different, worse design.
- **Don't centre the hero copy.** It is hard left at x=120 and the asymmetry against the floating right-hand stats band is the layout.
- **Don't align the stats band to the headline.** Its deliberate vertical offset is what makes it read as annotation rather than as a second column.
- **Don't put the stats in a box.** No border, no `rgba(255,255,255,0.1)` card, no backdrop-blur pill, no divider line between them. Two glyphs and four lines of text floating on the photograph.
- **Don't make the headline bold.** 400 weight at 72px. `font-weight: 700` on a 72px display line is the single most common way to ruin this.
- **Don't let the headline breathe.** Line-height is **1.06**, letter-spacing −0.02em. Default 1.2 line-height opens a gap between the two lines that breaks the block.
- **Don't split the headline for animation.** No per-word, per-character or blur-in text reveals. Two lines, two fades, 80ms apart.
- **Don't merge the pill and the arrow into one shape.** They are two separate rounded elements with a 4px gap that react as one on hover.
- **Don't add a scroll cue** — no chevron, no mouse-wheel glyph, no "scroll" label. The section ends flush.
- **Don't reach for a geometric sans.** Poppins, Montserrat and Circular all read wrong here; use a neo-grotesk (Inter/Inter Tight). Keep the slab serif for the 4-letter wordmark only — do not let it touch headings.
- **Don't round the photograph or inset it.** Full bleed, zero radius, no margin, no container.
- **Don't use a clean, smiling, half-body stock portrait.** It is an extreme crop of one eye, grainy, hard-lit, unretouched.
- **Don't apply text-shadow to win contrast.** If text is unreadable, deepen the gradient scrim or move the image's focal point — never outline or shadow the type.
- **Don't parallax the text.** Only the image layer translates on scroll; the copy and the stats stay locked to the viewport.
- **Don't make the nav sticky at desktop.** It sits on the photograph and scrolls away with it.
### Imagery — already generated
These pictures were made for this design and are hosted at the URLs below.
Use them as the `src` exactly as written, and keep the alt text. Do not
generate your own, do not reach for a stock library or a placeholder
service, and do not feed the Imagery section above back to an image model —
that work is done. Size and crop them with CSS (`object-fit: cover`) rather
than assuming their dimensions, and download them into the project if you
would rather not hotlink.
- https://ai-taste-vault.vercel.app/v/demo/full-bleed-photography-studio-hero/images/01-hero-portrait-light-bands.webp — Extreme close crop of a face lit through hard diagonal bands of warm light, one green-hazel eye near the centre of the frame
### Image prompts
What each picture above was generated from, for anyone changing one.
**Extreme close crop of a face lit through hard diagonal bands of warm light, one green-hazel eye near the centre of the frame** (`01-hero-portrait-light-bands`)
MEDIUM AND FINISH: A real photograph, not a render — 35mm full-frame digital, short-telephoto macro crop, shot on hard directional light through a gap; fine analogue film grain is visible across the whole frame, skin is completely unretouched with open pores, fine peach-fuzz hairs, individual lashes and a slightly wet, specular eye; the grade is a heavy warm split-tone applied in post, contrasty and dense rather than clean, with a faint bloom haze only along the upper boundary of the bright band. COLOUR AND VALUE: the whole frame lives between #1A1211 at its darkest and #DCCFC8 at its lightest — there is no pure black and no neutral white anywhere, all shadows are warm brown-black #281D1B and all highlights are warm terracotta or pale clay, never white; the lit skin reads #B8663B rising to #DB7340 at the brightest lit cheek, the shadowed half of the skin drops to #884925 then to #3A2620, the deep wedge crushes to #1F1614 holding almost no detail, and the palest area is a soft desaturated clay-grey #D4B7A5 cooling toward #C9BCB8; exactly one cool note is permitted in the entire image — a faint teal-green, in the iris (green-hazel ringed with amber) and a barely-there teal cast in the hair at the very top-left corner; no magenta, no yellow, no neutral grey midtones. EDGES: full-bleed, all four edges run off with no border, no vignette, no corner darkening and no fade to any page colour — the picture is the whole surface; the top 120px band and the far right edge must stay tonally simple because a transparent nav sits there, and the left 40% of the frame must remain a quiet, near-featureless gradient of shadowed skin and out-of-focus haze with no sharp detail, no features and no busy texture, because a large white headline sits over it. SUBJECT: an extreme close crop of one human face, so tight that the brow and hairline run off the top edge and the nostril and cheek run off the bottom edge; a single open eye sits just right of the optical centre at roughly 51% across and 49% down, looking just past the camera, tack sharp on the iris and lashes while the nose and jaw soften slightly; the face is cut by three parallel hard-edged diagonal bands of light running lower-left to upper-right at about 52 degrees off horizontal, as if lit through a narrow gap — the upper-right wedge (about a quarter of the frame) is deep warm shadow with the eye socket and temple barely legible, the central band throws the eye, cheekbone and bridge of the nose into full terracotta light, and the lower-left wedge falls off into pale, out-of-focus clay haze; a second narrow lit band clips the lower-right corner. COMPOSITION: 3:2 landscape, the face filling the entire frame edge to edge with no background, no room, no set visible; weight and detail sit in the centre and right, emptiness and haze bottom-left; the diagonal band edges are hard and straight, not feathered. AVOID: no clean beauty or studio headshot, no smiling, no makeup glamour, no smoothed or plastic skin, no both-eyes symmetrical front-on portrait, no half-body or shoulders-in framing, no visible background or environment, no shallow-depth-of-field bokeh balls, no lens flare, sunburst, god-rays or light leaks, no black vignette, no HDR clarity or crunchy local contrast, no cinematic teal-and-orange grade beyond the single permitted teal in the iris and top-left hair, no blue or grey shadows, no pure black crush and no blown white highlights, no painterly or 3D-render smoothness, no stock-photo polish. Output a wide 3:2 landscape frame, 1536x1024. No text, no lettering, no logos, no watermarks, no UI.
---
## Voyager2 — Dark post carousel
- Page: https://ai-taste-vault.vercel.app/r/voyager2-dark-post-carousel
- Original: https://br.pinterest.com/pin/368239707067813600/
- Type: Landing page
- Tags: Dark mode, Editorial, Full bleed, Gallery, Hero, Media / Publishing, Minimal, Nav bar, Neon accent, Restrained motion
- Palette: #010000, #A6A8A8, #292827, #96690A, #E71709
- Captured: 2026-09-17
- Rebuilt with: Claude Code · Opus 5.5 · Extra high · skills: frontend-design, emil-design-eng, transitions-dev, humanizer, gsap
- Rebuild: https://ai-taste-vault.vercel.app/v/demo/voyager2-dark-post-carousel/index.html
### Prompt — Rebuild
_rebuild · html-css · opus_
#### Dark 3D coverflow post carousel — rebuild prompt
A single-screen, full-bleed dark landing page: a thin nav, a centred high-contrast serif headline, and a five-card 3D "coverflow" carousel of abstract fluid-art images that bleeds off both edges and runs to the bottom of the viewport. The page does **not** scroll vertically. All motion is horizontal, driven by wheel/drag/keys, and restrained.
There is one capture and it is one viewport of a live page. No motion report was supplied, so **every motion number below is (inferred)** from the still, and durations/easings are given as ranges where they cannot be derived from the frame. Layout, type and colour numbers are derived from the capture's proportions against a 17px body anchor.
---
##### 1. Structure
Reference viewport: **1440 × 1080** (the capture's aspect, ~1.33:1). `html, body { height: 100%; overflow: hidden; }`.
- **No max-width container.** The page is edge-to-edge. Nav uses a 40px left/right gutter; the carousel uses none and is deliberately clipped by the viewport edges.
- Single column, three stacked horizontal bands, all horizontally centred on the viewport (not on a grid).
Sections, top to bottom:
1. **Nav bar** — 88px tall, transparent, overlaying the page. Left: wordmark + short rule. Right: five text links.
2. **Headline block** — centred serif headline, 3 lines, 640px max width.
3. **Post carousel** — 3D perspective track, 5 cards visible, centre card upright, neighbours rotated away in Y, outermost pair cut by the viewport edges.
Vertical placement at 1440 × 1080:
| Element | y |
|---|---|
| Nav items, optical centre | 44 |
| Headline line 1, cap top | 250 |
| Headline block bottom | 459 |
| Centre card top edge | 536 |
| Card row centre axis (all cards) | 802 |
| Centre card bottom edge | 1068 (12px above the viewport bottom) |
---
##### 2. Scroll map
| # | Section | Height | Viewports | Scroll consumed | Kind |
|---|---|---|---|---|---|
| 1 | Nav bar | 88px (fixed overlay) | 0.08 | 0 | static (plays one entrance on load) |
| 2 | Headline block | 211px | 0.20 | 0 | static (plays one entrance on load) |
| 3 | Post carousel | 532px band, bleeds to the bottom edge | 0.49 | 0 vertical; input-linked horizontally | scroll-linked (horizontal axis only) |
**Total page height: 1080px = 1.00 viewport. The document does not scroll vertically.** Wheel delta, horizontal drag and ←/→ are all mapped onto the carousel's horizontal index. There is no second section, no footer, no "scroll" cue.
---
##### 3. Spacing
- Nav: `height: 88px; padding: 0 40px;` items vertically centred.
- Wordmark → rule gap: **24px**. Rule: 48 × 2px.
- Nav link gap: **40px** (measured 42; use 40).
- Nav bar bottom → headline cap top: **160px**.
- Headline: 3 lines at `line-height: 0.88` (70px per line), block 211px tall, `max-width: 640px`, margin-inline auto.
- Headline block bottom → centre card top: **80px**.
- Carousel centre-to-centre offsets: **±408px** (centre → first neighbour), **±662px** (centre → outer pair). The rendered gap between the centre card and a neighbour lands at ~68px because of the foreshortening.
- Card internals: `padding: 0 32px 64px;` — the title block sits 64px above the card's bottom edge.
- Centre card bottom → viewport bottom: **12px**.
Rhythm: three bands at roughly 8% / 20% / 49% of viewport height, separated by 15% and 7% of pure black air. There is no other vertical rhythm — the page is one screen and every spacing decision above is a one-off, not a scale.
---
##### 4. Type
Two families only.
- **Display serif** — high-contrast transitional/didone, sharp bracketed serifs, thin hairlines, generous ball terminals. Free stand-in: **Playfair Display** (400–500). Alternates: Instrument Serif, Bodoni Moda. Used for the headline and every card title.
- **UI grotesk** — neutral, slightly tight, no personality. Free stand-in: **Inter**. Alternates: Archivo, Space Grotesk. Used for the wordmark and nav only.
Body anchor: **17px** at 1440. Every other level is a ratio of it.
| Level | Ratio | Size | Line-height | Letter-spacing | Weight | Family | Max line length |
|---|---|---|---|---|---|---|---|
| Headline | 4.7× | **80px** | 0.88 (70px) | −0.015em | 400 | display serif | 640px ≈ 26 ch, forced to 3 lines |
| Card title | 1.76× | **30px** | 1.15 | −0.005em | 400 | display serif | 300px ≈ 22 ch, 2 lines, centred |
| Wordmark | 1.18× | **20px** | 1.0 | −0.01em | 700 | grotesk | one word |
| Nav link | 1.06× | **18px** | 1.0 | 0 | 400 | grotesk | one word |
| Body / utility | 1.0× | **17px** | 1.5 | 0 | 400 | grotesk | 68 ch |
| Meta / caption (if needed) | 0.76× | **13px** | 1.4 | 0.01em | 400 | grotesk | 40 ch |
Sentence case everywhere. **No uppercase, no letterspaced labels, no eyebrow.**
Placeholder copy by role:
- Wordmark: one word, 7–9 characters.
- Nav: five single-word links, 5–9 characters each.
- Headline: 8–10 words breaking onto exactly three lines, each line 18–22 characters, a declarative statement about a collection of posts.
- Card titles: 4–6 words each, breaking onto exactly two lines.
---
##### 5. Colour
| Hex | Role |
|---|---|
| **#010000** | Page background. Covers ~70% of the surface — everything that is not a card image. Near-black with a hair of red in it; it is **not** `#000000` and **not** `#0A0A0A`. |
| **#FFFFFF** | Wordmark, rule, headline, card titles. The only foreground colour on the page chrome. |
| **#A6A8A8** | Nav links at rest, and any secondary/meta text. |
| **#292827** | Card placeholder fill before an image loads, and the only permissible hairline colour if a divider is ever needed. |
| **#E71709** | The **single accent**. Allowed in exactly three places: the 1px underline that grows under a hovered nav link, the focus ring, and the active-index marker if one is added. Never as a fill, never as text, never behind the nav. |
| **#96690A** | Not a UI colour. It is the ochre pigment inside the centre card's photograph. Sample it for image selection; never paint anything with it. |
The saturated colour on this page — red, gold, teal, magenta — lives **entirely inside the photographs**. The interface itself is black, white and one grey.
---
##### 6. Surface
- **No borders, no strokes, no outlines** on cards or nav. The only drawn line on the page is the 48 × 2px white rule beside the wordmark.
- Corner radius: **cards 20px**. The page itself has no radius — it is the viewport.
- **No shadows and no glows.** A drop shadow on `#010000` reads as a grey smudge. Depth is conveyed by the 3D transform plus a black dim overlay, nothing else.
- Dim overlay: a `#010000` layer inside each card, above the image, below the title, with opacity as a function of distance from the active index — 0% at centre, ~35% at ±1, ~62% at ±2, ~80% at ±3.
- No blur, no glass, no backdrop-filter, no noise or grain texture.
---
##### 7. Imagery
Six to eight images in the deck (five visible at a time). All **3:4 portrait**, `object-fit: cover`, full-bleed inside the card's 20px radius.
All of them are **macro photography of fluid media** — ink in water, poured paint, oil on stone, pigment on a wet surface — shot close enough that scale is unreadable and the result looks planetary. Shared treatment: deep black fields, one or two saturated pigments, hard specular highlights, no visible brush or hand, no human subject, no product. Crucially, each frame's **darkest region sits at its outer edges**, so the card's corners dissolve into `#010000` and only the bright core of the image reads as a rectangle.
The deck as seen, left to right:
1. **Filament black** — near-black field with thin looping neon wire-trails in acid green and orange, like a light-painting exposure. Almost no luminance; at ±2 it is barely more than a shape.
2. **Red fissure** — crimson and scarlet ink bloom torn across a dark brown ground, reading as a molten crack. This is where `#E71709` comes from.
3. **Gold marble** — the centre card. White and cold-grey marbled fluid veined with thick ochre-gold, the most planet-like of the set and the brightest. This is where `#96690A` comes from.
4. **Teal nebula** — cyan and copper-bronze fluid radiating from a dark centre, flecked with small white specks like stars.
5. **Magenta crater** — pink and magenta pitted surface with dark pocking, low contrast, soft.
6–8. Continue the rule: one dominant pigment each, black edges, no repeats of the dominant hue in adjacent positions.
---
##### 8. Motion
Every value in this section is **(inferred)** from the single still. Where a value cannot be read from a still at all, it is marked *not measured* and given a range. No library parameters are specified because none were measured.
###### Section 1 — Nav bar
- **kind** — entrance (once, on load). Static for the rest of the session; it does not hide, shrink or gain a background, because the page does not scroll.
- **what moves** — wordmark, the 48px rule, the five nav links.
- **from → to** — `opacity: 0 → 1`, `translateY: 8px → 0`. The rule additionally `scaleX: 0 → 1` from its left edge.
- **range** — trigger: on load, ~120ms after first paint. Duration *not measured*, use 400–600ms. Easing: an ease-out with a long tail, e.g. `cubic-bezier(0.22, 1, 0.36, 1)`. Stagger 40ms, left to right, wordmark first.
- **reduced motion** — rendered at the final state, no transform, no fade.
###### Section 2 — Headline block
- **kind** — entrance (once, on load). Static afterwards. It is **not** scroll-linked and **not** parallaxed — nothing about it can move again.
- **what moves** — each of the three headline lines, independently, inside its own `overflow: hidden` mask.
- **from → to** — per line: `translateY: 100% → 0` within the mask (i.e. 70px of travel), `opacity: 0 → 1`.
- **range** — trigger: on load, ~220ms after first paint, overlapping the tail of the nav entrance. Duration *not measured*, use 700–900ms. Easing: strong ease-out, e.g. `cubic-bezier(0.16, 1, 0.3, 1)`. Stagger 90ms per line, top to bottom.
- **reduced motion** — opacity 0 → 1 only, 200ms, all three lines together, no mask and no translate.
###### Section 3 — Post carousel
This section has an entrance and a continuous input-linked behaviour. They are separate.
- **kind** — entrance on load, then **scroll-linked** on the horizontal axis. Scroll-linked here means the transform of every card is a pure function of the carousel's current fractional position and **reverses exactly** when the input reverses; nothing plays once.
- **what moves** — the five card shells (transform + dim), and the `![]()
` inside each shell (counter-drift).
**Entrance**
- **from → to** — per card: `opacity: 0 → 1`, `scale: 0.94 → its slot scale`, `translateY: 16px → 0`. The rotateY is already at its slot value from the first frame; do not animate it in.
- **range** — trigger: on load, ~380ms after first paint. Duration *not measured*, use 800–1000ms. Easing `cubic-bezier(0.16, 1, 0.3, 1)`. Stagger 70ms, radiating outward from the centre card (order: 0, ±1, ±2).
- **reduced motion** — opacity only, 200ms, no stagger.
**Scroll-linked (the carousel itself)**
- **what moves** — all cards, simultaneously. Track container: `perspective: 1600px; perspective-origin: 50% 802px;` cards `transform-style: preserve-3d`, `transform-origin: 50% 50%`, absolutely positioned and centred on the axis at y = 802.
- **from → to** — each card's signed fractional distance `d` from the active index drives this slot table; interpolate linearly between adjacent rows for fractional `d`:
| d | translateX | rotateY | scale | translateZ | dim overlay |
|---|---|---|---|---|---|
| 0 | 0 | 0° | 1.00 | 0 | 0% |
| ±1 | ±408px | ∓34° | 0.92 | −120px | 35% |
| ±2 | ±662px | ∓58° | 0.80 | −300px | 62% |
| ±3 | ±840px | ∓70° | 0.70 | −480px | 80% |
Base card box (before scale): **400 × 532px**, 3:4. Cards beyond ±3 are unmounted. The ±2 pair lands half-off the viewport and is clipped by it — that clipping is the composition, not an accident.
- **range** — from the first wheel/drag event until input ends; there is no scroll position because the document does not scroll. One full slot advance corresponds to roughly **320–420px of accumulated wheel delta**, or a drag of about one centre-card width (*not measured*). After input ends the track settles to the nearest whole slot; settle duration *not measured*, use 600–800ms with a strong ease-out. Reverses exactly on reverse input.
- **inner counter-drift** — each card's `![]()
` is `width: 112%` and translates `X: −6% × d` (clamped to ±6%), scroll-linked and reversing. Keep it this small; it is a texture, not a parallax effect.
- **reduced motion** — drop the 3D entirely: `perspective: none`, no `rotateY`, no `scale`, no `translateZ`. Lay the cards out as a flat horizontal strip at their base size with `scroll-snap-type: x mandatory`, native snapping, no tween. The dim overlays stay. The counter-drift is removed.
###### Interaction transitions
Separate from the scroll choreography above.
- **Nav link hover** — colour `#A6A8A8 → #FFFFFF`, 180ms ease-out; simultaneously a 1px `#E71709` underline at the text baseline `scaleX: 0 → 1` from the left, 240ms `cubic-bezier(0.22, 1, 0.36, 1)`. On leave the underline collapses to the right, same duration.
- **Nav link press** — `opacity: 1 → 0.7`, 80ms linear.
- **Card hover, non-centre** — dim overlay lightens by 12 percentage points (e.g. 35% → 23%), 260ms ease-out. No scale, no lift.
- **Card hover, centre** — inner image `scale: 1 → 1.03`, 600ms `cubic-bezier(0.22, 1, 0.36, 1)`; title `translateY: 0 → −4px`, same timing. The card shell itself does not move.
- **Card press / drag** — cursor `grabbing`; whole track `scale: 1 → 0.985`, 200ms ease-out, released on pointer-up.
- **Card click, non-centre** — sets the active index; the same slot interpolation runs as a 700ms tween with a strong ease-out. It is the identical transform path as dragging, just tweened.
- **Focus-visible** — 2px `#E71709` outline, 3px offset, matching the element's radius (20px on cards).
---
##### 9. Responsive (below 640px)
- Nav: wordmark + a two-line hamburger; the 48px rule is **dropped**. Gutter 20px, height 64px. Links move into a full-screen overlay panel (`#010000`, links at 24px, 24px gap, left-aligned, 20px gutter).
- Headline: 40px (2.35× body), `line-height: 0.95`, `max-width: 92vw`, breaks to 4 lines. Top offset 96px below the nav.
- Carousel: `perspective: 900px`. Base card **68vw × (4/3)**. Only `d = 0` and `d = ±1` are rendered; **the ±2 pair is dropped entirely.** Neighbour slot becomes `translateX ±0.82 × card width`, `rotateY ∓28°`, `scale 0.88`, `translateZ −80px`, dim 40%.
- Card title: 22px, `line-height: 1.2`, padding `0 20px 40px`.
- Input: native horizontal swipe with scroll-snap; **do not hijack the wheel or the vertical touch axis on mobile.**
- The page stays exactly 100svh with no vertical scroll.
---
##### 10. Don'ts
- **Do not reproduce the presentation mat.** The design is full-bleed to all four viewport edges: no outer margin, no black border, no rounded corners on the page, no colour behind it. The page itself *is* the black.
- **Do not use `#000000` or `#0A0A0A`.** The background is `#010000`. No gradient, no radial vignette, no noise/grain overlay, no starfield.
- **Do not tint the UI with the neon colours.** `#E71709` appears only as a 1px hover underline, the focus ring and an optional index marker. `#96690A` never appears in the UI at all. The colour belongs to the photographs.
- **Do not add drop shadows or glows to the cards.** On black they read as grey mud. Depth comes from rotateY + scale + the black dim overlay, full stop.
- **Do not add vertical scroll.** No second section, no footer, no "scroll to explore" cue, no scroll indicator, no progress bar down the side. If you find yourself writing a scroll-triggered reveal for anything below the fold, there is no below the fold.
- **Do not arc the card row.** All five cards share one dead-flat horizontal centre axis at y = 802. No vertical offset on the neighbours, no `rotateZ`, no wave, no fan.
- **Do not set the headline in a grotesk, and do not bold it.** It is a 400-weight high-contrast serif with hairline strokes. A geometric sans headline destroys the entire register of this page.
- **Do not let the headline run wide.** Cap it at 640px so it breaks to exactly three lines. A two-line or one-line headline is wrong.
- **Do not left-align the card titles.** They are centred, two lines, 64px up from the card's bottom edge.
- **Do not add a meta row to the cards** — no dates, categories, read-times, author names, index numbers or arrows. Title only.
- **Do not add carousel chrome.** No prev/next arrows, no dot pagination, no counter, no "drag me" label. The cut-off outer cards are the affordance.
- **Do not auto-advance or loop the carousel on a timer.** Motion is restrained: it responds to input and is otherwise perfectly still.
- **Do not give the cards borders, strokes, inner glows or glassmorphism.** No `backdrop-filter` anywhere on the page.
- **Do not put a background or blur bar behind the nav.** It sits directly on the black.
- **Do not constrain the carousel to a max-width container with gutters.** It bleeds past both viewport edges and the ±2 cards must be clipped mid-card.
- **Do not crop the card images to landscape or square.** 3:4 portrait, cover.
- **Do not uppercase or letterspace anything** — no `LATEST POSTS` eyebrow, no tracked-out nav.
- **Do not parallax the headline or the nav.** They enter once on load and then never move again.
- **Do not read sizes off a mockup.** Body is 17px at 1440 and every level above derives from the ratio table in §4.
### Imagery — already generated
These pictures were made for this design and are hosted at the URLs below.
Use them as the `src` exactly as written, and keep the alt text. Do not
generate your own, do not reach for a stock library or a placeholder
service, and do not feed the Imagery section above back to an image model —
that work is done. Size and crop them with CSS (`object-fit: cover`) rather
than assuming their dimensions, and download them into the project if you
would rather not hotlink.
- https://ai-taste-vault.vercel.app/v/demo/voyager2-dark-post-carousel/images/01-card-gold-marble.webp — Macro photograph of white and grey marbled fluid paint veined with thick ochre-gold, edges falling into black
- https://ai-taste-vault.vercel.app/v/demo/voyager2-dark-post-carousel/images/02-card-red-fissure.webp — Macro photograph of crimson ink blooming across a dark brown ground like a molten crack
- https://ai-taste-vault.vercel.app/v/demo/voyager2-dark-post-carousel/images/03-card-teal-nebula.webp — Macro photograph of cyan and copper-bronze fluid radiating from a dark centre, flecked with small white specks
- https://ai-taste-vault.vercel.app/v/demo/voyager2-dark-post-carousel/images/04-card-magenta-crater.webp — Macro photograph of a pitted pink and magenta pigment surface with dark pocking, soft and low contrast
### Image prompts
What each picture above was generated from, for anyone changing one.
**Macro photograph of white and grey marbled fluid paint veined with thick ochre-gold, edges falling into black** (`01-card-gold-marble`)
MEDIUM AND FINISH: A real macro photograph of poured fluid paint on a wet black surface, shot straight down with a macro lens at close range so the scale is completely unreadable — the wet gloss, the fine crazing where two pigments meet, and the hard tiny specular glints on the raised ridges must all read as physical liquid, not as a digital render or an illustration; natural finish, no HDR clarity, no over-sharpening, no plastic smoothness. COLOUR AND VALUE: This is the brightest image of a five-card deck and it is the only one that reaches white — the pigments are cold chalk white #EFECE6 and pale blue-grey #C9CBCB marbled together, cut through by thick opaque ochre-gold veins in the range #96690A to #C8901A with a few hotter amber licks at #D9A22E, plus two or three small cool green-teal flecks around #3E6B5C where the gold has bled; the ground beneath and around everything is near-black #0A0908 going to #010000; the brightest pixel in the frame is #EFECE6 and the darkest is #010000, and the mid greys must actually be present — this is a full-range image, not a flat or hazy one, but it has no coloured cast beyond the gold. EDGES: All four outer edges and especially all four corners must fall to flat near-black #010000 so the frame dissolves into a black page with no visible seam; the bright marbled mass floats in the middle two-thirds and must not touch or bleed off any edge. SUBJECT: A single continent-like mass of marbled white and grey fluid with gold veining running diagonally through it, so tightly cropped that it reads as an aerial view of an unknown planet — landmass and coastline shapes made purely of paint. COMPOSITION: Portrait orientation, the mass centred slightly above middle; the bottom fifth of the frame must stay dark and quiet with no bright detail, because a centred two-line white serif title is set over it. AVOID: no starfield, no stars, no actual planet or sphere, no Earth, no globe, no clouds, no lens flare, no vignette filter, no bokeh or shallow depth of field, no brush strokes, no canvas texture, no hands, no jars or cups or tools, no glitter, no rainbow or oil-slick iridescence, no purple or magenta anywhere, no grain overlay, no frame or border. Output a 3:4 portrait frame, 1152x1536. No text, no lettering, no logos, no watermarks, no UI.
**Macro photograph of crimson ink blooming across a dark brown ground like a molten crack** (`02-card-red-fissure`)
MEDIUM AND FINISH: A real macro photograph of red ink and pigment blooming through a dark liquid ground, shot straight down at close range with a macro lens; wet, glossy, physically real, with fine feathered tendrils where the pigment diffuses and a few hard specular pinpoints on the wettest ridges — not a render, not digital fire, not an illustration. COLOUR AND VALUE: A dark, low-key image built from three things only — a very dark ground of cold black #060404 and deep burnt brown #2A1409, a torn ribbon of saturated crimson and scarlet running #E71709, #C2160B and #9A1206, and a small number of hotter licks at #FF6A3C where the pigment is thinnest and lit through; roughly three quarters of the frame sits below mid-grey, the brightest pixel is #FF6A3C and only in tiny amounts, the darkest is #010000; there is no white in this image at all and no pink. EDGES: All four outer edges and all four corners fall to flat near-black #010000 so the card corners dissolve into a black page; the red mass is confined to the middle of the frame and must not reach an edge. SUBJECT: A single vertical-diagonal fissure of crimson pigment torn across the dark ground, reading like a molten crack seen from far above — ragged, organic, branching into fine capillaries at both ends. COMPOSITION: Portrait orientation, the fissure running roughly top-left to bottom-right through the centre; the bottom fifth stays dark and free of bright detail because a centred two-line white serif title sits over it. AVOID: no actual fire, flames, embers or sparks, no lava photographs, no volcano, no smoke, no sunburst, no lens flare, no vignette filter, no bokeh, no shallow depth of field, no brush strokes, no canvas, no hands or tools, no gold or yellow, no pink or magenta, no grain overlay, no frame or border. Output a 3:4 portrait frame, 1152x1536. No text, no lettering, no logos, no watermarks, no UI.
**Macro photograph of cyan and copper-bronze fluid radiating from a dark centre, flecked with small white specks** (`03-card-teal-nebula`)
MEDIUM AND FINISH: A real macro photograph of cyan ink dispersing into a dark oily ground, shot straight down at close range with a macro lens; wet and glossy with fine cellular feathering where the two pigments repel each other, and scattered tiny hard white specular points where droplets sit proud of the surface — physical liquid, not a space render, not digital particles. COLOUR AND VALUE: Dark and cool overall, built from a black-teal ground #041014, a radiating body of saturated cyan and petrol blue between #1E8FA8 and #0C5A72, and warm copper-bronze pigment #8A5A2A to #B87A3A crowding the outer reaches where the two colours meet; sparse pinpoint specks of near-white #E6E9E6 no larger than a few pixels each; the brightest pixel is #E6E9E6 in those specks only, the darkest is #010000, and the great majority of the frame sits in the lower half of the range. EDGES: All four outer edges and all four corners fall to flat near-black #010000 so the frame dissolves into a black page with no seam; the radiating mass stops well short of every edge. SUBJECT: Fluid pigment radiating outward from a single dark point slightly above centre, the cyan throwing long thin filaments toward the corners with copper-bronze collecting between them — reading at this crop like a nebula or a deep-sea bloom, but unmistakably made of paint. COMPOSITION: Portrait orientation, radiant centre high in the frame; the bottom fifth stays dark and quiet because a centred two-line white serif title is set over it. AVOID: no actual stars, galaxies, space photography or astrophotography look, no nebula stock imagery, no planets, no glitter, no rainbow or oil-slick iridescence, no lens flare, no vignette filter, no bokeh, no shallow depth of field, no brush strokes, no canvas, no hands or tools, no red or magenta, no grain overlay, no frame or border. Output a 3:4 portrait frame, 1152x1536. No text, no lettering, no logos, no watermarks, no UI.
**Macro photograph of a pitted pink and magenta pigment surface with dark pocking, soft and low contrast** (`04-card-magenta-crater`)
MEDIUM AND FINISH: A real macro photograph of thick pink pigment dried and pitted on a dark surface, shot straight down at close range with a macro lens; matte and slightly powdery rather than wet, with shallow pocks and bubble holes catching a soft even light — physical material, not a render, not an illustration. COLOUR AND VALUE: The softest and lowest-contrast image of the set — dusty rose #C4788E, magenta-pink #C4487E and a deeper wine #7A2murky replaced by #7A2A46 make up the body, with the pocking and the surrounding ground in dark plum-black #1A0A12 falling to #010000; there is no white and no highlight brighter than #D89AAE anywhere in the frame, and no other hue intrudes — no orange, no gold, no cyan; most of the frame sits in a narrow mid-to-low band with only gentle modulation. EDGES: All four outer edges and all four corners fall to flat near-black #010000 so the frame dissolves into a black page; the pink field occupies the middle of the frame and fades off before reaching any edge. SUBJECT: A pitted, cratered field of pink pigment seen from directly above, the pocks scattered irregularly at many sizes so the surface reads as a planetary crust at unreadable scale. COMPOSITION: Portrait orientation, the field roughly centred and evenly distributed, deliberately calm — this card sits half-clipped at the edge of a carousel and is heavily dimmed, so it must read as texture rather than as a subject; the bottom fifth stays dark with no bright detail. AVOID: no actual moon or planet photograph, no sphere, no craters lit by hard directional sun, no strong shadows, no high contrast, no glitter, no rainbow or iridescence, no lens flare, no vignette filter, no bokeh, no shallow depth of field, no brush strokes, no canvas, no hands or tools, no red, gold or cyan, no grain overlay, no frame or border. Output a 3:4 portrait frame, 1152x1536. No text, no lettering, no logos, no watermarks, no UI.
---
## Verta — Cinematic AI Hero
- Page: https://ai-taste-vault.vercel.app/r/localhost-01-image-webp
- Original: http://localhost:4321/api/asset/references/untitled/assets/01-image.webp
- Type: Section
- Tags: AI, Dark mode, Editorial, Full bleed, Hero, Minimal, Nav bar
- Palette: #2A4652, #1A262D, #576768, #FCD797, #D89B72
- Captured: 2026-09-17
- Rebuilt with: Claude Code · Opus 5.5 · Extra high · skills: frontend-design, emil-design-eng, transitions-dev, humanizer, gsap
- Rebuild: https://ai-taste-vault.vercel.app/v/demo/localhost-01-image-webp/index.html
### Prompt — Rebuild
_rebuild · html-css · opus_
#### Cinematic Dark AI Hero — full-bleed photographic section
A single full-viewport hero section: one atmospheric photograph edge-to-edge, a transparent nav floating on top of it, a hairline of meta text at the vertical midpoint, and a two-column content bar pinned to the bottom of the viewport. Everything is typographic and transparent — the photograph does all of the decorative work. No cards, no panels, no gradients drawn in CSS other than the scrim.
This is one section, not a page. The four numbered items below are its bands, top to bottom (band 1 spans the whole section behind the others). The same numbers are used in every section of this prompt.
##### Structure
- Viewport reference: **1440 × 850 CSS px**. Section height = `100svh`, `min-height: 720px`.
- Container: full-bleed. Content is held to a **1312px** content box via **64px** left/right gutters (no centred max-width card — the gutters are the container).
- Grid: **12 columns**, 24px gap → column = 87.3px. Content is placed on it, not centred.
- Bands, top to bottom:
1. **Full-bleed backdrop** — the photograph + scrim, `position: absolute; inset: 0; z-index: 0`. Spans the entire 850px.
2. **Header overlay** — y 0 → 96px. Logo (mark + wordmark) at the left gutter; 5 nav links immediately right of it; a single "Log In" link flush to the right gutter. Transparent, no rule, no fill.
3. **Meta rail** — a single line band at **y ≈ 408–436px** (vertical centre, 50% of the section). Two short lines of micro-copy: one flush left at the left gutter, one flush right at the right gutter, same baseline, nothing between them.
4. **Bottom content bar** — two columns, both **bottom-aligned** to a baseline 72px above the section bottom (y ≈ 778px).
- Left column, **cols 1–6** (width ≈ 660px): headline only, 2 lines, starts y ≈ 657px.
- Right column, **cols 8–12** (width ≈ 532px, starts x = 837px): paragraph (2 lines) → 28px gap → CTA row.
- CTA row: a bordered ghost button (≈129 × 44px) then a bare text link, 16px apart.
Placeholder copy by role: wordmark 1 word; nav 1–2 words each, 5 items; account link 2 words; meta rail left "6–8 words, a denial", right "4–5 words, the counter-promise"; headline **5–7 words on exactly two lines**, each line ≤ 22 characters; paragraph 2 lines / ~130 characters total; primary button 2 words; text link 3–4 words.
##### Scroll map
Motion was **not measured** on a live page — every number below is **(inferred)** from the still and given as a range where it is not structural.
| # | Band | Height | Viewports | Scroll consumed | Kind |
|---|---|---|---|---|---|
| 1 | Full-bleed backdrop | 850px | 1.00 | 850px | scroll-linked (parallax on exit) |
| 2 | Header overlay | 96px | 0.11 | — (overlay) | entrance, then static |
| 3 | Meta rail | 28px | 0.03 | — (overlay) | entrance |
| 4 | Bottom content bar | ~138px | 0.16 | — (overlay) | entrance |
**Total section height: 850px = 1.0 viewport.** Nothing pins, nothing stacks. The section scrolls away normally; the only scroll-linked value is the backdrop's parallax offset (band 1), which runs for the 850px it takes the section to leave the viewport.
##### Spacing
- Side gutters: **64px** both sides, at every band. Left gutter is the alignment spine for logo, meta-rail-left and the headline — they share one edge.
- Header: **36px** from the top of the section to the nav's optical centreline (nav row is 24px tall, so 36px top padding → 96px band). Logo mark → wordmark gap **8px**; logo → first nav link **32px**; between nav links **24px**.
- Meta rail: sits at exactly 50% of the section height, no padding of its own.
- Bottom content bar: **72px** from the section bottom to the shared baseline. Headline line-box to paragraph: they are *not* vertically aligned at the top — the right column's block is shorter and bottom-aligns, so the paragraph's first line lands roughly level with the headline's second line.
- Paragraph → CTA row: **28px**. Button → text link: **16px**.
- Column gutter between the two content columns: **177px** of empty space (cols 1–6 vs 8–12 plus the skipped column). Do not close this gap; the emptiness across the middle is the composition.
- Rhythm: the section has exactly three horizontal events — 96px in, 50% in, 72px from the bottom. Nothing occupies the space between them.
##### Type
Family class: **neo-grotesk**, tight and neutral — no humanist warmth, no geometric circles. Free stand-in: **Inter** (or Archivo). Single family throughout; weight, size and opacity carry the hierarchy.
Body anchor: **17px** at 1440.
| Level | Ratio to body | Size | Line-height | Letter-spacing | Weight |
|---|---|---|---|---|---|
| Headline (4) | **3.5×** | 60px | 1.07 (64px) | −0.025em | 500 |
| Logo wordmark (2) | 1.2× | 20px | 1.2 | −0.01em | 600 |
| Body paragraph (4) | **1×** | 17px | 1.5 (25.5px) | −0.005em | 400 |
| Nav link (2) | 0.88× | 15px | 1.4 | 0 | 450 |
| Account link (2) | 0.88× | 15px | 1.4 | 0 | 500 |
| Button label (4) | 0.88× | 15px | 1.2 | 0 | 500 |
| Text link (4) | 0.88× | 15px | 1.2 | 0 | 500 |
| Meta rail (3) | 0.7× | 12px | 1.4 | +0.01em | 400 |
Max line lengths: headline **≤ 22 characters per line** (≈660px, hard two-line break — author the break, don't let it wrap); paragraph **≤ 66 characters** (532px); meta rail lines ≤ 30 characters each.
The meta rail reads almost subliminal in the composition — it is small *and* held at 55% opacity. Keep it at 12px; do not go smaller to chase the effect.
##### Colour
Sampled from the photograph; the photograph is the palette.
| Hex | Role |
|---|---|
| **#2A4652** | Dominant surface — the hazed teal wall/atmosphere, covers roughly half the frame. This is the section's perceived background colour; use it as the `background-color` behind the image so there is no white flash on load. |
| **#1A262D** | Deep field — floor, vignette, top corners. Second largest mass; the scrim pushes toward this. |
| **#576768** | Desaturated grey-teal midtone — the haze between the light and the wall. Never used as a UI colour, only present in the image. |
| **#FCD797** | **The single accent** — the light core of the doorway. |
| **#D89B72** | Accent falloff — the amber wedge of light on the floor. |
Accent rule, strictly: **#FCD797 and #D89B72 appear only inside the photograph.** No gold button, no gold text, no gold underline, no gold gradient, no gold icon. The one permitted exception is the keyboard focus ring (2px #FCD797, 2px offset), because it must be visible against teal.
Text colours, all white at set opacities: headline `#FFFFFF` 100%; paragraph `rgba(255,255,255,0.82)`; nav links `rgba(255,255,255,0.72)`; account link `rgba(255,255,255,0.88)`; logo `#FFFFFF`; meta rail `rgba(255,255,255,0.55)`.
Scrim over the image (both needed, both subtle):
- `linear-gradient(to top, rgba(16,26,32,0.55) 0%, rgba(16,26,32,0) 42%)` — protects the bottom content bar.
- `linear-gradient(to bottom, rgba(16,26,32,0.35) 0%, rgba(16,26,32,0) 18%)` — protects the nav.
##### Surface
- Borders: exactly one — the ghost button, **1px solid rgba(255,255,255,0.45)**. No header rule, no dividers, no outlines anywhere else.
- Radii: **4px** on the ghost button. Everything else square. The section itself is full-bleed with square corners.
- Shadows: **none**. No box-shadow, no text-shadow, no glow. The image's own light does the lifting; the scrim does the contrast.
- Fills: the button is transparent over the photograph, not frosted. No `backdrop-filter` anywhere.
##### Imagery
One image, and only one.
- **Hero backdrop (band 1)** — full-bleed, aspect **1440 × 850 (≈1.7:1)**, `object-fit: cover`, `object-position: center 55%`. Subject: a vast, near-empty dark interior seen straight on; a single small human figure in a long coat stands with their back to us, slightly right of centre, dwarfed by a tall vertical slit of warm light in the far wall. The slit runs from the floor to about three-quarters of the frame height and throws a hard-edged wedge of amber light diagonally across a wet concrete floor toward the lower-left corner. Treatment: heavy volumetric haze, duotone — cold teal everywhere except the light source and its wedge; the figure reads as a silhouette with a thin warm rim on one side. Low contrast in the shadows, no crushed blacks, fine film grain. The figure should sit at roughly 72% of the width and 62% of the height so it stays clear of both the headline (left) and the paragraph (right).
No logos, no icons, no illustrations, no second image. The logo mark is a 23px hairline circle outline, 1.5px stroke, white — drawn, not an asset.
##### Motion
No live measurement was available; kinds, directions and orders are **(inferred)** from the composition, and every duration/offset is given as a range rather than an exact value.
**1 — Full-bleed backdrop**
- kind: scroll-linked (plus a one-time entrance scale)
- what moves: the `![]()
` inside an `overflow: hidden` wrapper.
- from → to: **scroll-linked parallax** — `translateY: 0 → −60px to −90px` (inferred range) as the section exits. **Entrance** — `scale: 1.05 → 1.00`, `opacity: 0 → 1`, once on load.
- range: parallax runs from page scroll 0 until the section's bottom edge reaches the viewport top (850px of scroll) and **reverses on the way back up**. Entrance: on load, duration 1.0–1.4s (not measured), ease-out, no stagger.
- reduced motion: no parallax, no scale — image renders at its final transform, opacity fades in over ≤ 200ms.
**2 — Header overlay**
- kind: entrance, then static
- what moves: logo group and the nav-link row as one unit.
- from → to: `opacity 0 → 1`, `translateY −8px → 0`.
- range: on load, after a 100–200ms delay (not measured); duration 400–600ms; ease-out; stagger 0 (the row moves as one block, it does not cascade per link).
- reduced motion: opacity only, ≤ 200ms, no translate. The header does **not** hide, shrink, or gain a background on scroll.
**3 — Meta rail**
- kind: entrance
- what moves: the two micro-copy lines.
- from → to: `opacity 0 → 0.55` only. No translate, no blur, no clip.
- range: plays once on load, 250–400ms after the header (not measured); duration 500–700ms; linear-to-ease-out; both lines together, no stagger.
- reduced motion: appears at final opacity immediately.
**4 — Bottom content bar**
- kind: entrance (plays once on arrival; it is not scroll-linked and does not reverse)
- what moves: headline line 1, headline line 2, paragraph, CTA row — four items, in that order.
- from → to: each `opacity 0 → 1`, `translateY 24px → 0`, with the two headline lines additionally masked by `clip-path: inset(0 0 100% 0) → inset(0 0 0 0)` on a per-line wrapper so they rise out of their own line box.
- range: trigger is load for the initial view, or the element's top reaching 80% of the viewport if the section is not first on screen — once only. Duration 700–900ms per item (not measured), ease-out (a cubic with a long tail, e.g. `cubic-bezier(0.22, 1, 0.36, 1)`), **stagger 80–120ms** between the four items.
- reduced motion: no translate, no clip-path; the four items fade in together over ≤ 200ms.
###### Interaction transitions (not part of the scroll choreography)
- Nav link hover: colour `rgba(255,255,255,0.72) → 1`, 160ms ease-out. No underline, no movement.
- Account link hover: same, plus a 1px underline fading in at 160ms.
- Ghost button hover: border `rgba(255,255,255,0.45) → 0.85`, background `transparent → rgba(255,255,255,0.08)`, 180ms ease-out.
- Ghost button press: `scale(0.985)`, 90ms.
- Text link hover: a 1px underline wipes in from the left over 200ms; label opacity `0.88 → 1`.
- Focus-visible (all interactive elements): 2px solid `#FCD797`, 2px offset, no transition.
- Logo hover: no state change.
##### Responsive (below 640px)
- Section height `100svh`, `min-height: 620px`. Gutters **64px → 20px**.
- Band 2: nav links collapse to a hamburger at the right gutter; logo stays left; "Log In" moves into the opened sheet. Header band 96px → 64px.
- Band 3: keep the left meta line at the left gutter; **drop the right one** rather than stacking or shrinking it. It is a balance device that has no job in one column.
- Band 4: single column. Headline first, then paragraph, then CTAs. Headline **60px → 34px** (2× body), line-height 1.1, still two authored lines, ≤ 18 characters each. Paragraph 17px → 16px, full width. CTA row: button and text link stay on one row, left-aligned; the button does **not** go full-width.
- Bottom baseline padding 72px → 40px. Paragraph → CTA gap 28px → 20px; headline → paragraph gap 24px.
- Band 1: `object-position: 66% 58%` so the figure and the doorway both stay in frame; never let the crop centre on empty wall.
##### Don'ts
- **Don't put the text on a panel.** No card, no translucent sheet, no frosted `backdrop-filter` block behind the headline or the paragraph. The type sits directly on the photograph; the bottom scrim is the only thing making it legible.
- **Don't darken the whole image.** A flat 40–50% black overlay is the default reach here and it kills the beam — the light wedge is the entire point. Use only the two edge gradients specified.
- **Don't let the accent escape the photograph.** No gold CTA, no gold eyebrow, no `linear-gradient` gold text, no glowing border. The button is a white hairline ghost and stays that way.
- **Don't centre the headline** or centre the hero content. The composition is left-spine headline, right-block paragraph, and a large void between them.
- **Don't top-align the two content columns.** They bottom-align to a shared baseline; top-aligning them collapses the stagger that makes the bar read as one horizontal band.
- **Don't use pill buttons.** 4px radius, not `rounded-full`, not 8px, not 12px.
- **Don't make the nav sticky, filled, blurred or shrinking.** It is transparent, it scrolls away with the section, it has no bottom rule.
- **Don't add a bouncing scroll cue**, mouse icon, or "scroll" label at the bottom centre. There is nothing there and that is deliberate.
- **Don't animate the headline word-by-word or character-by-character.** Two line-level clip reveals, that is all — a per-word cascade turns a cinematic still into a template.
- **Don't add a serif, a second family, or a mono eyebrow.** One neo-grotesk, four weights at most.
- **Don't let the headline wrap to three lines** at any width. Reduce the size or shorten the copy first.
- **Don't add text-shadow or a glow** to lift the type off the image — if it is not legible, the scrim gradient is wrong, not the type.
- **Don't scale the meta rail up** because it looks too small. Its near-invisibility at 12px / 55% opacity is the intended register.
- **Don't generate a bright, populated, or wide-angle "office" image.** The picture is mostly empty, mostly dark, one figure, one light source.
### Imagery — already generated
These pictures were made for this design and are hosted at the URLs below.
Use them as the `src` exactly as written, and keep the alt text. Do not
generate your own, do not reach for a stock library or a placeholder
service, and do not feed the Imagery section above back to an image model —
that work is done. Size and crop them with CSS (`object-fit: cover`) rather
than assuming their dimensions, and download them into the project if you
would rather not hotlink.
- https://ai-taste-vault.vercel.app/v/demo/localhost-01-image-webp/images/01-hero-backdrop.webp — A lone figure in a long coat stands with their back to us in a vast, empty, hazed teal interior, facing a tall narrow slit of warm amber light in the far wall that casts a wedge of glow across the wet floor
### Image prompts
What each picture above was generated from, for anyone changing one.
**A lone figure in a long coat stands with their back to us in a vast, empty, hazed teal interior, facing a tall narrow slit of warm amber light in the far wall that casts a wedge of glow across the wet floor** (`01-hero-backdrop`)
MEDIUM AND FINISH: A cinematic digital render of an empty architectural interior, rendered as a single-source volumetric light study — heavy atmospheric haze fills the whole volume, edges are soft and diffused, surfaces are matte and featureless, and a fine even film grain sits over everything. Duotone treatment: the entire frame is cold desaturated teal except the one light source and the light it throws. Soft focus falloff, no crisp detail anywhere; no macro texture, no rendered material detail on walls or floor. COLOUR AND VALUE: The frame is built on cold teal. The dominant mass — the far wall, the air, the upper half — is a hazed blue-teal #2A4652 softening to #3A5866 near the light and to a deep #1A262D in the upper corners and along the floor at the edges. The darkest value anywhere is #131F26 in the top-left and top-right corners; there are no true blacks and no crushed shadows — every shadow stays lifted, milky and slightly blue. The mid-haze between the light and the wall is a desaturated grey-teal #576768. Only two warm values exist and only inside the light: the core of the slit is a pale warm #FCD797 rising to a soft near-white #FDF4E2 at its hottest centre, and the light spilling onto the floor is an amber #D89B72 that fades back into teal within the middle third of the frame. No other hue appears — no green, no purple, no magenta in the shadows, no orange in the air except along the beam itself. Roughly three quarters of the pixels sit in the narrow teal band between #1A262D and #3A5866; the warm values are a small minority of the frame. EDGES: Full-bleed to all four edges, no border, no frame, no vignette ring. The top fifth of the frame is the quietest and darkest part — flat, empty hazed teal near #1E2E37, with nothing in it — so it reads as a clean field. The bottom eighth settles to a slightly deeper #1A262D across its full width. The extreme corners must stay soft and open, not pinched by a dark vignette. SUBJECT: A vast, near-empty dark interior seen straight on, one-point perspective, with a tall flat far wall and a broad wet concrete floor meeting it at a horizon line about 72% of the way down the frame. In the far wall, at roughly 83% of the frame width, a very narrow vertical slit of warm light — only about 3% of the frame wide — runs from the floor line up to about a quarter of the way down from the top of the frame. It is a plain slot of glow, not a door with hardware, no frame, no panels, no architecture around it. From the base of that slit a hard-edged wedge of amber light spreads diagonally down and to the left across the wet floor, widening as it comes forward, brightest just in front of the slit and dissolving back into teal before it reaches the left third. A single small human figure in a long coat stands with their back to us on the floor, slightly right of centre at about 73% of the frame width, head at roughly half the frame height, occupying only about a fifth of the frame height — small, dwarfed by the space. The figure reads as a near-solid dark silhouette #1C2A31 with a single thin warm rim of light down the side facing the slit, and a long soft reflection beneath them on the wet floor. COMPOSITION: The entire left half of the frame is empty — bare hazed wall above, bare glistening floor below, nothing in it at all. Keep the lower-left quadrant and the lower-right quadrant plain and low-contrast, with no detail, no objects and no bright spots, because type is placed over both. The horizontal band across the vertical centre of the frame must also stay quiet on both the far left and far right edges. Nothing else occupies the room: no furniture, no columns, no pipes, no signage, no second figure, no doorway on the left. AVOID: no lens flare, no starburst, no anamorphic streaks, no spoked god-rays fanning from the slit, no glowing halo or portal ring, no sparkling dust motes or floating particles, no black vignette, no crushed blacks, no high-contrast HDR grade, no punchy orange-and-teal blockbuster colour, no shallow depth of field or bokeh, no sharp clarity or edge sharpening, no visible camera artefacts, no sunbeam through windows, no sci-fi or fantasy energy effects, no ornate architecture, no wide-angle distortion, no bright or populated interior, no warm colour anywhere outside the slit and its floor wedge. Output a wide 16:9 landscape frame, 1536x864. No text, no lettering, no logos, no watermarks, no UI.
---
## Stayli — Vacation rental landing page
- Page: https://ai-taste-vault.vercel.app/r/stayli-vacation-rental-landing-page
- Original: https://br.pinterest.com/pin/622270873549136243/
- Type: Landing page
- Tags: CTA band, Feature grid, Footer, Gallery, Hero, High contrast, Light mode, Minimal, Nav bar, Restrained motion, Testimonials
- Palette: #FCFCFC, #131312, #D9D9D8, #96CBFB, #539CDA
- Captured: 2026-09-17
- Rebuilt with: Claude Code · Opus 5.5 · Extra high · skills: frontend-design, emil-design-eng, transitions-dev, humanizer, gsap
- Rebuild: https://ai-taste-vault.vercel.app/v/demo/stayli-vacation-rental-landing-page/index.html
### Prompt — Rebuild
_rebuild · html-css · opus_
#### Bright rental-listing landing page — rebuild prompt
A long, light, high-contrast marketing page for a vacation-rental / stay-booking product. The whole design rests on one idea: a near-white sheet, near-black type and buttons, hairline-bordered cards, and photography that supplies the only real colour (a graduated blue desert sky). Everything else is restraint.
**All pixel numbers below describe a 1200px-wide viewport with a 900px-tall window, matching the capture.** Scale type and padding down proportionally below that.
> No motion report was supplied with this reference. Every timing, easing, trigger and scroll range below is marked **(inferred)** and read off the stills plus the full-page composite. Durations are given as ranges, never exact values; nothing here was measured on a live page.
---
##### Structure
Full-bleed page, no visible page frame or mat. Content container is **max-width 1200px, 40px side padding → 1120px content column**, centred. Base grid is 12 columns with a **32px gutter**; the recurring layouts are 3 × 352px (card rows), 2 × 544px (split blocks), and an asymmetric 2/1 (722px + 366px) for the gallery and contact blocks.
Sections top to bottom:
1. **Nav bar** — transparent overlay on the hero, 88px tall, full container width. Wordmark left (circular glyph + 6-letter name), 6 text links centred, one dark solid button right.
2. **Hero** — centred type on a sky gradient, then a full-bleed photograph, then a second narrow photograph strip.
3. **Statement block** — small left label, large right paragraph, two icon/feature items under the paragraph, one dark button.
4. **Gallery pair** — two photographs side by side, 2/1 widths.
5. **Listings row** — eyebrow + 2-line headline left, outline button right, 3 property cards, carousel arrows below left.
6. **Why-choose trio** — centred eyebrow + centred 2-line headline, 3 centred feature columns each with a square icon tile.
7. **Since-year split header** — 2-line headline left, paragraph + dark button right.
8. **Video panel** — one full-container photograph with a play pill in the lower right.
9. **Testimonial** — large quote + attribution + arrows left, one portrait photograph right.
10. **Blog row** — eyebrow + 2-line headline left, outline button right, 3 article cards.
11. **CTA band** — full-bleed photograph with sky, centred 2-line headline, one light button.
12. **Contact split** — eyebrow + headline + paragraph + dark button left, one tall photograph right.
13. **Footer** — near-black block: logo mark, 4 link columns, newsletter field, then an oversized wordmark band flush to the bottom edge.
---
##### Scroll map
Viewport = 900px. Kinds are conservative on purpose: **nothing pins and nothing stacks.** All values (inferred) from the page composite.
| # | Section | Height | Viewports | Scroll consumed | Kind |
|---|---------|--------|-----------|-----------------|------|
| 1 | Nav bar | 88px | 0.10 | 0 (sticky overlay) | scroll-linked (background only) |
| 2 | Hero | 1060px | 1.18 | 1060px | entrance + scroll-linked photo |
| 3 | Statement block | 660px | 0.73 | 660px | entrance |
| 4 | Gallery pair | 500px | 0.56 | 500px | entrance |
| 5 | Listings row | 880px | 0.98 | 880px | entrance |
| 6 | Why-choose trio | 480px | 0.53 | 480px | entrance |
| 7 | Since-year header | 320px | 0.36 | 320px | entrance |
| 8 | Video panel | 700px | 0.78 | 700px | scroll-linked |
| 9 | Testimonial | 480px | 0.53 | 480px | entrance |
| 10 | Blog row | 740px | 0.82 | 740px | entrance |
| 11 | CTA band | 840px | 0.93 | 840px | scroll-linked |
| 12 | Contact split | 560px | 0.62 | 560px | entrance |
| 13 | Footer | 798px | 0.89 | 798px | entrance |
**Total page height: 8018px ≈ 8.9 viewports.**
---
##### Spacing
- **Section rhythm:** 120px top and bottom padding is the default (240px of air between adjacent section contents). Three pairs are deliberately tighter: 2→3 uses 96px, 3→4 uses 64px, 7→8 uses 48px (the header and its video panel read as one unit).
- Sections 11 and 13 have no side padding — they bleed. Their *inner* content keeps the 1120px column.
- **Headline → supporting copy:** 20px. **Eyebrow → headline:** 16px. **Copy → button:** 32px.
- **Card grid gap:** 32px horizontal. **Split block gap:** 40px.
- **Card internals:** 8px outer padding around the image, image then 10px radius; text block 16px padding, 8px between title and location, 12px before the meta/price row.
- **Feature items (3, 6):** 20px icon-tile → title, 8px title → paragraph.
- **Nav:** 32px between links, 40px between the link cluster and the button.
- **Footer:** 64px top padding, 48px between the link grid and the wordmark band, wordmark sits flush to the bottom with 0 padding beneath it and is clipped by the page edge.
---
##### Type
One family throughout. Class: **neo-grotesk** — tight apertures, near-neutral, low contrast. Free stand-in: **Inter Tight** (or Geist). Headlines are *medium, never bold*.
| Level | Size | Line-height | Letter-spacing | Weight |
|---|---|---|---|---|
| Hero H1 (2) | 52px | 1.18 | −0.02em | 500 |
| Section H2 (5, 6, 7, 10, 12) | 40px | 1.20 | −0.02em | 500 |
| CTA H2 (11) | 44px | 1.20 | −0.02em | 500 |
| Statement paragraph (3) | 22px | 1.45 | −0.01em | 400 |
| Pull quote (9) | 28px | 1.35 | −0.01em | 400 |
| Card / feature title | 16px | 1.30 | −0.01em | 500 |
| Body & card excerpt | 14px | 1.60 | 0 | 400 |
| Eyebrow (5, 6, 10, 12) | 11px | 1.20 | 0.12em, uppercase | 500 |
| Nav link | 13px | 1.20 | 0 | 400 |
| Button label | 13px | 1.20 | −0.005em | 500 |
| Meta / badge / date | 11px | 1.30 | 0.02em | 400 |
| Footer link | 13px | 1.90 | 0 | 400 |
| Footer wordmark | 220px | 0.85 | −0.04em | 500 |
**Max line length:** 62ch for the statement paragraph (3) and the quote (9); 46ch for card excerpts and feature paragraphs; hero subcopy is hard-wrapped to two short lines of ~40ch. Headlines are hand-broken to exactly two lines everywhere — never let them run to three.
---
##### Colour
- **#FCFCFC — ground.** Roughly 70% of the surface: every section background from 3 to 12. Warm-neutral off-white, not pure white.
- **#131312 — ink.** All body and heading text, all solid buttons, the icon tiles' glyphs, and the entire footer block (13). The second-largest area, almost all of it concentrated in the footer.
- **#D9D9D8 — hairline.** 1px card and input borders, section dividers, outline-button borders, avatar rings. Also mixed into the ground for muted meta text (use **#6B6B68**, inferred, for secondary copy — it is #D9D9D8's role, one step darker so it stays legible).
- **#96CBFB — sky, light stop.** Top of the hero gradient (2) and the CTA band gradient (11). Continuous with the photographs' own sky, which is the point: the gradient is there so the page appears to *become* the photo.
- **#539CDA — sky, deep stop.** Upper band of the same two gradients only.
**The accent is the blue, and it is photographic.** It is allowed in exactly three places: the hero gradient, the CTA band gradient, and the skies inside the images. It never appears as a button, a link, a border, a focus ring, or a hover state. Buttons are #131312 on light and #FCFCFC on dark — no blue UI, ever.
One tiny exception (inferred, not in the sampled palette): the price chip on the listing cards (5) is a pale chartreuse pill, roughly **#DCEB57**, with #131312 text. It appears on nothing else, occupies maybe 0.05% of the page, and is the only saturated non-photographic colour. Keep it that small or drop it.
---
##### Surface
- **Borders:** 1px solid #D9D9D8. Used on listing cards, blog cards, the newsletter input, outline buttons, carousel arrow buttons, and the square icon tiles. Nothing uses a 2px border.
- **Radii:** cards 14px; images inside cards 10px; standalone photographs (2, 4, 8, 9, 12) 16px; buttons 10px rounded rectangle; badges, price chips, tag chips, the play pill and the carousel arrows are full pills (999px); icon tiles 10px; newsletter input 8px.
- **Shadows: none.** No drop shadow, no card elevation, no glow, no inner shadow. Separation comes entirely from the hairline and from the gap between the near-white ground and the photograph. The only soft edge on the page is the hero gradient itself.
- The full-bleed hero photo (2) and CTA band (11) have **square corners** — they touch all four page edges. Only contained images are rounded.
---
##### Imagery
All photography is one continuous location and one treatment: a **low, flat-roofed modern house in a hot dry landscape** — pale stucco and board-formed concrete volumes, deep-set floor-to-ceiling glazing with slim dark mullions, a shaded recessed terrace, surrounded by granite boulders, bleached ornamental grasses, agave and a tall columnar cactus, under a cloudless graduated sky. Midday sun, hard short shadows, natural colour, mild contrast, no filter, no grade toward teal or orange. Every frame reads as the same property photographed from a different distance.
1. **Hero primary (2)** — the house head-on from the drive, sky filling the top third so it joins the gradient above it. Full-bleed, **16:6** (1200 × 440).
2. **Hero strip (2)** — a wider, flatter crop of the same scene, ground and planting only, sitting directly beneath the primary. Full-bleed, **16:2.1** (1200 × 158).
3. **Gallery left (4)** — three-quarter view of the building mass with boulders in the foreground. **3:2** (722 × 481).
4. **Gallery right (4)** — a tighter vertical-ish crop of one glazed corner. **3:4** (366 × 488) — wait, matched to the left image's height: **366 × 481, roughly 3:4.**
5. **Listing card thumbnails (5), ×3** — the same house at varying distance and time of day. **4:3** (336 × 252 inside the card).
6. **Video still (8)** — the widest, most establishing shot of the whole page: full property in landscape, generous sky. **1120 × 560, 2:1.**
7. **Testimonial portrait (9)** — a vertical crop: corner of the house with planting, no people. **4:5** (366 × 458).
8. **Blog card thumbnails (10), ×3** — architectural details and landscape edges. **4:3** (336 × 252).
9. **CTA band (11)** — dusk-leaning wide shot, sky occupying the top half so the overlaid white headline sits on unbroken blue. Full-bleed, **1200 × 840.**
10. **Contact image (12)** — vertical, an angled view of the glazed façade. **4:5** (366 × 458).
No people, no logos, no signage, no interiors, no drone-top-down shots.
---
##### Motion
The page is deliberately quiet: it is a light editorial layout, not a motion piece. Almost every section is a single fade-and-rise entrance that plays **once**; two sections carry gentle scroll-linked image movement that **reverses on scroll-up**; nothing pins, nothing stacks, nothing scroll-jacks.
Global entrance defaults — **(inferred, not measured)**: trigger when the element's top reaches 80% of the viewport; duration in the **500–700ms** range; ease-out with a long tail (an `ease-out`-family curve, e.g. cubic-bezier(0.22, 1, 0.36, 1)); stagger between siblings in the **60–90ms** range. Travel distance is small — 16 to 24px — never 60px or more.
###### 1. Nav bar
- **kind** — scroll-linked (background only)
- **what moves** — nothing translates; the bar's own background and border cross-fade
- **from → to** — background `transparent` → `rgba(252,252,252,0.92)` with `backdrop-filter: blur(12px)` and a 1px #D9D9D8 bottom border fading 0 → 1; link colour #FCFCFC → #131312; the right-hand button inverts from #FCFCFC-on-transparent to solid #131312 with #FCFCFC text
- **range** — from 0 to 120px of scroll; reverses exactly on the way back up (inferred)
- **reduced motion** — same state change, applied instantly at the 120px threshold, no blur transition
- The bar is sticky and never hides on scroll-down.
###### 2. Hero
- **kind** — entrance (type) + scroll-linked (photograph)
- **what moves** — headline, subcopy, button enter; then the primary photo and the strip beneath it
- **from → to** — type: opacity 0 → 1, translateY 24px → 0, in the order headline / subcopy / button. Photograph: translateY 0 → −60px and scale 1.04 → 1.0 as the page scrolls, i.e. it settles rather than parallaxes away (inferred)
- **range** — type entrance fires on load, ~150ms after paint, duration 600–800ms (inferred), 80ms stagger. Photo: scroll-linked from page top until the photo's bottom edge reaches the viewport top; reverses on scroll-up
- **reduced motion** — type appears at final position with a plain opacity fade; photo is locked at translateY 0, scale 1.0
###### 3. Statement block
- **kind** — entrance
- **what moves** — left label, statement paragraph, then the two feature items, then the button
- **from → to** — opacity 0 → 1, translateY 20px → 0
- **range** — once, when the section's top reaches 80% of the viewport; 500–700ms (inferred); 70ms stagger, the two feature items staggering left-to-right
- **reduced motion** — opacity only, no translate
###### 4. Gallery pair
- **kind** — entrance
- **what moves** — the two photographs, each as a clipped reveal
- **from → to** — `clip-path: inset(0 0 12% 0)` → `inset(0 0 0 0)` with the inner image at scale 1.06 → 1.0; opacity stays 1 throughout
- **range** — once, when each image's top reaches 85% of the viewport; 700–900ms (inferred); 100ms stagger, left before right
- **reduced motion** — images render at final clip and scale, no reveal
###### 5. Listings row
- **kind** — entrance
- **what moves** — eyebrow + headline + outline button as one group, then the three cards, then the arrow pair
- **from → to** — opacity 0 → 1, translateY 24px → 0
- **range** — once, when the section top reaches 80% of the viewport; 500–700ms (inferred); cards stagger 80ms left-to-right; arrows follow the last card
- **reduced motion** — opacity only
- The carousel itself does not advance on scroll — it moves only on arrow press (see interactions).
###### 6. Why-choose trio
- **kind** — entrance
- **what moves** — centred eyebrow, centred headline, then three columns
- **from → to** — opacity 0 → 1, translateY 16px → 0; icon tiles additionally scale 0.92 → 1.0
- **range** — once, when the section top reaches 80% of the viewport; 450–650ms (inferred); 70ms stagger across the three columns
- **reduced motion** — opacity only, tiles at scale 1.0
###### 7. Since-year header
- **kind** — entrance
- **what moves** — left headline and right paragraph/button, as two groups
- **from → to** — opacity 0 → 1, translateY 20px → 0
- **range** — once, at 80% of the viewport; 500–700ms (inferred); 90ms between the left and right groups
- **reduced motion** — opacity only
###### 8. Video panel
- **kind** — scroll-linked
- **what moves** — the photograph inside its rounded 16px frame; the play pill
- **from → to** — the image is 112% of the frame height and translates translateY +28px → −28px across the section's pass, a contained vertical drift with no scale change; the play pill is static relative to the frame. Reverses on scroll-up (inferred)
- **range** — from the frame's top entering the viewport bottom until its bottom leaves the viewport top
- **reduced motion** — image centred and locked, no drift
- The frame also gets the section-6 style entrance reveal on first arrival (`clip-path: inset(0 0 10% 0)` → `inset(0)`, 700–900ms, inferred), once.
###### 9. Testimonial
- **kind** — entrance
- **what moves** — quote, attribution block, arrow pair, and the portrait image
- **from → to** — text: opacity 0 → 1, translateY 20px → 0. Image: `clip-path: inset(0 0 12% 0)` → `inset(0)` with inner scale 1.06 → 1.0
- **range** — once, at 80% of the viewport; text 500–700ms, image 700–900ms (inferred); text leads the image by 100ms
- **reduced motion** — final states, opacity fade only
- Quote changes triggered by the arrows are an interaction, not part of this entrance.
###### 10. Blog row
- **kind** — entrance
- **what moves** — header group (eyebrow, headline, outline button), then three cards
- **from → to** — opacity 0 → 1, translateY 24px → 0
- **range** — once, at 80% of the viewport; 500–700ms (inferred); 80ms stagger left-to-right
- **reduced motion** — opacity only
###### 11. CTA band
- **kind** — scroll-linked
- **what moves** — the full-bleed background photograph behind static centred type
- **from → to** — background image scale 1.08 → 1.0 and translateY +40px → −40px across the band's pass; the headline and button do not move at all. Reverses on scroll-up (inferred)
- **range** — from the band's top edge entering the viewport bottom until its bottom edge reaches the viewport top
- **reduced motion** — background fixed at scale 1.0, translateY 0
- The headline and button additionally fade in once (opacity 0 → 1, translateY 16px → 0, 500–700ms, inferred) when the band is 60% in view.
###### 12. Contact split
- **kind** — entrance
- **what moves** — left text column (eyebrow, headline, paragraph, button), then the right photograph
- **from → to** — text: opacity 0 → 1, translateY 20px → 0. Image: `clip-path: inset(0 0 12% 0)` → `inset(0)`, inner scale 1.05 → 1.0
- **range** — once, at 80% of the viewport; 500–700ms text, 700–900ms image (inferred); 90ms offset
- **reduced motion** — final states, opacity only
###### 13. Footer
- **kind** — entrance (link grid) + static (wordmark)
- **what moves** — the four link columns and the newsletter block fade up; the oversized wordmark does **not** move, scale, scroll horizontally or track the cursor
- **from → to** — columns: opacity 0 → 1, translateY 16px → 0
- **range** — once, when the footer top reaches 90% of the viewport; 450–650ms (inferred); 60ms stagger across the columns
- **reduced motion** — opacity only
###### Interaction transitions (not scroll choreography)
- **Nav link hover** — colour steps to full ink (or full white pre-scroll) with a 1px underline growing from left, 150–200ms (inferred).
- **Solid button hover** — background #131312 → #2A2A28, no lift, no shadow, 150ms.
- **Outline button hover** — fills: background transparent → #131312, label → #FCFCFC, border colour follows, 150ms.
- **Light button on photo hover (11)** — background #FCFCFC → #E8E8E6.
- **Button press** — scale 0.98 for the duration of the press, instant release.
- **Card hover (5, 10)** — the inner image scales 1.0 → 1.04 inside its fixed 10px-radius frame, 300–400ms (inferred); the card border darkens #D9D9D8 → #B9B9B6. The card itself never translates or gains a shadow.
- **Carousel arrows (5, 9)** — on press the track translates by one card + 32px gap, 400–500ms ease-out (inferred); disabled arrow drops to 40% opacity. Arrow hover inverts the pill to #131312/#FCFCFC.
- **Play pill (8)** — hover scales 1.0 → 1.04 and the triangle glyph nudges 1px right; press opens a modal that fades in over a #131312 scrim at 70% opacity, 250–350ms (inferred); Escape and scrim click close with the same transition reversed.
- **Newsletter input focus** — border #D9D9D8 → #131312, no ring, no colour shift, 120ms.
- **Focus-visible (all)** — 2px #131312 outline at 2px offset. Never blue.
---
##### Responsive
Below 640px, container padding drops to 20px (content column = viewport − 40px).
- **1** Nav: links collapse into a hamburger; the solid button stays visible at 32px tall; the open drawer is a full-height #FCFCFC panel sliding from the right, 250–350ms (inferred).
- **2** Hero H1 → 32px/1.20; subcopy → 15px; hero photo crops to 4:3, strip is **dropped**; the scroll-linked photo drift is disabled.
- **3** Stacks: label above paragraph; paragraph → 18px/1.5; the two feature items stack full width.
- **4** Gallery stacks to two full-width 4:3 images, 16px gap.
- **5, 10** Card rows become a horizontally scrollable track with 20px leading inset, cards at 78vw, snap-to-start; the header button moves below the headline and goes full width; carousel arrows are **dropped** in 5 (native swipe replaces them).
- **6** Feature columns stack, left-aligned rather than centred; icon tiles stay 40px.
- **7** Headline 40 → 28px, paragraph and button stack beneath.
- **8** Video panel goes 3:2, radius 12px, drift disabled; play pill shrinks to icon-only 40px.
- **9** Quote → 20px/1.4, image moves below the attribution at 3:2; arrows sit under the image.
- **11** Band height 840 → 520px; headline → 30px; background uses a tighter centre crop so the sky still sits behind the type.
- **12** Text above, image below at 4:3.
- **13** Footer link grid 4 → 2 columns; newsletter field full width with the button stacked beneath; wordmark scales to fill the viewport width exactly (≈ 88px), still clipped at the bottom edge.
- Section padding 120px → 64px throughout; tight pairs → 32px. Total page height lands around 5600–6000px at 390px wide.
---
##### Don'ts
- **Don't use blue as a UI colour.** Every model reaching for a "travel/booking" palette will paint the buttons #539CDA. Buttons are near-black. The blue exists only as sky — in two gradients and inside the photographs. One blue link ruins the whole page.
- **Don't bold the headlines.** They are weight 500 with −0.02em tracking. `font-bold` / 700 makes it look like a template.
- **Don't add shadows.** No `shadow-md`, no `shadow-lg`, no card elevation on hover. The entire design's separation budget is one 1px #D9D9D8 hairline.
- **Don't centre everything.** Only 2, 6 and 11 are centred. Sections 3, 5, 7, 9, 10, 12 are left-aligned with the button or secondary column pushed right. Centring section 5 or 10 collapses the editorial rhythm.
- **Don't use pure #FFFFFF or #000000.** The ground is #FCFCFC and the ink is #131312 — the slight warmth is most of the page's character.
- **Don't pin, stack or scroll-jack.** There is no sticky section, no horizontal scroll section, no "scrollytelling" step sequence. Restraint is the brief; adding a pinned section is the single most likely way to get this wrong.
- **Don't parallax the contained photographs.** Only 2, 8 and 11 move, and only within their own frame at ±28–60px. A 200px parallax on the gallery images looks cheap here.
- **Don't re-trigger entrances.** Every fade-up plays once and stays. Re-animating on scroll-up makes an 8000px page feel nervous.
- **Don't inflate the body copy.** Body is 14px/1.6 and card excerpts are 14px. 16–18px body destroys the density that makes the hairline cards read as a system.
- **Don't reach for a serif, a display face or a second family.** One neo-grotesk at four weights maximum.
- **Don't round the full-bleed sections.** Sections 2, 11 and 13 have square corners and touch the viewport edges; only contained images get 16px.
- **Don't put borders or shadows on photographs.** Images are radius-clipped and nothing else.
- **Don't let the sticky nav become a solid white bar with a shadow.** It's a 92%-opacity blurred sheet with a 1px bottom hairline.
- **Don't scatter the chartreuse.** If you include the price chip, it appears on listing cards only — never on a badge, a button, a tag or a link.
- **Don't let headlines wrap to three lines.** Every headline on this page is hand-broken to exactly two; set explicit max-widths or `
` breakpoints.
- **Don't clip or centre the footer wordmark politely.** It is oversized, flush to the bottom edge, and deliberately cut off by it.
### Imagery — already generated
These pictures were made for this design and are hosted at the URLs below.
Use them as the `src` exactly as written, and keep the alt text. Do not
generate your own, do not reach for a stock library or a placeholder
service, and do not feed the Imagery section above back to an image model —
that work is done. Size and crop them with CSS (`object-fit: cover`) rather
than assuming their dimensions, and download them into the project if you
would rather not hotlink.
- https://ai-taste-vault.vercel.app/v/demo/stayli-vacation-rental-landing-page/images/01-house-wide-establishing.webp — Low flat-roofed modern desert house seen head-on across a gravel drive under a clear graduated blue sky
- https://ai-taste-vault.vercel.app/v/demo/stayli-vacation-rental-landing-page/images/02-house-three-quarter.webp — Three-quarter view of the same modern desert house with granite boulders and dry grasses in the foreground
- https://ai-taste-vault.vercel.app/v/demo/stayli-vacation-rental-landing-page/images/03-house-vertical-detail.webp — Tall vertical crop of a glazed corner of the modern desert house framed by dry planting
- https://ai-taste-vault.vercel.app/v/demo/stayli-vacation-rental-landing-page/images/04-cta-band-wide.webp — Wide view of the modern desert house with open sky filling the upper half of the frame
### Image prompts
What each picture above was generated from, for anyone changing one.
**Low flat-roofed modern desert house seen head-on across a gravel drive under a clear graduated blue sky** (`01-house-wide-establishing`)
MEDIUM AND FINISH: A soft matte digital architectural render — the clean, evenly-lit daylight visualization look, not a photograph: no film grain, no lens flare, no bokeh, no vignette, no HDR clarity, edges crisp but contrast mild and the whole frame slightly airy. COLOUR AND VALUE: The sky is the only saturated thing in the picture — a smooth cloudless gradient from #539CDA at the very top through #96CBFB to a pale #DCEAF5 haze at the horizon. Building surfaces are warm pale stucco and board-formed concrete between #EDE9E1 in sun and #ABA69B on the shaded side; a warm timber soffit around #C09A6B; planting is muted dry olive-sage #8A8F6E and bleached straw #C6B48E; boulders are warm grey #B3ADA2. The darkest value anywhere in the frame is the recessed glazing at about #2C3339 — nothing is darker than that, no blacks, no crushed shadows, and shadows under the eaves stay open and grey-brown, never inky. Natural colour, no grade toward teal or orange, no boosted saturation. EDGES: This is placed full-bleed at the top of a near-white page directly beneath a CSS sky gradient, so the upper third must be unbroken, perfectly smooth graduated sky with nothing entering it — no branches, no roofline, no birds — and the very top row of pixels must sit near #96CBFB so the seam with the gradient above is invisible. The frame will be cropped to a wide horizontal band, so keep the building and horizon centred vertically with generous clear sky above and only a shallow strip of gravel and low planting below. SUBJECT: A single low, flat-roofed modern house in a hot dry landscape, seen head-on from a gravel drive at eye level: two stacked pale stucco and concrete volumes with deep-set floor-to-ceiling glazing behind slim dark mullions, a shaded recessed terrace under a warm timber soffit, granite boulders, bleached ornamental grasses, agave and one tall columnar cactus at the sides of the frame. Midday sun, short hard-edged but soft-valued shadows, deep focus front to back. COMPOSITION: Symmetrical and quiet, the house occupying the middle band, the sides falling away to planting and rock; no strong focal drama, nothing crossing the sky. AVOID: no people, no cars, no signage, no logos, no interiors, no drone or top-down view, no dramatic clouds, no sunset or golden-hour colour, no sun star or lens flare, no black vignette, no shallow depth of field, no saturated travel-brochure greens or turquoise pool, no glowing windows, no reflections of a photographer, no water. Output a wide 3:2 landscape frame, 1536x1024. No text, no lettering, no logos, no watermarks, no UI.
**Three-quarter view of the same modern desert house with granite boulders and dry grasses in the foreground** (`02-house-three-quarter`)
MEDIUM AND FINISH: A soft matte digital architectural render in the same clean daylight-visualization register as the wide establishing shot — flat even light, mild contrast, no film grain, no lens flare, no bokeh, no vignette, no HDR sharpening. COLOUR AND VALUE: Sky reads as a calm cloudless gradient from #96CBFB down to a pale #DCEAF5 near the horizon and occupies only the upper quarter. Stucco and concrete walls run #EDE9E1 in sun to #ABA69B in shade, timber soffit around #C09A6B, dry grasses #C6B48E, muted olive shrubs #8A8F6E, granite boulders #B3ADA2. Darkest value in the frame is the recessed glazing at roughly #2C3339 — no blacks, no deep shadow pockets, shade under the overhang stays open and legible. Natural, unsaturated colour with no colour grade. EDGES: This is cropped into a rounded rectangle on a warm off-white #FCFCFC page and is also reused as a small 4:3 card thumbnail, so the subject must survive a tighter centre crop: keep the building mass fully inside the middle of the frame with a comfortable margin on all four sides and no important detail near the edges. SUBJECT: The same low flat-roofed modern desert house viewed at a three-quarter angle from slightly below, showing two facades at once — a long pale stucco volume with deep-set floor-to-ceiling glazing and slim dark mullions, a shaded recessed terrace, a cantilevered upper box — with a foreground of large granite boulders, bleached ornamental grasses, agave and a columnar cactus, and dry gravel ground. Midday sun, short shadows, deep focus throughout. COMPOSITION: Building set slightly off-centre with the boulder-and-grass foreground filling the lower third, horizon low, sky quiet and empty. AVOID: no people, no cars, no signage, no furniture styling, no interiors, no pool, no drone or top-down angle, no dramatic clouds, no golden hour or sunset, no lens flare, no black vignette, no shallow depth of field or foreground blur, no oversaturated greens, no glowing interior lights. Output a 3:2 landscape frame, 1536x1024. No text, no lettering, no logos, no watermarks, no UI.
**Tall vertical crop of a glazed corner of the modern desert house framed by dry planting** (`03-house-vertical-detail`)
MEDIUM AND FINISH: A soft matte digital architectural render, same clean daylight-visualization finish as the other frames — even light, mild contrast, crisp but unsharpened, no film grain, no lens flare, no bokeh, no vignette. COLOUR AND VALUE: Only a narrow wedge of sky at the top, a pale #A9D3F7 fading to #DCEAF5. Surfaces are warm pale stucco #EDE9E1 in sun and #ABA69B in shade, board-formed concrete slightly cooler, timber soffit #C09A6B, planting muted olive-sage #8A8F6E and bleached straw #C6B48E, boulders #B3ADA2. The darkest value is the deep-set glazing at about #2C3339 and nothing in the frame goes darker — no blacks, no heavy shadow, the recess stays readable. Natural colour, no grade, no saturation boost. EDGES: This sits inside a 16px-radius rounded frame on a warm off-white #FCFCFC page and is used at both 4:5 and 3:4, so keep the composition centred and tolerant of a small crop at top and bottom; no key detail touching any edge. SUBJECT: A tall vertical crop of one glazed corner of the same low modern desert house — the meeting of a pale stucco wall and a floor-to-ceiling window bay with slim dark mullions under a deep overhang, the corner running up through the frame — flanked by bleached ornamental grasses, an agave and part of a columnar cactus, with granite boulders and gravel at the base. Midday sun raking the wall, short shadows, deep focus. COMPOSITION: Vertical emphasis, the building corner occupying roughly the central two-thirds of the width with planting on either side, sky only a sliver at the very top, ground at the bottom. AVOID: no people, no portraits, no faces, no cars, no signage, no interiors or furniture, no pool, no drone view, no dramatic clouds, no sunset, no lens flare, no black vignette, no shallow depth of field, no saturated greens, no glowing windows. Output a tall 2:3 portrait frame, 1024x1536. No text, no lettering, no logos, no watermarks, no UI.
**Wide view of the modern desert house with open sky filling the upper half of the frame** (`04-cta-band-wide`)
MEDIUM AND FINISH: A soft matte digital architectural render matching the other frames — clean, evenly lit, mild contrast, slightly hazy, no film grain, no lens flare, no bokeh, no vignette, no HDR clarity. COLOUR AND VALUE: The upper half is almost entirely open sky, a smooth cloudless gradient from #539CDA at the top through #96CBFB to a pale #DCEAF5 at the horizon, and it must stay completely even and untextured. Below it, pale concrete and stucco #EDE9E1 to #ABA69B, timber soffit #C09A6B, muted olive planting #8A8F6E, dry grasses #C6B48E, warm grey boulders and gravel #B3ADA2. Darkest value is the glazing at roughly #2C3339 — no blacks, no deep shadow, nothing approaching silhouette. Natural colour, no grade toward teal or orange. EDGES: This runs full-bleed to all four page edges with a large white headline and a light button centred over the upper half, so the entire top half must be quiet, low-detail, unbroken sky with high contrast against white type — absolutely nothing bright, busy or light-toned intruding into it, no roofline, no branches, no clouds. Left and right edges continue the landscape without a framing device. SUBJECT: The same low flat-roofed modern desert house seen from a distance across the dry landscape, small in the lower half of the frame: pale stucco and concrete volumes with deep-set glazing, a shaded terrace, surrounded by granite boulders, bleached ornamental grasses, agave and columnar cacti, gravel ground running out to the bottom edge. Late-afternoon sun, slightly longer but still soft shadows, deep focus. COMPOSITION: Very low horizon at the midline, the building offset from centre so the middle of the upper half stays empty; the whole lower band reads as a calm continuous landscape. AVOID: no people, no cars, no signage, no interiors, no pool, no drone or top-down view, no dramatic or coloured clouds, no sunset oranges or purples, no sun in frame, no lens flare, no black vignette, no shallow depth of field, no saturated greens, no glowing windows, no string lights. Output a wide 3:2 landscape frame, 1536x1024. No text, no lettering, no logos, no watermarks, no UI.
---
## Perplexity AI — Cinematic Hero
- Page: https://ai-taste-vault.vercel.app/r/perplexity-ai-cinematic-hero
- Original: https://br.pinterest.com/pin/368239707067539815/
- Type: Landing page
- Tags: AI, Editorial, Footer, Full bleed, Hero, Minimal, Muted palette, Nav bar, Restrained motion
- Palette: #4C6485, #15191A, #7787A8, #B8B7D5
- Captured: 2026-09-17
- Rebuilt with: Claude Code · Opus 5.5 · Extra high · skills: frontend-design, emil-design-eng, transitions-dev, humanizer, gsap
- Rebuild: https://ai-taste-vault.vercel.app/v/demo/perplexity-ai-cinematic-hero/index.html
### Prompt — Rebuild
_rebuild · html-css · opus_
#### Cinematic dusk hero — full-bleed single-screen landing page
**Read this first.** No Motion report, motion strip, or page composite was supplied with this reference — only one still of the first (and only) screen. Every measurement below is read off that still and is marked **(inferred)** in the Motion section; structural values in Structure/Spacing/Type/Colour are given as design decisions derived from the still and should be treated as the spec. Anything a report would normally measure — exact durations, easings, stagger — is written as **not measured** with a range. Do not invent tighter numbers.
This page is **one viewport tall and does not scroll.** It is a single full-bleed photograph with six overlay zones composed on top of it. Build it that way; do not append sections.
---
##### 1. Structure
Design canvas: **1440 × 900** (the still is 1440 × 868 — treat the page as `100vh`, not a fixed 900px).
- **Container:** none. The photograph is full-bleed, edge to edge, `100vw × 100vh`, `overflow: hidden`. There is no max-width wrapper and no centred content column.
- **Alignment rails** (all overlay text hangs off three vertical rails, not a visible grid):
- **Rail A — 64px** from the left edge. Headline, subhead, hairline, footer caption.
- **Rail B — 33% / 475px.** Footer's second item only.
- **Rail C — 61% / 876px.** CTA button and the narrative paragraphs. Their block is **500px wide**, ending at 1376px, leaving a 64px right margin that mirrors rail A.
- Equivalent 12-column reading: 64px side padding, 24px gutters, 87px columns — rail B ≈ column 5, rail C ≈ column 8, narrative block spans columns 8–12.
- **Sections, top to bottom** (z-order in parentheses):
1. **Backdrop** — full-bleed photograph + vignette + two gradient scrims (z-0)
2. **Floating nav** — centred cluster, mark + 4 links, no bar (z-30)
3. **Hero title block** — headline + subhead, bottom-left on rail A (z-20)
4. **Hairline divider** — 1px rule under the title block, rail A (z-20)
5. **Action + narrative column** — outline pill button, then two paragraphs, rail C (z-20)
6. **Footer row** — two items on rails A and B, bottom edge (z-20)
Sections 2–6 are absolutely positioned siblings over section 1. They never reflow each other.
---
##### 2. Scroll map
| # | Section | Height | Viewports | Scroll consumed | Kind |
|---|---------|--------|-----------|-----------------|------|
| 1 | Backdrop | 900px | 1.00 | 0 | static (load entrance only) |
| 2 | Floating nav | 48px band, top at 32px | 0.05 | 0 | static (load entrance only) |
| 3 | Hero title block | 148px, top at 500px | 0.16 | 0 | static (load entrance only) |
| 4 | Hairline divider | 1px, at y = 631px | 0.00 | 0 | static (load entrance only) |
| 5 | Action + narrative column | 300px, top at 545px | 0.33 | 0 | static (load entrance only) |
| 6 | Footer row | 20px, baseline at y = 852px | 0.02 | 0 | static (load entrance only) |
**Total page height: 900px = 1.00 viewport. Total scroll: 0.** Nothing pins, nothing stacks, nothing is scroll-linked. `body { overflow: hidden }` is a legitimate implementation here.
---
##### 3. Spacing
- Page padding: **64px left and right**, **32px top**, **48px bottom**.
- Section 2 (nav): cluster vertically centred at **y = 55px**. Mark sits **28px** left of the first link. Gap between links: **28px**. Cluster is horizontally centred on the page.
- Section 3: headline baseline at **y = 533px**; subhead baseline at **y = 590px** — a **57px** baseline step, which is tighter than either element's own line-height and is the point of the block. No margin between them beyond that.
- Section 4: hairline at **y = 631px** — **41px** below the subhead baseline.
- Section 5: button top at **y = 545px**, height **56px**, width **176px**. First paragraph's cap-line at **y = 658px** — **57px** below the button's bottom edge. Paragraph-to-paragraph gap: **20px** (on top of the 28px line-height, so 48px baseline to baseline across the break).
- Section 6: baseline **48px** above the bottom edge.
- **Rhythm:** the whole composition is bottom-weighted. The top 55% of the canvas is empty photograph; every text element lives in the lower 45%, and the two text columns (rail A and rail C) are deliberately *not* baseline-aligned with each other — the right column starts lower and runs longer. Do not correct this into a tidy two-column row.
---
##### 4. Type
One family for everything. Class: **neo-grotesk, light weights, open apertures, slightly negative tracking at display sizes.** Free stand-in: **Inter** (variable, 300–400). Alternative: **Instrument Sans**. Do not mix in a second family.
| Level | Section | Size | Line-height | Tracking | Weight | Max line length |
|---|---|---|---|---|---|---|
| Headline | 3 | 64px | 1.05 (67px) | −0.02em | 300 | one line, ≤ 18 characters |
| Subhead | 3 | 44px | 1.15 (51px) | −0.01em | 300 | one line, ≤ 26 characters |
| Nav link | 2 | 15px | 1.2 | 0 | 400 | 1–2 words each |
| Button label | 5 | 15px | 1.0 | +0.02em | 400 | 2 words |
| Body paragraph | 5 | 16px | 1.75 (28px) | 0 | 400 | **500px ≈ 62 characters**, 2–3 lines per paragraph |
| Footer caption | 6 | 14px | 1.4 | +0.01em | 400 | ≤ 40 characters |
Nothing on this page is bolder than 400. Nothing is uppercase. Nothing is italic.
**Placeholder copy by role:** nav — 4 links, 1–2 words each. Headline — product name, 1–2 words. Subhead — positioning line, 3–4 words, ends in a full stop. Button — verb + noun, 2 words. Paragraph 1 — 2 lines on the problem. Paragraph 2 — 3 lines on the product, ending in two short fragments. Footer left — an aphorism, 5–7 words. Footer rail B — name + year.
---
##### 5. Colour
The photograph covers 100% of the surface, so the palette is the photograph's grade plus one type colour.
- **#4C6485 — dominant, ~40% of surface.** Mid slate-blue. The dusk sky and the spiral of light above the horizon. This is also the page's `background-color` behind the image, so a slow-loading photo never flashes white or black.
- **#15191A — structural dark, ~35%.** Near-black with a green cast. The vignette, both scrims, the dark landmass at the right edge, the shadowed foreground bottom-left. All scrim gradients are built from this, never from `#000`.
- **#7787A8 — ~15%.** Lighter periwinkle haze: the horizon band and the sea of cloud.
- **#B8B7D5 — ~10%.** Pale lavender. The flowering field in the foreground and the brightest filaments of the spiral. The lightest thing in the photograph.
- **#F4F4F8 — type only (inferred).** Near-white, used at graded opacities: headline **100%**, subhead **88%**, body **82%**, nav links **78%**, button label **100%**, footer **62%**.
**There is no chromatic accent.** The accent is *luminance*: full-opacity **#F4F4F8**. It is allowed in exactly three places — the headline, the CTA's 1px border and label, and hover states. Nothing else on the page reaches full white. Do not introduce a brand hue.
**Scrims** (all three sit above the photo, below the text):
```
top: linear-gradient(180deg, rgba(21,25,26,.55) 0%, rgba(21,25,26,0) 22%)
bottom: linear-gradient(0deg, rgba(21,25,26,.72) 0%, rgba(21,25,26,.25) 26%, rgba(21,25,26,0) 52%)
vignette: radial-gradient(120% 90% at 50% 45%, transparent 45%, rgba(21,25,26,.55) 100%)
```
---
##### 6. Surface
- **Borders:** one. The CTA pill, `1px solid rgba(244,244,248,.45)`. The hairline in section 4 is `1px` at `rgba(244,244,248,.22)`.
- **Radii:** the CTA is `999px` (true pill, 56px tall). **Everything else is 0.** No cards, no rounded image corners, no rounded nav pill at rest.
- **Shadows:** none. Zero `box-shadow`, zero `text-shadow`, zero `backdrop-filter` at rest. Every bit of separation between type and photograph comes from the two scrims and the vignette. If your text is hard to read, deepen the bottom scrim — do not add a blur panel or a text shadow.
- **Fills:** the CTA is fully transparent at rest. There is no filled surface anywhere on the page.
---
##### 7. Imagery
**One image. It is the entire design.**
- **Subject:** a lone figure in a long dark robe, seen from behind at middle distance, standing on the crest of a hillside that is blanketed in low pale-lavender flowering scrub. The hill falls away to the left; beyond it a sea of cloud fills the valley to a soft horizon. Above the horizon, a vast slow spiral of thin light trails turns in the dusk sky — concentric, off-centre, like a long-exposure of star trails but flatter and wider. A small dark rock outcrop breaks the flower field on the left; a darker landmass anchors the right edge.
- **Treatment:** long lens, compressed depth. Low contrast, heavy atmospheric haze, desaturated blue-violet grade. No visible sun, no warm light anywhere. Fine film grain. Highlights roll off — nothing clips to white except the thinnest spiral filaments.
- **Aspect ratio:** shot at **16:10 or wider**, delivered as `object-fit: cover` on a `100vw × 100vh` element.
- **Art direction / safe zones:** the figure sits at **50% width, 45% height** — dead centre horizontally, above the midline. Horizon at **38% height**. The lower-left third must stay soft and low-detail so the headline reads on it. The top 22% must stay light enough that the nav's top scrim is subtle rather than a black bar.
- Do not crop the figure out, and do not let it collide with the rail-C text column at 61% width.
---
##### 8. Motion
Restrained by design. **There are no scroll-linked, pinned, or stacked behaviours anywhere on this page — the page does not scroll.** Every movement below is an **entrance**, fired once on load, on a single shared timeline. All durations, easings and stagger values are **not measured**; ranges are given. Easing throughout: a decelerating ease-out with no overshoot and no bounce (not measured — any standard ease-out is correct). Nothing overlaps with a spring.
###### Section 1 — Backdrop
- **kind:** entrance (inferred)
- **what moves:** the photograph itself; the three scrims are static from frame one.
- **from → to:** `opacity 0 → 1`, `scale 1.06 → 1.00`, transform-origin 50% 45% (on the figure).
- **range:** trigger is page load / image decode, not scroll. Duration **not measured — 1400–2200ms**. No stagger (single element). It begins first; everything else starts on top of it.
- **reduced motion:** no scale. `opacity 0 → 1` over 200ms, or render at full opacity immediately.
###### Section 2 — Floating nav
- **kind:** entrance (inferred)
- **what moves:** the mark and the four links, as one group.
- **from → to:** `opacity 0 → 1`, `translateY −8px → 0`.
- **range:** load-triggered, starting **not measured — 200–400ms** after the backdrop begins. Duration **not measured — 500–700ms**. Stagger across the five items: **not measured — 30–60ms**, left to right.
- **reduced motion:** opacity only, no translate, no stagger.
###### Section 3 — Hero title block
- **kind:** entrance (inferred)
- **what moves:** headline line, then subhead line.
- **from → to:** each line `clip-path: inset(0 0 100% 0) → inset(0 0 0% 0)` (a bottom-up wipe) combined with `translateY 16px → 0`; opacity stays at its final value throughout — the wipe does the reveal, not a fade.
- **range:** load-triggered, starting **not measured — 400–700ms** after the backdrop begins. Duration per line **not measured — 800–1100ms**. Stagger headline → subhead: **not measured — 80–140ms**.
- **reduced motion:** no clip, no translate. Both lines fade `opacity 0 → 1` together over 200ms.
###### Section 4 — Hairline divider
- **kind:** entrance (inferred)
- **what moves:** the 1px rule.
- **from → to:** `transform: scaleX(0) → scaleX(1)`, `transform-origin: left`. Opacity constant at the 0.22 value.
- **range:** load-triggered, begins as the subhead's wipe finishes. Duration **not measured — 700–1000ms**.
- **reduced motion:** rendered at full width immediately.
###### Section 5 — Action + narrative column
- **kind:** entrance (inferred)
- **what moves:** the CTA pill, then paragraph 1, then paragraph 2 — three items, one stagger group.
- **from → to:** each `opacity 0 → 1`, `translateY 12px → 0`. The CTA's border animates with it (no separate draw-on).
- **range:** load-triggered, starting after section 3's headline lands. Duration per item **not measured — 600–900ms**. Stagger **not measured — 90–150ms**, top to bottom. Paragraphs move as whole blocks — **do not** split them into per-line or per-word reveals.
- **reduced motion:** opacity only, all three at once, 200ms.
###### Section 6 — Footer row
- **kind:** entrance (inferred)
- **what moves:** both footer items together.
- **from → to:** `opacity 0 → 0.62` (its resting value). No translate.
- **range:** load-triggered, last on the timeline. Duration **not measured — 500–800ms**. No stagger.
- **reduced motion:** rendered at resting opacity immediately.
###### Interaction transitions (not part of the load choreography)
- **Nav link hover:** colour `rgba(244,244,248,.78) → 1.0` over 150–200ms. No underline, no translate, no background.
- **CTA hover:** background `transparent → rgba(244,244,248,.10)`, border `.45 → .70` opacity, over 200–250ms. The label does not move and the pill does not scale.
- **CTA press:** `scale 1 → 0.98`, 80–120ms, returning on release.
- **Focus (keyboard):** 2px outline in `#F4F4F8` at 2px offset, on nav links and the CTA. Never remove it.
- **Cursor:** default. No custom cursor, no magnetic button.
---
##### 9. Responsive (below 640px)
- Photograph switches to a **portrait or square crop** with the figure repositioned to **50% width / 32% height**, so the lower two-thirds is clear for text. Bottom scrim strengthens to `rgba(21,25,26,.82)` at the base and extends to 65% height.
- Page padding: **24px** left and right, **20px** top, **32px** bottom.
- Section 2: the mark stays, the four links collapse to a single text toggle ("Menu") on the right of the same row. The row becomes left-mark / right-toggle, no longer a centred cluster. Opened menu is a full-screen `#15191A` panel at 0.96 opacity with the four links stacked at 24px, 300 weight, 20px gap — not a dropdown, not a sheet with a radius.
- Section 3: headline **34px / 1.1**, subhead **24px / 1.2**, baseline step **32px**. Both stay on rail A (now 24px).
- Section 4: hairline spans the full content width.
- Section 5: **stacks below section 3**, on the same left rail — rail C disappears entirely. Button first, full-width capped at 240px, height 52px. Paragraphs at **15px / 1.7**, full content width. Gap from hairline to button: 32px.
- Section 6: stacks to two lines, both on the left rail, 12px apart, 13px type. Rail B is abandoned.
- Everything still fits one screen only if the viewport is tall; **allow this one breakpoint to scroll** rather than shrinking type below 15px for body copy.
---
##### 10. Don'ts
- **Don't add sections.** No features grid, no logo cloud, no testimonial, no pricing table, no second screen. This is a single-viewport page and its whole argument is the restraint. If you feel the page is "unfinished", that is the design working.
- **Don't add a scroll cue** — no chevron, no bouncing arrow, no "scroll" label, no mouse-wheel glyph. There is nothing below.
- **Don't put the text on a panel.** No card, no glassmorphic blur box, no semi-transparent rounded rectangle behind the headline or the paragraphs. Type sits directly on the photograph; the scrims are the only aid.
- **Don't add text-shadow or drop-shadow.** Anywhere. If contrast fails, deepen the scrim.
- **Don't centre the hero.** The headline is bottom-left on rail A and the prose is on rail C at 61%. A centred hero with the paragraph beneath it is the default this design exists to avoid.
- **Don't fill the CTA.** It is a transparent 1px outline pill. Not a white button, not a gradient, not a brand-coloured button, not a button with an arrow icon.
- **Don't introduce an accent colour.** No violet, no teal, no electric blue "AI" hue. The brightest thing on the page is white type and the light in the sky.
- **Don't go above weight 400.** No semibold headline, no bold nav, no uppercase letterspaced eyebrow. There is no eyebrow on this page at all.
- **Don't use a serif** for the headline, and don't pair two families.
- **Don't build the nav as a full-width bar** with a background, a bottom border, or a sticky blur. It is a free-floating centred cluster with nothing behind it but the top scrim.
- **Don't right-align the paragraphs.** They sit in a right-hand column but are left-aligned and ragged-right.
- **Don't align the two text columns to a shared baseline.** The right column starting lower than the headline is intentional.
- **Don't animate per-character or per-word.** Lines wipe, blocks fade. Split-text on the paragraphs would wreck the tone.
- **Don't loop anything.** No ambient Ken Burns drift, no parallax on mouse-move, no floating particles, no animated gradient in the sky. The backdrop scales once on load and then holds.
- **Don't grade the photo up.** Do not add saturation, contrast, or a warm sunset tint. Hazy, cold, low-contrast, slightly underexposed is the whole look.
- **Don't stretch or letterbox the photograph,** and don't round its corners or inset it — it is full-bleed to all four edges, square corners, no page margin.
- **Don't use `#000`** for scrims or type shadows; every dark is `#15191A`.
- **Don't let line length run past 62 characters** in the narrative column, even at wider viewports — the column stays 500px, it does not grow.
### Imagery — already generated
These pictures were made for this design and are hosted at the URLs below.
Use them as the `src` exactly as written, and keep the alt text. Do not
generate your own, do not reach for a stock library or a placeholder
service, and do not feed the Imagery section above back to an image model —
that work is done. Size and crop them with CSS (`object-fit: cover`) rather
than assuming their dimensions, and download them into the project if you
would rather not hotlink.
- https://ai-taste-vault.vercel.app/v/demo/perplexity-ai-cinematic-hero/images/01-cinematic-dusk-hero.webp — A lone robed figure seen from behind on a pale lavender flowering hillside above a sea of cloud, a vast spiral of thin light trails turning in the dusk sky
### Image prompts
What each picture above was generated from, for anyone changing one.
**A lone robed figure seen from behind on a pale lavender flowering hillside above a sea of cloud, a vast spiral of thin light trails turning in the dusk sky** (`01-cinematic-dusk-hero`)
MEDIUM AND FINISH: A soft, matte cinematic digital render — smooth, hazy and impossibly clean, closer to a painted matte plate than to a photograph, with very fine even film grain laid over the whole frame and no sharp specular detail anywhere. Everything from the foreground flowers to the far horizon sits at the same gentle level of focus; all softness comes from thick atmospheric haze, not from lens blur or depth of field. Highlights roll off gradually and nothing clips to pure white except the thinnest filaments of light in the sky. COLOUR AND VALUE: A narrow, cold, desaturated blue-violet range with no warm tone anywhere in the frame. Nothing is lighter than #E2E0EE and nothing is darker than #232A33 — there are no blacks, no crushed shadows and no bright white. The dusk sky and the spiral of light occupy the largest area at mid slate-blue #4C6485; the haze band along the horizon and the sea of cloud are lighter periwinkle #7787A8 drifting to #8A9ABA; the flowering ground and the brightest light filaments are pale lavender #B8B7D5 rising to #D6D4E6; the small rock outcrop, the landmass at the right edge and the figure's robe are the darkest things present at roughly #2B323C to #3A4250. Low contrast throughout, slightly underexposed, saturation kept deliberately low. EDGES: The image is used full-bleed to all four edges of a screen, so the scene continues to the frame edge on every side with no border, no inset and no corner treatment. The top fifth must stay open, even, mid-slate sky #4C6485 with no bright or busy detail, so a faint dark scrim can sit over it without reading as a black bar. The bottom fifth is the pale flowering field, settling a little deeper in value toward the lower-left corner so near-white type reads over it. SUBJECT: A lone figure in a long dark robe, seen from behind at middle distance, small in the frame, standing on the crest of a hillside blanketed in low pale-lavender flowering scrub; the hill falls away to the left and a vast sea of cloud fills the valley beyond it to a soft horizon; above the horizon a huge, slow, off-centre spiral of thin light trails turns across the dusk sky, concentric and flatter and wider than the frame, like an immense long exposure of star trails rendered as delicate pale filaments rather than points. A small dark rock outcrop breaks the flower field on the left; a darker landmass anchors the right edge. COMPOSITION: The figure stands at 50% of the width and 45% of the height — dead centre horizontally, just above the midline — and must not be cropped. The horizon sits at 38% of the height. The lower-left third of the frame stays soft, quiet and low in detail. The region around 61% of the width must stay calm and free of strong shapes. AVOID: No sun, no sunburst, no lens flare, no warm or golden light, no orange or pink sunset tint, no dramatic storm clouds, no aurora, no nebula or galaxy colours, no purple neon, no visible stars as sharp points, no city lights, no black vignette, no bokeh or shallow depth of field, no HDR clarity or crunchy contrast, no saturated travel-photography greens or blues, no visible face, no birds, no buildings, no path or trail leading to the figure. Output a wide 3:2 landscape frame, 1536x1024. No text, no lettering, no logos, no watermarks, no UI.
---
## Tilestone — Real estate homepage
- Page: https://ai-taste-vault.vercel.app/r/tilestone-real-estate-homepage
- Original: https://br.pinterest.com/pin/368239707067539822/
- Type: Landing page
- Tags: Blog index, Feature callout, Footer, Gallery, Hero, Light mode, Logo wall, Minimal, Nav bar, Restrained motion
- Palette: #FDFDFD, #D8D8D9, #B8B8B8, #78A6E6
- Captured: 2026-09-17
- Rebuilt with: Claude Code · Opus 5.5 · Extra high · skills: frontend-design, emil-design-eng, transitions-dev, humanizer, gsap
- Rebuild: https://ai-taste-vault.vercel.app/v/demo/tilestone-real-estate-homepage/index.html
### Prompt — Rebuild
_rebuild · html-css · opus_
#### Light editorial real-estate homepage — rebuild prompt
A near-white, hairline-ruled listings homepage for property search. Full-bleed page: the layout runs edge to edge in the viewport, has no outer margin, no page-level rounded corners and nothing behind it. One typeface, one accent, zero shadows, zero rounded images.
> **Measurement note:** no motion capture was supplied for this reference. All geometry and type below is read off a single full-page still and is marked **(inferred)** where it is a reconstruction. Every timing, easing and stagger in the Motion section is **not measured** — ranges are given, and they must be treated as ranges. Do not invent lerp/stiffness/spring values; none were measured.
##### 1. Structure
Design viewport: **1440 × 900**. Page background `#FDFDFD` edge to edge — no section ever changes background colour.
- Content container: **1280px**, centred → **80px** gutters at 1440. (inferred)
- Grid: **12 columns, 24px gutter**, column = 84.67px. Two sections override the grid with their own tracks (see 4 and 5).
- Everything is left-aligned to the container except sections 6 and 8, which are centred, and the right column of section 5, which is right-aligned.
Sections, top to bottom (these numbers are used in every section below):
1. **Header / nav bar** — sticky
2. **Hero** — split headline + search, then a wide inset photograph
3. **Logo wall** — "Featured in" + 5 wordmarks, closed by a full-width hairline
4. **Catalogue** — "New objects in sale" + 3 property cards, closed by a full-width hairline
5. **Featured listing** — photograph left, right-aligned detail column right
6. **Statement** — centred two-line pull quote flanked by short rules
7. **About** — heading + narrow right-aligned paragraph + link, photograph right
8. **Articles** — centred heading + 3 full-bleed clipped headline rows separated by hairlines
9. **Footer** — brand column + 3 link columns + newsletter, then a centred legal bar
##### 2. Scroll map
At 900px viewport height. Nothing pins, nothing stacks: scroll consumed equals height for every section. (all inferred)
| # | Section | Height | Viewports | Scroll consumed | Kind |
|---|---|---|---|---|---|
| 1 | Header | 96px | 0.11 | 96px (sticky, adds none) | static |
| 2 | Hero | 880px | 0.98 | 880px | entrance + scroll-linked image |
| 3 | Logo wall | 320px | 0.36 | 320px | entrance |
| 4 | Catalogue | 1080px | 1.20 | 1080px | entrance (staggered) |
| 5 | Featured listing | 760px | 0.84 | 760px | entrance + scroll-linked image |
| 6 | Statement | 320px | 0.36 | 320px | entrance |
| 7 | About | 560px | 0.62 | 560px | entrance |
| 8 | Articles | 640px | 0.71 | 640px | scroll-linked |
| 9 | Footer | 360px | 0.40 | 360px | entrance |
**Total page height: 5016px ≈ 5.57 viewports.**
##### 3. Spacing
Vertical rhythm is built on 8px. Section padding is generous but never symmetric with the type — headings hang close to the top of their section, content hangs low.
- **1 Header:** 96px tall, 20px top/bottom padding, container gutters.
- **2 Hero:** 72px from header baseline to headline cap. Headline block → filter row baseline gap 0 (they are parallel columns). 88px from the filter row bottom to the photograph. 120px from photograph bottom to section end.
- **3 Logo wall:** 96px top padding, label → logo row 40px, logos → hairline 96px. Logos distributed with `space-between` across the full 1280.
- **4 Catalogue:** 120px top padding. Heading → card grid 88px. Card grid gap **16px** (deliberately tight — see Don'ts). Card image → title 16px, title → address 8px, address → tag 12px. 120px to the closing hairline.
- **5 Featured listing:** 120px top / 120px bottom. Two tracks: **816px photo + 48px gap + 416px column**. Inside the column: eyebrow row → title 16px, title → address 24px, address → spec row 32px, spec row → paragraph 32px, paragraph → link 40px.
- **6 Statement:** 96px top / 96px bottom.
- **7 About:** 96px top / 96px bottom. Two tracks: **616px text + 64px gap + 600px photo**. Heading → paragraph 32px; the paragraph is **indented 60px** from the heading's left edge. Paragraph → link 32px.
- **8 Articles:** 120px top padding, heading → first hairline 48px, rows 104px tall each, 96px bottom padding.
- **9 Footer:** hairline, then 56px top padding, 48px bottom, then a second hairline and a 64px legal bar.
Rhythm between sections: 2→3 and 5→6 run on padding alone; 3→4, 4→5 and 8→9 are separated by a **1px `#D8D8D9` rule spanning the full 1280 container**. No rule anywhere else.
##### 4. Type
One family for the whole page: a **geometric-leaning grotesk** — tight apertures, near-circular `o`, low contrast, short descenders. Free stand-in: **General Sans** (Fontshare), fallback **Inter Tight**. Weights used: 400, 500, 600 only. No second family, no serif anywhere except inside the logo-wall wordmarks, which are artwork.
All values inferred from the still.
| Level | Size | Line-height | Tracking | Weight | Max measure |
|---|---|---|---|---|---|
| Hero headline (h1) | 76px | 1.08 | -0.03em | 600 | 16–18ch, 660px, breaks to exactly 2 lines |
| Section heading (h2, §4/§7/§8) | 54px | 1.12 | -0.025em | 600 | 14ch, 2 lines in §4 and §7, 1 line in §8 |
| Statement (§6) | 52px | 1.35 | -0.02em | 400 | 1060px, exactly 2 lines |
| Featured listing title (§5) | 48px | 1.10 | -0.02em | 600 | 2 lines |
| Article row headline (§8) | 32px | 1.20 | -0.01em | 500 | single line, never wraps |
| Lead paragraph (§2) | 17px | 1.55 | 0 | 400 | 44ch / 370px |
| Small paragraph (§5, §7) | 14px | 1.60 | 0 | 400 | 38ch / 300px |
| Card title (§4) | 18px | 1.30 | -0.01em | 500 | — |
| Card address (§4) | 13px | 1.50 | 0 | 400 | 34ch |
| Card tag (§4) | 13px | 1.40 | 0 | 500 | — |
| Nav link (§1) | 16px | 1.00 | 0 | 400 | — |
| Button label | 14px | 1.00 | 0 | 500 | — |
| Eyebrow / field label | 13px | 1.20 | 0 | 400 | — |
| Spec value (§5) | 15px | 1.30 | 0 | 500 | — |
| Footer link (§9) | 14px | 1.90 | 0 | 400 | — |
| Legal line (§9) | 12px | 1.40 | 0 | 400 | — |
Sentence case everywhere. **Nothing on this page is uppercase** — not the eyebrows, not the labels, not the footer headings. Footer column headings are 14px/500 in ink; their links are 14px/400 muted.
Placeholder copy by role: nav — 4 links of 1–2 words; hero headline — 6 words on 2 lines; hero lead — 2 short sentences, ~60 characters total; §4 heading — 4 words on 2 lines; §4 intro — 1 sentence, ~150 characters; card titles — 1–2 words; card addresses — a full street address on one line; card tag — 1–2 words; §5 eyebrow — 2 words; §5 title — 3 words on 2 lines; §5 specs — 3 label/value pairs (count, count, range); §5 paragraph — 1 sentence, ~180 characters; §6 statement — 10–12 words on 2 lines; §7 heading — 5 words on 2 lines; §7 paragraph — ~230 characters; §8 rows — a date plus a 6–10 word article title, repeated; footer links — 1–3 words each.
##### 5. Colour
| Hex | Role |
|---|---|
| `#FDFDFD` | The surface. ~92% of the page. Every section, every card, the header and the footer sit on it unchanged. |
| `#141414` (inferred) | Ink. Headings, nav links, card titles, spec values, footer headings, the statement. |
| `#6E6E6E` (inferred) | Secondary ink. All body paragraphs, addresses, footer links, eyebrows. |
| `#B8B8B8` | Quietest mark. The five logo-wall wordmarks, input placeholder text, icon strokes at rest. |
| `#D8D8D9` | Every line on the page: section rules, article-row rules, the select underlines, the newsletter underline, the outline of the pill button and the circular icon buttons, the spec-row divider. 1px, never heavier. |
| `#78A6E6` | **The single accent.** It is a sky blue that occurs naturally in the photography; in UI it is allowed in exactly three places: the 2px focus ring on keyboard focus, the 1px underline that appears under an inline `↗` link on hover, and the border of the newsletter field while it holds focus. It is never a fill, never a heading colour, never a background, never a badge. |
##### 6. Surface
- Borders: **1px solid `#D8D8D9`**, everywhere, no exceptions, no 2px emphasis borders.
- Radii: **0px on every image, every card, every section block.** Pill (`999px`) only on the header's sign-up button (36px tall, 1px outline, transparent fill) and on the two circular icon buttons — the 40px hero search button and the 24px footer newsletter submit. Nothing in between: no 8px, no 12px, no 16px cards.
- Shadows: **none.** No elevation, no glow, no inner shadow, no ring offsets. Separation comes only from whitespace and hairlines.
- Inputs: no box. A label above, the value in ink, a 1px bottom rule the width of the field, and a small caret glyph for selects.
- Photographs sit flush inside their grid tracks with square corners and no border, no overlay, no gradient scrim.
##### 7. Imagery
Five photographs, all documentary architectural exteriors in available light — uncorrected verticals are fine, mild haze is fine, no colour grade, no lens flare, no people, no furniture-catalogue staging. Square corners, full saturation of the original frame.
1. **§2 Hero — 1280 × 533 (2.4:1)**, inset in the container with the 80px gutters showing on both sides. A three-quarter street-level view of a boxy modern multi-unit house at blue hour: flat-panelled façade, warm interior lights burning in tall windows, older pitched-roof neighbours pressed up against it, overhead power lines crossing the frame, a road and kerb in the foreground. The point is contrast between the new volume and the old street.
2–4. **§4 Catalogue cards — 416 × 520 (4:5)**, three across. (a) A dark-brick and white cube half-hidden by mature trees. (b) A cream stucco house with deep recessed glazing and a car on the drive, shot flat-on at midday. (c) A grey-panelled house with a glowing timber-lined entry set against a clean blue sky — this frame carries the accent blue.
5. **§5 Featured listing — 816 × 525 (3:2)**, left track. A corner-lot modern house at dusk with long red and white vehicle light trails streaking across the foreground road; long exposure, everything else static.
6. **§7 About — 600 × 400 (3:2)**, right track. A high aerial over a low-rise brick neighbourhood with a hazy downtown skyline on the horizon. Cool, flat, slightly atmospheric.
**§3 logo wall** is not photography: five wordmarks as flat SVG/text in `#B8B8B8`, ~22px cap height, mixed widths, distributed `space-between`. **§9 footer** carries four 16px monochrome social glyphs in `#B8B8B8`.
##### 8. Motion
"Restrained" is the governing instruction: nothing translates more than 24px, nothing scales more than 1.06, no element animates more than two properties, no easing overshoots. **Every timing below is not measured.**
**§1 Header — kind: static.**
- what moves — nothing. The bar is `position: sticky; top: 0`, `#FDFDFD`, no border until scrolled.
- from → to — no scroll-driven property change. Optionally a 1px `#D8D8D9` bottom rule fades `opacity 0 → 1` once `scrollY > 96`.
- range — n/a (the rule change is a threshold, not a scroll-linked ramp).
- reduced motion — the rule appears instantly at the threshold.
**§2 Hero — kind: entrance, plus one scroll-linked element.**
- what moves — headline lines, lead paragraph, filter row, then the photograph.
- from → to — text: `opacity 0 → 1`, `translateY 24px → 0`. Photograph wrapper: `opacity 0 → 1`, `translateY 32px → 0`; the `![]()
` inside it separately runs **scroll-linked** `scale 1.06 → 1.00`.
- range — entrances fire once on load, not on scroll: duration not measured, use 700–900ms; easing not measured, use a standard ease-out (`cubic-bezier(0.22, 1, 0.36, 1)`); stagger not measured, use 80–120ms in the order headline line 1, headline line 2, lead, filter row, photograph. The image scale is scroll-linked and reverses on the way back up: it runs **from the moment the photograph's top enters the viewport until the photograph's bottom reaches the viewport bottom**.
- reduced motion — text renders at final state, image locked at `scale 1`.
**§3 Logo wall — kind: entrance.**
- what moves — the "Featured in" label, then the five wordmarks.
- from → to — `opacity 0 → 1` only. No translate.
- range — once, when the logo row's top reaches 85% of the viewport; duration not measured, use 500–700ms; stagger not measured, use 60–80ms left to right.
- reduced motion — all six render at `opacity 1` immediately.
**§4 Catalogue — kind: entrance (staggered).**
- what moves — heading (2 lines), intro paragraph + link, then the three cards as whole units.
- from → to — `opacity 0 → 1`, `translateY 24px → 0`. Card images do **not** scale or clip.
- range — once, when each group's top reaches 80% of the viewport; duration not measured, use 600–800ms; stagger not measured, use 90–120ms across the three cards, left to right. Heading and intro fire as one group before the cards.
- reduced motion — everything renders at final state.
**§5 Featured listing — kind: entrance, plus one scroll-linked element.**
- what moves — photograph, then the right column's rows (eyebrow, title, address, spec row, paragraph, link).
- from → to — photograph wrapper `opacity 0 → 1`, `translateY 24px → 0`; its `![]()
` runs **scroll-linked** `translateY -16px → 16px` (a shallow parallax inside the fixed frame, `overflow: hidden`), reversing on scroll up. Column rows `opacity 0 → 1`, `translateY 16px → 0`.
- range — entrances once, when the section top reaches 80% of the viewport; duration not measured, use 600–800ms; stagger not measured, use 70–90ms down the column. The parallax runs from the section top entering the viewport until the section bottom leaves it.
- reduced motion — no parallax, image centred; rows render at final state.
**§6 Statement — kind: entrance.**
- what moves — the two flanking 40 × 2px rules and the two lines of the quote.
- from → to — rules `scaleX 0 → 1` from their outer edge; lines `opacity 0 → 1`, `translateY 12px → 0`.
- range — once, when the block's top reaches 80% of the viewport; duration not measured, use 600–800ms; stagger not measured, use 100–140ms between line 1 and line 2, with the rules leading line 1 by the same amount.
- reduced motion — rules at full width, lines at final state.
**§7 About — kind: entrance.**
- what moves — heading, indented paragraph, link, photograph.
- from → to — `opacity 0 → 1`, `translateY 20px → 0` for the text stack; the photograph uses `clip-path: inset(0 0 100% 0) → inset(0 0 0 0)` — a top-to-bottom reveal with no movement of the image itself.
- range — once, when the section top reaches 80% of the viewport; duration not measured, use text 600–800ms / reveal 800–1000ms; stagger not measured, use 80–100ms, text leading the photograph.
- reduced motion — photograph fully revealed on paint, text at final state.
**§8 Articles — kind: scroll-linked.**
- what moves — the three headline rows, each a single line of repeated "date • title •" items wider than the viewport, clipped by the full-bleed row (`overflow: hidden`), plus the centred heading.
- from → to — heading is an entrance (`opacity 0 → 1`, `translateY 16px → 0`, once at 80%). The rows are scroll-linked and reverse on the way back up: row 1 `translateX 0 → -180px`, row 2 `translateX -180px → 0` (opposite direction), row 3 `translateX 0 → -180px`. Content is duplicated so no gap ever enters the frame; rows are clipped at both container edges so the first and last words are always cut mid-word — that clipping is the design, visible even at rest. (inferred)
- range — the translate maps linearly to scroll from the moment the section top enters the viewport until the section bottom leaves it. Displacement not measured; keep it in the 120–240px band — enough to read as drift, not as a carousel.
- reduced motion — rows are static at their mid position, still clipped at both edges, no transform bound to scroll.
**§9 Footer — kind: entrance.**
- what moves — the four columns and the legal bar.
- from → to — `opacity 0 → 1`, `translateY 16px → 0`.
- range — once, when the footer's top reaches 90% of the viewport; duration not measured, use 500–700ms; stagger not measured, use 60–80ms left to right, legal bar last.
- reduced motion — renders at final state.
###### Interaction transitions (not part of the scroll choreography)
- Nav link hover: `#6E6E6E → #141414`, 150ms ease.
- Pill sign-up button hover: border `#D8D8D9 → #141414`, label stays ink; 150ms. Press: `scale 0.98`, 80ms.
- Card hover: title stays put; the image runs `scale 1 → 1.03` over 400ms ease-out inside its square frame (`overflow: hidden`). No shadow, no lift, no border change.
- `↗` link hover (View all, See home, Our history): the arrow glyph translates `2px, -2px` and a 1px `#78A6E6` underline wipes in left-to-right under the label, 180ms.
- Select open: the caret rotates 180° over 180ms; the menu appears with `opacity 0 → 1` and `translateY -4px → 0`, 140ms, square corners, 1px `#D8D8D9` border, no shadow. Close reverses in 100ms.
- Search / newsletter circular button hover: border and glyph `#D8D8D9/#B8B8B8 → #141414`, 150ms.
- Newsletter field focus: bottom rule `#D8D8D9 → #78A6E6`, 150ms.
- Keyboard focus anywhere: 2px `#78A6E6` ring, 2px offset, square.
##### 9. Responsive (below 640px)
- Container gutters drop to **20px**; content width is whatever remains. The page stays full-bleed.
- §1: centre links collapse into a text "Menu" toggle at the right; the logo stays left; "Log in" is dropped from the bar and moves into the open menu; the pill button stays visible and shrinks to 32px tall. Open menu is a full-height `#FDFDFD` panel, links at 24px/500, no overlay blur.
- §2: single column. Headline 36px/1.10, lead below it at 16px full width. The two selects stack full-width with their underlines; the circular search button becomes a full-width 48px pill labelled with a word. Hero photograph re-crops to **4:3**, top margin 48px.
- §3: label above, wordmarks in a 2-column grid, 32px row gap, last mark centred across both columns.
- §4: heading 32px, intro below it. Cards go to a **single column**, gap 32px; images re-crop to 3:2 so the column does not run tall.
- §5: photograph first at 3:2, then the detail column, **left-aligned** (the right-alignment is dropped entirely). Title 32px. Spec row stays a 3-across row but at 13px values.
- §6: statement 26px/1.35; the two flanking rules are **dropped**.
- §7: heading 32px, photograph moves below the text at 3:2, paragraph indentation removed and alignment set to left.
- §8: heading 32px; rows keep their full-bleed clipped behaviour but headlines drop to 20px and row height to 72px; displacement halves to 60–120px.
- §9: brand column, then link columns stacked one per row with 32px gaps, newsletter last, social glyphs under the legal line. Legal line stays centred.
- Everything that was an entrance stays an entrance with the same triggers; the scroll-linked hero scale and §5 parallax are **dropped** on touch — they are the two effects that cost the most and read the least on a phone.
##### 10. Don'ts
- **Don't round anything that holds a photograph.** No 12px cards, no 16px hero, no `rounded-2xl`. Images are square-cornered and butt straight against the whitespace. The only curves on the page are three pills.
- **Don't add shadows or hover lift.** No `box-shadow`, no `-translate-y-1` on cards, no ring. If a card needs definition, it doesn't get any — the whitespace is the definition.
- **Don't widen the card gutter.** 16px between three 416px cards is the signature; 24 or 32px turns it into a generic product grid.
- **Don't bleed the hero photograph to the viewport edges.** It sits inside the 1280 container with the 80px gutters visible on both sides, and it is only 2.4:1 — not a 100vh hero.
- **Don't centre the hero headline** or put it over the image. It is left-aligned in the left half, with the lead and the search controls parallel to it on the right, and the photograph is a separate block below.
- **Don't use the blue as a UI fill.** No blue buttons, no blue links, no blue badges, no blue section background. It is a focus ring, a hover underline, and the sky in one photograph.
- **Don't introduce a grey or tinted section background** to "separate" sections. Every section is `#FDFDFD`; separation is padding plus three 1px rules and nothing else.
- **Don't uppercase the eyebrows or labels** and don't add `0.1em` tracking to them. Sentence case, normal tracking, 13px.
- **Don't run the article rows as a constant CSS marquee.** Their movement is a function of scroll position and reverses when you scroll back up. Equally, don't turn them into a carousel with arrows, dots or snap points.
- **Don't un-clip the article rows.** Headlines cut mid-word at both container edges at rest. Centring them or fitting them to the container destroys the section.
- **Don't add price chips, "featured" badges, heart/save icons or star ratings to the cards.** A card is: image, title, address, one-word tag. Nothing else.
- **Don't put a gradient scrim, overlay or duotone on any photograph**, and don't crop them to squares.
- **Don't make the sticky header translucent with a heavy backdrop blur.** It is opaque `#FDFDFD` and gains a single 1px rule after 96px of scroll.
- **Don't add a second typeface** for the headings, and don't reach past weight 600 — there is no 700/800 on this page.
- **Don't animate on every scroll pass.** Sections 3, 4, 6, 7 and 9 are once-only entrances; replaying them on the way back up reads as a template.
- **Don't scale entrance distances up.** 16–32px of translate, full stop. A 60px rise or a `scale(0.9)` pop-in contradicts the whole restraint of the page.
### Imagery — already generated
These pictures were made for this design and are hosted at the URLs below.
Use them as the `src` exactly as written, and keep the alt text. Do not
generate your own, do not reach for a stock library or a placeholder
service, and do not feed the Imagery section above back to an image model —
that work is done. Size and crop them with CSS (`object-fit: cover`) rather
than assuming their dimensions, and download them into the project if you
would rather not hotlink.
- https://ai-taste-vault.vercel.app/v/demo/tilestone-real-estate-homepage/images/01-hero-blue-hour-street.webp — Blue-hour street view of a boxy modern multi-unit house with warm-lit windows beside older pitched-roof neighbours
- https://ai-taste-vault.vercel.app/v/demo/tilestone-real-estate-homepage/images/02-catalogue-card-triptych.webp — Three modern houses photographed as separate exteriors: a dark-brick and white cube behind trees, a cream stucco house with recessed glazing, and a grey-panelled house with a glowing timber entry
- https://ai-taste-vault.vercel.app/v/demo/tilestone-real-estate-homepage/images/03-featured-listing-dusk-light-trails.webp — Corner-lot modern house at dusk with red and white vehicle light trails streaking across the road in front of it
- https://ai-taste-vault.vercel.app/v/demo/tilestone-real-estate-homepage/images/04-about-aerial-neighbourhood.webp — High aerial over a low-rise brick neighbourhood with a hazy downtown skyline on the horizon
### Image prompts
What each picture above was generated from, for anyone changing one.
**Blue-hour street view of a boxy modern multi-unit house with warm-lit windows beside older pitched-roof neighbours** (`01-hero-blue-hour-street`)
MEDIUM AND FINISH: a genuine documentary architectural photograph, 35mm full-frame, deep focus so kerb, façade and rooftops are all sharp, available blue-hour light only, straight-out-of-camera flat contrast with mild atmospheric haze, faint natural grain, no colour grade and no retouching. COLOUR AND VALUE: cool and desaturated throughout — dusk sky #9FB4CE cooling to #C3CEDA near the horizon, white and pale grey façade panels between #E6E6E4 and #CFD1D2, one lavender-grey panel around #8C90A2, a charcoal base course #3B3E43, asphalt #6C6E74, muted olive-grey street trees #4C5346, and warm amber interior window glow #E3AE5C as the only warm notes; the lightest value in the frame is about #E9EDF1 in the sky and the darkest is about #2E3034 in the base course and tree mass — nothing is pure black, there are no crushed shadows and no blown highlights, and the whole frame sits in a narrow mid-to-high band. EDGES: the picture is placed as a hard-edged rectangle on a near-white #FDFDFD page with square corners and no border, so image detail must run right to all four edges — no vignette, no inner white margin, no fade-out, no rounded corners, no baked-in shadow. SUBJECT: a three-quarter street-level view of a boxy contemporary multi-unit infill house, flat-panelled cladding in white, grey and one lavender panel, tall windows burning warm inside, wedged between older pitched-roof timber and brick neighbours that press right up against it; overhead power lines cross the upper third, a single streetlamp is lit, and a plain asphalt road with a concrete kerb and a faded yellow centre line fills the foreground. COMPOSITION: a wide horizontal crop with the new building occupying the left two-thirds, the older street receding to the right, a low horizon, the road taking the bottom fifth and sky the top quarter; verticals slightly converging and uncorrected is correct; no people, no moving cars, no foreground obstruction. AVOID: sunburst or lens flare, a dramatic orange sunset, saturated twilight purple, teal-and-orange grade, HDR clarity or micro-contrast, heavy vignette, shallow depth of field or bokeh, ultra-wide real-estate distortion, glossy CGI cleanliness with perfect pavement and manicured lawn, luxury-listing staging, signage, people. Output a wide 2.4:1 landscape frame, 1536x640. No text, no lettering, no logos, no watermarks, no UI.
**Three modern houses photographed as separate exteriors: a dark-brick and white cube behind trees, a cream stucco house with recessed glazing, and a grey-panelled house with a glowing timber entry** (`02-catalogue-card-triptych`)
MEDIUM AND FINISH: three separate genuine documentary architectural photographs of three different houses, presented side by side as three equal vertical panels in one frame; all three shot on 35mm full-frame in plain available daylight, deep focus, flat contrast, no colour grade, faint natural grain, no retouching — ordinary well-made estate photography, not a render and not a magazine cover. COLOUR AND VALUE: restrained and cool-neutral — white and cream stucco #EDEBE6 to #DAD7D0, grey fibre-cement panels #A8ACB0, dark brick #4A4340, muted green foliage #566047 to #7C8A66, concrete drives #C4C4C2, and one clean sky blue #78A6E6 that appears only in the third panel; the lightest value anywhere is about #F0F0EE in sky and stucco, the darkest about #33302E in brickwork and tree shadow — no pure black, no blown white, no deep dramatic shadow, each panel sitting in a narrow mid-to-high band. EDGES: the three panels will be sliced apart and placed as hard-edged square-cornered rectangles on a near-white #FDFDFD page, so each panel must be a complete standalone composition whose detail runs to its own left and right edges; separate the panels with a 6px flat #FDFDFD vertical gutter and nothing else — no frames, no borders, no vignettes, no fades, no shadows, no captions. SUBJECT: left panel, a two-storey house of dark brick and a white rendered cube, half-hidden behind mature deciduous trees, shot from the pavement in soft overcast light; centre panel, a cream stucco house with deep recessed glazing and flat roof planes, a parked car on the concrete drive, shot flat-on and square at midday; right panel, a grey-panelled house with a warm timber-lined recessed entry glowing softly, shot three-quarter against a clean unclouded blue sky. COMPOSITION: each panel is an upright 4:5 crop with the house filling most of the panel, horizon low, a strip of ground at the bottom and a strip of sky at the top, no people and no interior views; the three houses must be visibly different buildings, not variations of one. AVOID: collage or grid lines, drop shadows or mock-up framing, wide-angle distortion, HDR clarity, golden-hour glow, dramatic clouds, saturated travel-photo greens, shallow depth of field or bokeh, glossy CGI perfection, staged furniture or lifestyle props, for-sale signs, people. Output a wide 12:5 landscape frame, 1536x640, composed as three equal 512x640 vertical panels. No text, no lettering, no logos, no watermarks, no UI.
**Corner-lot modern house at dusk with red and white vehicle light trails streaking across the road in front of it** (`03-featured-listing-dusk-light-trails`)
MEDIUM AND FINISH: a genuine documentary architectural photograph made on a tripod at dusk, roughly a two-second exposure so passing traffic renders as continuous light trails while the building and street stay perfectly still; 35mm full-frame, deep focus, available light only, flat contrast, mild evening haze, faint natural grain, no colour grade. COLOUR AND VALUE: cool and slightly mauve — a pale dusk sky #C7C2CE softening to #D8D6DC near the horizon, grey and beige cladding panels #B4B1AC and #9A9C9E, brick and render accents #8C7A70, asphalt #5F6065, and thin vehicle trails in muted red #C0564C and pale white #EDE8E2; the lightest value is about #E4E2E6 in the sky, the darkest about #34353A in window reveals and the road shadow — no pure black, no blown highlight, no deep contrast, the whole frame held in a narrow mid band with visible haze. EDGES: the picture is placed as a hard-edged rectangle on a near-white #FDFDFD page with square corners and no border, so detail must run to all four edges — no vignette, no inner margin, no fade, no rounded corners, no baked-in shadow. SUBJECT: a corner-lot contemporary house of stacked rectangular volumes with mixed grey panel and brick cladding, large windows faintly lit, sited on an ordinary residential corner with power lines overhead, low kerbs, a street sign post and older neighbouring houses receding behind it; the road wraps across the foreground and carries the light trails. COMPOSITION: a horizontal 3:2 crop, building set slightly left of centre and occupying the upper two-thirds, the road and its light trails running left to right across the bottom third, low horizon, sky a calm quarter of the frame; uncorrected slightly converging verticals are correct; no people, no visible vehicles, only their trails. AVOID: neon cyberpunk colour, saturated long-exposure light-painting, star flares on lamps, a dramatic sunset sky, HDR clarity, heavy vignette, teal-and-orange grade, shallow depth of field or bokeh, glossy CGI render finish, luxury-listing staging, people, signage. Output a wide 3:2 landscape frame, 1536x1024. No text, no lettering, no logos, no watermarks, no UI.
**High aerial over a low-rise brick neighbourhood with a hazy downtown skyline on the horizon** (`04-about-aerial-neighbourhood`)
MEDIUM AND FINISH: a genuine aerial photograph taken from a drone a few hundred metres up on a flat overcast day, slight telephoto compression toward the horizon, deep focus, heavy atmospheric haze thinning the distance, flat contrast, no colour grade, faint natural grain — a plain survey-like frame, not a cinematic city shot. COLOUR AND VALUE: pale, cool and low in saturation — a near-white hazy sky #DCE0E4 at the top, a distant skyline dissolved to pale grey-blue #B6BEC6 with almost no detail, mid-ground rooftops in muted slate #8E9196 and weathered brick #9A7468, tree canopies in dusty grey-green #6C7A62, streets in grey #A6A7A4; the lightest value is about #E6EAEE in the sky haze and the darkest about #4A4340 in the closest rooftop shadow — no black, no saturated colour, no strong light-to-dark falloff, the whole frame sitting in a narrow high-to-mid band with visible haze flattening everything beyond the middle distance. EDGES: the picture is placed as a hard-edged rectangle on a near-white #FDFDFD page with square corners and no border, so detail must run to all four edges — no vignette, no inner white margin, no fade, no rounded corners, no baked-in shadow. SUBJECT: a dense low-rise neighbourhood of brick row houses and small apartment blocks with flat and shallow-pitched roofs, gridded streets and mature street trees between them, seen from above at a shallow downward angle; a distant downtown cluster of towers sits on the horizon, greatly reduced by haze. COMPOSITION: a horizontal 3:2 crop with the horizon and its skyline across the upper fifth, hazy sky above it, and the neighbourhood filling the remaining four-fifths in even repeating texture with no single dominant building; no people, no vehicles readable at this scale. AVOID: golden-hour or sunset light, dramatic clouds, saturated travel-photo greens and blues, HDR clarity or heavy dehaze, tilt-shift miniature effect, a vignette, lens flare, a dramatic hero skyline, CGI city-generator look, isometric or map-tile rendering. Output a wide 3:2 landscape frame, 1536x1024. No text, no lettering, no logos, no watermarks, no UI.
---
## SK Builders real estate landing
- Page: https://ai-taste-vault.vercel.app/r/sk-builders-real-estate-landing
- Original: https://br.pinterest.com/pin/368239707067539824/
- Type: Landing page
- Tags: About, CTA band, Dark mode, Footer, Gallery, Hero, Luxury, Nav bar, Restrained motion, Stats band
- Palette: #1D4634, #010101, #484747, #FBD6C4, #D89868
- Captured: 2026-09-17
- Rebuilt with: Claude Code · Opus 5.5 · Extra high · skills: frontend-design, emil-design-eng, transitions-dev, humanizer, gsap
- Rebuild: https://ai-taste-vault.vercel.app/v/demo/sk-builders-real-estate-landing/index.html
### Prompt — Rebuild
_rebuild · html-css · opus_
#### Dark green real estate landing — rebuild prompt
A full-bleed, dark, editorial property-marketing page. Two surfaces alternate — deep forest green and near-black — with white uppercase display type, one terracotta accent, and photographs masked into extreme radii (near-stadium rounded rectangles and one true circle). Motion is restrained: entrances on arrival, two scroll-linked image moves, nothing pinned.
No motion report was supplied with this reference. **Every motion number below is marked (inferred)**; durations, easings and stagger are given as ranges because they were not measured.
---
##### 1. Structure
- **Design viewport:** 1160 × 760 px. The page is full-bleed — no outer margin, no mat, no rounded corners on the page itself, nothing behind it.
- **Content container:** 1024 px, centred, 68 px side gutters. 12 columns, 24 px gutter.
- **Grid overlay:** green sections only carry 1 px vertical rules at the column boundaries in `rgba(255,255,255,0.045)`, running the full section height, behind everything. Black sections have none. (inferred)
- **Total page height:** 4269 px.
Sections, top to bottom:
1. **Nav** — overlay on the hero, not a separate band.
2. **Hero** — green. Left headline block, photograph bleeding right.
3. **About + stats** — black. Two columns, three-figure stat row.
4. **Video band** — black. One wide photograph, play button, word overlay.
5. **Project carousel** — green. Label row, panoramic photograph, prev/next.
6. **Quality** — green. Left text block, circular photograph right with a ghosted second circle.
7. **CTA band** — black. Huge centred headline with a photograph sitting on top of the second line.
8. **Footer** — green. Centred mark, blurb, socials, rule, link row.
Column assignments:
- §2 headline + body + badge: cols 1–7. Hero photo: cols 6–12, right edge flush to container right (x = 1092).
- §3 left column (label, blurb, button): cols 1–4. Right column (headline, body, stats): cols 6–12.
- §5 label: cols 1–5. Intro paragraph: cols 9–12, right-aligned. Photograph: cols 1–12.
- §6 label + headline + body + button: cols 1–5. Circle: cols 7–12.
- §7 headline: cols 1–12, centred.
- §8 everything centred on the container axis.
---
##### 2. Scroll map
Viewport = 760 px. "vp" = viewports.
| # | Section | Height | vp | Scroll consumed | Kind |
|---|---------|--------|----|-----------------|------|
| 1 | Nav (overlay) | 80 | 0.11 | 0 (rides the hero) | static |
| 2 | Hero | 756 | 0.99 | 756 | entrance on load |
| 3 | About + stats | 604 | 0.79 | 604 | entrance |
| 4 | Video band | 536 | 0.71 | 536 | scroll-linked + entrance |
| 5 | Project carousel | 710 | 0.93 | 710 | scroll-linked + entrance |
| 6 | Quality | 710 | 0.93 | 710 | entrance |
| 7 | CTA band | 584 | 0.77 | 584 | entrance |
| 8 | Footer | 369 | 0.49 | 369 | static |
**Total page height: 4269 px (5.6 viewports).** Nothing pins; scroll distance equals document height. (inferred — measured off the still)
Section boundaries in absolute scroll: §2 0–756 · §3 756–1360 · §4 1360–1896 · §5 1896–2606 · §6 2606–3316 · §7 3316–3900 · §8 3900–4269.
---
##### 3. Spacing
- **Section padding:** black sections 140 px top / 140 px bottom. Green content sections 120 px top / 120 px bottom. Footer 72 px top / 56 px bottom. Never go below 120 px — the air between blocks is the layout.
- **§1 Nav:** 22 px from page top, container gutters, pill height 38 px, pill inner padding 6 px, gap between nav items 26 px, gap between Login and the Get started button 20 px.
- **§2 Hero:** headline top at y = 118. Headline → body 34 px. Body → badge 56 px. Badge is a 148 px circle at x = 68. Photo box top y = 320, height 350.
- **§3:** label row → left blurb 210 px (the blurb hangs low, aligned to the headline's body copy). Blurb → button 26 px. Headline → body 28 px. Body → stat row 44 px. Stat number → label 10 px. Stat columns are 190 px apart on a 3-up row, left-aligned, no dividers, no boxes.
- **§4:** image is container-width (1024) × 481, 140 px below the stat row. The word overlay sits on the image's bottom edge, baseline 34 px above the image bottom.
- **§5:** label → paragraph are on the same row (label left, paragraph right). Row → photograph 72 px. Photograph → arrow pair 44 px. Arrows centred, 16 px apart.
- **§6:** label → headline 74 px. Headline → body 30 px. Body → button 30 px. Circle vertical centre aligns with the headline/body block's centre.
- **§7:** headline block centred vertically in the band; the photograph is absolutely positioned over line 2, horizontally centred at x = 570.
- **§8:** mark → blurb 28 px, blurb → socials 26 px, socials → rule 44 px, rule → link row 28 px. Footer link row items 1 px `rgba(255,255,255,0.18)` vertical dividers, 64 px apart.
- **Rhythm:** black bands are shorter and tighter than green ones; the page alternates green (tall, airy) → black (dense) → green → black → green.
---
##### 4. Type
One family throughout: a **normal-width neo-grotesque**. Free stand-in: **Archivo** (400 / 500 / 600 / 700 / 800). Not condensed, not geometric. All values inferred from the stills.
| Level | Size | Line-height | Tracking | Weight | Case |
|---|---|---|---|---|---|
| §2 H1 | 92 px | 0.98 | −0.025em | 800 | UPPER, ends in a period |
| §7 display | 104 px | 1.05 | −0.03em | 800 | UPPER |
| §4 image overlay word | 62 px | 1.0 | −0.01em | 700 | UPPER |
| §3 / §6 H2 | 46 px | 1.18 | −0.02em | 800 | UPPER, ends in a period |
| Stat figure | 36 px | 1.0 | −0.02em | 700 | — |
| Stat "+" | 26 px | 1.0 | 0 | 700 | accent colour |
| Section label (§3, §5, §6) | 22 px | 1.2 | −0.01em | 400 | Title Case |
| Body / paragraph | 13 px | 1.75 | 0 | 400 | sentence |
| Stat caption | 13 px | 1.4 | 0 | 400 | Title Case |
| Nav link | 13 px | 1.0 | 0 | 500 | Title Case |
| Button label | 12 px | 1.0 | 0.01em | 600 | Title Case |
| Footer link | 12 px | 1.0 | 0.08em | 500 | UPPER |
| Wordmark | 14 px | 1.0 | 0.04em | 700 | UPPER |
- **Max line length:** body copy never exceeds 520 px (§3 right column); the narrow blurbs in §2, §3-left and §6 are 320 px. Roughly 58–66 characters at the widest.
- **Muted-word rule:** every display headline has exactly one word set in the muted grey — line 2's noun in §2, the adjective in §3 and §6, the final word in §7. Same weight and size, colour only.
- Headlines break on hard line breaks, not on wrapping: §2 is 3 lines, §3 is 3 lines, §6 is 3 lines, §7 is 2 lines.
---
##### 5. Colour
| Hex | Role |
|---|---|
| `#1D4634` | **Dominant surface.** Deep desaturated forest green — hero, project, quality and footer bands. Covers roughly 55% of the page. It is the page background of those sections, edge to edge. |
| `#010101` | **Second surface.** Near-black — the about/stats + video block and the CTA band. Roughly 35% of the page. |
| `#FFFFFF` | Primary type: all display headlines, nav links, stat figures, overlay word. |
| `#484747` | Muted type only — the one greyed word per headline, on black. On green use `rgba(255,255,255,0.42)` for the same effect. |
| `#FBD6C4` | Pale peach hairlines and small decorative strokes: the label circles and their sparkle glyphs, the badge ring, the carousel arrow outlines, social icon glyphs. Never a fill for a large area. |
| `#D89868` | **The single accent.** Terracotta. Allowed on: the Get started pill (§1, §3, §6), the three circular arrow buttons (§2, §6, §7), the "+" after each stat figure, the active carousel arrow's fill. Cap it at six accent objects per viewport; most viewports have one or two. |
Body copy on green is `rgba(255,255,255,0.70)`; on black `rgba(255,255,255,0.62)`. Rules and dividers `rgba(255,255,255,0.15)`.
Do not tint the photographs; they run at full colour and are the only saturation on the page besides the accent.
---
##### 6. Surface
- **Borders:** 1 px only, `rgba(255,255,255,0.15)` for the footer rule and dividers, `#FBD6C4` at 1 px for the decorative circles, badge ring and carousel arrow outlines. No borders on cards — there are no cards.
- **Radii — this is the signature and it is extreme:**
- §2 hero photo: 120 px top-left, 32 px top-right, 120 px bottom-right, 32 px bottom-left (asymmetric; the large radii face the page's outer corners).
- §4 video band photo: 140 px on all four corners — nearly a stadium.
- §5 panorama: 96 px top-left and bottom-right, 24 px on the other two.
- §6 portrait: a true circle, 324 px diameter, plus a second 240 px circle behind and right of it at 22% opacity, cropped by the viewport edge.
- §7 photo: 72 px all corners.
- Pills and circular buttons: fully round.
- **Shadows:** none anywhere. No glow, no glass, no gradient overlays on the green. The only softening is a 10–14 px blur on the ghosted §6 circle.
- The nav pill is `rgba(255,255,255,0.10)` with a 1 px `rgba(255,255,255,0.18)` edge; the active item inside it is a solid white pill with dark green text.
---
##### 7. Imagery
Five photographs, all warm and real-estate literal, all shot in natural or golden light. No people, no faces, no stock-model staging.
1. **§2 hero — 640 × 350, ~1.83:1.** A covered outdoor terrace: pergola beams overhead, low modular sofas with pale cushions, clipped topiary in planters, a pool edge catching light at the lower right. Daylight, flat and calm. Sits cols 6–12 and is *behind* the headline — line 3 of the H1 runs across its left third in white.
2. **§4 video band — 1024 × 481, ~2.13:1.** A dusk garden courtyard: a deck with sectional seating, tall bamboo screening, lanterns lit on the table, a stone figure at the left. Darker exposure so the white play button and the overlay word read cleanly. Optional 0–20% bottom-up black scrim only if contrast demands it.
3. **§5 panorama — 1024 × 303, ~3.38:1.** A single-storey modern house at blue hour seen across its pool: full-height glazing with warm interior light spilling out, timber deck, flat roof plane, weathered fence at the left. Very wide crop, horizon on the upper third.
4. **§6 circle — 324 × 324, 1:1.** Interior: an open kitchen-dining space, timber table set for a meal, dark chairs, a linear pendant fixture above, cabinetry behind. Warm tungsten, shallow depth. The second ghosted circle is the *next* interior in the set, blurred and 22% opaque.
5. **§7 CTA — 393 × 216, ~1.82:1.** A two-storey modern villa exterior against open sky, pool in the foreground corner. Bright, high-key — it must pop off the black band. Sits *in front of* line 2 of the headline, covering its middle band so the letterforms read above and below it.
Two vector marks, not images: a **4-point sparkle/star** inside a 44 px pale-peach outlined circle before each section label, and a 148 px **circular badge** in §2 — 1 px pale-peach ring, a short phrase set as circular text around it (≈4 words), sparkle in the centre.
---
##### 8. Motion
Restrained. Two scroll-linked moves in the whole page, everything else is a one-time entrance, nothing pins. All values inferred from the stills; durations and easings **not measured** — use the ranges given.
###### §1 Nav
- **kind** — static (inferred)
- **what moves** — nothing; the bar rides the hero and scrolls off. It does not stick, does not shrink, does not gain a solid background.
- **from → to** — n/a
- **range** — n/a
- **reduced motion** — identical.
###### §2 Hero
- **kind** — entrance, once on load (not scroll-linked) (inferred)
- **what moves** — headline lines (3), body paragraph, badge, photo block, arrow button
- **from → to** — headline lines: opacity 0 → 1, translateY 28px → 0. Body: opacity 0 → 1, translateY 16px → 0. Photo block: opacity 0 → 1, scale 1.04 → 1, clip-path inset from the right `inset(0 12% 0 0)` → `inset(0 0 0 0)`. Badge: opacity 0 → 1 with a slow continuous rotation of the ring text, 30–45 s per turn, linear, infinite. Arrow button: opacity 0 → 1, scale 0.85 → 1.
- **range** — trigger: page load, no scroll condition. Duration not measured; 700–900 ms for the photo, 500–650 ms for text. Easing not measured; a soft ease-out (cubic-bezier ≈ .16,1,.3,1). Stagger not measured; 70–100 ms between headline lines, photo starting with line 1, arrow last at +400 ms.
- **reduced motion** — all elements render at the end state on load; badge ring does not rotate.
###### §3 About + stats
- **kind** — entrance, once (inferred)
- **what moves** — section label + sparkle circle, left blurb + button, headline lines, body, three stat groups
- **from → to** — opacity 0 → 1, translateY 24px → 0 for each. Stat figures additionally count up from 0 to their value, once only, and never re-run on scroll back.
- **range** — trigger: once, when the element's top reaches 80% of the viewport (absolute scroll ≈ 380–900). Duration not measured; 500–700 ms, counters 900–1200 ms. Easing not measured; ease-out. Stagger not measured; 80–120 ms down the column, 100 ms between the three stats.
- **reduced motion** — no translate, no count-up; figures print final values, opacity snaps to 1.
###### §4 Video band
- **kind** — scroll-linked (reverses on the way back up), plus one entrance for the overlay word
- **what moves** — the photograph inside its fixed 140 px-radius mask (background-position pan + scale), the play button, the overlay word
- **from → to** — image scale 1.12 → 1.0 and translateY +24px → −24px inside the mask, as a direct function of scroll. Play button: static once entered, with a continuous 2.4–3 s opacity 0.5 → 0 / scale 1 → 1.6 ring pulse behind it. Overlay word: entrance, clip-path `inset(0 0 100% 0)` → `inset(0 0 0 0)` (wipes up from its baseline) plus translateY 20px → 0.
- **range** — scroll-linked part: from the section top entering the viewport (scroll ≈ 1160) until the section's bottom reaches the viewport bottom (scroll ≈ 1896) — mapped linearly, no easing, no smoothing lerp. Word entrance: once, when the image's top reaches 75% of the viewport; duration not measured, 600–800 ms, ease-out.
- **reduced motion** — image holds at scale 1.0 / translateY 0; play-button ring does not pulse; the word appears at full opacity with no wipe.
###### §5 Project carousel
- **kind** — entrance for the text row, scroll-linked for the panorama
- **what moves** — label + sparkle, right paragraph, panorama, arrow pair
- **from → to** — label and paragraph: opacity 0 → 1, translateY 24px → 0 (entrance). Panorama: horizontal pan of the image inside its mask, translateX +3% → −3%, as a function of scroll, plus scale 1.06 → 1.0. Arrows: opacity 0 → 1, translateY 16px → 0 (entrance, last).
- **range** — entrances: once, at 80% of the viewport, 500–700 ms, ease-out, 90 ms stagger (not measured). Scroll-linked pan: from the panorama's top entering the viewport (scroll ≈ 1930) until its bottom leaves the top of the viewport (scroll ≈ 2470), linear.
- **reduced motion** — panorama fixed at translateX 0 / scale 1; entrances resolve instantly.
###### §6 Quality
- **kind** — entrance, once (inferred)
- **what moves** — label, headline lines, body, button, the circle, the ghosted circle
- **from → to** — text: opacity 0 → 1, translateY 26px → 0. Circle: opacity 0 → 1, scale 0.92 → 1, and its inner photo scale 1.1 → 1 (so the image settles inside the mask). Ghost circle: opacity 0 → 0.22, translateX +40px → 0. Arrow button on the circle's lower-left: opacity 0 → 1, scale 0.85 → 1, last.
- **range** — once, when the section's top reaches 80% of the viewport (scroll ≈ 2450). Duration not measured; 600–800 ms circle, 500–650 ms text. Easing not measured; ease-out. Stagger not measured; 80–110 ms, circle beginning with the headline.
- **reduced motion** — end state on arrival, no scale, no slide.
###### §7 CTA band
- **kind** — entrance, once (inferred)
- **what moves** — the two headline lines, the photograph, its arrow button
- **from → to** — line 1: opacity 0 → 1, translateY 32px → 0. Line 2: same, +90 ms. Photograph: opacity 0 → 1, translateY 48px → 0, scale 0.94 → 1 — it rises into place over the word. Arrow button: scale 0.8 → 1, last.
- **range** — once, when the band's top reaches 85% of the viewport (scroll ≈ 2900). Duration not measured; 700–900 ms. Easing not measured; ease-out with a hint of overshoot on the photo only. Stagger not measured; 90–140 ms.
- **reduced motion** — everything at final position, opacity 1, no rise.
###### §8 Footer
- **kind** — static
- **what moves** — nothing. No reveal, no rule-draw, no icon animation on arrival.
- **from → to** — n/a
- **range** — n/a
- **reduced motion** — identical.
###### Interaction transitions (not part of the scroll choreography)
- Nav item hover: text `rgba(255,255,255,0.7)` → `#FFFFFF`, 140 ms. The active white pill does not move between items.
- Dropdown caret items: click opens a panel below the pill, opacity 0 → 1 and translateY −8px → 0 over 160–200 ms; closes in 120 ms.
- Accent pill button hover: background `#D89868` → `#E3A87A`, 160 ms ease. No lift, no shadow, no scale.
- Pill button press: scale 0.98, 90 ms.
- Circular arrow button (§2, §6, §7) hover: background `#D89868` → `#E3A87A` and the arrow glyph rotates −45° → 0°, 200 ms.
- Carousel arrows hover: outline `#FBD6C4` → filled `#D89868` with a dark glyph, 160 ms. Clicking advances the panorama with a 400–500 ms horizontal slide.
- Play button hover: white disc scales 1 → 1.06, 180 ms.
- Social icon hover: glyph `#FBD6C4` → `#D89868`, 140 ms.
- Footer link hover: 1 px underline grows from left, 180 ms.
- Focus-visible everywhere: 2 px `#D89868` outline, 3 px offset.
---
##### 9. Responsive (below 640px)
- Container becomes 100% with 20 px gutters.
- §1: the centre pill nav collapses to a hamburger; logo left, hamburger right, Login drops out, Get started stays.
- §2: H1 to 40 px / 1.05; body 14 px full width; photo moves below the text, full bleed to the gutters, 4:3, radius 48 px / 12 px alternating; the arrow button shrinks to 48 px and sits at the photo's top-right inside the edge; the circular badge drops entirely.
- §3: single column — label, headline (28 px), body, blurb, button, then stats as a 3-up row that wraps to a 2 + 1; stat figures 28 px.
- §4: image 3:2, radius 56 px; overlay word 30 px, centred; play button 56 px.
- §5: intro paragraph moves below the label, left-aligned; panorama crops to 16:9; arrows stay centred.
- §6: circle becomes a full-width 1:1 image with the same circular mask, capped at 300 px and centred, below the text; the ghosted second circle is dropped.
- §7: display type to 36 px / 1.08 over 3 lines; the photograph moves *below* the headline instead of over it, 16:9, 32 px radius.
- §8: socials and links stack; the 5 footer links become a 2-column list with no vertical dividers.
- Section padding drops to 72 px top / 72 px bottom, never lower.
- Vertical grid rules are dropped. All scroll-linked motion is disabled on touch; entrances stay, at 70% of their translate distance.
---
##### 10. Don'ts
- **Don't inset the page on a coloured sheet.** No outer margin, no page-level rounded corners, no colour behind the layout. The green is the hero section's own background, not a mat.
- **Don't soften the radii.** The default 12–16 px "rounded-lg" instinct kills this design. Image radii are 72–140 px and deliberately asymmetric in §2 and §5. If it looks like a normal card, it's wrong.
- **Don't reach for a condensed display face** (Bebas, Oswald, Anton) or a serif. The headlines are a normal-width grotesque at weight 800 with negative tracking — mass, not compression.
- **Don't sentence-case the headlines** or drop the full stop. §2, §3 and §6 all end in a period; all four display headlines are uppercase.
- **Don't colour the muted word.** The de-emphasised word in each headline is neutral grey `#484747` (or 42% white on green) — not the terracotta, not a lighter green, not a gradient.
- **Don't spread the accent.** `#D89868` is one accent with a short allow-list (pills, three circular arrow buttons, the stat "+", the active carousel arrow). Terracotta section labels, terracotta underlines or a terracotta footer will flatten the whole thing.
- **Don't use `#000000` as the green sections' background** or drift the green toward teal/emerald. It is a dark, desaturated forest green, `#1D4634`, and it must stay muddy.
- **Don't add shadows, glassmorphism, noise or gradient overlays.** The only blur in the file is the ghosted circle in §6.
- **Don't centre the hero.** The H1 is hard left at the gutter, the photo bleeds right, and line 3 crosses in front of the photo. Preserve that overlap in both directions: text over image in §2, image over text in §7.
- **Don't make the stats a card grid.** Three bare number/label pairs on one row — no boxes, no borders, no dividers, no icons.
- **Don't pin anything.** No sticky hero, no horizontal-scroll section, no scroll-jacking. Document height equals scroll distance.
- **Don't animate on every scroll pass.** Entrances play once; the stat counters especially must not re-run when the user scrolls back up. Only the §4 and §5 image transforms track scroll and reverse.
- **Don't make §4 a real autoplaying `