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
An 'In this issue' page: mono label, uppercase title in 1–8, then a ruled list with the big number in 1–2, title in 3–8, a line in 9–11 and the mono page number in 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): the number at step 5 in the link colour followed by the uppercase h3 title, sharing 1–8 on one baseline (they stay side by side on phones), a one-line description in 9–11 (hidden on phones) and the mono page number 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-8",
              "mobile": "keep",
              "dir": "row",
              "gap": 4,
              "align": "baseline",
              "children": [
                {
                  "el": "text",
                  "color": "link",
                  "slot": "number",
                  "role": "number",
                  "step": 5
                },
                {
                  "el": "text",
                  "slot": "title",
                  "role": "h3",
                  "transform": "uppercase"
                }
              ]
            },
            {
              "el": "text",
              "span": "9-11",
              "mobile": "hide",
              "slot": "body",
              "role": "small",
              "maxCh": 40
            },
            {
              "el": "text",
              "span": "12-12",
              "slot": "meta",
              "role": "label",
              "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-2); }
  li p { grid-column: 9 / 12; font-size: calc(var(--base) * 0.85); }
  .pg { grid-column: 12 / 13; text-align: right; }
  @media (max-width: 640px) { li p { display: none; } .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