hero.risograph-overprint-poster · Overprint poster

A hero pattern from Risograph Print, 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.risograph-overprint-poster". A guide only: DESIGN.md and tokens.json are the source of truth.

Rule
A spot-colour circle fills 7–12, a landscape duotone photo in 2–8 overprints it, and the uppercase headline (step 6) overprints the circle below the photo across 1–12, tilted −2°. Subhead and CTA bottom-right in 9–12.
Slots
eyebrow, heroImage, headline, subhead, cta
Grid areas
circle 7-12 · photo 2-8 · headline 1-12 · action 9-12 (12-column grid, 1-based inclusive spans)
Notes
Rows are explicit so the three layers overlap: circle rows 1–4, photo rows 2–3, headline rows 4–5 (it overprints the circle, never the photo). Use mix-blend-mode: multiply on the photo and headline to fake overprinting; misregister the headline with a 3 px accent2 text-shadow.
Tokens
bg #FDF9F4 · text #241E16 · heading #150E06 · accent #FF48B0 · accent2 #00B790 · Bricolage Grotesque / Work Sans · radius 0px · space unit 8px (full list in design/tokens.json)
Section
vertical padding step 6

Pattern notes

  • Three layers on explicit rows: a solid `accent` circle filling 7–12 across rows 1–4, a landscape 3:2 duotone photograph with an offset-shadow frame in 2–8 across rows 2–3, and the uppercase headline (step 6, heaviest weight, ≤16 ch, rotate −2°) across 1–12 on rows 4–5, below the photo, so it overprints the circle but never the photo. The mono eyebrow sits top-left in 1–5; on row 6 the subhead and arrowed primary button sit right in 9–12. Multiply-blend the photo and headline. Phone: eyebrow, photo, headline, subhead, button; the circle hides.

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 project
Layout tree (as in design/layout.json)
{
  "pattern": "hero.risograph-overprint-poster",
  "kind": "hero",
  "grid": {
    "circle": "7-12",
    "photo": "2-8",
    "headline": "1-12",
    "action": "9-12"
  },
  "slots": [
    "eyebrow",
    "heroImage",
    "headline",
    "subhead",
    "cta"
  ],
  "notes": "Rows are explicit so the three layers overlap: circle rows 1–4, photo rows 2–3, headline rows 4–5 (it overprints the circle, never the photo). Use mix-blend-mode: multiply on the photo and headline to fake overprinting; misregister the headline with a 3 px accent2 text-shadow.",
  "tree": {
    "el": "grid",
    "gap": 3,
    "rowGap": 0,
    "align": "start",
    "minVh": 0.9,
    "children": [
      {
        "el": "text",
        "span": "1-5",
        "rowSpan": "1-1",
        "slot": "eyebrow",
        "role": "eyebrow",
        "font": "mono"
      },
      {
        "el": "shape",
        "span": "7-12",
        "rowSpan": "1-4",
        "mobile": "hide",
        "kind": "circle",
        "size": "fill",
        "fill": "accent"
      },
      {
        "el": "media",
        "span": "2-8",
        "rowSpan": "2-3",
        "slot": "heroImage",
        "aspect": "3/2",
        "treatment": "duotone",
        "frame": "offset-shadow"
      },
      {
        "el": "text",
        "span": "1-12",
        "rowSpan": "4-5",
        "slot": "headline",
        "role": "display",
        "step": 6,
        "transform": "uppercase",
        "tracking": "tight",
        "leading": "tight",
        "maxCh": 16,
        "rotate": -2
      },
      {
        "el": "box",
        "span": "9-12",
        "rowSpan": "6-6",
        "alignSelf": "start",
        "gap": 2,
        "children": [
          {
            "el": "text",
            "slot": "subhead",
            "role": "body",
            "maxCh": 36
          },
          {
            "el": "button",
            "slot": "cta",
            "variant": "primary",
            "arrow": true
          }
        ]
      }
    ]
  }
}
Component example: reference/hero.risograph-overprint-poster.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
<title>hero.risograph-overprint-poster — Risograph Print</title>
<link rel="stylesheet" href="base.css">
<style>
  .hero { min-height: 90vh; padding: calc(var(--unit) * 6) 0; grid-template-rows: auto auto auto auto auto auto; align-items: start; }
  .eyebrow { grid-column: 1 / 6; grid-row: 1; }
  .circle { grid-column: 7 / 13; grid-row: 1 / 5; width: 100%; max-width: 560px; justify-self: end; aspect-ratio: 1; border-radius: 50%; background: var(--accent); }
  .photo { grid-column: 2 / 9; grid-row: 2 / 4; margin-top: 48px; aspect-ratio: 3 / 2; mix-blend-mode: multiply; }
  h1 { grid-column: 1 / 13; grid-row: 4 / 6; align-self: start; margin-top: 24px; font-size: clamp(56px, 9vw, 136px); max-width: 14ch; rotate: -2deg; mix-blend-mode: multiply; z-index: 1; }
  .action { grid-column: 9 / 13; grid-row: 6; margin-top: 32px; display: grid; gap: 16px; z-index: 2; }
  @media (max-width: 640px) { h1 { font-size: 52px; margin-top: 0; } .photo { margin-top: 16px; } .hero { min-height: 0; row-gap: 16px; } }
</style>
</head>
<body>
<section class="wrap">
  <div class="hero grid">
    <p class="eyebrow">Issue 07 — Spring 2027 — £6</p>
    <div class="circle hide-phone" aria-hidden="true"></div>
    <div class="photo duotone offset"><img src="https://images.unsplash.com/photo-1514525253161-7a46d19cd819?w=900" alt="Crowd at a basement gig"></div>
    <h1 class="misreg">Loud rooms, small towns</h1>
    <div class="action">
      <p>Forty pages on the venues keeping live music alive outside the big cities. Printed in two inks, two hundred copies.</p>
      <a class="btn btn-primary" href="#shop">Get a copy →</a>
    </div>
  </div>
</section>
</body>
</html>

Other patterns in this design

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