Skinn — Dark skincare hero

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