hero.collage-sticker · Headline with stickers

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

Rule
A huge headline in 1–10 with stickers slapped on it: a tilted accent label overlapping its end (10–12), a star in 1–2 and a second tilted accent2 label in 9–11; subhead + CTA in 3–7.
Slots
headline, meta, subhead, cta, eyebrow
Grid areas
headline 1-10 · sticker1 10-12 · star 1-2 · copy 3-7 · sticker2 9-11 (12-column grid, 1-based inclusive spans)
Notes
Stickers are short words (New, Free, Since 1998) on solid accent fills, rotated −8° to 10°, with the style's border if it has one. Later items paint above the headline. Stickers may wobble once on hover; nothing loops.
Tokens
bg #F6FBFF · text #192028 · heading #091018 · accent #00B0FB · accent2 #7D9FFF · Unbounded / Sora · radius 28px · space unit 8px (full list in design/tokens.json)

Do

  • Set the headline at step 8, heavy, across 1–10 and two rows.
  • Slap two stickers on it: solid accent / accent2 fills, short uppercase words, rotated in opposite directions.
  • Let the first sticker overlap the end of the headline.
  • Add one star shape on the left of the copy row.

Don't

  • Don't use more than two text stickers and one shape.
  • Don't put essential information only on a sticker.
  • Don't let a sticker cover more than one letter of the headline.

Phone width

  • Headline at step 6, the first sticker under it, then subhead and CTA; hide the star.

We make complicated companies simple to choose

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

Brand & product studio

Layout tree (as in design/layout.json)
{
  "pattern": "hero.collage-sticker",
  "kind": "hero",
  "grid": {
    "headline": "1-10",
    "sticker1": "10-12",
    "star": "1-2",
    "copy": "3-7",
    "sticker2": "9-11"
  },
  "slots": [
    "headline",
    "meta",
    "subhead",
    "cta",
    "eyebrow"
  ],
  "notes": "Stickers are short words (New, Free, Since 1998) on solid accent fills, rotated −8° to 10°, with the style's border if it has one. Later items paint above the headline. Stickers may wobble once on hover; nothing loops.",
  "tree": {
    "el": "grid",
    "gap": 3,
    "rowGap": 4,
    "align": "center",
    "minVh": 0.85,
    "children": [
      {
        "el": "text",
        "span": "1-10",
        "rowSpan": "1-2",
        "slot": "headline",
        "role": "display",
        "step": 8,
        "leading": "tight",
        "maxCh": 12
      },
      {
        "el": "box",
        "span": "10-12",
        "rowSpan": "1-1",
        "bg": "accent",
        "alignSelf": "start",
        "pad": [
          3,
          3
        ],
        "children": [
          {
            "el": "text",
            "color": "onAccent",
            "slot": "meta",
            "role": "label",
            "align": "center",
            "transform": "uppercase",
            "rotate": 8
          }
        ]
      },
      {
        "el": "shape",
        "span": "1-2",
        "rowSpan": "3-3",
        "mobile": "hide",
        "kind": "star",
        "size": "lg",
        "fill": "accent2",
        "rotate": 12
      },
      {
        "el": "box",
        "span": "3-7",
        "rowSpan": "3-3",
        "gap": 3,
        "children": [
          {
            "el": "text",
            "slot": "subhead",
            "role": "body",
            "maxCh": 36
          },
          {
            "el": "button",
            "slot": "cta",
            "variant": "primary",
            "arrow": true
          }
        ]
      },
      {
        "el": "box",
        "span": "9-11",
        "rowSpan": "3-3",
        "bg": "accent2",
        "alignSelf": "center",
        "pad": [
          2,
          3
        ],
        "children": [
          {
            "el": "text",
            "color": "onAccent2",
            "slot": "eyebrow",
            "role": "label",
            "transform": "uppercase",
            "rotate": -6
          }
        ]
      }
    ]
  }
}

Other patterns in this design

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