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 in the accent with a [ copy ] button on the same line, and a muted note.
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: a muted comment (`# install in one line`), the install command in bold accent mono with a small `[ copy ]` secondary button at the end of the same line, and a muted note under it.

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.

Start a project

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.

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": 3,
    "pad": [
      5,
      4
    ],
    "border": "all",
    "children": [
      {
        "el": "text",
        "color": "textMuted",
        "slot": "eyebrow",
        "role": "small"
      },
      {
        "el": "box",
        "mobile": "keep",
        "dir": "row",
        "gap": 3,
        "align": "center",
        "justify": "between",
        "wrap": true,
        "children": [
          {
            "el": "text",
            "color": "link",
            "slot": "statement",
            "role": "h3",
            "weight": 700,
            "font": "mono"
          },
          {
            "el": "button",
            "slot": "cta",
            "variant": "secondary",
            "size": "sm"
          }
        ]
      },
      {
        "el": "text",
        "color": "textMuted",
        "slot": "body",
        "role": "small"
      }
    ]
  }
}
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) * 5) calc(var(--unit) * 4); display: grid; gap: 12px; }
  .cmd { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
  .cmd code { font: 700 var(--step-2)/1.3 var(--font); color: var(--link); overflow-x: auto; white-space: nowrap; max-width: 100%; }
  .cmd .btn { background: transparent; color: var(--link); outline: 1px solid var(--accent); }
</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><button class="btn" type="button">copy</button></div>
    <p class="small muted">Works with Postgres 13+ and any SQLite build. Free for up to three replicas.</p>
  </div>
</section>
</body>
</html>

Other patterns in this design

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