cta.isometric-build-panel · Isometric build panel

A cta pattern from Isometric Line, drawn alone below with this design's tokens and sample copy. Used in this design on: home page, section 8. Give the section root data-pattern="cta.isometric-build-panel". A guide only: DESIGN.md and tokens.json are the source of truth.

Rule
One bordered surface panel: title at step 6, a line and an inline email form in 1–7; a drawing of the finished build (accent block on top) fills 8–12 on surfaceAlt.
Slots
label, title, body, newsletter, meta, drawing
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)

Pattern notes

  • One `surface` panel with a 1.5 px border. Columns 1–7 (40 × 32 px padding): mono label, h2 at step 6 (≤18 ch), a muted line, an inline email form and a mono note. Columns 8–12: the finished build drawn large on `surfaceAlt`, filling the panel height, its top block in the accent.

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.

you@example.com
Subscribe

Booking projects from June 2026

Layout tree (as in design/layout.json)
{
  "pattern": "cta.isometric-build-panel",
  "kind": "cta",
  "slots": [
    "label",
    "title",
    "body",
    "newsletter",
    "meta",
    "drawing"
  ],
  "tree": {
    "el": "box",
    "bg": "surface",
    "border": "all",
    "children": [
      {
        "el": "grid",
        "gap": 0,
        "align": "stretch",
        "children": [
          {
            "el": "box",
            "span": "1-7",
            "gap": 4,
            "pad": [
              10,
              8
            ],
            "justify": "center",
            "children": [
              {
                "el": "text",
                "color": "link",
                "slot": "label",
                "role": "label",
                "font": "mono"
              },
              {
                "el": "text",
                "slot": "title",
                "role": "h2",
                "step": 6,
                "weight": 600,
                "tracking": "tight",
                "leading": "tight",
                "maxCh": 18
              },
              {
                "el": "text",
                "color": "textMuted",
                "slot": "body",
                "role": "body",
                "maxCh": 44
              },
              {
                "el": "form",
                "slot": "newsletter",
                "fields": [
                  "email"
                ],
                "inline": true
              },
              {
                "el": "text",
                "color": "textMuted",
                "slot": "meta",
                "role": "small",
                "font": "mono"
              }
            ]
          },
          {
            "el": "media",
            "span": "8-12",
            "bg": "surfaceAlt",
            "slot": "drawing",
            "treatment": "isometric",
            "fill": true,
            "frame": "none"
          }
        ]
      }
    ]
  }
}
Component example: reference/cta.isometric-build-panel.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
<title>cta.isometric-build-panel — Isometric Line</title>
<link rel="stylesheet" href="base.css">
<style>
section { padding: var(--section) 0; }
  .panel { background: var(--surface); display: grid; grid-template-columns: 7fr 5fr; }
  .panel .copy { padding: 40px 32px; display: flex; flex-direction: column; gap: 16px; justify-content: center; }
  .panel h2 { font-size: var(--step-6); max-width: 18ch; }
  .panel form { display: flex; gap: 8px; flex-wrap: wrap; }
  .panel input { height: 44px; flex: 1 1 220px; padding: 0 14px; font: inherit; background: var(--bg); color: var(--text); border: var(--stroke) solid var(--heading); border-radius: var(--radius); }
  .panel .art { background: var(--surface-alt); border-left: var(--stroke) solid var(--heading); display: grid; place-items: center; padding: 24px; }
  @media (max-width: 640px) { .panel { grid-template-columns: 1fr; } .panel .art { border-left: 0; border-top: var(--stroke) solid var(--heading); } }
</style>
</head>
<body>
<section class="wrap"><div class="panel frame">
  <div class="copy">
    <span class="mono link">Start free</span>
    <h2>Draw your first stack this afternoon.</h2>
    <p class="muted">Free for one stack and three blocks. No card, no sales call.</p>
    <form><input type="email" placeholder="you@company.com" aria-label="Email"><button class="btn btn-primary" type="submit">Get access</button></form>
    <span class="mono muted">Used by 4,200 teams · SOC 2 Type II</span>
  </div>
  <div class="art"><svg class="iso" viewBox="0 0 309 268" role="img" aria-label="Slices stacked"><polygon class="l" points="16.0,172.0 154.6,252.0 154.6,246.0 16.0,166.0"/><polygon class="r" points="293.2,172.0 154.6,252.0 154.6,246.0 293.2,166.0"/><polygon class="t" points="154.6,86.0 293.2,166.0 154.6,246.0 16.0,166.0"/><polygon class="l" points="68.0,166.0 154.6,216.0 154.6,188.0 68.0,138.0"/><polygon class="r" points="241.2,166.0 154.6,216.0 154.6,188.0 241.2,138.0"/><polygon class="t" points="154.6,88.0 241.2,138.0 154.6,188.0 68.0,138.0"/><polygon class="l" points="68.0,130.0 154.6,180.0 154.6,152.0 68.0,102.0"/><polygon class="r" points="241.2,130.0 154.6,180.0 154.6,152.0 241.2,102.0"/><polygon class="t" points="154.6,52.0 241.2,102.0 154.6,152.0 68.0,102.0"/><polygon class="l" points="68.0,94.0 154.6,144.0 154.6,116.0 68.0,66.0"/><polygon class="r" points="241.2,94.0 154.6,144.0 154.6,116.0 241.2,66.0"/><polygon class="a" points="154.6,16.0 241.2,66.0 154.6,116.0 68.0,66.0"/></svg></div>
</div></section>
</body>
</html>

Other patterns in this design

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