list.constructivist-manifesto · Manifesto

A list pattern from Constructivist, 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.constructivist-manifesto". A guide only: DESIGN.md and tokens.json are the source of truth.

Rule
An 8 px bar, then 3–5 ruled rows: a red numeral at step 6 on 1–3, the point in capitals at step 4 on 4–9 and a short lead on 10–12.
Slots
sectionLabel, items[3..5]
Grid areas
number 1-3 · title 4-9 · body 10-12 (12-column grid, 1-based inclusive spans)
Tokens
bg #EFE6D2 · text #16130F · heading #16130F · accent #C8102E · accent2 #FF7777 · Anton / Barlow Semi Condensed · radius 0px · space unit 8px (full list in design/tokens.json)

Pattern notes

  • A spaced-capital label and an 8 px bar, then three to five theses separated by thick rules: a huge red numeral at step 6 in 1–3, the thesis in capitals at step 4 on 4–9 (max 20 ch) and its paragraph at lead size on 10–12 (max 32 ch), bottom-aligned beside it. Rows are padded step 2, so each thesis is one band.

Index

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.

Layout tree (as in design/layout.json)
{
  "pattern": "list.constructivist-manifesto",
  "kind": "list",
  "grid": {
    "number": "1-3",
    "title": "4-9",
    "body": "10-12"
  },
  "slots": [
    "sectionLabel",
    "items[3..5]"
  ],
  "tree": {
    "el": "box",
    "gap": 2,
    "children": [
      {
        "el": "text",
        "slot": "sectionLabel",
        "role": "label",
        "transform": "uppercase",
        "tracking": "wide"
      },
      {
        "el": "divider",
        "weight": 8
      },
      {
        "el": "repeat",
        "slot": "items",
        "min": 3,
        "max": 5,
        "layout": "list",
        "divider": true,
        "of": {
          "el": "grid",
          "gap": 2,
          "rowGap": 2,
          "pad": [
            2,
            0
          ],
          "align": "start",
          "children": [
            {
              "el": "text",
              "span": "1-3",
              "color": "link",
              "alignSelf": "start",
              "slot": "number",
              "role": "number",
              "step": 6,
              "leading": "tight"
            },
            {
              "el": "grid",
              "span": "4-12",
              "alignSelf": "center",
              "cols": 9,
              "gap": 2,
              "rowGap": 2,
              "children": [
                {
                  "el": "text",
                  "span": "1-6",
                  "slot": "title",
                  "role": "h2",
                  "step": 4,
                  "transform": "uppercase",
                  "tracking": "tight",
                  "leading": "tight",
                  "maxCh": 20
                },
                {
                  "el": "text",
                  "span": "7-9",
                  "alignSelf": "end",
                  "slot": "body",
                  "role": "lead",
                  "maxCh": 32
                }
              ]
            }
          ]
        }
      }
    ]
  }
}
Component example: reference/list.constructivist-manifesto.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
<title>list.constructivist-manifesto — Constructivist</title>
<link rel="stylesheet" href="base.css">
<style>
  section { padding: var(--section) 0; display: grid; gap: calc(var(--unit) * 2); }
  ol { list-style: none; padding: 0; }
  li { padding: calc(var(--unit) * 2) 0; align-items: end; border-bottom: 4px solid var(--ink); row-gap: calc(var(--unit) * 2); }
  li .num { grid-column: 1 / 4; font-size: var(--step-5); color: var(--link); }
  li h2 { grid-column: 4 / 10; font-size: var(--step-3); max-width: 20ch; align-self: center; }
  li p { grid-column: 10 / 13; max-width: 32ch; font-size: calc(var(--base) * 1.2); }
  @media (max-width: 640px) { li .num, li h2, li p { grid-column: 1 / -1; } }
</style>
</head>
<body>
<section class="wrap">
  <p class="label">Manifesto</p>
  <div class="bar8"></div>
  <ol>
    <li class="grid"><span class="num">1</span><h2>Music belongs to the street</h2><p>Every performance is free to stand and listen to; seats are for those who want them.</p></li>
    <li class="grid"><span class="num">2</span><h2>No piece older than ten years</h2><p>We programme only living composers and pay every one of them the same fee.</p></li>
    <li class="grid"><span class="num">3</span><h2>The audience builds the stage</h2><p>Volunteers raise the scaffolding stages on the first morning; join the crew by email.</p></li>
  </ol>
</section>
</body>
</html>

Other patterns in this design

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