list.desktop-file-explorer · Desktop file explorer

A list pattern from Desktop OS, drawn alone below with this design's tokens and sample copy. Used in this design on: home page, section 3. Give the section root data-pattern="list.desktop-file-explorer". A guide only: DESIGN.md and tokens.json are the source of truth.

Rule
A file-explorer window: title bar with a mono path, a toolbar row with the title and a button, a sidebar of places on 1–3 and the files as ruled rows (icon, name + line, mono meta) on 4–12, then a status bar.
Slots
caption, index, title, cta, sectionLabel, pages, items[5..7], hours, date
Grid areas
sidebar 1-3 · files 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

  • One file-explorer window: title bar with a mono path, a toolbar row (h2 at step 3 and a small secondary key, 1 px rule under), then a sidebar of places on 1–3 (muted mono label, plain links in a column; hidden on phones) and the files on 4–12 as ruled rows: a 40 px `accent2` square file icon, the name at 600 over a muted line, and a mono meta on the right. A status bar (mono hours and a date) closes the window.

Corvid Robotics — identity

06

Services

Start a project

Index

  • Services
  • Work
  • About
  • Contact

Discovery sprint

Two weeks of interviews, audits and competitor teardown.

2 weeks

Positioning workshop

A day with your leadership to agree on one story.

1 day

Identity design

Logo, type, colour, motion and a working toolkit.

8 weeks

Website

Strategy, copy, design and build in Webflow or Next.js.

10 weeks

Launch support

Training, templates and a month of on-call design.

4 weeks

Retainer

A senior designer embedded two days a week.

Ongoing

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

Apr 3, 2026

Layout tree (as in design/layout.json)
{
  "pattern": "list.desktop-file-explorer",
  "kind": "list",
  "grid": {
    "sidebar": "1-3",
    "files": "4-12"
  },
  "slots": [
    "caption",
    "index",
    "title",
    "cta",
    "sectionLabel",
    "pages",
    "items[5..7]",
    "hours",
    "date"
  ],
  "tree": {
    "el": "box",
    "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": "box",
        "dir": "row",
        "gap": 4,
        "pad": [
          3,
          4
        ],
        "align": "center",
        "justify": "between",
        "border": "bottom",
        "children": [
          {
            "el": "text",
            "slot": "title",
            "role": "h2",
            "step": 3,
            "weight": 700,
            "tracking": "tight",
            "leading": "tight"
          },
          {
            "el": "button",
            "slot": "cta",
            "variant": "secondary",
            "size": "sm"
          }
        ]
      },
      {
        "el": "grid",
        "gap": 0,
        "align": "start",
        "children": [
          {
            "el": "box",
            "span": "1-3",
            "mobile": "hide",
            "gap": 3,
            "pad": [
              5,
              4
            ],
            "children": [
              {
                "el": "text",
                "color": "textMuted",
                "slot": "sectionLabel",
                "role": "label",
                "font": "mono"
              },
              {
                "el": "nav-links",
                "slot": "pages",
                "dir": "col",
                "style": "plain"
              }
            ]
          },
          {
            "el": "repeat",
            "span": "4-12",
            "slot": "items",
            "min": 5,
            "max": 7,
            "layout": "list",
            "gap": 0,
            "divider": true,
            "of": {
              "el": "box",
              "mobile": "keep",
              "dir": "row",
              "gap": 4,
              "pad": [
                3,
                4
              ],
              "align": "center",
              "children": [
                {
                  "el": "shape",
                  "kind": "square",
                  "size": "sm",
                  "fill": "accent2"
                },
                {
                  "el": "box",
                  "gap": 1,
                  "children": [
                    {
                      "el": "text",
                      "slot": "title",
                      "role": "body",
                      "weight": 600
                    },
                    {
                      "el": "text",
                      "color": "textMuted",
                      "slot": "body",
                      "role": "small",
                      "maxCh": 70
                    }
                  ]
                },
                {
                  "el": "text",
                  "mobile": "hide",
                  "color": "textMuted",
                  "slot": "meta",
                  "role": "label",
                  "font": "mono"
                }
              ]
            }
          }
        ]
      },
      {
        "el": "box",
        "dir": "row",
        "gap": 4,
        "pad": [
          2,
          4
        ],
        "align": "center",
        "justify": "between",
        "border": "top",
        "children": [
          {
            "el": "text",
            "color": "textMuted",
            "slot": "hours",
            "role": "label",
            "font": "mono"
          },
          {
            "el": "text",
            "color": "textMuted",
            "slot": "date",
            "role": "label",
            "font": "mono"
          }
        ]
      }
    ]
  }
}
Component example: reference/list.desktop-file-explorer.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
<title>list.desktop-file-explorer — Desktop OS</title>
<link rel="stylesheet" href="base.css">
<style>
  section { padding: var(--section) 0; }
  .toolbar { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 12px 16px; border-bottom: 1px solid var(--border); }
  .toolbar h2 { font-size: var(--step-3); }
  .key.sm { padding: 8px 12px; font-size: 14px; }
  .explorer { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .places { grid-column: 1 / 4; padding: 20px 16px; display: grid; gap: 12px; align-content: start; border-right: 1px solid var(--border); }
  .places a { display: block; color: var(--heading); text-decoration: none; padding: 2px 0; }
  .files { grid-column: 4 / 13; list-style: none; padding: 0; }
  .files li { display: flex; align-items: center; gap: 16px; padding: 12px 16px; border-bottom: 1px solid var(--border); }
  .files li:last-child { border-bottom: 0; }
  .files .ico { width: 40px; height: 40px; flex: none; background: var(--accent2); border-radius: 4px; }
  .files .name { flex: 1; min-width: 0; }
  .files b { display: block; color: var(--heading); font-weight: 600; }
  @media (max-width: 640px) { .places { display: none; } .files { grid-column: 1 / -1; } .files .mono { display: none; } }
</style>
</head>
<body>
<section class="wrap">
  <div class="window">
    <div class="titlebar"><span class="title">~/handbook/how-we-work</span><span class="mono muted hide-sm">6 items</span><span class="controls" aria-hidden="true"><i></i><i></i><i></i></span></div>
    <div class="toolbar"><h2>How we work</h2><a class="key secondary sm" href="/handbook">Open handbook</a></div>
    <div class="explorer">
      <nav class="places" aria-label="Places"><span class="mono muted">Places</span><a href="#">Handbook</a><a href="#">Changelog</a><a href="#">Roadmap</a><a href="#">Careers</a></nav>
      <ul class="files">
        <li><span class="ico" aria-hidden="true"></span><span class="name"><b>Ship small, ship daily</b><span class="muted">Most changes go out the day they're written.</span></span><span class="mono muted">updated 2d ago</span></li>
        <li><span class="ico" aria-hidden="true"></span><span class="name"><b>Everything is public</b><span class="muted">Strategy, pay bands and this list are all on the site.</span></span><span class="mono muted">updated 1w ago</span></li>
        <li><span class="ico" aria-hidden="true"></span><span class="name"><b>Engineers do support</b><span class="muted">The person who built it answers the ticket.</span></span><span class="mono muted">updated 3w ago</span></li>
        <li><span class="ico" aria-hidden="true"></span><span class="name"><b>No sales calls, ever</b><span class="muted">Pricing is a page, not a conversation.</span></span><span class="mono muted">updated 2m ago</span></li>
        <li><span class="ico" aria-hidden="true"></span><span class="name"><b>Write it down</b><span class="muted">If it isn't in the handbook, it didn't happen.</span></span><span class="mono muted">updated 4m ago</span></li>
      </ul>
    </div>
    <div class="statusbar"><span>Last synced 09:41</span><span>5 of 5 shown</span></div>
  </div>
</section>
</body>
</html>

Other patterns in this design

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