content.technical-manifest-split · Technical manifest split

A content pattern from Technical Hairline, drawn alone below with this design's tokens and sample copy. Used in this design on: home page, section 7. Give the section root data-pattern="content.technical-manifest-split". A guide only: DESIGN.md and tokens.json are the source of truth.

Rule
Opens on a full-width hairline. 1–6: eyebrow, h2 and a ruled list of guarantees; 7–12: a bordered manifest panel, a mono header row (label, note) over a hairline, then mono key/value lines.
Slots
sectionLabel, title, features[4..4], label, index, facts[4..4], email
Grid areas
copy 1-6 · panel 7-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
full-bleed · vertical padding step 0

Pattern notes

  • Opens on a full-width hairline with 64 px below it. Left 1–6: eyebrow, h2 (≤18 ch) and four guarantees as a ruled list (title at weight 500, muted line). Right 7–12: a bordered manifest panel: a header row with a mono file name left and a mono index right, a hairline, mono key/value lines (`key` in `textMuted` in the first third, value in `text`) split by hairlines like a JSON manifest, a hairline and a mono footnote (an address or file path).

About

How we think

Positioning

Find the one sentence your best customers already believe.

Identity systems

Logos, type and colour that work on a factory floor and a pitch deck.

Websites

Fast, editable sites built on the CMS your team already knows.

Sales enablement

Decks, one-pagers and demos your reps actually use.

About

06

Hours

Studio open Mon–Thu, 9:30–18:00

Where

Rua da Boavista 72, 1200-066 Lisboa

Contact

+351 21 340 5512

Good to know

Booking projects from June 2026

hello@northfold.com

Layout tree (as in design/layout.json)
{
  "pattern": "content.technical-manifest-split",
  "kind": "content",
  "grid": {
    "copy": "1-6",
    "panel": "7-12"
  },
  "slots": [
    "sectionLabel",
    "title",
    "features[4..4]",
    "label",
    "index",
    "facts[4..4]",
    "email"
  ],
  "bleed": true,
  "tree": {
    "el": "box",
    "children": [
      {
        "el": "divider"
      },
      {
        "el": "spacer",
        "size": 16
      },
      {
        "el": "grid",
        "gap": 6,
        "children": [
          {
            "el": "box",
            "span": "1-6",
            "gap": 6,
            "children": [
              {
                "el": "text",
                "slot": "sectionLabel",
                "role": "eyebrow",
                "transform": "uppercase",
                "weight": 400,
                "tracking": "wide",
                "font": "mono"
              },
              {
                "el": "text",
                "slot": "title",
                "role": "h2",
                "step": 5,
                "weight": 500,
                "tracking": "tight",
                "leading": "tight",
                "maxCh": 18
              },
              {
                "el": "repeat",
                "slot": "features",
                "min": 4,
                "max": 4,
                "layout": "list",
                "gap": 4,
                "divider": true,
                "of": {
                  "el": "box",
                  "gap": 1,
                  "children": [
                    {
                      "el": "text",
                      "slot": "title",
                      "role": "h3",
                      "step": 1,
                      "weight": 500,
                      "tracking": "tight"
                    },
                    {
                      "el": "text",
                      "color": "textMuted",
                      "slot": "body",
                      "role": "small",
                      "maxCh": 60
                    }
                  ]
                }
              }
            ]
          },
          {
            "el": "box",
            "span": "7-12",
            "alignSelf": "center",
            "pad": 0,
            "border": "all",
            "children": [
              {
                "el": "box",
                "mobile": "keep",
                "dir": "row",
                "pad": [
                  3,
                  4
                ],
                "align": "center",
                "justify": "between",
                "children": [
                  {
                    "el": "text",
                    "slot": "label",
                    "role": "small",
                    "font": "mono"
                  },
                  {
                    "el": "text",
                    "color": "textMuted",
                    "slot": "index",
                    "role": "small",
                    "font": "mono"
                  }
                ]
              },
              {
                "el": "divider"
              },
              {
                "el": "box",
                "pad": [
                  5,
                  4
                ],
                "children": [
                  {
                    "el": "repeat",
                    "slot": "facts",
                    "min": 4,
                    "max": 4,
                    "layout": "list",
                    "gap": 3,
                    "divider": true,
                    "of": {
                      "el": "grid",
                      "mobile": "keep",
                      "cols": 12,
                      "gap": 3,
                      "align": "baseline",
                      "children": [
                        {
                          "el": "text",
                          "span": "1-4",
                          "color": "textMuted",
                          "slot": "label",
                          "role": "small",
                          "font": "mono"
                        },
                        {
                          "el": "text",
                          "span": "5-12",
                          "slot": "title",
                          "role": "small",
                          "font": "mono"
                        }
                      ]
                    }
                  }
                ]
              },
              {
                "el": "divider"
              },
              {
                "el": "box",
                "pad": [
                  3,
                  4
                ],
                "children": [
                  {
                    "el": "text",
                    "color": "textMuted",
                    "slot": "email",
                    "role": "small",
                    "font": "mono"
                  }
                ]
              }
            ]
          }
        ]
      },
      {
        "el": "spacer",
        "size": 16
      }
    ]
  }
}
Component example: reference/content.technical-manifest-split.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
<title>content.technical-manifest-split — Technical Hairline</title>
<link rel="stylesheet" href="base.css">
<style>
  .split { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gutter); padding-block: 64px; }
  .left { grid-column: 1 / 7; display: grid; gap: 24px; align-content: start; }
  .list > div { padding-block: 16px; border-top: var(--hair); display: grid; gap: 4px; } .list > div:first-child { border-top: 0; }
  .manifest { grid-column: 7 / 13; align-self: start; }
  .manifest header { display: flex; justify-content: space-between; padding: 12px 16px; background: var(--surface); border-bottom: var(--hair); }
  .manifest pre { font: 400 13px/1.7 var(--font-mono); color: var(--text); padding: 20px 16px; overflow-x: auto; }
  .manifest pre .k { color: var(--muted); }
  @media (max-width: 640px) { .left, .manifest { grid-column: 1 / -1; } }
</style>
</head>
<body>
<hr class="rule">
<section class="wrap" style="padding-block:0">
  <div class="split">
    <div class="left">
      <p class="eyebrow">Provenance</p>
      <h2 class="h2" style="max-width:18ch">Every record traces back to a signed licence.</h2>
      <div class="list">
        <div><h3 class="h3" style="font-size:var(--step-1)">Chain of title per record</h3><p class="small muted">Every record maps to a signed licence from the business that holds it.</p></div>
        <div><h3 class="h3" style="font-size:var(--step-1)">Consent for any personal data</h3><p class="small muted">Notices, consent terms and client contracts are reviewed before anything is used.</p></div>
        <div><h3 class="h3" style="font-size:var(--step-1)">PII removed at the source</h3><p class="small muted">De-identification runs inside the owner's environment, before export.</p></div>
      </div>
    </div>
    <div class="manifest box">
      <header><span class="mono">manifest.jsonl</span><span class="mono muted">sample · illustrative values</span></header>
<pre>{
  <span class="k">"record_id":</span> "qr_01HZX4T9K2M7",
  <span class="k">"licence_id":</span> "lic_2026_0142",
  <span class="k">"consent_basis":</span> "owner_held_rights",
  <span class="k">"checks_passed":</span> ["pii_scan", "dedup_web"],
  <span class="k">"sha256":</span> "9f2c…e41a"
}</pre>
    </div>
  </div>
</section>
</body>
</html>

Other patterns in this design

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