hero.split-offset · Split offset

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

Rule

Headline flush left across columns 1–8, bottom-aligned; meta column at 10–12 carries subhead and CTA. Column 9 stays empty.

Slots

eyebrow, headline, subhead, cta, meta

Grid areas

heading 1-8 · meta 10-12 (12-column grid, 1-based inclusive spans)

Notes

Headline at type scale step 6, bottom-aligned with the meta column. A 4px rule spans the full grid above both columns.

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

The headline block owns columns 1–8 and is bottom-aligned with the meta column at 10–12; column 9 is the gutter that makes the asymmetry visible. A 4 px rule spans 1–12 at the top of the hero. Headline at scale step 6, weight 700, tight tracking, max ~14 characters per line. The meta column opens with a hairline, then the subhead (body size), the primary CTA (accent fill, square, arrow) and a small muted meta line (location, date or availability). At phone width: eyebrow, headline, then the meta column.

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.

Start a project

Booking projects from June 2026