hero.broadsheet-front-page · Front page

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

Rule
Edition ears and motto, the blackletter nameplate centred between rules, a dateline, then the lead story on 1–8 (headline, deck, photo, two text columns) and an 'In brief' rail on 9–12 behind a vertical rule.
Slots
index, tagline, eyebrow, siteName, meta, headline, subhead, heroImage, statement, body2, sectionLabel, items[3..5], contact, cta
Grid areas
earLeft 1-3 · motto 5-8 · earRight 10-12 · nameplate full · lead 1-8 · brief 9-12 · subscribe 9-12 (12-column grid, 1-based inclusive spans)
Notes
The 4 px divider under the nameplate is drawn as a double rule (3 px + 1 px with a 2 px gap). Body columns are justified with hyphenation.
Tokens
bg #F4F0E6 · text #1B1A17 · heading #0D0C0A · accent #872824 · accent2 #BE6D65 · UnifrakturMaguntia / Newsreader · radius 0px · space unit 6px (full list in design/tokens.json)
Section
vertical padding step 4

Pattern notes

  • Top line (ears): volume and number in small caps on 1–3 and the motto in italic centred on 5–8 (both hidden on phone), price or edition in small caps right-aligned on 10–12. A hairline. The nameplate (site name) centred at step 7 in the blackletter face. A double rule. A centred small-caps dateline ("Monday, October 24, 2026 · London"). A hairline. Then the lead story on 1–8: headline in the body serif at step 6 weight 700 (max ~26 ch), an italic deck (lead size), a 16:9 grayscale photo with caption, and the story in two justified columns (1–6, 7–12 of its own grid) whose text differs from the deck. On 9–12, behind a 1 px vertical rule that runs the full height of the lead: a small-caps "In brief" label, 3–5 briefs (h4 head + small text) separated by hairlines, then a 2 px rule and a boxed (1 px) ear with a small-caps line and the small primary CTA.

06

Strategy and design for companies that make things

Brand & product studio

Northfold

Booking projects from June 2026

We make complicated companies simple to choose

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

Corvid Robotics — identity

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

Positioning, identity and websites for teams with a hard product and a short runway.

Introducing

Discovery sprint

Two weeks of interviews, audits and competitor teardown.

Positioning workshop

A day with your leadership to agree on one story.

Identity design

Logo, type, colour, motion and a working toolkit.

Website

Strategy, copy, design and build in Webflow or Next.js.

Send us a message

Start a project
Layout tree (as in design/layout.json)
{
  "pattern": "hero.broadsheet-front-page",
  "kind": "hero",
  "grid": {
    "earLeft": "1-3",
    "motto": "5-8",
    "earRight": "10-12",
    "nameplate": "full",
    "lead": "1-8",
    "brief": "9-12",
    "subscribe": "9-12"
  },
  "slots": [
    "index",
    "tagline",
    "eyebrow",
    "siteName",
    "meta",
    "headline",
    "subhead",
    "heroImage",
    "statement",
    "body2",
    "sectionLabel",
    "items[3..5]",
    "contact",
    "cta"
  ],
  "notes": "The 4 px divider under the nameplate is drawn as a double rule (3 px + 1 px with a 2 px gap). Body columns are justified with hyphenation.",
  "tree": {
    "el": "box",
    "gap": 2,
    "children": [
      {
        "el": "grid",
        "gap": 3,
        "align": "baseline",
        "children": [
          {
            "el": "text",
            "span": "1-3",
            "mobile": "hide",
            "slot": "index",
            "role": "small",
            "transform": "uppercase",
            "tracking": "wide"
          },
          {
            "el": "text",
            "span": "5-8",
            "mobile": "hide",
            "slot": "tagline",
            "role": "small",
            "align": "center",
            "italic": true
          },
          {
            "el": "text",
            "span": "10-12",
            "slot": "eyebrow",
            "role": "small",
            "align": "right",
            "transform": "uppercase",
            "tracking": "wide"
          }
        ]
      },
      {
        "el": "divider",
        "weight": 1
      },
      {
        "el": "text",
        "slot": "siteName",
        "role": "display",
        "step": 7,
        "align": "center",
        "leading": "tight",
        "font": "heading"
      },
      {
        "el": "divider",
        "weight": 4
      },
      {
        "el": "box",
        "dir": "row",
        "justify": "center",
        "children": [
          {
            "el": "text",
            "slot": "meta",
            "role": "small",
            "transform": "uppercase",
            "tracking": "wide"
          }
        ]
      },
      {
        "el": "divider",
        "weight": 1
      },
      {
        "el": "grid",
        "gap": 4,
        "align": "start",
        "children": [
          {
            "el": "box",
            "span": "1-8",
            "gap": 3,
            "children": [
              {
                "el": "text",
                "slot": "headline",
                "role": "h1",
                "step": 6,
                "weight": 700,
                "leading": "tight",
                "maxCh": 26,
                "font": "body"
              },
              {
                "el": "text",
                "slot": "subhead",
                "role": "lead",
                "italic": true,
                "maxCh": 70,
                "font": "body"
              },
              {
                "el": "media",
                "slot": "heroImage",
                "aspect": "16/9",
                "treatment": "grayscale",
                "caption": true
              },
              {
                "el": "grid",
                "gap": 3,
                "align": "start",
                "children": [
                  {
                    "el": "text",
                    "span": "1-6",
                    "slot": "statement",
                    "role": "small",
                    "font": "body"
                  },
                  {
                    "el": "text",
                    "span": "7-12",
                    "slot": "body2",
                    "role": "small",
                    "font": "body"
                  }
                ]
              }
            ]
          },
          {
            "el": "box",
            "span": "9-12",
            "alignSelf": "stretch",
            "gap": 2,
            "pad": [
              0,
              3
            ],
            "border": "left",
            "children": [
              {
                "el": "text",
                "slot": "sectionLabel",
                "role": "label",
                "transform": "uppercase",
                "weight": 700,
                "tracking": "wide"
              },
              {
                "el": "repeat",
                "slot": "items",
                "min": 3,
                "max": 5,
                "layout": "list",
                "divider": true,
                "of": {
                  "el": "box",
                  "gap": 1,
                  "pad": [
                    2,
                    0
                  ],
                  "children": [
                    {
                      "el": "text",
                      "slot": "title",
                      "role": "h4",
                      "weight": 700,
                      "leading": "tight",
                      "font": "body"
                    },
                    {
                      "el": "text",
                      "slot": "body",
                      "role": "small",
                      "font": "body"
                    }
                  ]
                }
              },
              {
                "el": "divider",
                "weight": 2
              },
              {
                "el": "box",
                "gap": 2,
                "pad": [
                  3,
                  3
                ],
                "border": "all",
                "children": [
                  {
                    "el": "text",
                    "slot": "contact",
                    "role": "label",
                    "transform": "uppercase",
                    "weight": 700,
                    "tracking": "wide"
                  },
                  {
                    "el": "button",
                    "slot": "cta",
                    "variant": "primary",
                    "size": "sm"
                  }
                ]
              }
            ]
          }
        ]
      }
    ]
  }
}
Component example: reference/hero.broadsheet-front-page.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
<title>hero.broadsheet-front-page — Broadsheet Newspaper</title>
<link rel="stylesheet" href="base.css">
<style>
  .front { padding: calc(var(--unit) * 4) 0; display: grid; gap: calc(var(--unit) * 2); }
  .ears { align-items: baseline; }
  .ears .l { grid-column: 1 / 4; } .ears .m { grid-column: 5 / 9; text-align: center; font-style: italic; font-size: 13px; } .ears .r { grid-column: 10 / 13; text-align: right; }
  .nameplate { font-size: clamp(40px, 9vw, var(--step-7)); padding: 4px 0; }
  .dateline { text-align: center; }
  .lead { grid-column: 1 / 9; display: grid; gap: calc(var(--unit) * 3); align-content: start; }
  .lead h1 { font-size: var(--step-5); max-width: 26ch; }
  .lead .deck { font-size: var(--step-1); font-style: italic; max-width: 70ch; }
  .lead .cols { columns: 2; column-gap: var(--gutter); column-rule: 1px solid var(--rule); font-size: 15px; }
  .brief { grid-column: 9 / 13; display: grid; gap: calc(var(--unit) * 2); align-content: start; }
  .brief article { border-top: 1px solid var(--rule); padding-top: calc(var(--unit) * 2); }
  .brief h2 { font-size: var(--step-1); margin-bottom: 4px; }
  @media (max-width: 640px) { .lead h1 { font-size: var(--step-3); } .lead .cols { columns: 1; } .ears .r { text-align: left; } }
</style>
</head>
<body>
<header class="wrap front">
  <div class="grid ears caps"><span class="l">Vol. CXII · No. 38,412</span><span class="m hide-sm">“Without fear or favour since 1891”</span><span class="r">Price two dollars</span></div>
  <div class="r1"></div>
  <p class="nameplate">The Harbour Gazette</p>
  <div class="double" aria-hidden="true"></div>
  <p class="dateline caps">Monday, October 24, 2026 · Late City Edition · Bristol</p>
  <div class="r1"></div>
  <div class="grid">
    <article class="lead">
      <p class="caps kicker">The waterfront</p>
      <h1 class="head">Council votes to reopen the old ferry crossing after 40 years</h1>
      <p class="deck">Service to begin next spring; fares to match the bus, with free travel for schoolchildren on weekday mornings.</p>
      <figure><img src="https://picsum.photos/seed/harbour/1200/800" alt="The disused ferry slipway at low tide" width="1200" height="800"><figcaption>The slipway at Hotwells, unused since 1986. Photograph: R. Ellison</figcaption></figure>
      <div class="cols">
        <p class="dropcap">The city council voted 41 to 9 last night to restore the ferry crossing between Hotwells and the south bank, ending a campaign that began in a pub back room in 2019. Engineers will survey both slipways this winter.</p>
        <p>Supporters packed the public gallery. “It is ten minutes on the water or forty in traffic,” said Margaret Okafor, who chairs the Hotwells Residents’ Association. Opponents questioned the running costs, estimated at £1.2 million a year.</p>
      </div>
    </article>
    <aside class="brief vr" aria-label="In brief">
      <p class="caps" style="font-weight:700">In brief</p>
      <article><h3 class="head">Library hours extended</h3><p style="font-size:14px">Central library opens until 9pm on weekdays from November.</p></article>
      <article><h3 class="head">Harbour festival dates set</h3><p style="font-size:14px">The 2027 festival will run over three days in late July.</p></article>
      <article><h3 class="head">Bridge closed for repairs</h3><p style="font-size:14px">Prince Street bridge shuts to traffic for six weeks from Monday.</p></article>
    </aside>
  </div>
</header>
</body>
</html>

Other patterns in this design

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