faq.neo-grotesk-hairline-list · Hairline list

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

Rule
Label and a title at step 4 on 1–4; on 5–12 four to ten rows separated by hairlines, each the question (weight 500) on 1–3 of an 8-column row and the answer (muted, max 52 ch) on 4–8. All answers open.
Slots
sectionLabel, title, faqs[4..10]
Grid areas
heading 1-4 · list 5-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

  • Columns 1–4: a tiny label and the title at step 4, weight 500. On 5–12, four to ten rows separated by hairlines; each row is an 8-column grid with the question (body, weight 500) on 1–3 and the answer (body, muted, max 52 ch) on 4–8. All answers open. At phone width the question sits above its answer.

FAQ

Working together

How big are your projects?

Most run 8–16 weeks with a team of three to five people.

Do you work with startups?

Yes, from Series A onwards, when there's a product and paying customers.

Do you build the website too?

We design and build, then train your team to run it.

Where are you based?

Lisbon and London, working with clients across Europe and North America.

Can we hire you for a single deliverable?

Occasionally — a naming project or a sales deck. Ask us.