hero.neo-grotesk-plate · Plate

A hero pattern from Neo-grotesk Minimal, drawn alone below with this design's tokens and sample copy. Not used in this design: shown with its tokens for comparison. Give the section root data-pattern="hero.neo-grotesk-plate". A guide only: DESIGN.md and tokens.json are the source of truth.

Rule
A short headline (step 4) on 1–5 and a small subhead on 7–10 with a text link on 11–12, above a full-width 21:9 product plate with a tiny caption.
Slots
headline, subhead, cta, heroImage
Grid areas
headline 1-5 · subhead 7-10 · cta 11-12 · plate 1-12 (12-column grid, 1-based inclusive spans)
Tokens
bg #FAFAFA · text #1F1F1F · heading #0F0F0F · accent #F95620 · accent2 #9E2C00 · Geist / Geist · radius 2px · space unit 8px (full list in design/tokens.json)

Pattern notes

  • Text row first: headline at step 4, weight 500, on 1–5; subhead in body size on 7–10 (max 44 ch); a small text link with arrow bottom-aligned on 11–12. Then a 21:9 plate across the full grid — a product shot or object on a flat surface colour, no shadow, no device frame — with a tiny caption under its left edge. At phone width the plate becomes 4:3 and sits last.

We make complicated companies simple to choose

Northfold is a 14-person studio helping manufacturers, labs and B2B teams explain what they do — and look like they mean it.

Start a project
Corvid Robotics — identity