hero.poster-grid · Info poster

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

Rule

Built like an event poster: a giant numeral or date in 1–4 beside an uppercase headline in 5–12; a large circle under the numeral; a 4-column grid of facts (when, where, price, who) with top rules in 5–12; subhead and CTA last.

Slots

index, headline, facts[4..4], subhead, cta

Grid areas

numeral 1-4 · headline 5-12 · shape 1-4 · facts 5-12 · subhead 5-9 · cta 10-12 (12-column grid, 1-based inclusive spans)

Notes

The numeral is meaningful (date, edition, year, price). Facts are short label/value pairs. Works for events, launches and campaigns.

Tokens

bg #EFE6D2 · text #16130F · heading #16130F · accent #C8102E · accent2 #FF7777 · Anton / Barlow Semi Condensed · radius 0px · space unit 8px (full list in design/tokens.json)

Do

Set a meaningful numeral (date, edition, year) at step 8 in 1–4.
Put the uppercase headline in 5–12 on the same row.
Fill 1–4 below the numeral with one large accent circle.
Give the facts a 4-column grid in 5–12 with a top rule over each.

Don't

Don't use a photo in this hero.
Don't use a numeral without meaning.
Don't put the facts in cards.

Phone width

Numeral and headline stack; facts become 2×2; hide the circle.

We make complicated companies simple to choose

Hours

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

Where

Rua da Boavista 72, 1200-066 Lisboa

Contact

+351 21 340 5512

Good to know

Booking projects from June 2026

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