hero.minimal-statement-left · Statement, bottom-left

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.minimal-statement-left". A guide only: DESIGN.md and tokens.json are the source of truth.

Rule
A tall, quiet hero: a mono index top-left and meta top-right on one row, and a two-to-three-line statement as the h1 at step 5 sitting on the bottom-left (1–9), with one underline link under it.
Slots
index, meta, headline, cta
Grid areas
index 1-2 · meta 10-12 · statement 1-9 · link 1-4 (12-column grid, 1-based inclusive spans)
Notes
Generous empty space between the top labels and the statement (rowGap step 10+). The statement is a full sentence (20–30 words max), regular weight.
Tokens
bg #FAFAFA · text #1F1F1F · heading #0F0F0F · accent #E2271D · accent2 #850001 · Inter Tight / Hanken Grotesk · radius 0px · space unit 8px (full list in design/tokens.json)

Do

  • Place a small mono index top-left and a muted meta line top-right, on one row.
  • Leave a large empty band in the middle of the hero.
  • Set a one-sentence statement (up to 25 words) as the h1 at step 5, regular weight, bottom-left in 1–9.
  • Follow with one underlined text link.

Don't

  • Don't use an image or a filled button.
  • Don't set the statement in bold or uppercase.
  • Don't fill the empty middle band with decoration.

Phone width

  • Index and meta share the top row; the statement at step 4 sits at the bottom; reduce the empty band to step 8.

06

Booking projects from June 2026

We make complicated companies simple to choose

Start a project