content.desktop-readme-doc · Desktop readme doc

A content pattern from Desktop OS, 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.desktop-readme-doc". A guide only: DESIGN.md and tokens.json are the source of truth.

Rule
Docs as a document window: a mono contents list on 1–3, and on 4–12 a window with the title, lead, body, a left-ruled note callout, a numbered checklist and a second paragraph.
Slots
sectionLabel, pages, caption, date, title, lead, body, label, note, features[3..4], body2
Grid areas
contents 1-3 · doc 4-12 (12-column grid, 1-based inclusive spans)
Tokens
bg #E3E5DA · text #272921 · heading #121309 · accent #EDA12F · accent2 #55A9FF · Onest / Onest · radius 8px · space unit 4px (full list in design/tokens.json)

Pattern notes

  • Docs as a document. A mono "contents" label and numbered links on 1–3 (hidden on phones), and on 4–12 a window (title bar with a file path) holding the h2 at step 5, a lead, a paragraph (≤70 ch), a note callout (surfaceAlt, 1 px left rule, mono label in `link`, one paragraph), a numbered checklist (mono index, bold title, muted line) and a closing paragraph. Use the highlighter on two key phrases.

Corvid Robotics — identity

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.

About

Booking projects from June 2026

01

Positioning

Find the one sentence your best customers already believe.

02

Identity systems

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

03

Websites

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

Our team is eleven people: strategists, writers, designers and two engineers who ship what the others draw.

Layout tree (as in design/layout.json)
{
  "pattern": "content.desktop-readme-doc",
  "kind": "content",
  "grid": {
    "contents": "1-3",
    "doc": "4-12"
  },
  "slots": [
    "sectionLabel",
    "pages",
    "caption",
    "date",
    "title",
    "lead",
    "body",
    "label",
    "note",
    "features[3..4]",
    "body2"
  ],
  "tree": {
    "el": "grid",
    "gap": 6,
    "align": "start",
    "children": [
      {
        "el": "box",
        "span": "1-3",
        "mobile": "hide",
        "gap": 3,
        "pad": [
          4,
          0
        ],
        "children": [
          {
            "el": "text",
            "color": "textMuted",
            "slot": "sectionLabel",
            "role": "label",
            "font": "mono"
          },
          {
            "el": "nav-links",
            "slot": "pages",
            "dir": "col",
            "style": "numbered"
          }
        ]
      },
      {
        "el": "box",
        "span": "4-12",
        "bg": "surface",
        "gap": 0,
        "pad": 0,
        "children": [
          {
            "el": "box",
            "dir": "row",
            "gap": 3,
            "pad": [
              2,
              4
            ],
            "align": "center",
            "justify": "between",
            "border": "bottom",
            "children": [
              {
                "el": "text",
                "color": "heading",
                "slot": "caption",
                "role": "label",
                "font": "mono"
              },
              {
                "el": "text",
                "mobile": "hide",
                "color": "textMuted",
                "slot": "date",
                "role": "label",
                "font": "mono"
              }
            ]
          },
          {
            "el": "box",
            "gap": 5,
            "pad": [
              10,
              10
            ],
            "children": [
              {
                "el": "text",
                "slot": "title",
                "role": "h2",
                "step": 5,
                "weight": 700,
                "tracking": "tight",
                "leading": "tight",
                "maxCh": 28
              },
              {
                "el": "text",
                "slot": "lead",
                "role": "lead",
                "maxCh": 64
              },
              {
                "el": "text",
                "slot": "body",
                "role": "body",
                "maxCh": 70
              },
              {
                "el": "box",
                "bg": "surfaceAlt",
                "gap": 2,
                "pad": [
                  4,
                  5
                ],
                "border": "left",
                "children": [
                  {
                    "el": "text",
                    "color": "link",
                    "slot": "label",
                    "role": "label",
                    "font": "mono"
                  },
                  {
                    "el": "text",
                    "slot": "note",
                    "role": "body",
                    "maxCh": 64
                  }
                ]
              },
              {
                "el": "repeat",
                "slot": "features",
                "min": 3,
                "max": 4,
                "layout": "list",
                "gap": 3,
                "of": {
                  "el": "box",
                  "mobile": "keep",
                  "dir": "row",
                  "gap": 3,
                  "align": "baseline",
                  "children": [
                    {
                      "el": "text",
                      "color": "link",
                      "slot": "number",
                      "role": "label",
                      "font": "mono"
                    },
                    {
                      "el": "box",
                      "gap": 1,
                      "children": [
                        {
                          "el": "text",
                          "slot": "title",
                          "role": "body",
                          "weight": 700
                        },
                        {
                          "el": "text",
                          "color": "textMuted",
                          "slot": "body",
                          "role": "small"
                        }
                      ]
                    }
                  ]
                }
              },
              {
                "el": "text",
                "slot": "body2",
                "role": "body",
                "maxCh": 70
              }
            ]
          }
        ]
      }
    ]
  }
}

Other patterns in this design

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