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
Set like a man page: an uppercase bold section heading flush left, then an indented description and options on 2–10 — each option name in the accent with its explanation indented under it.
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 exactly like a man page: the section heading in bold capitals flush left across the grid (`DESCRIPTION`), the summary paragraph indented on 2–10, then four to eight options on 2–10: the option name in the accent and bold (`-p, --port <n>`), its explanation indented a further 8 units underneath (max 64 ch).

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": 2,
    "rowGap": 3,
    "children": [
      {
        "el": "text",
        "span": "1-12",
        "slot": "sectionLabel",
        "role": "label",
        "transform": "uppercase",
        "weight": 700
      },
      {
        "el": "text",
        "span": "2-10",
        "slot": "title",
        "role": "body",
        "maxCh": 72
      },
      {
        "el": "repeat",
        "span": "2-10",
        "slot": "features",
        "min": 4,
        "max": 8,
        "layout": "list",
        "gap": 3,
        "of": {
          "el": "box",
          "gap": 1,
          "children": [
            {
              "el": "text",
              "color": "link",
              "slot": "title",
              "role": "label",
              "weight": 700
            },
            {
              "el": "box",
              "pad": [
                0,
                8
              ],
              "children": [
                {
                  "el": "text",
                  "slot": "body",
                  "role": "body",
                  "maxCh": 64
                }
              ]
            }
          ]
        }
      }
    ]
  }
}
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: 12px; }
  .man h2 { grid-column: 1 / -1; text-transform: uppercase; font-size: var(--base); }
  .man .summary, .man dl { grid-column: 2 / 11; max-width: 72ch; }
  dl { display: grid; gap: 12px; }
  dt { color: var(--link); font-weight: 700; }
  dd { margin: 0; padding-left: 8ch; max-width: 64ch; }
  @media (max-width: 640px) { 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>
    <dl>
      <dt>--offline-first</dt><dd>Write to the local replica and queue changes until the network returns.</dd>
      <dt>--merge &lt;strategy&gt;</dt><dd>Resolve conflicting writes with last-writer-wins, CRDT or your own function.</dd>
      <dt>-w, --watch</dt><dd>Stream changes from the primary and apply them as they land, row by row.</dd>
      <dt>--encrypt</dt><dd>Encrypt every replica at rest with a per-device key; the server never sees it.</dd>
    </dl>
  </div>
</section>
</body>
</html>

Other patterns in this design

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