hero.editorial-magazine-portrait-opener · Portrait opener

A hero pattern from Editorial Magazine, 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="hero.editorial-magazine-portrait-opener". A guide only: DESIGN.md and tokens.json are the source of truth.

Rule
A 3:4 portrait photograph on 1–5; on 7–12 the kicker, an italic serif headline at step 5, a hairline, the opening paragraph with a three-line drop cap, and the byline.
Slots
heroImage, eyebrow, headline, lead, author
Grid areas
portrait 1-5 · story 7-12 (12-column grid, 1-based inclusive spans)
Notes
The opening paragraph starts with a drop cap three lines deep in the display serif and accent colour.
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 portrait photograph (3:4) with caption on 1–5. On 7–12, bottom-aligned with the photo: the kicker (small uppercase, accent), the headline in italic display serif at step 5 (max ~16 ch, four lines at most), a hairline, the opening paragraph (lead size, max 52 ch) beginning with a drop cap three lines deep set in the display serif in the accent colour, and the byline in small uppercase. Column 6 is the gutter. At phone width the photo comes first at full width.
Corvid Robotics — identity

Brand & product studio

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.

Hanna Lindqvist