content.terminal-readme · README

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

Rule
A file-viewer window on 1–8 (title bar with the filename and size; the title as a markdown heading at step 5, a lead paragraph, a second paragraph, a text link) beside a surface pane on 9–12 of the same height listing three or four key/value facts (key in the accent).
Slots
sectionLabel, meta, title, body, body2, cta, caption, facts[3..4]
Grid areas
file 1-8 · aside 9-12 (12-column grid, 1-based inclusive spans)
Notes
Prefix the title with an accent "# " so it reads as markdown.
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 file-viewer window on 1–8: title bar with the filename (`README.md`) and size; inside, padded 6 units, the title as markdown (`# About`, accent `#`, step 5), a lead paragraph (max 64 ch), a second paragraph (max 72 ch) and a text link. Beside it on 9–12, stretched to the same height, a `surface` pane with a muted caption in its title bar and three or four facts split by dashed rules (key in the accent over its value: last edited, author, location, licence).

About

Booking projects from June 2026

How we think

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.

We hand over everything — source files, a living brand system and a website your team can edit without calling us.

Start a project

Corvid Robotics — identity

Hours

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

Where

Rua da Boavista 72, 1200-066 Lisboa

Contact

+351 21 340 5512

Layout tree (as in design/layout.json)
{
  "pattern": "content.terminal-readme",
  "kind": "content",
  "grid": {
    "file": "1-8",
    "aside": "9-12"
  },
  "slots": [
    "sectionLabel",
    "meta",
    "title",
    "body",
    "body2",
    "cta",
    "caption",
    "facts[3..4]"
  ],
  "notes": "Prefix the title with an accent \"# \" so it reads as markdown.",
  "tree": {
    "el": "grid",
    "gap": 4,
    "align": "stretch",
    "children": [
      {
        "el": "box",
        "span": "1-8",
        "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": "sectionLabel",
                "role": "small"
              },
              {
                "el": "text",
                "color": "textMuted",
                "slot": "meta",
                "role": "small"
              }
            ]
          },
          {
            "el": "box",
            "gap": 4,
            "pad": [
              6,
              6
            ],
            "children": [
              {
                "el": "text",
                "slot": "title",
                "role": "h2",
                "step": 5,
                "maxCh": 24
              },
              {
                "el": "text",
                "slot": "body",
                "role": "lead",
                "maxCh": 64
              },
              {
                "el": "text",
                "slot": "body2",
                "role": "body",
                "maxCh": 72
              },
              {
                "el": "button",
                "slot": "cta",
                "variant": "link"
              }
            ]
          }
        ]
      },
      {
        "el": "box",
        "span": "9-12",
        "bg": "surface",
        "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": "caption",
                "role": "small"
              }
            ]
          },
          {
            "el": "box",
            "pad": [
              4,
              4
            ],
            "children": [
              {
                "el": "repeat",
                "slot": "facts",
                "min": 3,
                "max": 4,
                "layout": "list",
                "gap": 3,
                "divider": true,
                "of": {
                  "el": "box",
                  "gap": 1,
                  "children": [
                    {
                      "el": "text",
                      "color": "link",
                      "slot": "label",
                      "role": "small",
                      "weight": 700
                    },
                    {
                      "el": "text",
                      "slot": "title",
                      "role": "body"
                    }
                  ]
                }
              }
            ]
          }
        ]
      }
    ]
  }
}

Other patterns in this design

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