features.hairline-shared-cells · Hairline shared cells

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

Rule
Header (h2 in 1–6, muted paragraph bottom-aligned in 8–12); then one bordered object of three cells split by shared hairlines: small isometric icon, mono uppercase label, title, muted line, mono arrow link.
Slots
sectionLabel, title, body, features[3..3]
Grid areas
title 1-6 · intro 8-12 · cells 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)

Pattern notes

  • Section header: mono eyebrow and h2 (step 5, weight 500, ≤20 ch) in 1–6, a muted paragraph bottom-aligned in 8–12. Then one bordered object split into three cells by vertical hairlines. Each cell, top to bottom: a small isometric icon (about 96 × 72 px), a mono uppercase label, the title at step 2 weight 500, a muted line or an em-dash list, and a mono arrow link (dropped on phones).

What you get

What we do

Each engagement starts with a two-week audit: interviews with customers, sales and the people who build the product. The brief writes itself after that.

Included

Positioning

Find the one sentence your best customers already believe.

New

Identity systems

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

Built in

Websites

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

Layout tree (as in design/layout.json)
{
  "pattern": "features.hairline-shared-cells",
  "kind": "features",
  "grid": {
    "title": "1-6",
    "intro": "8-12",
    "cells": "1-12"
  },
  "slots": [
    "sectionLabel",
    "title",
    "body",
    "features[3..3]"
  ],
  "tree": {
    "el": "box",
    "gap": 10,
    "children": [
      {
        "el": "grid",
        "gap": 6,
        "align": "end",
        "children": [
          {
            "el": "box",
            "span": "1-6",
            "gap": 4,
            "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": 20
              }
            ]
          },
          {
            "el": "text",
            "span": "8-12",
            "color": "textMuted",
            "alignSelf": "end",
            "slot": "body",
            "role": "body",
            "maxCh": 56
          }
        ]
      },
      {
        "el": "box",
        "pad": 0,
        "border": "all",
        "children": [
          {
            "el": "repeat",
            "slot": "features",
            "min": 3,
            "max": 3,
            "layout": "grid",
            "cols": 3,
            "gap": 0,
            "divider": true,
            "of": {
              "el": "box",
              "gap": 3,
              "pad": [
                8,
                6
              ],
              "children": [
                {
                  "el": "grid",
                  "mobile": "keep",
                  "cols": 4,
                  "gap": 0,
                  "children": [
                    {
                      "el": "media",
                      "span": "1-1",
                      "slot": "image",
                      "aspect": "4/3",
                      "treatment": "isometric",
                      "frame": "none"
                    }
                  ]
                },
                {
                  "el": "text",
                  "color": "textMuted",
                  "slot": "label",
                  "role": "small",
                  "transform": "uppercase",
                  "tracking": "wide",
                  "font": "mono"
                },
                {
                  "el": "text",
                  "slot": "title",
                  "role": "h3",
                  "step": 2,
                  "weight": 500,
                  "tracking": "tight"
                },
                {
                  "el": "text",
                  "color": "textMuted",
                  "slot": "body",
                  "role": "small",
                  "maxCh": 44
                },
                {
                  "el": "button",
                  "mobile": "hide",
                  "slot": "cta",
                  "variant": "link",
                  "arrow": true
                }
              ]
            }
          }
        ]
      }
    ]
  }
}
Component example: reference/features.hairline-shared-cells.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
<title>features.hairline-shared-cells — Technical Hairline</title>
<link rel="stylesheet" href="base.css">
<style>
  .head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gutter); align-items: end; margin-bottom: 40px; }
  .head > div { grid-column: 1 / 7; display: grid; gap: 16px; } .head > p { grid-column: 8 / 13; }
  .cells > div:nth-child(2) { background: var(--surface); }
  @media (max-width: 640px) { .head > div, .head > p { grid-column: 1 / -1; } }
</style>
</head>
<body>
<section class="wrap">
  <div class="head">
    <div><p class="eyebrow">How it works</p><h2 class="h2">From the business that holds it to the lab that trains on it.</h2></div>
    <p class="muted">One licence in from the owner, the work in the middle, one licence out to the partner, and a chain of title connecting every file to where it came from.</p>
  </div>
  <div class="box"><div class="cells" style="--cols:3">
    <div><span class="cell-icon"><svg viewBox="0 0 96 72" fill="none" stroke="currentColor" stroke-width="1" stroke-linejoin="round" aria-hidden="true"><path d="M22 37.0 L36 44 L22 51.0 L8 44 Z"/><path d="M8 44 L8 48 L22 55.0 L36 48 L36 44 M22 51.0 L22 55.0"/><path d="M48 29.0 L62 36 L48 43.0 L34 36 Z"/><path d="M34 36 L34 40 L48 47.0 L62 40 L62 36 M48 43.0 L48 47.0"/><path d="M74 21.0 L88 28 L74 35.0 L60 28 Z"/><path d="M60 28 L60 32 L74 39.0 L88 32 L88 28 M74 35.0 L74 39.0"/><path d="M34 42 L38 40 M60 34 L64 32" stroke-dasharray="2 2"/></svg></span><p class="eyebrow">Where it comes from</p><h3 class="h3">Licensed at the source</h3>
      <ul class="dash small"><li>Operating and wind-down companies</li><li>Hospitals and diagnostic chains</li><li>Engineering firms</li></ul><a class="tlink mono-link" href="#licence">licence</a></div>
    <div><span class="cell-icon"><svg viewBox="0 0 96 72" fill="none" stroke="currentColor" stroke-width="1" stroke-linejoin="round" aria-hidden="true"><path d="M48 22.0 L84 40 L48 58.0 L12 40 Z"/><path d="M12 40 L12 48 L48 66.0 L84 48 L84 40 M48 58.0 L48 66.0"/><path class="faint" d="M48 25.96 L76.08 40 L48 54.04 L19.919999999999998 40 Z"/><path d="M48 15.0 L62 22 L48 29.0 L34 22 Z"/><path d="M34 22 L34 32 L48 39.0 L62 32 L62 22 M48 29.0 L48 39.0"/></svg></span><p class="eyebrow">What we do with it</p><h3 class="h3">Cleared, de-identified, built on</h3>
      <ul class="dash small"><li>Rights review and chain of title</li><li>De-identification inside the owner's systems</li><li>Domain corpora and sealed evals</li></ul><a class="tlink mono-link" href="#partner">partner licence</a></div>
    <div><span class="cell-icon"><svg viewBox="0 0 96 72" fill="none" stroke="currentColor" stroke-width="1" stroke-linejoin="round" aria-hidden="true"><path d="M48 37.0 L82 54 L48 71.0 L14 54 Z"/><path d="M14 54 L14 60 L48 77.0 L82 60 L82 54 M48 71.0 L48 77.0"/><path d="M48 25.0 L82 42 L48 59.0 L14 42 Z"/><path d="M14 42 L14 48 L48 65.0 L82 48 L82 42 M48 59.0 L48 65.0"/><path d="M48 13.0 L82 30 L48 47.0 L14 30 Z"/><path d="M14 30 L14 36 L48 53.0 L82 36 L82 30 M48 47.0 L48 53.0"/></svg></span><p class="eyebrow">Who trains on it</p><h3 class="h3">Under licence, with a paper trail</h3>
      <ul class="dash small"><li>Frontier labs</li><li>Neolabs</li><li>Applied and vertical labs</li></ul><a class="tlink mono-link" href="#labs">labs</a></div>
  </div></div>
</section>
</body>
</html>

Other patterns in this design

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