content.broadsheet-column-story · Column story

A content pattern from Broadsheet Newspaper, drawn alone below with this design's tokens and sample copy. Used in this design on: home page, section 3; about page, section 1. Give the section root data-pattern="content.broadsheet-column-story". A guide only: DESIGN.md and tokens.json are the source of truth.

Rule
A kicker, a two-line serif headline, byline and dateline, a rule, then the story in two justified columns (the first with a drop cap) and a pull quote in the third, split by vertical rules.
Slots
eyebrow, title, meta, caption, body, body2, statement
Grid areas
col1 1-4 · col2 5-8 · pullQuote 9-12 (12-column grid, 1-based inclusive spans)
Tokens
bg #F4F0E6 · text #1B1A17 · heading #0D0C0A · accent #872824 · accent2 #BE6D65 · UnifrakturMaguntia / Newsreader · radius 0px · space unit 6px (full list in design/tokens.json)

Pattern notes

  • A spot-colour kicker, the story head at step 4 (max ~44 ch), a line with the mono byline and the italic dateline, a hairline, then the story in two justified columns, 1–4 (opening with a drop cap) and 5–8, then on 9–12 a pull quote in italic serif at step 3 (h3, default heading weight) between a 2 px rule above and a hairline below; 5–8 and 9–12 sit behind vertical rules.

Brand & product studio

How we think

Booking projects from June 2026

Corvid Robotics — identity

Each engagement starts with a two-week audit: interviews with customers, sales and the people who build the product. The brief writes itself after that.

We hand over everything — source files, a living brand system and a website your team can edit without calling us.

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": "content.broadsheet-column-story",
  "kind": "content",
  "grid": {
    "col1": "1-4",
    "col2": "5-8",
    "pullQuote": "9-12"
  },
  "slots": [
    "eyebrow",
    "title",
    "meta",
    "caption",
    "body",
    "body2",
    "statement"
  ],
  "tree": {
    "el": "box",
    "gap": 2,
    "children": [
      {
        "el": "text",
        "color": "link",
        "slot": "eyebrow",
        "role": "label",
        "transform": "uppercase",
        "weight": 700,
        "tracking": "wide"
      },
      {
        "el": "text",
        "slot": "title",
        "role": "h2",
        "step": 4,
        "weight": 700,
        "leading": "tight",
        "maxCh": 44,
        "font": "body"
      },
      {
        "el": "box",
        "dir": "row",
        "gap": 4,
        "wrap": true,
        "children": [
          {
            "el": "text",
            "slot": "meta",
            "role": "small",
            "transform": "uppercase",
            "tracking": "wide",
            "font": "mono"
          },
          {
            "el": "text",
            "slot": "caption",
            "role": "small",
            "italic": true,
            "font": "body"
          }
        ]
      },
      {
        "el": "divider",
        "weight": 1
      },
      {
        "el": "grid",
        "gap": 3,
        "align": "start",
        "children": [
          {
            "el": "text",
            "span": "1-4",
            "slot": "body",
            "role": "body",
            "font": "body"
          },
          {
            "el": "box",
            "span": "5-8",
            "pad": [
              0,
              2
            ],
            "border": "left",
            "children": [
              {
                "el": "text",
                "slot": "body2",
                "role": "body",
                "font": "body"
              }
            ]
          },
          {
            "el": "box",
            "span": "9-12",
            "gap": 2,
            "pad": [
              0,
              2
            ],
            "border": "left",
            "children": [
              {
                "el": "divider",
                "weight": 2
              },
              {
                "el": "text",
                "slot": "statement",
                "role": "h3",
                "step": 3,
                "italic": true,
                "leading": "tight",
                "font": "body"
              },
              {
                "el": "divider",
                "weight": 1
              }
            ]
          }
        ]
      }
    ]
  }
}

Other patterns in this design

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