list.risograph-contents-page · Contents page

A list pattern from Risograph Print, 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.risograph-contents-page". A guide only: DESIGN.md and tokens.json are the source of truth.

Rule
A contents page: mono eyebrow, a step-6 uppercase title on 1–8, then numbered rows split by 2 px rules: a step-4 accent number and a step-2 uppercase title on 1–7, the description at body size on 8–11, a mono page number right-aligned on 12.
Slots
sectionLabel, title, items[4..8]
Grid areas
entry 1-8 · line 9-11 · page 12-12 (12-column grid, 1-based inclusive spans)
Tokens
bg #FDF9F4 · text #241E16 · heading #150E06 · accent #FF48B0 · accent2 #00B790 · Bricolage Grotesque / Work Sans · radius 0px · space unit 8px (full list in design/tokens.json)

Pattern notes

  • An "In this issue" page. Mono label across the grid, uppercase title at step 6 in 1–8. Then four to eight entries as a ruled list (2 px rules, 16 px row padding): the number at step 4 in the link colour followed by the uppercase title at step 2, sharing 1–7 on one baseline (they stay side by side on phones), the description at body size in 8–11 and the mono page number right-aligned in 12.

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

05

Launch support

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

4 weeks

06

Retainer

A senior designer embedded two days a week.

Ongoing

Layout tree (as in design/layout.json)
{
  "pattern": "list.risograph-contents-page",
  "kind": "list",
  "grid": {
    "entry": "1-8",
    "line": "9-11",
    "page": "12-12"
  },
  "slots": [
    "sectionLabel",
    "title",
    "items[4..8]"
  ],
  "tree": {
    "el": "grid",
    "gap": 3,
    "rowGap": 3,
    "children": [
      {
        "el": "text",
        "span": "1-12",
        "slot": "sectionLabel",
        "role": "eyebrow",
        "font": "mono"
      },
      {
        "el": "text",
        "span": "1-8",
        "slot": "title",
        "role": "display",
        "step": 6,
        "transform": "uppercase",
        "leading": "tight",
        "maxCh": 16
      },
      {
        "el": "repeat",
        "span": "1-12",
        "slot": "items",
        "min": 4,
        "max": 8,
        "layout": "list",
        "divider": true,
        "of": {
          "el": "grid",
          "gap": 3,
          "pad": [
            2,
            0
          ],
          "align": "baseline",
          "children": [
            {
              "el": "box",
              "span": "1-7",
              "mobile": "keep",
              "dir": "row",
              "gap": 4,
              "align": "baseline",
              "children": [
                {
                  "el": "text",
                  "color": "link",
                  "slot": "number",
                  "role": "number",
                  "step": 4
                },
                {
                  "el": "text",
                  "slot": "title",
                  "role": "h3",
                  "step": 2,
                  "transform": "uppercase"
                }
              ]
            },
            {
              "el": "text",
              "span": "8-11",
              "slot": "body",
              "role": "body",
              "maxCh": 40
            },
            {
              "el": "text",
              "span": "12-12",
              "slot": "meta",
              "role": "label",
              "align": "right",
              "font": "mono"
            }
          ]
        }
      }
    ]
  }
}
Component example: reference/list.risograph-contents-page.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
<title>list.risograph-contents-page — Risograph Print</title>
<link rel="stylesheet" href="base.css">
<style>
  section { padding: var(--section) 0; }
  .label { grid-column: 1 / 13; margin-bottom: 16px; }
  .title { grid-column: 1 / 9; font-size: var(--step-5); max-width: 16ch; margin-bottom: calc(var(--unit) * 4); }
  ol { grid-column: 1 / 13; list-style: none; padding: 0; border-bottom: var(--rule); }
  li { border-top: var(--rule); padding: 16px 0; align-items: baseline; }
  .n { grid-column: 1 / 3; font: 800 var(--step-4)/1 var(--font-heading); color: var(--link); }
  li h3 { grid-column: 3 / 9; font-size: var(--step-3); }
  li p { grid-column: 9 / 12; font-size: var(--base); }
  .pg { grid-column: 12 / 13; text-align: right; }
  @media (max-width: 640px) { li p { grid-column: 1 / -1; } .pg { text-align: left; } }
</style>
</head>
<body>
<section class="wrap">
  <div class="grid">
    <p class="label eyebrow">In this issue</p>
    <h2 class="title misreg">Contents</h2>
    <ol>
      <li class="grid"><span class="n">01</span><h3>The last sticky floor</h3><p>A night at the Boileroom, Guildford.</p><span class="pg mono">p.04</span></li>
      <li class="grid"><span class="n">02</span><h3>Promoters on promoting</h3><p>Six people who book bands for love, not money.</p><span class="pg mono">p.12</span></li>
      <li class="grid"><span class="n">03</span><h3>Make your own flyer</h3><p>A two-ink layout you can photocopy tonight.</p><span class="pg mono">p.22</span></li>
      <li class="grid"><span class="n">04</span><h3>Setlists, annotated</h3><p>What the drummer wrote on the back.</p><span class="pg mono">p.30</span></li>
    </ol>
  </div>
</section>
</body>
</html>

Other patterns in this design

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