Aetheron — Cosmic AI Hero

# 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.