hero.technical-isometric-split · Technical isometric split

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

Rule
Copy in 1–6 (mono eyebrow, weight-500 headline, lead, dark pill CTA + arrow link, mono footnote); in 7–12 a 1 px bordered square panel holds an isometric line drawing with a mono state label top-right.
Slots
eyebrow, headline, subhead, cta, cta2, meta, heroImage, index
Grid areas
copy 1-6 · panel 7-12 (12-column grid, 1-based inclusive spans)
Notes
The panel is only the 1 px border and the 12 px radius: no fill, no shadow. The drawing is one large slab among smaller ones, in thin heading-colour strokes.
Tokens
bg #FAFAF8 · text #2E2E2B · heading #0B0B0A · accent #111110 · accent2 #7A7A7A · Geist / Geist · radius 12px · space unit 4px (full list in design/tokens.json)

Pattern notes

  • The reference hero. Columns 1–6, vertically centred: mono uppercase eyebrow with dot separators, display headline at step 7 (weight 500, tight, ≤14 ch, about four lines), a lead paragraph at step 1 (≤50 ch), a row with the dark pill CTA and a text link with an arrow, then a mono footnote in `textMuted`. Columns 7–12: a square panel with a 1 px border and 12 px radius, no fill, holding a large isometric drawing (one big slab among a dozen small ones) and a tiny mono state label 16 px from the top-right corner. Phone: copy first, the square panel under it.

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

Booking projects from June 2026

06

Layout tree (as in design/layout.json)
{
  "pattern": "hero.technical-isometric-split",
  "kind": "hero",
  "grid": {
    "copy": "1-6",
    "panel": "7-12"
  },
  "slots": [
    "eyebrow",
    "headline",
    "subhead",
    "cta",
    "cta2",
    "meta",
    "heroImage",
    "index"
  ],
  "notes": "The panel is only the 1 px border and the 12 px radius: no fill, no shadow. The drawing is one large slab among smaller ones, in thin heading-colour strokes.",
  "tree": {
    "el": "grid",
    "gap": 6,
    "align": "center",
    "children": [
      {
        "el": "box",
        "span": "1-6",
        "alignSelf": "center",
        "gap": 6,
        "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": 14
          },
          {
            "el": "text",
            "slot": "subhead",
            "role": "lead",
            "step": 1,
            "maxCh": 50
          },
          {
            "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": "text",
            "color": "textMuted",
            "slot": "meta",
            "role": "small",
            "font": "mono"
          }
        ]
      },
      {
        "el": "box",
        "span": "7-12",
        "alignSelf": "center",
        "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": "1/1",
                "treatment": "isometric",
                "frame": "none"
              },
              {
                "el": "box",
                "span": "9-12",
                "rowSpan": "1-1",
                "alignSelf": "start",
                "pad": [
                  4,
                  5
                ],
                "align": "end",
                "children": [
                  {
                    "el": "text",
                    "color": "textMuted",
                    "slot": "index",
                    "role": "small",
                    "font": "mono"
                  }
                ]
              }
            ]
          }
        ]
      }
    ]
  }
}
Component example: reference/hero.technical-isometric-split.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
<title>hero.technical-isometric-split — Technical Hairline</title>
<link rel="stylesheet" href="base.css">
<style>
  .hero { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gutter); align-items: center; }
  .copy { grid-column: 1 / 7; display: flex; flex-direction: column; gap: 24px; }
  .actions { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
  .hero .panel { grid-column: 7 / 13; aspect-ratio: 1 / 1; padding: 40px; }
  @media (max-width: 640px) { .copy, .hero .panel { grid-column: 1 / -1; } .hero .panel { padding: 20px; } }
</style>
</head>
<body>
<section class="wrap hero">
  <div class="copy">
    <p class="eyebrow">Training data · Evals · RL environments</p>
    <h1 class="display" style="max-width:14ch">We turn the record of real work into data models learn from.</h1>
    <p class="lead">Tickets and code, patient histories, CAD revisions, recorded calls. We license them from the businesses that hold them and build evals on them.</p>
    <div class="actions"><a class="btn" href="#estimate">What's your data worth?</a><a class="tlink" href="#labs">Become a lab partner</a></div>
    <p class="mono muted">Free estimate in about a minute · NDA on request</p>
  </div>
  <figure class="panel" aria-label="Isometric drawing: one large slab among twelve small ones">
    <span class="state">rest</span>
    <svg viewBox="0 0 620 560" fill="none" stroke="currentColor" stroke-width="1.15" stroke-linejoin="round" aria-hidden="true"><path d="M300 254.0 L392 300 L300 346.0 L208 300 Z"/><path d="M208 300 L208 322 L300 368.0 L392 322 L392 300 M300 346.0 L300 368.0"/><path class="faint" d="M300 264.12 L371.76 300 L300 335.88 L228.24 300 Z"/><path d="M90 152.0 L126 170 L90 188.0 L54 170 Z"/><path d="M54 170 L54 179 L90 197.0 L126 179 L126 170 M90 188.0 L90 197.0"/><path class="faint" d="M90 155.96 L118.08 170 L90 184.04 L61.92 170 Z"/><path d="M230 117.0 L266 135 L230 153.0 L194 135 Z"/><path d="M194 135 L194 144 L230 162.0 L266 144 L266 135 M230 153.0 L230 162.0"/><path class="faint" d="M230 120.96 L258.08 135 L230 149.04 L201.92 135 Z"/><path d="M380 102.0 L416 120 L380 138.0 L344 120 Z"/><path d="M344 120 L344 129 L380 147.0 L416 129 L416 120 M380 138.0 L380 147.0"/><path class="faint" d="M380 105.96 L408.08 120 L380 134.04 L351.92 120 Z"/><path d="M520 122.0 L556 140 L520 158.0 L484 140 Z"/><path d="M484 140 L484 149 L520 167.0 L556 149 L556 140 M520 158.0 L520 167.0"/><path class="faint" d="M520 125.96 L548.08 140 L520 154.04 L491.92 140 Z"/><path d="M70 262.0 L106 280 L70 298.0 L34 280 Z"/><path d="M34 280 L34 289 L70 307.0 L106 289 L106 280 M70 298.0 L70 307.0"/><path class="faint" d="M70 265.96 L98.08 280 L70 294.04 L41.92 280 Z"/><path d="M160 312.0 L196 330 L160 348.0 L124 330 Z"/><path d="M124 330 L124 339 L160 357.0 L196 339 L196 330 M160 348.0 L160 357.0"/><path class="faint" d="M160 315.96 L188.08 330 L160 344.04 L131.92 330 Z"/><path d="M470 232.0 L506 250 L470 268.0 L434 250 Z"/><path d="M434 250 L434 259 L470 277.0 L506 259 L506 250 M470 268.0 L470 277.0"/><path class="faint" d="M470 235.96 L498.08 250 L470 264.04 L441.92 250 Z"/><path d="M560 282.0 L596 300 L560 318.0 L524 300 Z"/><path d="M524 300 L524 309 L560 327.0 L596 309 L596 300 M560 318.0 L560 327.0"/><path class="faint" d="M560 285.96 L588.08 300 L560 314.04 L531.92 300 Z"/><path d="M470 312.0 L506 330 L470 348.0 L434 330 Z"/><path d="M434 330 L434 339 L470 357.0 L506 339 L506 330 M470 348.0 L470 357.0"/><path class="faint" d="M470 315.96 L498.08 330 L470 344.04 L441.92 330 Z"/><path d="M170 432.0 L206 450 L170 468.0 L134 450 Z"/><path d="M134 450 L134 459 L170 477.0 L206 459 L206 450 M170 468.0 L170 477.0"/><path class="faint" d="M170 435.96 L198.08 450 L170 464.04 L141.92 450 Z"/><path d="M320 452.0 L356 470 L320 488.0 L284 470 Z"/><path d="M284 470 L284 479 L320 497.0 L356 479 L356 470 M320 488.0 L320 497.0"/><path class="faint" d="M320 455.96 L348.08 470 L320 484.04 L291.92 470 Z"/><path d="M470 432.0 L506 450 L470 468.0 L434 450 Z"/><path d="M434 450 L434 459 L470 477.0 L506 459 L506 450 M470 468.0 L470 477.0"/><path class="faint" d="M470 435.96 L498.08 450 L470 464.04 L441.92 450 Z"/></svg>
  </figure>
</section>
</body>
</html>

Other patterns in this design

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