hero.split-diagonal · Split, diagonal seam

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

Rule
A surface-coloured copy panel in 1–6 meets the image (6–12) on a diagonal seam; the panel holds the headline, one CTA and a row of 2–3 stats.
Slots
heroImage, eyebrow, headline, subhead, cta, stats[2..3]
Grid areas
copy 1-6 · media 6-12 (12-column grid, 1-based inclusive spans)
Notes
The copy panel's right edge is one straight diagonal (clip: diagonal-right = clip-path polygon(0 0, 100% 0, 84% 100%, 0 100%)), so the image shows through the wedge. At phone width the image comes first and the panel's top edge carries the diagonal instead.
Tokens
bg #0E0B1F · text #EDE6FF · heading #FFFFFF · accent #FE2D6D · accent2 #00A59F · Orbitron / Space Grotesk · radius 2px · space unit 8px (full list in design/tokens.json)
Section
full-bleed · vertical padding step 0

Do

  • Cut the copy panel's right edge on one straight diagonal (clip-path), leaning in towards the bottom: 16% of the panel's width at the bottom edge.
  • Run the image under the seam from column 6 to the viewport edge, so it shows through the wedge.
  • Set the headline uppercase at step 6, heavy, max two or three lines.
  • Close the panel with a row of 2–3 stats (number over label).

Don't

  • Don't use a soft curve or wave — the seam is one straight diagonal.
  • Don't angle the text itself; only the panel edge is diagonal.
  • Don't use more than one CTA.

Phone width

  • Show the image first, then the panel; the panel's top edge carries the diagonal, so the image above it ends on a slant.
  • Stats stay in one row if there are 2, stack if there are 3.

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

140+

launches shipped

12

years independent

Layout tree (as in design/layout.json)
{
  "pattern": "hero.split-diagonal",
  "kind": "hero",
  "grid": {
    "copy": "1-6",
    "media": "6-12"
  },
  "slots": [
    "heroImage",
    "eyebrow",
    "headline",
    "subhead",
    "cta",
    "stats[2..3]"
  ],
  "notes": "The copy panel's right edge is one straight diagonal (clip: diagonal-right = clip-path polygon(0 0, 100% 0, 84% 100%, 0 100%)), so the image shows through the wedge. At phone width the image comes first and the panel's top edge carries the diagonal instead.",
  "bleed": true,
  "tree": {
    "el": "grid",
    "gap": 0,
    "align": "stretch",
    "minVh": 0.9,
    "children": [
      {
        "el": "media",
        "span": "6-12",
        "rowSpan": "1-1",
        "mobile": "reverse",
        "slot": "heroImage",
        "treatment": "photo",
        "fill": true
      },
      {
        "el": "box",
        "span": "1-6",
        "rowSpan": "1-1",
        "bg": "surface",
        "gap": 4,
        "pad": [
          8,
          5
        ],
        "justify": "center",
        "clip": "diagonal-right",
        "children": [
          {
            "el": "text",
            "slot": "eyebrow",
            "role": "eyebrow"
          },
          {
            "el": "text",
            "slot": "headline",
            "role": "h1",
            "step": 6,
            "transform": "uppercase",
            "leading": "tight",
            "maxCh": 12
          },
          {
            "el": "text",
            "slot": "subhead",
            "role": "lead",
            "maxCh": 32
          },
          {
            "el": "button",
            "slot": "cta",
            "variant": "primary",
            "arrow": true
          },
          {
            "el": "repeat",
            "slot": "stats",
            "min": 2,
            "max": 3,
            "layout": "row",
            "gap": 5,
            "of": {
              "el": "box",
              "gap": 1,
              "children": [
                {
                  "el": "text",
                  "slot": "number",
                  "role": "number",
                  "step": 3
                },
                {
                  "el": "text",
                  "slot": "label",
                  "role": "small"
                }
              ]
            }
          }
        ]
      }
    ]
  }
}

Other patterns in this design

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