hero.swiss-numbered-poster · Numbered poster

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

Rule
A giant index numeral holds columns 1–3; the headline and a three-fact row hang from column 4. Everything aligns to the column-4 line.
Slots
index, headline, subhead, facts[3..3], cta
Grid areas
index 1-3 · headline 4-12 · facts 4-12 (12-column grid, 1-based inclusive spans)
Notes
Numeral at step 8 in the accent colour (the one accent on screen). Facts sit under a hairline in three equal sub-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 12

Pattern notes

  • A giant numeral (step 8, accent colour) sits in columns 1–3 at the top of the hero, like a poster issue number. Everything else hangs from the column-4 line: h1 at step 5, a lead paragraph, a hairline, then exactly three facts in equal sub-columns (bold label + small muted text), then an underlined text CTA. The numeral is the hero's only accent.

06

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.

Hours

Studio open Mon–Thu, 9:30–18:00

Where

Rua da Boavista 72, 1200-066 Lisboa

Contact

+351 21 340 5512

Start a project