hero.product-centered-shot · Product, centred shot

A hero pattern from the hero library, drawn alone below with this design's tokens and sample copy. Used in this design on: home page, section 1. Give the section root data-pattern="hero.product-centered-shot". A guide only: DESIGN.md and tokens.json are the source of truth.

Rule
Product launch layout on one axis: a short product-name headline, a wide 16:9 product shot that dominates the hero, a row of 3–4 specs divided by rules, then price and one CTA.
Slots
eyebrow, headline, heroImage, stats[3..4], meta, cta
Grid areas
stack 3-10 (12-column grid, 1-based inclusive spans)
Notes
The product shot must be the largest element (wider than the headline, at least 70% of the content width). Background is the plain page or surface colour — no gradient glow behind the product.
Tokens
bg #FAFAFA · text #1F1F1F · heading #0F0F0F · accent #F95620 · accent2 #9E2C00 · Geist / Geist · radius 2px · space unit 8px (full list in design/tokens.json)

Do

  • Let the product shot dominate: 16:9, at least 70% of the content width, on the plain page or surface colour.
  • Keep the headline to the product name or a 2–5 word line.
  • Under the shot, a row of 3–4 specs (figure over label, e.g. '19 dB' / 'at full speed') separated by vertical rules.
  • End with price (or availability) next to one primary CTA.

Don't

  • Don't put a coloured glow, gradient or blurred blob behind the product.
  • Don't add a subhead paragraph and two buttons — specs replace the paragraph.
  • Don't use lifestyle photography here; it is a clean product shot.

Phone width

  • Shot at 4:3 full width; specs become a 2×2 grid; price above a full-width CTA.

Brand & product studio

We make complicated companies simple to choose

140+

launches shipped

12

years independent

9 of 10

clients return

Booking projects from June 2026

Start a project