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
Tiny label on 1–3; the statement at step 4, weight 400, max ~30 ch on 5–12; then two body paragraphs side by side on 5–8 and 9–12.
Slots
sectionLabel, statement, body, body2
Grid areas
label 1-3 · statement 5-12 · body 5-8 · body2 9-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

  • Tiny uppercase label on 1–3. The statement at step 5, weight 400, tight tracking, max ~26 ch on 5–12. Then a 32 px pause and two muted body paragraphs side by side on 5–8 and 9–12. 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.