hero.hairline-spec-strip · Hairline spec strip

A hero pattern from Technical Hairline, 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.hairline-spec-strip". A guide only: DESIGN.md and tokens.json are the source of truth.

Rule
Headline in 1–8 with the lead and CTAs bottom-aligned in 9–12; below, one bordered object: a 21:9 isometric drawing over a row of four figure cells that share their hairlines.
Slots
eyebrow, headline, subhead, cta, cta2, heroImage, index, stats[4..4]
Grid areas
headline 1-8 · aside 9-12 · panel 1-12 (12-column grid, 1-based inclusive spans)
Tokens
bg #FAFAF8 · text #2E2E2B · heading #0B0B0A · accent #111110 · accent2 #7A7A7A · Geist / Geist · radius 12px · space unit 4px (full list in design/tokens.json)
Section
vertical padding step 10

Pattern notes

  • Top row: eyebrow and the display headline (step 7, weight 500, ≤17 ch) in 1–8; the muted lead and the CTA row bottom-aligned in 9–12. Below, one bordered object across 1–12: a 21:9 isometric drawing with a mono state label top-right, a full-width hairline, then four figure cells sharing hairlines (mono uppercase label, figure at step 5 weight 500, a small line). Two figure cells per row on phones.

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 projectRead case studies

06

Since 2014

140+

launches shipped

2025

12

years independent

Audited

9 of 10

clients return

Last 12 months

31%

average lift in demo requests

Layout tree (as in design/layout.json)
{
  "pattern": "hero.hairline-spec-strip",
  "kind": "hero",
  "grid": {
    "headline": "1-8",
    "aside": "9-12",
    "panel": "1-12"
  },
  "slots": [
    "eyebrow",
    "headline",
    "subhead",
    "cta",
    "cta2",
    "heroImage",
    "index",
    "stats[4..4]"
  ],
  "tree": {
    "el": "box",
    "gap": 10,
    "children": [
      {
        "el": "grid",
        "gap": 6,
        "align": "end",
        "children": [
          {
            "el": "box",
            "span": "1-8",
            "gap": 5,
            "children": [
              {
                "el": "text",
                "slot": "eyebrow",
                "role": "eyebrow",
                "transform": "uppercase",
                "weight": 400,
                "tracking": "wide",
                "font": "mono"
              },
              {
                "el": "text",
                "slot": "headline",
                "role": "display",
                "step": 7,
                "weight": 500,
                "tracking": "tight",
                "leading": "tight",
                "maxCh": 17
              }
            ]
          },
          {
            "el": "box",
            "span": "9-12",
            "alignSelf": "end",
            "gap": 5,
            "children": [
              {
                "el": "text",
                "color": "textMuted",
                "slot": "subhead",
                "role": "body",
                "maxCh": 44
              },
              {
                "el": "box",
                "dir": "row",
                "gap": 5,
                "align": "center",
                "wrap": true,
                "children": [
                  {
                    "el": "button",
                    "slot": "cta",
                    "variant": "primary"
                  },
                  {
                    "el": "button",
                    "slot": "cta2",
                    "variant": "link",
                    "arrow": true
                  }
                ]
              }
            ]
          }
        ]
      },
      {
        "el": "box",
        "pad": 0,
        "border": "all",
        "children": [
          {
            "el": "grid",
            "mobile": "keep",
            "cols": 12,
            "gap": 0,
            "children": [
              {
                "el": "media",
                "span": "1-12",
                "rowSpan": "1-1",
                "slot": "heroImage",
                "aspect": "21/9",
                "treatment": "isometric",
                "frame": "none"
              },
              {
                "el": "box",
                "span": "10-12",
                "rowSpan": "1-1",
                "alignSelf": "start",
                "pad": [
                  4,
                  5
                ],
                "align": "end",
                "children": [
                  {
                    "el": "text",
                    "color": "textMuted",
                    "slot": "index",
                    "role": "small",
                    "font": "mono"
                  }
                ]
              }
            ]
          },
          {
            "el": "divider"
          },
          {
            "el": "repeat",
            "slot": "stats",
            "min": 4,
            "max": 4,
            "layout": "grid",
            "cols": 4,
            "phoneCols": 2,
            "gap": 0,
            "divider": true,
            "of": {
              "el": "box",
              "gap": 2,
              "pad": [
                5,
                5
              ],
              "children": [
                {
                  "el": "text",
                  "color": "textMuted",
                  "slot": "meta",
                  "role": "small",
                  "transform": "uppercase",
                  "tracking": "wide",
                  "font": "mono"
                },
                {
                  "el": "text",
                  "slot": "number",
                  "role": "number",
                  "step": 5,
                  "weight": 500,
                  "tracking": "tight"
                },
                {
                  "el": "text",
                  "slot": "title",
                  "role": "small"
                }
              ]
            }
          }
        ]
      }
    ]
  }
}

Other patterns in this design

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