hero.swiss-headline-bar · Headline with signal bar

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-headline-bar". A guide only: DESIGN.md and tokens.json are the source of truth.

Rule
A short accent bar marks column 1; the headline runs the full 12 columns at step 7, then a three-part base line: subhead 1–5, CTA 7–9, meta 10–12.
Slots
headline, subhead, cta, meta
Grid areas
bar 1-1 · headline 1-12 · subhead 1-5 · cta 7-9 · meta 10-12 (12-column grid, 1-based inclusive spans)
Notes
The bar sits at the top of the hero, the headline block at the bottom (space between). The bar is the only accent element. The headline is allowed two lines at most; shorten copy rather than shrinking type.
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 8

Pattern notes

  • A short accent bar marks the top of column 1; the headline block sits at the bottom of the hero. The headline runs the full grid at step 7, weight 700, two lines at most — shorten the copy rather than shrink the type. A hairline, then a three-part base line: subhead 1–5, a text-link CTA 7–9, muted meta 10–12. The bar is the only accent.

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.

Start a project

Booking projects from June 2026