`list.numbered-index` · Numbered index

A list pattern from Swiss International, drawn alone below with this design's tokens and sample copy. Used in this design on: home page, section 2. Give the section root data-pattern="list.numbered-index". A guide only: DESIGN.md and tokens.json are the source of truth.

Rule: Index numbers in columns 1–2, item text in 4–10, hairline between items. Numbers are large and set in the heading face, never in circles.
Slots: sectionLabel, title, items[3..6]
Grid areas: index 1-2 · body 4-10 (12-column grid, 1-based inclusive spans)
Notes: Each item: number (step 3), title (h3) and one short paragraph. Optional meta flush left in 11–12.
Tokens: bg #FAFAFA · text #1F1F1F · heading #0F0F0F · accent #E2271D · accent2 #850001 · Inter Tight / Hanken Grotesk · radius 0px · space unit 8px (full list in design/tokens.json)

Pattern notes

The SPEC's index list. Section label in 1–2 and h2 title in 4–10. Each item is one row: the number in 1–2 (step 3, weight 700, heading face), the title (h3) and one paragraph (max 60 ch) in 4–10, and an optional small muted meta in 11–12. Items are separated by hairlines. Never put the numbers in circles or badges.

Index

Services

Discovery sprint

Two weeks of interviews, audits and competitor teardown.

Positioning workshop

A day with your leadership to agree on one story.

Identity design

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

Website

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