hero.interactive-terminal · Interactive terminal

A hero pattern from the hero library, 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.interactive-terminal". A guide only: DESIGN.md and tokens.json are the source of truth.

Rule
Copy in 1–5 (mono eyebrow, headline, subhead, CTA, install line); a tall terminal window in 6–12 on surfaceAlt: a ruled title bar with the path, 4–7 mono prompt/output rows that type themselves, and a block cursor in the accent.
Slots
eyebrow, headline, subhead, cta, meta, caption, items[4..7]
Grid areas
copy 1-5 · terminal 6-12 (12-column grid, 1-based inclusive spans)
Notes
Lines type in once on load (20–35 ms per character), then the prompt accepts a few real commands (help, install, docs, pricing) that print short answers or navigate. Reduced motion: render all lines at once. The terminal is an aria-live="polite" region; the copy column alone must make sense without it.
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)

Do

  • Draw a tall terminal window in 6–12: surfaceAlt fill, border, a ruled title bar with the path, then 4–7 mono rows at body size and a block cursor in the accent.
  • Each row: a bold prompt or marker, then the command or its output.
  • Type the rows in once on load, then accept 3–5 real commands (help, install, docs, pricing).
  • Put the real install command as a mono meta line under the CTA so it can be copied without the terminal.

Don't

  • Don't make the terminal the only place information lives.
  • Don't loop the typing or fake errors.
  • Don't use neon green on black unless the style's palette is exactly that.

Phone width

  • Copy first, then the terminal at full width with each row kept on one line (marker and command side by side, wrapping only inside the command); disable input on touch (static lines).

Brand & product studio

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.

Start a project

Booking projects from June 2026

Corvid Robotics — identity

2 weeks

Discovery sprint

1 day

Positioning workshop

8 weeks

Identity design

10 weeks

Website

4 weeks

Launch support

Layout tree (as in design/layout.json)
{
  "pattern": "hero.interactive-terminal",
  "kind": "hero",
  "grid": {
    "copy": "1-5",
    "terminal": "6-12"
  },
  "slots": [
    "eyebrow",
    "headline",
    "subhead",
    "cta",
    "meta",
    "caption",
    "items[4..7]"
  ],
  "notes": "Lines type in once on load (20–35 ms per character), then the prompt accepts a few real commands (help, install, docs, pricing) that print short answers or navigate. Reduced motion: render all lines at once. The terminal is an aria-live=\"polite\" region; the copy column alone must make sense without it.",
  "tree": {
    "el": "grid",
    "gap": 4,
    "align": "center",
    "minVh": 0.85,
    "children": [
      {
        "el": "box",
        "span": "1-5",
        "gap": 4,
        "children": [
          {
            "el": "text",
            "slot": "eyebrow",
            "role": "eyebrow",
            "font": "mono"
          },
          {
            "el": "text",
            "slot": "headline",
            "role": "h1",
            "step": 5,
            "leading": "tight",
            "maxCh": 14
          },
          {
            "el": "text",
            "slot": "subhead",
            "role": "body",
            "maxCh": 36
          },
          {
            "el": "button",
            "slot": "cta",
            "variant": "primary",
            "arrow": true
          },
          {
            "el": "text",
            "color": "textMuted",
            "slot": "meta",
            "role": "small",
            "font": "mono"
          }
        ]
      },
      {
        "el": "box",
        "span": "6-12",
        "bg": "surfaceAlt",
        "gap": 3,
        "pad": [
          4,
          4
        ],
        "border": "all",
        "minVh": 0.5,
        "children": [
          {
            "el": "box",
            "gap": 2,
            "pad": [
              0,
              0
            ],
            "border": "bottom",
            "children": [
              {
                "el": "text",
                "color": "textMuted",
                "slot": "caption",
                "role": "small",
                "font": "mono"
              }
            ]
          },
          {
            "el": "repeat",
            "slot": "items",
            "min": 4,
            "max": 7,
            "layout": "list",
            "gap": 2,
            "of": {
              "el": "box",
              "mobile": "keep",
              "dir": "row",
              "gap": 3,
              "align": "baseline",
              "children": [
                {
                  "el": "text",
                  "color": "textMuted",
                  "slot": "label",
                  "role": "body",
                  "font": "mono"
                },
                {
                  "el": "text",
                  "color": "text",
                  "slot": "title",
                  "role": "body",
                  "font": "mono"
                }
              ]
            }
          },
          {
            "el": "shape",
            "kind": "bar",
            "size": "sm",
            "fill": "accent"
          }
        ]
      }
    ]
  }
}

Other patterns in this design

Whole design · Spec bundle (JSON) · Hero library page