hero.athletic-diagonal-band · Diagonal band

A hero pattern from Athletic Sport, 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.athletic-diagonal-band". A guide only: DESIGN.md and tokens.json are the source of truth.

Rule
A grayscale 21:9 action photo across 1–12; an accent band skewed −6° overlaps its lower edge in 1–9 carrying the headline; the CTA in 10–12; a three-figure scoreboard row closes the hero.
Slots
heroImage, headline, subhead, cta, facts[3..3]
Grid areas
photo 1-12 · band 1-9 · cta 10-12 · scores 1-12 (12-column grid, 1-based inclusive spans)
Notes
Skew the band with transform: skewY(-6deg) and un-skew its text. Each score has a 4 px left rule.
Tokens
bg #FAFAFA · text #1F1F1F · heading #0F0F0F · accent #FF3B00 · accent2 #00A1BA · Barlow Condensed / Barlow · radius 0px · space unit 8px (full list in design/tokens.json)
Section
vertical padding step 4

Pattern notes

  • A grayscale 21:9 action photo across 1–12 (rows 1–3). An accent band in 1–9 (rows 3–4), skewed −6°, overlapping the photo's lower edge: the headline at step 7 (italic caps, onAccent, rotate −4°) and the subhead. A large primary button in 10–12 on row 4. Row 5: three scores in a row, each with a 4 px left rule — number at step 6 and an italic caps label.

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

9 of 10

clients return

Layout tree (as in design/layout.json)
{
  "pattern": "hero.athletic-diagonal-band",
  "kind": "hero",
  "grid": {
    "photo": "1-12",
    "band": "1-9",
    "cta": "10-12",
    "scores": "1-12"
  },
  "slots": [
    "heroImage",
    "headline",
    "subhead",
    "cta",
    "facts[3..3]"
  ],
  "notes": "Skew the band with transform: skewY(-6deg) and un-skew its text. Each score has a 4 px left rule.",
  "tree": {
    "el": "grid",
    "gap": 2,
    "rowGap": 3,
    "align": "end",
    "children": [
      {
        "el": "media",
        "span": "1-12",
        "rowSpan": "1-3",
        "slot": "heroImage",
        "aspect": "21/9",
        "treatment": "grayscale"
      },
      {
        "el": "box",
        "span": "1-9",
        "rowSpan": "3-4",
        "bg": "accent",
        "gap": 2,
        "pad": [
          5,
          6
        ],
        "children": [
          {
            "el": "text",
            "color": "onAccent",
            "slot": "headline",
            "role": "display",
            "step": 7,
            "transform": "uppercase",
            "weight": 900,
            "italic": true,
            "leading": "tight",
            "maxCh": 14,
            "rotate": -4
          },
          {
            "el": "text",
            "color": "onAccent",
            "slot": "subhead",
            "role": "body",
            "maxCh": 44
          }
        ]
      },
      {
        "el": "button",
        "span": "10-12",
        "rowSpan": "4-4",
        "slot": "cta",
        "variant": "primary",
        "size": "lg"
      },
      {
        "el": "repeat",
        "span": "1-12",
        "rowSpan": "5-5",
        "mobile": "stack",
        "slot": "facts",
        "min": 3,
        "max": 3,
        "layout": "row",
        "gap": 0,
        "of": {
          "el": "box",
          "gap": 0,
          "pad": [
            2,
            4
          ],
          "border": "left",
          "children": [
            {
              "el": "text",
              "slot": "number",
              "role": "number",
              "step": 6,
              "transform": "uppercase",
              "weight": 900,
              "italic": true,
              "leading": "tight"
            },
            {
              "el": "text",
              "slot": "title",
              "role": "label",
              "transform": "uppercase",
              "weight": 700,
              "italic": true
            }
          ]
        }
      }
    ]
  }
}

Other patterns in this design

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