hero.fullbleed-duotone · Full-bleed duotone in an accent field

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

Rule
The hero is an accent-coloured field: headline at step 5 in onAccent across 1–10, subhead + CTA under it, then a duotone photo (accent × ink) running edge to edge at 21:9.
Slots
eyebrow, meta, headline, subhead, cta, heroImage
Grid areas
eyebrow 1-4 · meta 9-12 · headline 1-10 · subhead 1-4 · cta 10-12 · image full (12-column grid, 1-based inclusive spans)
Notes
Duotone = map the photo's shadows to the darkest ink and highlights to the accent (CSS filter + mix-blend-mode or a pre-processed image), so the photo melts into the accent field.
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 accent · full-bleed · vertical padding step 0

Do

  • Paint the whole hero in the accent colour and set all text in onAccent.
  • Run the headline at display step 5 across columns 1–10 in two or three long lines, heavy and tight, so the duotone photo starts inside the first screen.
  • Duotone the photo from the palette (ink shadows, accent highlights) and run it full-bleed at 21:9 below the copy.
  • Use the secondary (inverted) button so it reads on the accent field.

Don't

  • Don't use a full-colour photo — the duotone is what ties it to the field.
  • Don't put text over the photo.
  • Don't add a gradient between the field and the photo; the join is a hard edge.

Phone width

  • Keep the accent field; stack eyebrow, headline (step 5), subhead, CTA, then the photo at 4:3.
  • Drop the meta line if it wraps to more than one line.

Brand & product studio

Booking projects from June 2026

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.fullbleed-duotone",
  "kind": "hero",
  "grid": {
    "eyebrow": "1-4",
    "meta": "9-12",
    "headline": "1-10",
    "subhead": "1-4",
    "cta": "10-12",
    "image": "full"
  },
  "slots": [
    "eyebrow",
    "meta",
    "headline",
    "subhead",
    "cta",
    "heroImage"
  ],
  "notes": "Duotone = map the photo's shadows to the darkest ink and highlights to the accent (CSS filter + mix-blend-mode or a pre-processed image), so the photo melts into the accent field.",
  "bg": "accent",
  "bleed": true,
  "tree": {
    "el": "box",
    "gap": 0,
    "children": [
      {
        "el": "grid",
        "gap": 3,
        "rowGap": 5,
        "pad": [
          6,
          4
        ],
        "children": [
          {
            "el": "text",
            "span": "1-4",
            "color": "onAccent",
            "slot": "eyebrow",
            "role": "eyebrow"
          },
          {
            "el": "text",
            "span": "9-12",
            "color": "onAccent",
            "slot": "meta",
            "role": "small",
            "align": "right"
          },
          {
            "el": "text",
            "span": "1-10",
            "color": "onAccent",
            "slot": "headline",
            "role": "display",
            "step": 5,
            "tracking": "tight",
            "leading": "tight"
          },
          {
            "el": "text",
            "span": "1-4",
            "color": "onAccent",
            "slot": "subhead",
            "role": "body",
            "maxCh": 34
          },
          {
            "el": "button",
            "span": "10-12",
            "alignSelf": "end",
            "slot": "cta",
            "variant": "secondary",
            "arrow": true
          }
        ]
      },
      {
        "el": "media",
        "slot": "heroImage",
        "aspect": "21/9",
        "treatment": "duotone"
      }
    ]
  }
}

Other patterns in this design

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