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 #F6FBFF · text #192028 · heading #091018 · accent #5E65E8 · accent2 #9256C9 · Geist / Geist · radius 20px · space unit 4px (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

years independent

9 of 10

clients return

Booking projects from June 2026

Start a project