content.editorial-magazine-longform · Longform

A content pattern from Editorial Magazine, drawn alone below with this design's tokens and sample copy. Used in this design on: home page, section 2; about page, section 1. Give the section root data-pattern="content.editorial-magazine-longform". A guide only: DESIGN.md and tokens.json are the source of truth.

Rule
Body text on the 3–8 measure with a drop cap; marginalia (photo with its caption) in 10–12; a pull quote breaks out to 2–9 between paragraphs.
Slots
sectionLabel, statement, image, body, quote, body2
Grid areas
label 3-8 · body 3-8 · margin 10-12 · pullQuote 2-9 (12-column grid, 1-based inclusive spans)
Notes
The pull quote is wider than the measure on the left only — it breaks the column, not the page.
Tokens
bg #FDF9F4 · text #241E16 · heading #150E06 · accent #9B2234 · accent2 #D26F74 · Playfair Display / Source Serif 4 · radius 0px · space unit 8px (full list in design/tokens.json)

Pattern notes

  • The reading column runs 3–8 (max ~62 ch). Order: section label (small uppercase), the opening statement at step 2 (a deck, max 62 ch), body paragraphs, then a pull quote in italic display serif at step 4 that breaks out of the measure to 2–9 with a 2 px accent rule above it, then more body. Marginalia sit in 10–12 beside the first paragraphs: a 4:5 photograph with one small caption (never repeat the caption as a second note). At phone width the marginalia follow the first paragraph.

About

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

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.

“They understood our product faster than our own sales team did.”

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

Layout tree (as in design/layout.json)
{
  "pattern": "content.editorial-magazine-longform",
  "kind": "content",
  "grid": {
    "label": "3-8",
    "body": "3-8",
    "margin": "10-12",
    "pullQuote": "2-9"
  },
  "slots": [
    "sectionLabel",
    "statement",
    "image",
    "body",
    "quote",
    "body2"
  ],
  "notes": "The pull quote is wider than the measure on the left only — it breaks the column, not the page.",
  "tree": {
    "el": "grid",
    "gap": 4,
    "rowGap": 4,
    "align": "start",
    "children": [
      {
        "el": "text",
        "span": "3-8",
        "color": "accent",
        "slot": "sectionLabel",
        "role": "eyebrow",
        "transform": "uppercase",
        "tracking": "wide",
        "font": "body"
      },
      {
        "el": "text",
        "span": "3-8",
        "slot": "statement",
        "role": "lead",
        "step": 2,
        "maxCh": 62
      },
      {
        "el": "box",
        "span": "10-12",
        "rowSpan": "2-3",
        "gap": 2,
        "children": [
          {
            "el": "media",
            "slot": "image",
            "aspect": "4/5",
            "treatment": "photo",
            "caption": true
          }
        ]
      },
      {
        "el": "text",
        "span": "3-8",
        "slot": "body",
        "role": "body",
        "maxCh": 62
      },
      {
        "el": "box",
        "span": "2-9",
        "gap": 2,
        "children": [
          {
            "el": "divider",
            "color": "accent",
            "weight": 2
          },
          {
            "el": "text",
            "slot": "quote",
            "role": "quote",
            "step": 4,
            "weight": 400,
            "italic": true,
            "leading": "tight"
          }
        ]
      },
      {
        "el": "text",
        "span": "3-8",
        "slot": "body2",
        "role": "body",
        "maxCh": 62
      }
    ]
  }
}
Component example: reference/content.editorial-magazine-longform.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
<title>content.editorial-magazine-longform — Editorial Magazine</title>
<link rel="stylesheet" href="base.css">
<style>
  .story { padding: 120px 0; row-gap: 32px; align-items: start; }
  .story > .kicker, .story > p { grid-column: 3 / 9; max-width: 62ch; }
  .lead { font-size: var(--step-1); line-height: 1.45; }
  aside { grid-column: 10 / 13; grid-row: 2 / 4; } aside .photo { aspect-ratio: 4 / 5; }
  blockquote { grid-column: 2 / 10; border-top: 2px solid var(--accent); padding-top: 16px; font: italic 400 var(--step-4)/1.05 var(--display); color: var(--heading); }
  @media (max-width: 640px) { blockquote { font-size: var(--step-2); } }
</style>
</head>
<body>
<article class="wrap">
  <div class="story grid">
    <p class="kicker accent">Chapter one</p>
    <p class="lead dropcap">Hassan Benali was nine when he first went out with his father's crew. The boat was blue then, as it is now; it is the same boat, re-planked twice, and it still leaves the harbour at four.</p>
    <aside><div class="photo" role="img" aria-label="Hassan mending nets"></div><p class="caption">Hassan Benali mends nets on the quay. He has fished from this harbour for 51 years.</p></aside>
    <p>The catch has changed. Sardines used to arrive in shoals so dense the water turned silver; now the boats go further for less, and the fuel costs more each spring. Nobody here talks about the end of the fleet. They talk about the weather, the price at auction, the new port being built to the south.</p>
    <blockquote>"The sea does not care what we built. It only cares whether we came back."</blockquote>
    <p>At the auction hall the fish are sold by the crate, by voice, in under a minute. The buyers are the same families who have bought here for generations, and the prices are written in chalk.</p>
  </div>
</article>
</body>
</html>

Other patterns in this design

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