cta.technical-two-ways · Technical two ways in

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

Rule
Opens on a full-width hairline. 1–5: h2 at step 6, a muted line, dark pill CTA + arrow link, a mono footnote; 7–12: two or three ruled routes, each a bordered mono letter chip, title, line and arrow.
Slots
sectionLabel, title, body, cta, cta2, meta, items[2..3]
Grid areas
copy 1-5 · routes 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. Left 1–5: eyebrow, h2 at step 6 (≤14 ch), a muted line, the dark pill CTA + arrow link and a mono footnote. Right 7–12: two or three routes between hairlines, each a 32 px bordered mono letter or number chip, the title at step 3 weight 500 with a muted line, and an arrow at the far right.

Next step

Have a hard thing to explain?

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.

Start a projectRead case studies

Booking projects from June 2026

01

Discovery sprint

Two weeks of interviews, audits and competitor teardown.

View

02

Positioning workshop

A day with your leadership to agree on one story.

View
Layout tree (as in design/layout.json)
{
  "pattern": "cta.technical-two-ways",
  "kind": "cta",
  "grid": {
    "copy": "1-5",
    "routes": "7-12"
  },
  "slots": [
    "sectionLabel",
    "title",
    "body",
    "cta",
    "cta2",
    "meta",
    "items[2..3]"
  ],
  "bleed": true,
  "tree": {
    "el": "box",
    "children": [
      {
        "el": "divider"
      },
      {
        "el": "spacer",
        "size": 16
      },
      {
        "el": "grid",
        "gap": 6,
        "children": [
          {
            "el": "box",
            "span": "1-5",
            "gap": 5,
            "children": [
              {
                "el": "text",
                "slot": "sectionLabel",
                "role": "eyebrow",
                "transform": "uppercase",
                "weight": 400,
                "tracking": "wide",
                "font": "mono"
              },
              {
                "el": "text",
                "slot": "title",
                "role": "h2",
                "step": 6,
                "weight": 500,
                "tracking": "tight",
                "leading": "tight",
                "maxCh": 14
              },
              {
                "el": "text",
                "color": "textMuted",
                "slot": "body",
                "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": "text",
                "color": "textMuted",
                "slot": "meta",
                "role": "small",
                "font": "mono"
              }
            ]
          },
          {
            "el": "box",
            "span": "7-12",
            "alignSelf": "center",
            "gap": 0,
            "children": [
              {
                "el": "divider"
              },
              {
                "el": "repeat",
                "slot": "items",
                "min": 2,
                "max": 3,
                "layout": "list",
                "gap": 0,
                "divider": true,
                "of": {
                  "el": "grid",
                  "mobile": "keep",
                  "gap": 4,
                  "pad": [
                    6,
                    0
                  ],
                  "children": [
                    {
                      "el": "box",
                      "span": "1-2",
                      "alignSelf": "start",
                      "align": "start",
                      "children": [
                        {
                          "el": "box",
                          "pad": [
                            1,
                            2
                          ],
                          "border": "all",
                          "children": [
                            {
                              "el": "text",
                              "slot": "number",
                              "role": "small",
                              "font": "mono"
                            }
                          ]
                        }
                      ]
                    },
                    {
                      "el": "box",
                      "span": "3-10",
                      "gap": 2,
                      "children": [
                        {
                          "el": "text",
                          "slot": "title",
                          "role": "h3",
                          "step": 3,
                          "weight": 500,
                          "tracking": "tight"
                        },
                        {
                          "el": "text",
                          "color": "textMuted",
                          "slot": "body",
                          "role": "small",
                          "maxCh": 54
                        }
                      ]
                    },
                    {
                      "el": "box",
                      "span": "11-12",
                      "alignSelf": "center",
                      "align": "end",
                      "children": [
                        {
                          "el": "button",
                          "slot": "cta",
                          "variant": "link",
                          "arrow": true
                        }
                      ]
                    }
                  ]
                }
              },
              {
                "el": "divider"
              }
            ]
          }
        ]
      },
      {
        "el": "spacer",
        "size": 16
      }
    ]
  }
}
Component example: reference/cta.technical-two-ways.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
<title>cta.technical-two-ways — 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; align-items: center; }
  .left { grid-column: 1 / 6; display: grid; gap: 20px; justify-items: start; }
  .routes { grid-column: 7 / 13; border-top: var(--hair); border-bottom: var(--hair); }
  .route { display: grid; grid-template-columns: 32px 1fr auto; gap: 20px; align-items: start; padding-block: 24px; text-decoration: none; color: inherit; }
  .route + .route { border-top: var(--hair); }
  .route .chip { justify-content: center; height: 28px; padding: 0; }
  .route .arrow { color: var(--heading); align-self: center; transition: transform var(--dur) var(--ease); }
  .route:hover .arrow { transform: translateX(2px); }
  .actions { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
  @media (max-width: 640px) { .left, .routes { 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">Get started</p>
      <h2 class="h2" style="font-size:var(--step-6);max-width:14ch">Two ways in.</h2>
      <p class="muted" style="max-width:44ch">Whichever side you are on, the first conversation is free and covered by an NDA.</p>
      <div class="actions"><a class="btn" href="#talk">Talk to us</a><a class="tlink" href="#docs">Read the docs</a></div>
      <p class="mono muted">Replies within one working day</p>
    </div>
    <div class="routes">
      <a class="route" href="#sell"><span class="chip">A</span><span><h3 class="h3">My business has data to sell</h3><span class="small muted">See what it's worth in about a minute. Nothing identifiable needed.</span></span><span class="arrow" aria-hidden="true">→</span></a>
      <a class="route" href="#labs"><span class="chip">B</span><span><h3 class="h3">My lab needs training data</h3><span class="small muted">Tell us the capability; we scope the environment and the evals.</span></span><span class="arrow" aria-hidden="true">→</span></a>
    </div>
  </div>
</section>
</body>
</html>

Other patterns in this design

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