hero.neo-grotesk-baseline · Baseline

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

Rule
Four tiny labels across the top (1–3, 4–6, 7–9, 10–12); the headline sits alone at the bottom of the hero at step 5, weight 400, one or two lines.
Slots
eyebrow, meta, address, cta, headline
Grid areas
label1 1-3 · label2 4-6 · label3 7-9 · label4 10-12 · headline full (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

  • Top: four tiny labels in a row on the quarter lines — eyebrow, meta, the address and a small text CTA — all at step −1. The rest of the hero (about 60% of the viewport, so the headline stays above the fold) is empty until the bottom, where the headline sits at step 5, weight 400, tight tracking, max ~28 ch, one or two lines. No image. At phone width the labels wrap two per row.

Brand & product studio

Booking projects from June 2026

Rua da Boavista 72, 1200-066 Lisboa

Start a project

We make complicated companies simple to choose