hero.swiss-photo-module · Photo module

A hero pattern from Swiss International, 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.swiss-photo-module". A guide only: DESIGN.md and tokens.json are the source of truth.

Rule
Headline in columns 1–4 top-aligned; a grayscale photograph fills 5–12. Subhead and CTA sit under the photo on its own column lines.
Slots
eyebrow, headline, heroImage, subhead, cta, meta
Grid areas
headline 1-4 · image 5-12 · subhead 5-8 · action 10-12 (12-column grid, 1-based inclusive spans)
Notes
The photo is grayscale with a caption; the headline column is narrow so the type breaks into short, stacked lines.
Tokens
bg #FAFAFA · text #1F1F1F · heading #0F0F0F · accent #E2271D · accent2 #850001 · Inter Tight / Hanken Grotesk · radius 0px · space unit 8px (full list in design/tokens.json)
Section
vertical padding step 6

Pattern notes

  • A narrow headline column (1–4, max ~12 characters per line, so the type stacks) beside a grayscale 3:2 photograph filling 5–12 with a small caption. Under the photo: the lead paragraph on 5–8 and the primary CTA plus a muted meta line on 10–12. The photo's left edge and the subhead share the column-5 line.

Brand & product studio

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.

Start a project

Booking projects from June 2026