Dark AI editing tool hero

# Dark AI Editing Tool — Full-Bleed Hero

A single full-bleed hero section for a creative/AI tool: a near-black canvas with a cinematic render bleeding edge to edge on the right, a hard-left copy column in large light grotesk, and a second, smaller proof block pinned to the bottom-left corner. Everything is mono-uppercase chrome over a photograph. No cards, no panels, no container box.

Reference viewport: **1440 × 1008 CSS px**. All numbers below are CSS px at that width.

## 1. Structure

- **Container:** none in the visual sense — the section is full-bleed (100vw). Content is inset by a **88px left / 88px right** gutter. There is no max-width wrapper and no centered 1200px column; the copy column is hard-left against the 88px gutter.
- **Column structure:** a single left column, **max-width 700px**, occupying roughly the left 48% of the viewport. The right ~52% is image only and carries no text. Inside the left column there are two independent stacks:
  - **top stack** (eyebrow → headline → CTA), flowed from the top padding;
  - **bottom stack** (paragraph → proof row), anchored to the section's bottom edge, not flowed after the CTA. The ~190px of empty space between them is intentional.
- Sections, top to bottom:
  1. **Top bar** — overlay nav, sits on top of the hero, transparent, full width, height 96px.
  2. **Hero** — full-bleed, 100vh (clamp 900–1080px; 1008px at the reference capture). Three parts, referenced throughout as:
     - **2a Backdrop** — full-bleed image + darkening scrim.
     - **2b Copy stack** — eyebrow pill, headline, primary CTA.
     - **2c Proof block** — supporting paragraph + avatar row, bottom-left.

## 2. Scroll map

No motion report was supplied with this reference; every value in this section is **(inferred)** from the still.

| # | Section | Height | In viewports | Scroll consumed | Kind |
|---|---------|--------|--------------|-----------------|------|
| 1 | Top bar | 96px (overlay, no layout height) | — | 0 | static, position: fixed |
| 2 | Hero | 1008px | 1.00 vp | 1008px | 2a scroll-linked (parallax, inferred); 2b + 2c entrance on load |

**Total page height for this reference: 1008px (1.00 viewport).** This is a section artifact — the page continues below the fold, but nothing below is in scope. Do not invent follow-on sections.

## 3. Spacing

- Section horizontal gutter: **88px** both sides. The nav's right-hand button cluster sits in the same 88px gutter.
- Nav: **26px** top padding, bar height **96px**. Gap logo → first link **40px**; gap between nav links **16px**; gap link group → LOGIN **auto** (flex push); gap LOGIN → primary pill **28px**.
- **2b Copy stack:** top of section → top of eyebrow pill = **216px**. Eyebrow → headline = **24px**. Headline → CTA = **32px**.
- **2c Proof block:** anchored `bottom: 120px; left: 88px`. Paragraph → avatar row = **40px**. Avatar row height 32px.
- Rhythm: two big voids do the work — **~120px** of air under the nav before the eyebrow, and **~190px** of unfilled space between the CTA and the proof block. Do not close either gap; do not distribute the copy evenly down the column.

## 4. Type

Families:
- **Display / body:** neo-grotesk with tight apertures and a single-storey `g`. Free stand-in: **Inter Tight** (or Schibsted Grotesk / Archivo). Used for headline, eyebrow text, paragraph, proof text.
- **Chrome:** **monospace**, uppercase, letterspaced. Free stand-in: **JetBrains Mono** (or Martian Mono / IBM Plex Mono). Used for nav links, both nav buttons, and the hero CTA. Nothing else is mono.

Body anchor: **17px**. Every level below is a multiple of it.

| Role | Ratio | Size | Line-height | Tracking | Weight | Max line length |
|---|---|---|---|---|---|---|
| Headline (2b) | **4.0×** | 68px | 1.03 (70px) | −0.015em | 450 (Medium-ish, *not* bold) | 700px / 3 lines |
| Body paragraph (2c) | **1.0×** | 17px | 1.45 (25px) | 0 | 400 | **400px (~48ch), 3 lines** |
| Eyebrow pill text (2b) | 0.82× | 14px | 1.2 | 0 | 450 | sentence case, 2–4 words |
| Nav links (1) | 0.82× | 14px mono | 1.0 | +0.06em | 400, UPPERCASE | — |
| Nav buttons (1) | 0.82× | 14px mono | 1.0 | +0.08em | 500, UPPERCASE | — |
| Hero CTA (2b) | 0.82× | 14px mono | 1.0 | +0.10em | 500, UPPERCASE | — |
| Proof text (2c) | 0.82× | 14px | 1.3 | 0 | 400 | ~26ch |

Placeholder copy by role and length:
- Eyebrow: 3–4 words, sentence case, ending in a period.
- Headline: **6–8 words breaking onto exactly three lines**, last line short (1–2 words) and ending in a period. The ragged descending shape — long / medium / short — is part of the composition; set an explicit max-width so it breaks that way.
- Paragraph: one sentence, 18–24 words, wrapping to 3 lines.
- Proof: "Trusted by 12k+ creators." — 4 words + numeral.
- Nav: 5 single- or three-word items.

## 5. Colour

| Hex | Role |
|---|---|
| **#050506** | Ground. Near-black, warm-neutral. Covers ~55% of the surface (the entire left and top of the frame) and is the base the scrim fades into. This is the page background. |
| **#F4EBE8** | Warm off-white. Headline, primary text, the blown-out core of the light band in the image, and the fill of the hero CTA. |
| **#D6CAC9** | Warm grey. Secondary text: nav links at rest, the body paragraph, the proof line. Also the darker half of the hero CTA's metallic gradient. |
| **#FC9A76** | Soft coral. Only as *light*: the upper flare of the band in the image, and the light end of the nav CTA's gradient. |
| **#F7594B** | **The single accent.** Hot coral-red. Allowed in exactly three places: the top edge of the light band in the image, its vertical reflection in the water, and the deep end of the nav CTA pill's gradient. Optionally the focus ring. **Nowhere else** — not as text, not as a link colour, not as an underline, not as an icon fill. |

The image also contains a **cyan-teal band (~#7FC8D6)** on the underside of the light arc. That is a photographic hue inside the render, not a UI colour — never lift it into the interface.

Scrim over the image so the copy stays legible:
`linear-gradient(90deg, #050506 0%, rgba(5,5,6,0.92) 26%, rgba(5,5,6,0.55) 46%, rgba(5,5,6,0) 64%)`
plus a top scrim for the nav: `linear-gradient(180deg, rgba(5,5,6,0.7) 0%, transparent 140px)`.

## 6. Surface

- **Section:** no border, no radius, no shadow. Corners are square and the image bleeds to all four edges.
- **Eyebrow pill (2b):** height 40px, padding 0 18px, radius 999px, fill `rgba(10,10,12,0.55)`, border **1px** `rgba(244,235,232,0.14)`, `backdrop-filter: blur(12px)`. Leading 14px four-point sparkle glyph in #F4EBE8, 10px gap to the text.
- **LOGIN pill (1):** height 44px, padding 0 24px, radius 999px, fill `rgba(244,235,232,0.06)`, border **1px** `rgba(244,235,232,0.18)`, backdrop-blur 12px, text #F4EBE8.
- **Nav CTA pill (1):** height 44px, padding 0 26px, radius 999px, fill `linear-gradient(135deg, rgba(252,154,118,0.85), rgba(247,89,75,0.5))`, border **1px** `rgba(244,235,232,0.25)`, text #F4EBE8. This is the only coral-filled element in the chrome.
- **Hero CTA (2b):** height 46px, padding 0 26px, radius 999px, **metallic** fill `linear-gradient(145deg, rgba(244,235,232,0.92) 0%, rgba(214,202,201,0.7) 45%, rgba(138,132,131,0.7) 100%)`, inset top highlight `inset 0 1px 0 rgba(255,255,255,0.45)`, text **#201E1E** (dark on light — the contrast flip is the point).
- **Avatars (2c):** 32px circles, 2px ring in **#050506** (not white), overlapped by 12px, four of them, `z-index` descending left→right so the leftmost sits on top.
- **Shadows:** none anywhere in the UI. All apparent glow belongs to the photograph.
- **Logo mark:** a four-point sparkle/star glyph, ~30px, solid #F4EBE8. Four points, not five, not six.

## 7. Imagery

**One image only**, full-bleed, `object-fit: cover`, `object-position: 62% 50%`. Native aspect **10:7** (1440 × 1008); it must survive being cropped to any viewport.

Subject and treatment: a lone figure in a dark pressure suit and a round reflective helmet, seen from behind at small scale, walking away from camera across a mirror-flat sheet of shallow water. Behind them, an enormous curved band of light sweeps in from the upper-right corner down to the horizon — a hard white-hot core with a thin cyan-teal edge on its underside and a broad, soft red-orange flare spreading above it, like the lit limb of a planet bending across the sky. The left ~45% of the frame collapses into near-black with a few faint star specks. The water returns a long vertical red-coral smear directly beneath the figure and a soft mirrored copy of the figure. Everything is atmospheric and slightly diffused — long exposure, no hard rim lights, no lens flare stars, no visible sun disc.

Placement rules: the figure's head lands at **~58% of viewport width, ~65% of section height**; the horizon line sits at **~72% of section height**. The darkest part of the frame must land under the copy column.

## 8. Motion

No measured motion report exists for this reference. **Every value below is (inferred)** from the still. Durations, easings and ranges are given as ranges where a report would otherwise supply a number; treat them as ceilings, not as a brief to elaborate on. Nothing here is a spring — do not introduce stiffness/damping parameters.

### 1. Top bar
- **kind** — static (inferred). Fixed to the viewport; it does not transform on scroll within this section's 1008px.
- **what moves** — nothing. The top scrim may deepen slightly once scrolled past the hero, which is out of scope here.
- **from → to** — n/a.
- **range** — n/a.
- **reduced motion** — identical; nothing to disable.

### 2a. Hero backdrop
- **kind** — scroll-linked (inferred). Reverses on the way back up.
- **what moves** — the full-bleed image only. The scrim does not move.
- **from → to** — `translateY: 0 → +60px` and `scale: 1.06 → 1.06` (the image is pre-scaled so the parallax offset never reveals an edge). Opacity constant at 1.
- **range** — from the section top at the viewport top until the section bottom reaches the viewport top, i.e. across its own 1008px of scroll. Linear mapping, no easing curve on a scroll-linked value.
- **reduced motion** — parallax removed entirely; image held at `translateY: 0`, still `scale: 1.06`.

### 2b. Hero copy stack
- **kind** — entrance, plays once on load (not scroll-linked; it never replays and never reverses).
- **what moves** — eyebrow pill, then the three headline lines as separate line boxes, then the CTA pill.
- **from → to** — `opacity: 0 → 1`, `translateY: +20px → 0`. No scale, no blur, no clip-path wipe.
- **range** — trigger: on load, after fonts resolve (the section is above the fold, so there is no scroll trigger). Duration **600–800ms** per element (not measured); easing a standard ease-out (`cubic-bezier(0.22, 1, 0.36, 1)`); stagger **80–120ms** (not measured) in DOM order: eyebrow → line 1 → line 2 → line 3 → CTA.
- **reduced motion** — all elements render at final state, `opacity: 1`, no translate, no stagger.

### 2c. Hero proof block
- **kind** — entrance, plays once on load.
- **what moves** — the paragraph as one block, then the avatar row + proof text as one block.
- **from → to** — `opacity: 0 → 1`, `translateY: +16px → 0`.
- **range** — trigger: on load, beginning **~250–350ms** (not measured) after the 2b stagger starts, so the corner block resolves last. Duration **600–800ms** (not measured), same ease-out, stagger **100ms** between the two blocks.
- **reduced motion** — final state immediately.

### Interaction transitions (not part of the scroll choreography)
- Nav link hover: colour `#D6CAC9 → #F4EBE8`, 160ms ease-out. No underline, no background, no movement.
- LOGIN pill hover: border `rgba(244,235,232,0.18) → 0.32`, fill `0.06 → 0.10`, 180ms ease-out.
- Nav CTA hover: gradient shifts 6% toward #F7594B, border opacity `0.25 → 0.40`, 180ms ease-out.
- Hero CTA hover: `translateY(-1px)`, gradient top highlight brightens, 180ms ease-out.
- Any pill press: `scale(0.98)`, 90ms ease-out, no colour change.
- Avatar hover: that avatar `translateY(-2px)` and `z-index` to front, 150ms.
- Focus-visible: 2px ring in `#FC9A76`, 2px offset, no glow.

## 9. Responsive (below 640px)

- Nav collapses to **logo + 24px hamburger**. The five links and the LOGIN pill are dropped from the bar; the coral CTA pill is dropped too (it lives in the opened menu). Gutter drops 88px → **20px**; bar height 96px → 72px.
- Hero height becomes `100svh`, min 640px. Image `object-position` shifts to **50% 55%** so the figure stays centred and the light arc crops into the top-right corner; the horizontal scrim is replaced by a vertical one: `linear-gradient(180deg, rgba(5,5,6,0.85) 0%, rgba(5,5,6,0.25) 45%, rgba(5,5,6,0.9) 100%)`.
- The two stacks merge: 2b sits at the top (top padding 120px), 2c moves directly beneath the CTA with a **32px** gap — the ~190px void is dropped, not scaled.
- Headline **68px → 40px** (2.5× a 16px body), line-height 1.05, still three lines, max-width 100%. Body 17 → 16px, max-width 100%. Chrome type stays at 14px — never scale it down.
- Hero CTA goes full-width (`width: 100%`, height 52px), text stays centred.
- Avatar row stays at 32px; nothing is dropped from it.

## 10. Don'ts

- **Don't put the copy in a card.** No panel, no glass box, no bordered container behind the headline. The text sits directly on the photograph; only the gradient scrim separates them.
- **Don't centre anything.** The headline is hard-left at the 88px gutter and left-ragged. A centred hero destroys this design.
- **Don't bold the headline.** It is ~450 weight at 68px. `font-weight: 700` makes it look like a template. Size and air carry it, not weight.
- **Don't flow the proof block after the CTA.** It is anchored to the bottom-left corner of the section. Removing the ~190px void collapses the composition into a generic stacked hero.
- **Don't use `#000` or `#fff`.** The ground is #050506 and the light is #F4EBE8 — both warm-shifted. Pure values read cold and cheap next to the render.
- **Don't spread the coral into the UI.** #F7594B and #FC9A76 appear as *light inside the photograph* and as the single nav pill gradient. No coral headings, no coral eyebrow text, no coral link colour, no coral icon, no coral divider, no coral glow behind the headline.
- **Don't reach for the AI-landing-page defaults:** no blue/violet mesh gradient, no grid or dot-matrix overlay, no animated noise at visible opacity, no aurora blobs behind the text, no "glowing orb" div. The only gradient in the layout is the scrim and two pill fills.
- **Don't add a second CTA.** One pill. No "Watch demo ▶", no ghost button beside it, no scroll-down chevron with an infinite bounce.
- **Don't apply a text-shadow or glow to the headline.** Legibility comes from the scrim.
- **Don't animate the headline word-by-word**, and no typewriter, no character scramble, no gradient shine sweeping across it, no springy overshoot. It is a plain three-line fade-and-rise with a short stagger.
- **Don't make the nav links sentence case or heavier.** They are 14px mono, uppercase, +0.06em, in #D6CAC9 — deliberately quiet until hover.
- **Don't round the section's corners or inset it on a coloured sheet.** Any mat visible in a mockup is photographic framing; the real page is full-bleed to all four edges.
- **Don't let the paragraph run wide.** It is capped at 400px (~48ch) and breaks to three lines. A 60–70ch measure here unbalances the corner.
- **Don't ring the avatars in white** and don't add a "+" bubble at the end of the stack — four circles, dark rings, nothing else.
- **Don't use a five-point star for the logo or the eyebrow icon.** Both are four-point sparkles.
- **Don't let the image sit still while the page scrolls** — but equally, don't pin the hero. The backdrop parallax is a modest 60px offset; anything larger reads as a slideshow.