list.brutalist-raw-table · Raw table

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

Rule
A bordered table: a grey header row (label + count) then items as rows — number 1, title 2–6, text 7–11, mono date 12 — separated by 1 px rules.
Slots
sectionLabel, caption, items[3..12]
Grid areas
no 1-1 · item 2-6 · description 7-11 · date 12-12 (12-column grid, 1-based inclusive spans)
Tokens
bg #FAFAFA · text #1F1F1F · heading #0F0F0F · accent #012FD3 · accent2 #4980FE · Space Mono / Space Mono · radius 0px · space unit 8px (full list in design/tokens.json)

Pattern notes

  • The whole list sits in one box with a 2 px border. First row on surfaceAlt: the section label in mono uppercase on 1–6 and a mono caption (item count, "sorted by date") on 7–12. Then each item is a row with 1 px rules between: number (mono) on 1, title (h4, uppercase) on 2–6, body on 7–11, mono date on 12. Tabular, dense, no padding beyond 8–16 px. At phone width each row stacks and the header row keeps only the label (the caption hides).

Index

Corvid Robotics — identity

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.brutalist-raw-table",
  "kind": "list",
  "grid": {
    "no": "1-1",
    "item": "2-6",
    "description": "7-11",
    "date": "12-12"
  },
  "slots": [
    "sectionLabel",
    "caption",
    "items[3..12]"
  ],
  "tree": {
    "el": "box",
    "gap": 0,
    "border": "all",
    "children": [
      {
        "el": "grid",
        "bg": "surfaceAlt",
        "gap": 2,
        "pad": [
          1,
          2
        ],
        "children": [
          {
            "el": "text",
            "span": "1-6",
            "slot": "sectionLabel",
            "role": "label",
            "transform": "uppercase",
            "font": "mono"
          },
          {
            "el": "text",
            "span": "7-12",
            "mobile": "hide",
            "slot": "caption",
            "role": "label",
            "transform": "uppercase",
            "font": "mono"
          }
        ]
      },
      {
        "el": "repeat",
        "slot": "items",
        "min": 3,
        "max": 12,
        "layout": "list",
        "gap": 0,
        "divider": true,
        "of": {
          "el": "grid",
          "gap": 2,
          "pad": [
            2,
            2
          ],
          "align": "baseline",
          "children": [
            {
              "el": "text",
              "span": "1-1",
              "slot": "number",
              "role": "label",
              "font": "mono"
            },
            {
              "el": "text",
              "span": "2-6",
              "slot": "title",
              "role": "h4",
              "transform": "uppercase"
            },
            {
              "el": "text",
              "span": "7-11",
              "slot": "body",
              "role": "body"
            },
            {
              "el": "text",
              "span": "12-12",
              "slot": "meta",
              "role": "small",
              "font": "mono"
            }
          ]
        }
      }
    ]
  }
}
Component example: reference/list.brutalist-raw-table.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
<title>list.brutalist-raw-table — Brutalist</title>
<link rel="stylesheet" href="base.css">
<style>
  section { padding: 64px 0; }
  .table { border: var(--line); }
  .head { background: var(--grey); padding: 8px 16px; text-transform: uppercase; font-size: 13px; }
  .head span:first-child { grid-column: 1 / 7; } .head span:last-child { grid-column: 7 / 13; }
  .row { padding: 16px; border-top: 1px solid var(--text); align-items: baseline; column-gap: 16px; }
  .row .n { grid-column: 1 / 2; } .row h4 { grid-column: 2 / 7; font-size: var(--step-1); }
  .row p { grid-column: 7 / 12; } .row time { grid-column: 12 / 13; font-size: 13px; }
  @media (max-width: 640px) { .head span:last-child { display: none; } .row > * + * { margin-top: 6px; } }
</style>
</head>
<body>
<section class="wrap">
  <div class="table">
    <div class="head grid"><span>Releases</span><span>47 items — sorted by date</span></div>
    <div class="row grid"><span class="n">047</span><h4>Low Tide Archive</h4><p>Four hours of harbour recordings, edited onto two cassettes.</p><time>2026-10</time></div>
    <div class="row grid"><span class="n">046</span><h4>Machine Psalms</h4><p>Drum machines through a broken church organ amplifier.</p><time>2026-08</time></div>
    <div class="row grid"><span class="n">045</span><h4>Untitled (Concrete)</h4><p>Contact mics on a demolition site in Feijenoord, March 2026.</p><time>2026-05</time></div>
  </div>
</section>
</body>
</html>

Other patterns in this design

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