list.neo-grotesk-quad-index · Quad index

A list 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="list.neo-grotesk-quad-index". A guide only: DESIGN.md and tokens.json are the source of truth.

Rule
Items in four narrow columns, each opening with a hairline, a tiny number, a small weight-500 title and two lines of small text.
Slots
title, items[4..8]
Grid areas
items 1-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

  • A small title row (step 1, weight 500), then four to eight items in a 4-column grid with 24 px gaps. Each item: a hairline on top, a tiny number (step −1, mono, muted), the title at body size weight 500, and at most two lines of small muted text. No icons. At phone width two per row.

Services

01

Discovery sprint

Two weeks of interviews, audits and competitor teardown.

02

Positioning workshop

A day with your leadership to agree on one story.

03

Identity design

Logo, type, colour, motion and a working toolkit.

04

Website

Strategy, copy, design and build in Webflow or Next.js.

05

Launch support

Training, templates and a month of on-call design.

06

Retainer

A senior designer embedded two days a week.