hero.minimal-single-line · Single line

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

Rule
One sentence as the h1 at step 4, flush left across 1–10 and vertically centred in a 60vh hero; one text link with an arrow in 11–12 on the same line. Nothing else.
Slots
headline, cta
Grid areas
line 1-10 · link 11-12 (12-column grid, 1-based inclusive spans)
Notes
The restraint is the design: no eyebrow, no image, no subhead. The sentence should say what the site is in under 12 words.
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

  • Write one sentence of under 12 words and set it as the h1 at step 4, regular weight, flush left in 1–10.
  • Vertically centre it in a hero about 60% of the viewport tall.
  • Put one arrow text link in 11–12 on the same baseline row.

Don't

  • Don't add an eyebrow, image, subhead, badge or second action.
  • Don't centre the sentence horizontally.
  • Don't make it bold or larger than step 4 — that turns it into a giant-type hero.

Phone width

  • Sentence at step 3 on up to three lines; the link sits under it, left-aligned.

We make complicated companies simple to choose

Start a project