hero.editorial-columns · Editorial columns

A hero pattern from the hero library, 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.editorial-columns". A guide only: DESIGN.md and tokens.json are the source of truth.

Rule

A ruled kicker bar spans the page; the headline runs 1–8 at step 7; below it a deck in 1–4 and a ruled text column in 5–8 start the story; a captioned 3:4 photo fills 9–12 beside both.

Slots

eyebrow, meta, headline, heroImage, lead, statement, cta

Grid areas

kicker full · headline 1-8 · deck 1-4 · column 5-8 · figure 9-12 (12-column grid, 1-based inclusive spans)

Notes

Reads like the top of a feature page: the hero already contains running text. The text column has a left rule (column rule); body copy at step 0 with comfortable leading.

Tokens

bg #FDF9F4 · text #241E16 · heading #150E06 · accent #7C1C1D · accent2 #B2635D · Libre Caslon Text / Libre Caslon Text · radius 0px · space unit 6px (full list in design/tokens.json)

Do

Open with a full-width ruled kicker bar: section label left, byline or date right.
Set the headline in columns 1–8 at step 7, two or three lines.
Start the story inside the hero: a deck in 1–4 (italic if the body font ships one) and the opening paragraph of the story (a statement, not the deck repeated) with a left column rule in 5–8.
Place a 3:4 photo with a caption in 9–12, spanning both rows.

Don't

Don't centre anything; every block is flush left on its column.
Don't use buttons; the action is a 'Continue reading →' link.
Don't let body text run wider than 44 characters.

Phone width

Kicker (label and byline may wrap to two lines), headline (step 6), photo at 4:3 with caption, deck, then body column without the rule.

Brand & product studio

Booking projects from June 2026

We make complicated companies simple to choose

Corvid Robotics — identity

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

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

Start a project