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
Label and an 8px bar, then numbered theses: a huge red numeral in 1–3, the thesis in capitals at step 4 on 4–12, a paragraph on 6–12; thick rules between.
Slots
sectionLabel, items[3..5]
Grid areas
number 1-3 · thesis 4-12 · body 6-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 7 in 1–3, the thesis in capitals at step 4 on 4–12 (max 28 ch), its paragraph on 6–12 under it.

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",
    "thesis": "4-12",
    "body": "6-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": [
            3,
            0
          ],
          "align": "start",
          "children": [
            {
              "el": "text",
              "span": "1-3",
              "color": "link",
              "alignSelf": "start",
              "slot": "number",
              "role": "number",
              "step": 7,
              "leading": "tight"
            },
            {
              "el": "grid",
              "span": "4-12",
              "alignSelf": "center",
              "cols": 9,
              "gap": 2,
              "rowGap": 3,
              "children": [
                {
                  "el": "text",
                  "span": "1-9",
                  "slot": "title",
                  "role": "h2",
                  "step": 4,
                  "transform": "uppercase",
                  "tracking": "tight",
                  "leading": "tight",
                  "maxCh": 28
                },
                {
                  "el": "text",
                  "span": "3-9",
                  "slot": "body",
                  "role": "body",
                  "maxCh": 56
                }
              ]
            }
          ]
        }
      }
    ]
  }
}
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) * 3) 0; border-bottom: 4px solid var(--ink); row-gap: calc(var(--unit) * 2); }
  li .num { grid-column: 1 / 4; grid-row: 1 / 3; font-size: var(--step-5); color: var(--link); }
  li h2 { grid-column: 4 / 13; font-size: var(--step-3); max-width: 28ch; }
  li p { grid-column: 6 / 13; max-width: 56ch; }
</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