---
name: website-hero
description: Designs and builds a website's hero section, the first screen, with a hero image made for the layout, a headline that says what it is, one clear action and proof, as one responsive HTML section. Use for landing page heroes, product launches, above-the-fold sections and homepage headers.
---
# Website hero

## Read first
Hero.md for the product, the words, the proof and the look; the design reference, product photo and logo wired in.

## Hero image (16:9)
- Made for the layout: the subject on the right third (unless Hero.md says otherwise), and a calm, empty area on the left where the headline will sit.
- The product is the hero: in sharp focus, recognisable for what it is, caught by the accent light from Hero.md, never lost in shadow. One subject, one light, the palette from Hero.md; a product photo wired in is kept exactly as it is.
- No words, logos or interface in the picture.

## The section
- One HTML file: a slim nav (the logo or name, three or four links, one button), then the hero filling the first screen (100svh, at least 640 px tall), with semantic markup, styles scoped under one root class and CSS custom properties.
- A headline of at most eight words saying what it is and for whom, a subline of one or two sentences, one primary button and one quiet secondary link, and the proof from Hero.md under them when it gives a real one (never a placeholder or a note).
- The wired hero image large: behind the words with a scrim on their side, or beside them; it covers its box without stretching, positioned so the subject stays in view at every width.
- Type with presence: the headline at 56 to 88 px on desktop (clamp()), tight leading, at most two typefaces, and the accent colour on the button only.
- A gentle entrance: the words rise and fade in over 600 ms, staggered, and stay put with prefers-reduced-motion.
- Responsive from 360 px: on phones the nav becomes a menu button, the image sits above or behind the words with a scrim, and the button is full width.

## Avoid
Lorem ipsum, more than one primary button, centred walls of text, stock-photo clichés, words over a busy part of the picture, a hero shorter than the screen, and made-up customer logos.