hero.brutalist-cell-wall · Cell wall

A hero pattern from Brutalist, drawn alone below with this design's tokens and sample copy. Not used in this design: shown with its tokens for comparison. Give the section root data-pattern="hero.brutalist-cell-wall". A guide only: DESIGN.md and tokens.json are the source of truth.

Rule
A wall of bordered cells with no gutter: the headline cell spans 1–8 over two rows; eyebrow+subhead and the CTA stack in 9–12; a meta cell 1–4 and a wide text cell 5–12 close the wall.
Slots
headline, eyebrow, subhead, cta, meta, statement
Grid areas
headline 1-8 · info 9-12 · action 9-12 · meta 1-4 · body 5-12 (12-column grid, 1-based inclusive spans)
Notes
Every cell has a 2 px border on all sides; neighbouring borders touch (collapse) — like an HTML table with border=1.
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

  • Five cells on a 12-column grid with zero gap, each with a 2 px border on all four sides (borders collapse into single lines). Cell 1: headline in 1–8 across rows 1–2, uppercase, step 7, heaviest weight. Cell 2 (9–12, row 1): mono eyebrow and the subhead. Cell 3 (9–12, row 2): one primary button at medium size, bottom of the cell, accent fill, square. Cell 4 (1–4, row 3): a mono meta line. Cell 5 (5–12, row 3): a one-line statement in body size (different copy from the subhead). At phone width cells stack in source order and keep their borders.

We make complicated companies simple to choose

Brand & product studio

Northfold is a 14-person studio helping manufacturers, labs and B2B teams explain what they do — and look like they mean it.

Start a project

Booking projects from June 2026

Most rebrands fail because they start with a logo. Ours start with a sales call recording and a spreadsheet of lost deals.

Layout tree (as in design/layout.json)
{
  "pattern": "hero.brutalist-cell-wall",
  "kind": "hero",
  "grid": {
    "headline": "1-8",
    "info": "9-12",
    "action": "9-12",
    "meta": "1-4",
    "body": "5-12"
  },
  "slots": [
    "headline",
    "eyebrow",
    "subhead",
    "cta",
    "meta",
    "statement"
  ],
  "notes": "Every cell has a 2 px border on all sides; neighbouring borders touch (collapse) — like an HTML table with border=1.",
  "tree": {
    "el": "grid",
    "gap": 0,
    "align": "stretch",
    "minVh": 0.8,
    "children": [
      {
        "el": "box",
        "span": "1-8",
        "rowSpan": "1-2",
        "pad": [
          4,
          3
        ],
        "justify": "end",
        "border": "all",
        "children": [
          {
            "el": "text",
            "slot": "headline",
            "role": "display",
            "step": 7,
            "transform": "uppercase",
            "leading": "tight"
          }
        ]
      },
      {
        "el": "box",
        "span": "9-12",
        "rowSpan": "1-1",
        "gap": 2,
        "pad": [
          3,
          3
        ],
        "border": "all",
        "children": [
          {
            "el": "text",
            "slot": "eyebrow",
            "role": "label",
            "transform": "uppercase",
            "font": "mono"
          },
          {
            "el": "text",
            "slot": "subhead",
            "role": "body"
          }
        ]
      },
      {
        "el": "box",
        "span": "9-12",
        "rowSpan": "2-2",
        "pad": [
          3,
          3
        ],
        "justify": "end",
        "border": "all",
        "children": [
          {
            "el": "button",
            "slot": "cta",
            "variant": "primary",
            "size": "md",
            "arrow": true
          }
        ]
      },
      {
        "el": "box",
        "span": "1-4",
        "rowSpan": "3-3",
        "pad": [
          2,
          3
        ],
        "border": "all",
        "children": [
          {
            "el": "text",
            "slot": "meta",
            "role": "small",
            "font": "mono"
          }
        ]
      },
      {
        "el": "box",
        "span": "5-12",
        "rowSpan": "3-3",
        "pad": [
          2,
          3
        ],
        "border": "all",
        "children": [
          {
            "el": "text",
            "slot": "statement",
            "role": "body",
            "maxCh": 70
          }
        ]
      }
    ]
  }
}

Other patterns in this design

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