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 #FAFAFA · text #1F1F1F · heading #0F0F0F · accent #E2271D · accent2 #850001 · Inter Tight / Hanken Grotesk · 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.

06

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
Layout tree (as in design/layout.json)
{
  "pattern": "hero.poster-grid",
  "kind": "hero",
  "grid": {
    "numeral": "1-4",
    "headline": "5-12",
    "shape": "1-4",
    "facts": "5-12",
    "subhead": "5-9",
    "cta": "10-12"
  },
  "slots": [
    "index",
    "headline",
    "facts[4..4]",
    "subhead",
    "cta"
  ],
  "notes": "The numeral is meaningful (date, edition, year, price). Facts are short label/value pairs. Works for events, launches and campaigns.",
  "tree": {
    "el": "grid",
    "gap": 3,
    "rowGap": 5,
    "align": "start",
    "minVh": 1,
    "children": [
      {
        "el": "text",
        "span": "1-4",
        "slot": "index",
        "role": "number",
        "step": 8,
        "leading": "tight"
      },
      {
        "el": "text",
        "span": "5-12",
        "slot": "headline",
        "role": "display",
        "step": 7,
        "transform": "uppercase",
        "leading": "tight",
        "maxCh": 14
      },
      {
        "el": "shape",
        "span": "1-4",
        "rowSpan": "2-3",
        "mobile": "hide",
        "kind": "circle",
        "size": "fill",
        "fill": "accent"
      },
      {
        "el": "repeat",
        "span": "5-12",
        "slot": "facts",
        "min": 4,
        "max": 4,
        "layout": "grid",
        "cols": 4,
        "gap": 3,
        "of": {
          "el": "box",
          "gap": 1,
          "pad": [
            2,
            0
          ],
          "border": "top",
          "children": [
            {
              "el": "text",
              "color": "textMuted",
              "slot": "label",
              "role": "eyebrow"
            },
            {
              "el": "text",
              "slot": "title",
              "role": "body"
            }
          ]
        }
      },
      {
        "el": "text",
        "span": "5-9",
        "slot": "subhead",
        "role": "body",
        "maxCh": 40
      },
      {
        "el": "button",
        "span": "10-12",
        "alignSelf": "end",
        "slot": "cta",
        "variant": "primary",
        "arrow": true
      }
    ]
  }
}

Other patterns in this design

Whole design · Spec bundle (JSON) · Hero library page