hero.terminal-boot-log · Boot log

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

Rule
A terminal window on 1–8: a title bar, the headline, a short description, a boot log of [ OK ] lines and two bracketed buttons; beside it on 9–12 a small status pane (title bar + three or four key/value lines, like `uptime`).
Slots
eyebrow, meta, headline, subhead, facts[3..5], cta, cta2, caption, stats[3..4]
Grid areas
window 1-8 · status 9-12 (12-column grid, 1-based inclusive spans)
Notes
Title bar: the session path on the left ("~/acme — zsh — 80×24"), three muted dots or the clock on the right. Each fact renders as "[ OK ] Started …" with the bracket in the accent. Buttons are bracketed: "[ Get started ]".
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)
Section
vertical padding step 8

Pattern notes

  • A terminal window (1 px frame) on 1–8. Title bar: the session path on the left (`~/acme — zsh — 80×24`), a muted meta on the right. Inside, with generous padding: the headline in bold at step 5 (max 40 ch) followed by a block cursor, the description (max 64 ch), a boot log of three to five lines with no gap between them (`[ OK ]` in the accent + a short line), then a bracketed primary button and a ghost button. Beside it on 9–12, top-aligned, a small status pane (1 px frame, a title bar with a muted caption, then three or four `key value` lines with the value in the accent, like `uptime` output). At 375 px the pane drops below the window.

Brand & product studio

Booking projects from June 2026

We make complicated companies simple to choose

Northfold is a 14-person studio helping manufacturers, labs and B2B teams explain what they do — and look like they mean it.

Hours

Studio open Mon–Thu, 9:30–18:00

Where

Rua da Boavista 72, 1200-066 Lisboa

Contact

+351 21 340 5512

Good to know

Booking projects from June 2026

Start a projectRead case studies

Corvid Robotics — identity

launches shipped

140+

years independent

12

clients return

9 of 10

Layout tree (as in design/layout.json)
{
  "pattern": "hero.terminal-boot-log",
  "kind": "hero",
  "grid": {
    "window": "1-8",
    "status": "9-12"
  },
  "slots": [
    "eyebrow",
    "meta",
    "headline",
    "subhead",
    "facts[3..5]",
    "cta",
    "cta2",
    "caption",
    "stats[3..4]"
  ],
  "notes": "Title bar: the session path on the left (\"~/acme — zsh — 80×24\"), three muted dots or the clock on the right. Each fact renders as \"[ OK ] Started …\" with the bracket in the accent. Buttons are bracketed: \"[ Get started ]\".",
  "tree": {
    "el": "grid",
    "gap": 4,
    "align": "end",
    "children": [
      {
        "el": "box",
        "span": "1-8",
        "alignSelf": "start",
        "border": "all",
        "children": [
          {
            "el": "box",
            "mobile": "keep",
            "dir": "row",
            "gap": 2,
            "pad": [
              1,
              3
            ],
            "align": "center",
            "justify": "between",
            "wrap": true,
            "border": "bottom",
            "children": [
              {
                "el": "text",
                "color": "textMuted",
                "slot": "eyebrow",
                "role": "small"
              },
              {
                "el": "text",
                "color": "textMuted",
                "slot": "meta",
                "role": "small"
              }
            ]
          },
          {
            "el": "box",
            "gap": 4,
            "pad": [
              8,
              6
            ],
            "children": [
              {
                "el": "text",
                "slot": "headline",
                "role": "display",
                "step": 5,
                "leading": "tight",
                "maxCh": 40
              },
              {
                "el": "text",
                "slot": "subhead",
                "role": "body",
                "maxCh": 64
              },
              {
                "el": "repeat",
                "slot": "facts",
                "min": 3,
                "max": 5,
                "layout": "list",
                "gap": 0,
                "of": {
                  "el": "box",
                  "mobile": "keep",
                  "dir": "row",
                  "gap": 2,
                  "children": [
                    {
                      "el": "text",
                      "color": "link",
                      "slot": "label",
                      "role": "small",
                      "weight": 700
                    },
                    {
                      "el": "text",
                      "slot": "title",
                      "role": "small"
                    }
                  ]
                }
              },
              {
                "el": "box",
                "dir": "row",
                "gap": 3,
                "wrap": true,
                "children": [
                  {
                    "el": "button",
                    "slot": "cta",
                    "variant": "primary"
                  },
                  {
                    "el": "button",
                    "slot": "cta2",
                    "variant": "ghost"
                  }
                ]
              }
            ]
          }
        ]
      },
      {
        "el": "box",
        "span": "9-12",
        "alignSelf": "start",
        "border": "all",
        "children": [
          {
            "el": "box",
            "mobile": "keep",
            "dir": "row",
            "pad": [
              1,
              3
            ],
            "border": "bottom",
            "children": [
              {
                "el": "text",
                "color": "textMuted",
                "slot": "caption",
                "role": "small"
              }
            ]
          },
          {
            "el": "box",
            "pad": [
              3,
              3
            ],
            "children": [
              {
                "el": "repeat",
                "slot": "stats",
                "min": 3,
                "max": 4,
                "layout": "list",
                "gap": 1,
                "of": {
                  "el": "box",
                  "mobile": "keep",
                  "dir": "row",
                  "gap": 2,
                  "align": "baseline",
                  "justify": "between",
                  "children": [
                    {
                      "el": "text",
                      "color": "textMuted",
                      "slot": "title",
                      "role": "small"
                    },
                    {
                      "el": "text",
                      "color": "link",
                      "slot": "number",
                      "role": "small",
                      "weight": 700
                    }
                  ]
                }
              }
            ]
          }
        ]
      }
    ]
  }
}
Component example: reference/hero.terminal-boot-log.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
<title>hero.terminal-boot-log — Terminal Mono</title>
<link rel="stylesheet" href="base.css">
<style>
  .hero { min-height: 85vh; padding: calc(var(--unit) * 8) 0; align-items: start; row-gap: 16px; }
  .hero .window { grid-column: 1 / 9; }
  .hero .body { padding: calc(var(--unit) * 6) calc(var(--unit) * 4); display: grid; gap: calc(var(--unit) * 4); }
  .hero h1 { font-size: var(--step-5); max-width: 40ch; }
  .hero p { max-width: 64ch; }
  .log { list-style: none; padding: 0; font-size: calc(var(--base) * 0.9); }
  .log li::before { content: "[ OK ] "; color: var(--link); font-weight: 700; white-space: pre; }
  .actions { display: flex; gap: 12px; flex-wrap: wrap; }
  .status { grid-column: 9 / 13; align-self: start; }
  .status dl { padding: calc(var(--unit) * 3); display: grid; gap: var(--unit); font-size: calc(var(--base) * 0.9); }
  .status div { display: flex; justify-content: space-between; gap: 8px; }
  .status dd { color: var(--link); font-weight: 700; }
  @media (max-width: 640px) { .hero .window, .status { grid-column: 1 / -1; } }
</style>
</head>
<body>
<section class="wrap">
  <div class="hero grid">
    <div class="window">
      <div class="titlebar"><span>~/tidewave — zsh — 80×24</span><span>● ● ●</span></div>
      <div class="body">
        <h1 class="cursor">Local-first database sync for people who hate waiting.</h1>
        <p>Tidewave replicates Postgres to SQLite on every device and merges changes when they come back online.</p>
        <ul class="log">
          <li>Started replication on 3 devices</li>
          <li>Resolved 1,204 offline writes in 38 ms</li>
          <li>Reached zero conflicts since March</li>
        </ul>
        <div class="actions"><a class="btn" href="#start">Get started</a><a class="btn ghost" href="#docs">Read the docs</a></div>
      </div>
    </div>
    <aside class="status window">
      <div class="titlebar"><span>uptime</span></div>
      <dl>
        <div><dt class="muted">version</dt><dd>v2.4.1</dd></div>
        <div><dt class="muted">stars</dt><dd>12.3k</dd></div>
        <div><dt class="muted">licence</dt><dd>MIT</dd></div>
      </dl>
    </aside>
  </div>
</section>
</body>
</html>

Other patterns in this design

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