`list.editorial-magazine-story-index` · Story index

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

Rule: Stories two per row (still two per row on phone): a 3:2 photo, a numbered kicker in the accent, a serif headline, an italic dek and a byline — no boxes or borders around them.
Slots: sectionLabel, items[2..6]
Grid areas: label 1-12 · stories 1-12 (12-column grid, 1-based inclusive spans)
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

A 4 px rule and the section label open the block. Stories in two columns with a 48 px gap: 3:2 photograph, kicker (the story number, small uppercase, accent), headline (h3, display serif), dek (italic, max 2 lines) and byline (small uppercase muted). No cards, borders or shadows. At phone width the stories stay two per row (smaller photographs, headlines wrap to two lines) so the index never becomes a long single column.

Index

Discovery sprint

Two weeks of interviews, audits and competitor teardown.

2 weeks

Positioning workshop

A day with your leadership to agree on one story.

1 day

Identity design

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

8 weeks

Website

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

10 weeks