hero.isometric-stack-split · Isometric stack split

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

Rule
Headline, lead and a three-item numbered callout key in 1–5; one large isometric line drawing (1:1) fills 6–12 under a mono figure caption. The key numbers match labelled parts of the drawing.
Slots
eyebrow, headline, subhead, cta, cta2, features[3..3], caption, index, heroImage
Grid areas
message 1-5 · drawing 6-12 (12-column grid, 1-based inclusive spans)
Notes
The drawing is the hero: 30° projection, 1.5 px strokes in the heading ink, one block filled with the accent. Numbered leader labels on the drawing repeat the key's numbers.
Tokens
bg #F6FBFF · text #192028 · heading #091018 · accent #FF5A2C · accent2 #00ABC9 · Space Grotesk / Space Grotesk · radius 2px · space unit 4px (full list in design/tokens.json)
Section
vertical padding step 6

Pattern notes

  • Columns 1–5: mono eyebrow in the link colour, display headline at step 7 (600, tight, ≤13 ch), a muted lead (≤40 ch) and primary-with-arrow plus secondary buttons; pinned to the bottom, a ruled key of three numbered items (mono number, title at step 1, a muted line). Columns 6–12: a mono figure caption and index on one row, then a 1:1 isometric drawing of the product as a stack of slabs with the three key numbers as leader labels on it, one slab filled with the accent. At least 85 vh.

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

01

Positioning

02

Identity systems

03

Websites

Layout tree (as in design/layout.json)
{
  "pattern": "hero.isometric-stack-split",
  "kind": "hero",
  "grid": {
    "message": "1-5",
    "drawing": "6-12"
  },
  "slots": [
    "eyebrow",
    "headline",
    "subhead",
    "cta",
    "cta2",
    "features[3..3]",
    "caption",
    "index",
    "heroImage"
  ],
  "notes": "The drawing is the hero: 30° projection, 1.5 px strokes in the heading ink, one block filled with the accent. Numbered leader labels on the drawing repeat the key's numbers.",
  "tree": {
    "el": "grid",
    "gap": 6,
    "align": "stretch",
    "minVh": 0.85,
    "children": [
      {
        "el": "box",
        "span": "1-5",
        "gap": 6,
        "pad": [
          4,
          0
        ],
        "justify": "between",
        "children": [
          {
            "el": "box",
            "gap": 5,
            "children": [
              {
                "el": "text",
                "color": "link",
                "slot": "eyebrow",
                "role": "label",
                "font": "mono"
              },
              {
                "el": "text",
                "slot": "headline",
                "role": "display",
                "step": 7,
                "weight": 600,
                "tracking": "tight",
                "leading": "tight",
                "maxCh": 13
              },
              {
                "el": "text",
                "color": "textMuted",
                "slot": "subhead",
                "role": "lead",
                "maxCh": 40
              },
              {
                "el": "box",
                "dir": "row",
                "gap": 2,
                "wrap": true,
                "children": [
                  {
                    "el": "button",
                    "slot": "cta",
                    "variant": "primary",
                    "arrow": true
                  },
                  {
                    "el": "button",
                    "slot": "cta2",
                    "variant": "secondary"
                  }
                ]
              }
            ]
          },
          {
            "el": "repeat",
            "slot": "features",
            "min": 3,
            "max": 3,
            "layout": "list",
            "gap": 3,
            "divider": true,
            "of": {
              "el": "box",
              "mobile": "keep",
              "dir": "row",
              "gap": 4,
              "align": "start",
              "children": [
                {
                  "el": "text",
                  "color": "link",
                  "slot": "number",
                  "role": "label",
                  "font": "mono"
                },
                {
                  "el": "box",
                  "gap": 1,
                  "children": [
                    {
                      "el": "text",
                      "slot": "title",
                      "role": "h4",
                      "step": 1,
                      "weight": 600
                    },
                    {
                      "el": "text",
                      "mobile": "hide",
                      "color": "textMuted",
                      "slot": "body",
                      "role": "small"
                    }
                  ]
                }
              ]
            }
          }
        ]
      },
      {
        "el": "box",
        "span": "6-12",
        "gap": 2,
        "children": [
          {
            "el": "box",
            "mobile": "hide",
            "dir": "row",
            "align": "center",
            "justify": "between",
            "children": [
              {
                "el": "text",
                "color": "link",
                "slot": "caption",
                "role": "label",
                "font": "mono"
              },
              {
                "el": "text",
                "color": "textMuted",
                "slot": "index",
                "role": "label",
                "font": "mono"
              }
            ]
          },
          {
            "el": "media",
            "slot": "heroImage",
            "aspect": "1/1",
            "treatment": "isometric",
            "frame": "none"
          }
        ]
      }
    ]
  }
}
Component example: reference/hero.isometric-stack-split.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
<title>hero.isometric-stack-split — Isometric Line</title>
<link rel="stylesheet" href="base.css">
<style>
section { padding: 48px 0 96px; }
  .msg { grid-column: 1 / 6; display: flex; flex-direction: column; justify-content: space-between; gap: 48px; padding: 16px 0; }
  .msg h1 { font-size: clamp(44px, 5.2vw, var(--step-7)); max-width: 13ch; margin: 16px 0 20px; }
  .msg .lead { font-size: var(--step-1); max-width: 40ch; line-height: 1.4; }
  .actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 28px; }
  .key { list-style: none; padding: 0; } .key li { display: flex; gap: 16px; padding: 12px 0; border-top: var(--stroke) solid var(--border); }
  .key strong { display: block; color: var(--heading); font-weight: 600; }
  .fig { grid-column: 6 / 13; }
  .fig header { display: flex; justify-content: space-between; margin-bottom: 8px; }
</style>
</head>
<body>
<section class="wrap"><div class="grid">
  <div class="msg">
    <div>
      <span class="mono link">Stackyard 3 · now with edge queues</span>
      <h1>Infrastructure you can draw.</h1>
      <p class="lead muted">Compose compute, queues and storage as blocks, wire them together, and ship the whole stack with one push.</p>
      <div class="actions"><a class="btn btn-primary" href="#">Start building →</a><a class="btn" href="#">See the architecture</a></div>
    </div>
    <ol class="key">
      <li><span class="mono link">01</span><span><strong>Edge runtime</strong><span class="small muted">Runs in 38 regions, cold start under 5 ms.</span></span></li>
      <li><span class="mono link">02</span><span><strong>Durable queue</strong><span class="small muted">Exactly-once delivery between every block.</span></span></li>
      <li><span class="mono link">03</span><span><strong>Object store</strong><span class="small muted">Replicated twice, billed by the gigabyte.</span></span></li>
    </ol>
  </div>
  <figure class="fig">
    <header><span class="mono link">Fig. 01 — a stack at rest</span><span class="mono muted">3 blocks · 1 link</span></header>
    <svg class="iso" viewBox="0 0 587 472" role="img" aria-label="Isometric drawing: a three-layer stack on a base plate, the middle layer selected, wired to a side cube"><polygon class="l" points="16.0,326.0 241.2,456.0 241.2,446.0 16.0,316.0"/><polygon class="r" points="466.4,326.0 241.2,456.0 241.2,446.0 466.4,316.0"/><polygon class="t" points="241.2,186.0 466.4,316.0 241.2,446.0 16.0,316.0"/><polygon class="l" points="68.0,286.0 241.2,386.0 241.2,356.0 68.0,256.0"/><polygon class="r" points="414.4,286.0 241.2,386.0 241.2,356.0 414.4,256.0"/><polygon class="t" points="241.2,156.0 414.4,256.0 241.2,356.0 68.0,256.0"/><polygon class="l" points="68.0,216.0 241.2,316.0 241.2,286.0 68.0,186.0"/><polygon class="r" points="414.4,216.0 241.2,316.0 241.2,286.0 414.4,186.0"/><polygon class="a" points="241.2,86.0 414.4,186.0 241.2,286.0 68.0,186.0"/><polygon class="l" points="120.0,146.0 241.2,216.0 241.2,156.0 120.0,86.0"/><polygon class="r" points="362.4,146.0 241.2,216.0 241.2,156.0 362.4,86.0"/><polygon class="t" points="241.2,16.0 362.4,86.0 241.2,156.0 120.0,86.0"/><line class="cn" x1="241.2" y1="416.0" x2="241.2" y2="386.0"/><line class="cn" x1="241.2" y1="356.0" x2="241.2" y2="316.0"/><line class="cn" x1="241.2" y1="286.0" x2="241.2" y2="246.0"/><polygon class="l" points="379.8,416.0 440.4,451.0 440.4,381.0 379.8,346.0"/><polygon class="r" points="501.0,416.0 440.4,451.0 440.4,381.0 501.0,346.0"/><polygon class="t" points="440.4,311.0 501.0,346.0 440.4,381.0 379.8,346.0"/><line class="cn" x1="410.1" y1="363.5" x2="349.5" y2="308.5"/><circle class="dot" cx="301.8" cy="121.0" r="3"/><line class="lead" x1="301.8" y1="121.0" x2="537.0" y2="121.0"/><text class="tag" x="543.0" y="125.0">01</text><circle class="dot" cx="327.8" cy="251.0" r="3"/><line class="lead" x1="327.8" y1="251.0" x2="537.0" y2="251.0"/><text class="tag" x="543.0" y="255.0">02</text><circle class="dot" cx="470.7" cy="398.5" r="3"/><line class="lead" x1="470.7" y1="398.5" x2="537.0" y2="398.5"/><text class="tag" x="543.0" y="402.5">03</text></svg>
  </figure>
</div></section>
</body>
</html>

Other patterns in this design

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