hero.risograph-halftone-banner · Halftone banner

A hero pattern from Risograph Print, drawn alone below with this design's tokens and sample copy. Not used in this design: shown with its tokens for comparison. Give the section root data-pattern="hero.risograph-halftone-banner". A guide only: DESIGN.md and tokens.json are the source of truth.

Rule
A full-bleed band in accent2: a 21:9 duotone photo across 1–12 with the uppercase headline overprinting its lower edge in 2–11, tilted −3°; subhead and CTA under it in 2–7, mono meta in 10–12.
Slots
heroImage, headline, subhead, cta, meta
Grid areas
photo 1-12 · headline 2-11 · subhead 2-7 · meta 10-12 (12-column grid, 1-based inclusive spans)
Notes
All text on the band uses onAccent2. Add a halftone dot pattern (CSS radial-gradient at 4 px) over the photo. Only the headline's first line overlaps the photo (a pull-up of about one line height); the empty row-1 box in the tree only sizes that overlap and is not built.
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
background accent2 · full-bleed · vertical padding step 6

Pattern notes

  • Full-bleed `accent2` band. A 21:9 duotone photograph spans 1–12 over rows 1–2 with a 4 px halftone dot overlay; the headline (step 7, uppercase, onAccent2, rotate −3°) spans 2–11 on rows 2–3 so only its first line prints over the photo's bottom edge (the rest sits on the band, so dark image areas never hide the type). Row 4: subhead and secondary button in 2–7, mono meta bottom- aligned in 10–12. All text on the band uses `onAccent2`.

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

Booking projects from June 2026

Layout tree (as in design/layout.json)
{
  "pattern": "hero.risograph-halftone-banner",
  "kind": "hero",
  "grid": {
    "photo": "1-12",
    "headline": "2-11",
    "subhead": "2-7",
    "meta": "10-12"
  },
  "slots": [
    "heroImage",
    "headline",
    "subhead",
    "cta",
    "meta"
  ],
  "notes": "All text on the band uses onAccent2. Add a halftone dot pattern (CSS radial-gradient at 4 px) over the photo. Only the headline's first line overlaps the photo (a pull-up of about one line height); the empty row-1 box in the tree only sizes that overlap and is not built.",
  "bg": "accent2",
  "bleed": true,
  "tree": {
    "el": "grid",
    "gap": 3,
    "rowGap": 3,
    "align": "start",
    "children": [
      {
        "el": "media",
        "span": "1-12",
        "rowSpan": "1-2",
        "slot": "heroImage",
        "aspect": "21/9",
        "treatment": "duotone"
      },
      {
        "el": "box",
        "span": "1-1",
        "rowSpan": "1-1",
        "mobile": "hide",
        "minVh": 0.55,
        "children": [
          {
            "el": "spacer",
            "size": 1
          }
        ]
      },
      {
        "el": "text",
        "span": "2-11",
        "rowSpan": "2-3",
        "color": "onAccent2",
        "slot": "headline",
        "role": "display",
        "step": 7,
        "transform": "uppercase",
        "leading": "tight",
        "maxCh": 16,
        "rotate": -3
      },
      {
        "el": "box",
        "span": "2-7",
        "rowSpan": "4-4",
        "gap": 3,
        "children": [
          {
            "el": "text",
            "color": "onAccent2",
            "slot": "subhead",
            "role": "body",
            "maxCh": 44
          },
          {
            "el": "button",
            "slot": "cta",
            "variant": "secondary",
            "arrow": true
          }
        ]
      },
      {
        "el": "text",
        "span": "10-12",
        "rowSpan": "4-4",
        "color": "onAccent2",
        "alignSelf": "end",
        "slot": "meta",
        "role": "small",
        "font": "mono"
      }
    ]
  }
}

Other patterns in this design

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