features.terminal-man-page · Man page

A features pattern from Terminal Mono, drawn alone below with this design's tokens and sample copy. Used in this design on: home page, section 2. Give the section root data-pattern="features.terminal-man-page". A guide only: DESIGN.md and tokens.json are the source of truth.

Rule
A man page across the grid: the section heading in bold capitals on 1–12, the summary at step 4 on 2–10, then the options in two columns on 2–12: option name in the accent and bold, its explanation indented 6 units underneath (max 56 ch).
Slots
sectionLabel, title, features[4..8]
Grid areas
heading 1-12 · body 2-10 (12-column grid, 1-based inclusive spans)
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

  • Set like a man page spread across the grid: the section heading in bold accent capitals on 1–12 (`DESCRIPTION`), the summary as a step-4 statement on 2–10 (max 36 ch), then the options in two columns on 2–12 (six is the default; keep an even count so no column ends short): the option name at step 1 in the accent and bold (`-p, --port <n>`), its explanation indented 6 units underneath (max 56 ch). One column at phone width.

What you get

What we do

Positioning

Find the one sentence your best customers already believe.

Identity systems

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

Websites

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

Sales enablement

Decks, one-pagers and demos your reps actually use.

Product naming

Names that survive trademark search and a noisy trade show.

Brand governance

Guidelines as a living site, not a forgotten PDF.

Layout tree (as in design/layout.json)
{
  "pattern": "features.terminal-man-page",
  "kind": "features",
  "grid": {
    "heading": "1-12",
    "body": "2-10"
  },
  "slots": [
    "sectionLabel",
    "title",
    "features[4..8]"
  ],
  "tree": {
    "el": "grid",
    "gap": 4,
    "rowGap": 6,
    "children": [
      {
        "el": "text",
        "span": "1-12",
        "color": "link",
        "slot": "sectionLabel",
        "role": "label",
        "transform": "uppercase",
        "weight": 700
      },
      {
        "el": "text",
        "span": "2-10",
        "slot": "title",
        "role": "h2",
        "step": 4,
        "maxCh": 36
      },
      {
        "el": "repeat",
        "span": "2-12",
        "slot": "features",
        "min": 4,
        "max": 8,
        "layout": "grid",
        "cols": 2,
        "gap": 6,
        "of": {
          "el": "box",
          "gap": 1,
          "children": [
            {
              "el": "text",
              "color": "link",
              "slot": "title",
              "role": "h4"
            },
            {
              "el": "box",
              "pad": [
                0,
                6
              ],
              "children": [
                {
                  "el": "text",
                  "slot": "body",
                  "role": "body",
                  "maxCh": 56
                }
              ]
            }
          ]
        }
      }
    ]
  }
}
Component example: reference/features.terminal-man-page.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
<title>features.terminal-man-page — Terminal Mono</title>
<link rel="stylesheet" href="base.css">
<style>
  section { padding: var(--section) 0; }
  .man { row-gap: 24px; }
  .man h2 { grid-column: 1 / -1; text-transform: uppercase; font-size: var(--base); color: var(--link); }
  .man .summary { grid-column: 2 / 11; font: 700 var(--step-4)/1.15 var(--font); color: var(--heading); max-width: 36ch; }
  .man .opts { grid-column: 2 / 13; display: grid; grid-template-columns: 1fr 1fr; gap: 24px var(--gutter); }
  dt { color: var(--link); font-weight: 700; font-size: var(--step-1); }
  dd { margin: 4px 0 0; padding-left: 6ch; max-width: 56ch; }
  @media (max-width: 640px) { .man .opts { grid-template-columns: 1fr; } dd { padding-left: 4ch; } }
</style>
</head>
<body>
<section class="wrap">
  <div class="man grid">
    <h2>Options</h2>
    <p class="summary">tidewave sync [options] — keep every replica in step with the primary database.</p>
    <div class="opts">
      <dl><dt>--offline-first</dt><dd>Write to the local replica and queue changes until the network returns.</dd></dl>
      <dl><dt>--merge &lt;strategy&gt;</dt><dd>Resolve conflicting writes with last-writer-wins, CRDT or your own function.</dd></dl>
      <dl><dt>-w, --watch</dt><dd>Stream changes from the primary and apply them as they land, row by row.</dd></dl>
      <dl><dt>--encrypt</dt><dd>Encrypt every replica at rest with a per-device key; the server never sees it.</dd></dl>
      <dl><dt>--since &lt;lsn&gt;</dt><dd>Resume a replica from a log position instead of copying the whole table again.</dd></dl>
      <dl><dt>-q, --quiet</dt><dd>Print only conflicts and errors; everything else goes to the sync log.</dd></dl>
    </div>
  </div>
</section>
</body>
</html>

Other patterns in this design

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