hero.neobrutal-sticker-board · Sticker board

A hero pattern from Neo-Brutalism, 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.neobrutal-sticker-board". A guide only: DESIGN.md and tokens.json are the source of truth.

Rule
A white bordered board on 1–7 carries the headline and buttons; a framed image with an offset shadow sits on 8–12 with a tilted sticker label overlapping its foot.
Slots
eyebrow, headline, subhead, cta, cta2, heroImage, meta
Grid areas
board 1-7 · image 8-12 · sticker 8-11 · star 11-12 (12-column grid, 1-based inclusive spans)
Notes
The board and the image both carry the hard offset shadow. The sticker is the one tilted element; the star is decoration and hides at phone width.
Tokens
bg #FFF4DE · text #111111 · heading #000000 · accent #FF5FA2 · accent2 #00BCA1 · Archivo Black / Space Grotesk · radius 8px · space unit 8px (full list in design/tokens.json)
Section
vertical padding step 8

Pattern notes

  • A white bordered "board" (surface fill, 3 px border, hard shadow) spans columns 1–7 over two grid rows and holds: eyebrow (bold, uppercase), headline at step 6 heaviest weight (max ~12 characters per line), lead subhead, then a row with a medium primary button (arrow) and a medium secondary button. Columns 8–12 hold a 4:5 illustration in an offset-shadow frame. A sticker label (accent2 fill, bordered, rotated −5°) sits in 8–11 on the second row, overlapping the image's foot. A filled accent star (lg, rotated 14°) pins the image's top-right corner in 11–12 and hides at phone width. Phone: board, image, sticker.

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 projectRead case studies

Booking projects from June 2026

Layout tree (as in design/layout.json)
{
  "pattern": "hero.neobrutal-sticker-board",
  "kind": "hero",
  "grid": {
    "board": "1-7",
    "image": "8-12",
    "sticker": "8-11",
    "star": "11-12"
  },
  "slots": [
    "eyebrow",
    "headline",
    "subhead",
    "cta",
    "cta2",
    "heroImage",
    "meta"
  ],
  "notes": "The board and the image both carry the hard offset shadow. The sticker is the one tilted element; the star is decoration and hides at phone width.",
  "tree": {
    "el": "grid",
    "gap": 3,
    "rowGap": 3,
    "align": "center",
    "minVh": 0.82,
    "children": [
      {
        "el": "box",
        "span": "1-7",
        "rowSpan": "1-2",
        "bg": "surface",
        "alignSelf": "stretch",
        "gap": 4,
        "pad": [
          6,
          5
        ],
        "justify": "center",
        "border": "all",
        "children": [
          {
            "el": "text",
            "slot": "eyebrow",
            "role": "eyebrow",
            "weight": 700
          },
          {
            "el": "text",
            "slot": "headline",
            "role": "display",
            "step": 6,
            "tracking": "tight",
            "leading": "tight",
            "maxCh": 12
          },
          {
            "el": "text",
            "slot": "subhead",
            "role": "lead",
            "maxCh": 40
          },
          {
            "el": "box",
            "dir": "row",
            "gap": 3,
            "wrap": true,
            "children": [
              {
                "el": "button",
                "slot": "cta",
                "variant": "primary",
                "size": "md",
                "arrow": true
              },
              {
                "el": "button",
                "slot": "cta2",
                "variant": "secondary",
                "size": "md"
              }
            ]
          }
        ]
      },
      {
        "el": "media",
        "span": "8-12",
        "rowSpan": "1-1",
        "slot": "heroImage",
        "aspect": "4/5",
        "treatment": "illustration",
        "frame": "offset-shadow"
      },
      {
        "el": "text",
        "span": "8-11",
        "rowSpan": "2-2",
        "bg": "accent2",
        "color": "onAccent2",
        "alignSelf": "start",
        "slot": "meta",
        "role": "label",
        "weight": 700,
        "rotate": -5
      },
      {
        "el": "shape",
        "span": "11-12",
        "rowSpan": "1-1",
        "mobile": "hide",
        "alignSelf": "start",
        "kind": "star",
        "size": "lg",
        "fill": "accent",
        "rotate": 14
      }
    ]
  }
}
Component example: reference/hero.neobrutal-sticker-board.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
<title>hero.neobrutal-sticker-board — Neo-Brutalism</title>
<link rel="stylesheet" href="base.css">
<style>
  .hero { min-height: 82vh; padding: calc(var(--unit) * 8) 0; align-items: center; grid-template-rows: auto auto; row-gap: calc(var(--unit) * 3); }
  .board { grid-column: 1 / 8; grid-row: 1 / 3; padding: calc(var(--unit) * 6) calc(var(--unit) * 5); display: grid; gap: calc(var(--unit) * 4); align-content: center; }
  .board h1 { font-size: var(--step-6); max-width: 12ch; line-height: 0.95; }
  .board .lead { font-size: calc(var(--base) * 1.333); max-width: 40ch; }
  .actions { display: flex; flex-wrap: wrap; gap: calc(var(--unit) * 3); }
  .frame { grid-column: 8 / 13; grid-row: 1; aspect-ratio: 4 / 5; overflow: hidden; background: var(--surface-alt); }
  .frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .hero .sticker { grid-column: 8 / 12; grid-row: 2; justify-self: start; align-self: start; }
  .hero .star { grid-column: 11 / 13; grid-row: 1; align-self: start; justify-self: end; transform: rotate(14deg) translate(20px, -24px); }
  @media (max-width: 640px) { .board h1 { font-size: var(--step-4); } }
</style>
</head>
<body>
<section class="wrap">
  <div class="hero grid">
    <div class="board box">
      <p class="label">Invoicing for tiny studios</p>
      <h1>Get paid before lunch.</h1>
      <p class="lead">Send a link, get the money. Invoices, reminders and receipts that look like they were made by people.</p>
      <div class="actions">
        <a class="btn" href="#start">Start free <span aria-hidden="true">→</span></a>
        <a class="btn secondary" href="#demo">Watch the demo</a>
      </div>
    </div>
    <div class="frame box"><img src="https://picsum.photos/seed/sticker/800/1000" alt="Illustrated invoice on a desk" width="800" height="1000"></div>
    <p class="sticker label">No card needed!</p>
    <div class="star deco" aria-hidden="true"></div>
  </div>
</section>
</body>
</html>

Other patterns in this design

Whole design · Spec bundle (JSON) · On the style page