features.broadsheet-section-index · Section index

A features pattern from Broadsheet Newspaper, 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="features.broadsheet-section-index". A guide only: DESIGN.md and tokens.json are the source of truth.

Rule
A table of contents: a label and italic head on 1–3, then each section as a ruled row on 4–12: page letter-number, section name, one-line summary.
Slots
sectionLabel, title, features[3..6]
Grid areas
label 1-3 · index 4-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 small-caps label and an italic h3 on 1–3. On 4–12, 3–6 ruled rows: the section's page code at step 3 (e.g. "B4") on 1–2, the section name in bold serif at h3 on 3–6, a one-line summary on 7–12 — like a newspaper's table of contents.

What you get

What we do

01

Positioning

Find the one sentence your best customers already believe.

02

Identity systems

Logos, type and colour that work on a factory floor and a pitch deck.

03

Websites

Fast, editable sites built on the CMS your team already knows.

04

Sales enablement

Decks, one-pagers and demos your reps actually use.