cta.terminal-install-command · Install command

A cta pattern from Terminal Mono, 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="cta.terminal-install-command". A guide only: DESIGN.md and tokens.json are the source of truth.

Rule
A framed surface block: a muted # comment, the install command at step 5 in bold accent mono, then a muted note with a bracketed primary button at the end of the same row.
Slots
eyebrow, statement, cta, body
Tokens
bg #0B0F0C · text #C8D3C5 · heading #E6F0E3 · accent #3DDC84 · accent2 #279558 · JetBrains Mono / JetBrains Mono · radius 0px · space unit 4px (full list in design/tokens.json)

Pattern notes

  • A framed `surface` block padded 8 × 6 units: a muted comment (`# install in one line`), the install command at step 5 in bold accent mono (scrolls horizontally rather than wrapping), then one row with a muted note on the left and a bracketed primary button (`[ copy command ]`) on the right.

Brand & product studio

Most rebrands fail because they start with a logo. Ours start with a sales call recording and a spreadsheet of lost deals.

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 project
Layout tree (as in design/layout.json)
{
  "pattern": "cta.terminal-install-command",
  "kind": "cta",
  "slots": [
    "eyebrow",
    "statement",
    "cta",
    "body"
  ],
  "tree": {
    "el": "box",
    "bg": "surface",
    "gap": 4,
    "pad": [
      8,
      6
    ],
    "border": "all",
    "children": [
      {
        "el": "text",
        "color": "textMuted",
        "slot": "eyebrow",
        "role": "small"
      },
      {
        "el": "text",
        "color": "link",
        "slot": "statement",
        "role": "h2",
        "step": 5,
        "weight": 700,
        "maxCh": 32,
        "font": "mono"
      },
      {
        "el": "box",
        "dir": "row",
        "gap": 3,
        "align": "center",
        "justify": "between",
        "wrap": true,
        "children": [
          {
            "el": "text",
            "color": "textMuted",
            "slot": "body",
            "role": "body",
            "maxCh": 64
          },
          {
            "el": "button",
            "slot": "cta",
            "variant": "primary"
          }
        ]
      }
    ]
  }
}
Component example: reference/cta.terminal-install-command.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
<title>cta.terminal-install-command — Terminal Mono</title>
<link rel="stylesheet" href="base.css">
<style>
  section { padding: var(--section) 0; }
  .install { background: var(--surface); border: 1px solid var(--rule); padding: calc(var(--unit) * 8) calc(var(--unit) * 6); display: grid; gap: 16px; }
  .cmd code { display: block; font: 700 clamp(1.6rem, 4.5vw, var(--step-5))/1.15 var(--font); color: var(--link); overflow-x: auto; white-space: nowrap; max-width: 100%; }
  .row { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
</style>
</head>
<body>
<section class="wrap">
  <div class="install">
    <p class="small muted"># install in one line, no account needed</p>
    <div class="cmd"><code>$ npx tidewave init</code></div>
    <div class="row"><p class="muted">Works with Postgres 13+ and any SQLite build. Free for up to three replicas.</p><a class="btn" href="#start">[ copy command ]</a></div>
  </div>
</section>
</body>
</html>

Other patterns in this design

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