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 6, weight 700, tight), title (step 3, weight 700) and one short paragraph; rows sit hairline to hairline with no extra gap. 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 the h2 title (step 4) in 4–10. Each item is one row: the number in 1–2 (step 6, weight 700, tight, heading face), the title (step 3, weight 700) and one paragraph (max 60 ch) in 4–10, and an optional small muted meta in 11–12. Items are separated by hairlines with 16 px above and below each row and no extra gap. Never put the numbers in circles or badges.

Index

Services

01

Discovery sprint

Two weeks of interviews, audits and competitor teardown.

2 weeks

02

Positioning workshop

A day with your leadership to agree on one story.

1 day

03

Identity design

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

8 weeks

04

Website

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

10 weeks

Layout tree (as in design/layout.json)
{
  "pattern": "list.numbered-index",
  "kind": "list",
  "grid": {
    "index": "1-2",
    "body": "4-10"
  },
  "slots": [
    "sectionLabel",
    "title",
    "items[3..6]"
  ],
  "notes": "Each item: number (step 6, weight 700, tight), title (step 3, weight 700) and one short paragraph; rows sit hairline to hairline with no extra gap. Optional meta flush left in 11–12.",
  "tree": {
    "el": "box",
    "gap": 6,
    "children": [
      {
        "el": "grid",
        "gap": 3,
        "children": [
          {
            "el": "text",
            "span": "1-2",
            "color": "textMuted",
            "slot": "sectionLabel",
            "role": "eyebrow"
          },
          {
            "el": "text",
            "span": "4-10",
            "slot": "title",
            "role": "h2",
            "step": 4,
            "maxCh": 28
          }
        ]
      },
      {
        "el": "repeat",
        "slot": "items",
        "min": 3,
        "max": 6,
        "layout": "list",
        "gap": 0,
        "divider": true,
        "of": {
          "el": "grid",
          "gap": 3,
          "pad": [
            2,
            0
          ],
          "children": [
            {
              "el": "text",
              "span": "1-2",
              "slot": "number",
              "role": "number",
              "step": 6,
              "weight": 700,
              "tracking": "tight",
              "leading": "tight"
            },
            {
              "el": "box",
              "span": "4-10",
              "gap": 1,
              "children": [
                {
                  "el": "text",
                  "slot": "title",
                  "role": "h3",
                  "step": 3,
                  "weight": 700,
                  "tracking": "tight"
                },
                {
                  "el": "text",
                  "slot": "body",
                  "role": "body",
                  "maxCh": 60
                }
              ]
            },
            {
              "el": "text",
              "span": "11-12",
              "mobile": "hide",
              "color": "textMuted",
              "slot": "meta",
              "role": "small"
            }
          ]
        }
      }
    ]
  }
}
Component example: reference/list.numbered-index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
<title>list.numbered-index — Swiss International</title>
<link rel="stylesheet" href="base.css">
<style>
  section { padding: var(--section) 0; }
  .head { row-gap: 16px; margin-bottom: calc(var(--unit) * 6); }
  .head .eyebrow { grid-column: 1 / 3; } .head h2 { grid-column: 4 / 11; font-size: var(--step-4); max-width: 28ch; }
  ol { list-style: none; padding: 0; border-bottom: 1px solid var(--rule); }
  li { padding: calc(var(--unit) * 2) 0; border-top: 1px solid var(--rule); row-gap: 8px; }
  li .num { grid-column: 1 / 3; font-size: var(--step-6); line-height: 0.9; letter-spacing: -0.04em; }
  li .body { grid-column: 4 / 11; display: grid; gap: 8px; }
  li h3 { font-size: var(--step-3); } li p { max-width: 60ch; }
  li .meta { grid-column: 11 / 13; }
  @media (max-width: 640px) { li .meta { display: none; } }
</style>
</head>
<body>
<section class="wrap">
  <div class="head grid"><p class="eyebrow muted">Method</p><h2>Four steps from brief to building.</h2></div>
  <ol>
    <li class="grid"><span class="num">01</span><div class="body"><h3>Survey</h3><p>We measure the site, its light and its use before drawing anything.</p></div><span class="meta small muted">2–4 weeks</span></li>
    <li class="grid"><span class="num">02</span><div class="body"><h3>Grid</h3><p>One module sets every dimension, from the facade to the door handles.</p></div><span class="meta small muted">3 weeks</span></li>
    <li class="grid"><span class="num">03</span><div class="body"><h3>Detail</h3><p>Every junction is drawn at full scale and tested with the builder.</p></div><span class="meta small muted">6 weeks</span></li>
    <li class="grid"><span class="num">04</span><div class="body"><h3>Build</h3><p>We stay on site until the last fixture is in place.</p></div><span class="meta small muted">ongoing</span></li>
  </ol>
</section>
</body>
</html>

Other patterns in this design

Whole design · Spec bundle (JSON) · On the style page