content.neo-grotesk-offset-text · Offset text

A content pattern from Neo-grotesk Minimal, drawn alone below with this design's tokens and sample copy. Used in this design on: home page, section 2; about page, section 1. Give the section root data-pattern="content.neo-grotesk-offset-text". A guide only: DESIGN.md and tokens.json are the source of truth.

Rule
A tiny label on 1–2; one statement at step 2 (weight 400) on 5–11; an empty band; two small paragraphs on 5–7 and 9–11.
Slots
sectionLabel, statement, body, body2
Grid areas
label 1-2 · statement 5-11 · body 5-7 · body2 9-11 (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

  • Tiny uppercase label on 1–2. The statement at step 2, weight 400, max ~50 ch on 5–11. Then an empty band (64 px), then two small paragraphs side by side on 5–7 and 9–11. Columns 3–4 and 12 stay empty throughout. At phone width everything stacks flush left.

About

Most rebrands fail because they start with a logo. Ours start with a sales call recording and a spreadsheet of lost deals.

Each engagement starts with a two-week audit: interviews with customers, sales and the people who build the product. The brief writes itself after that.

We hand over everything — source files, a living brand system and a website your team can edit without calling us.