blog.desktop-changelog · Desktop changelog

A blog pattern from Desktop OS, drawn alone below with this design's tokens and sample copy. Not used in this design: shown with its tokens for comparison. Give the section root data-pattern="blog.desktop-changelog". A guide only: DESIGN.md and tokens.json are the source of truth.

Rule
Intro and a secondary button on 1–4; on 5–12 a changelog window listing releases as ruled rows: a mono date chip on surfaceAlt, then the title and a muted line.
Slots
sectionLabel, title, body, cta, caption, index, posts[4..6]
Grid areas
intro 1-4 · log 5-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

  • Intro on 1–4 (mono label, h2 at step 5, muted paragraph, secondary key). On 5–12 a changelog window: four to six ruled rows, each a mono date chip on surfaceAlt, then the title (h4, 700) over a muted line (≤70 ch).

Journal

Field notes

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.

Start a project

Corvid Robotics — identity

Apr 3, 2026 · 8 min

Your homepage is a sales call nobody attends

What lost-deal interviews reveal about B2B websites.

Mar 1, 2026 · 5 min

The case against the brand book

Why guidelines belong in a website your team visits.

Jan 22, 2026 · 6 min

Naming a product in 2026

Trademarks, domains and the 400-name longlist.

Dec 9, 2025 · 4 min

Industrial brands deserve good type

Notes from rebranding a valve manufacturer.

Layout tree (as in design/layout.json)
{
  "pattern": "blog.desktop-changelog",
  "kind": "blog",
  "grid": {
    "intro": "1-4",
    "log": "5-12"
  },
  "slots": [
    "sectionLabel",
    "title",
    "body",
    "cta",
    "caption",
    "index",
    "posts[4..6]"
  ],
  "tree": {
    "el": "grid",
    "gap": 6,
    "align": "start",
    "children": [
      {
        "el": "box",
        "span": "1-4",
        "gap": 4,
        "children": [
          {
            "el": "text",
            "color": "link",
            "slot": "sectionLabel",
            "role": "label",
            "font": "mono"
          },
          {
            "el": "text",
            "slot": "title",
            "role": "h2",
            "step": 5,
            "weight": 700,
            "tracking": "tight",
            "leading": "tight"
          },
          {
            "el": "text",
            "color": "textMuted",
            "slot": "body",
            "role": "body"
          },
          {
            "el": "button",
            "slot": "cta",
            "variant": "secondary"
          }
        ]
      },
      {
        "el": "box",
        "span": "5-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": "index",
                "role": "label",
                "font": "mono"
              }
            ]
          },
          {
            "el": "repeat",
            "slot": "posts",
            "min": 4,
            "max": 6,
            "layout": "list",
            "gap": 0,
            "divider": true,
            "of": {
              "el": "box",
              "dir": "row",
              "gap": 5,
              "pad": [
                4,
                6
              ],
              "align": "start",
              "children": [
                {
                  "el": "text",
                  "bg": "surfaceAlt",
                  "slot": "meta",
                  "role": "label",
                  "font": "mono"
                },
                {
                  "el": "box",
                  "gap": 1,
                  "children": [
                    {
                      "el": "text",
                      "slot": "title",
                      "role": "h4",
                      "weight": 700
                    },
                    {
                      "el": "text",
                      "color": "textMuted",
                      "slot": "body",
                      "role": "small",
                      "maxCh": 70
                    }
                  ]
                }
              ]
            }
          }
        ]
      }
    ]
  }
}

Other patterns in this design

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