hero.desktop-window-stack · Desktop window stack

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

Rule
The hero is a desktop: a column of labelled pixel icons in column 1 and one big app window across 2–12 with a title bar, the message, a setup checklist card and a status bar.
Slots
pages[5..6], caption, meta, eyebrow, headline, subhead, tagline, label, features[3..3], cta, cta2, stats[3..3]
Grid areas
icons 1-1 · window 2-12 · message 1-7 · setup 8-12 (12-column grid, 1-based inclusive spans)
Notes
Icons sit straight on the wallpaper (bg), never in a panel. The window is the only surface; the setup card inside it is a nested panel with the bevel edge.
Tokens
bg #E3E5DA · text #272921 · heading #121309 · accent #EDA12F · accent2 #55A9FF · Onest / Onest · radius 8px · space unit 4px (full list in design/tokens.json)
Section
vertical padding step 4

Pattern notes

  • The default hero. Grid column 1 holds five or six desktop icons stacked straight on the wallpaper (pixel glyph 1:1 over a centred small label, 24 px apart). Columns 2–12 hold one app window: title bar (mono window title left, mono meta right), then a body padded 40 × 32 px split 1–7 / 8–12. Left: mono eyebrow in `link`, the headline at step 6 (700, tight, ≤20 ch), the lead (≤52 ch) and a muted line. Right: a nested setup card (surface panel with the bevel edge, 24 px padding) with a mono label in `link`, a three-row checklist (mono `01` index in `link` + the item at weight 600) and a primary + secondary key. Under the body a status bar row (1 px rule above) with three mono readouts (number in `link`, muted label). Phone: icons hidden, window full width, columns stack.

Corvid Robotics — identity

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.

Strategy and design for companies that make things

Introducing

01

Positioning

02

Identity systems

03

Websites

Start a projectRead case studies

140+

launches shipped

12

years independent

9 of 10

clients return

Layout tree (as in design/layout.json)
{
  "pattern": "hero.desktop-window-stack",
  "kind": "hero",
  "grid": {
    "icons": "1-1",
    "window": "2-12",
    "message": "1-7",
    "setup": "8-12"
  },
  "slots": [
    "pages[5..6]",
    "caption",
    "meta",
    "eyebrow",
    "headline",
    "subhead",
    "tagline",
    "label",
    "features[3..3]",
    "cta",
    "cta2",
    "stats[3..3]"
  ],
  "notes": "Icons sit straight on the wallpaper (bg), never in a panel. The window is the only surface; the setup card inside it is a nested panel with the bevel edge.",
  "tree": {
    "el": "grid",
    "gap": 4,
    "align": "start",
    "children": [
      {
        "el": "repeat",
        "span": "1-1",
        "mobile": "hide",
        "slot": "pages",
        "min": 5,
        "max": 6,
        "layout": "list",
        "gap": 6,
        "of": {
          "el": "box",
          "alignSelf": "center",
          "gap": 1,
          "align": "center",
          "maxCh": 8,
          "children": [
            {
              "el": "media",
              "slot": "image",
              "aspect": "1/1",
              "treatment": "pixel",
              "frame": "none"
            },
            {
              "el": "text",
              "slot": "title",
              "role": "small",
              "align": "center",
              "weight": 600
            }
          ]
        }
      },
      {
        "el": "box",
        "span": "2-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": "meta",
                "role": "label",
                "font": "mono"
              }
            ]
          },
          {
            "el": "grid",
            "gap": 8,
            "pad": [
              10,
              8
            ],
            "align": "center",
            "children": [
              {
                "el": "box",
                "span": "1-7",
                "gap": 5,
                "children": [
                  {
                    "el": "text",
                    "color": "link",
                    "slot": "eyebrow",
                    "role": "label",
                    "font": "mono"
                  },
                  {
                    "el": "text",
                    "slot": "headline",
                    "role": "display",
                    "step": 6,
                    "weight": 700,
                    "tracking": "tight",
                    "leading": "tight",
                    "maxCh": 20
                  },
                  {
                    "el": "text",
                    "slot": "subhead",
                    "role": "lead",
                    "maxCh": 52
                  },
                  {
                    "el": "text",
                    "color": "textMuted",
                    "slot": "tagline",
                    "role": "body",
                    "maxCh": 52
                  }
                ]
              },
              {
                "el": "box",
                "span": "8-12",
                "bg": "surface",
                "gap": 4,
                "pad": [
                  6,
                  6
                ],
                "children": [
                  {
                    "el": "text",
                    "color": "link",
                    "slot": "label",
                    "role": "label",
                    "font": "mono"
                  },
                  {
                    "el": "repeat",
                    "slot": "features",
                    "min": 3,
                    "max": 3,
                    "layout": "list",
                    "gap": 2,
                    "of": {
                      "el": "box",
                      "mobile": "keep",
                      "dir": "row",
                      "gap": 3,
                      "align": "baseline",
                      "children": [
                        {
                          "el": "text",
                          "color": "link",
                          "slot": "number",
                          "role": "label",
                          "font": "mono"
                        },
                        {
                          "el": "text",
                          "slot": "title",
                          "role": "body",
                          "weight": 600
                        }
                      ]
                    }
                  },
                  {
                    "el": "box",
                    "dir": "row",
                    "gap": 3,
                    "align": "center",
                    "wrap": true,
                    "children": [
                      {
                        "el": "button",
                        "slot": "cta",
                        "variant": "primary",
                        "size": "md"
                      },
                      {
                        "el": "button",
                        "slot": "cta2",
                        "variant": "secondary",
                        "size": "md"
                      }
                    ]
                  }
                ]
              }
            ]
          },
          {
            "el": "box",
            "dir": "row",
            "gap": 6,
            "pad": [
              2,
              4
            ],
            "align": "center",
            "border": "top",
            "children": [
              {
                "el": "repeat",
                "mobile": "stack",
                "slot": "stats",
                "min": 3,
                "max": 3,
                "layout": "row",
                "gap": 6,
                "of": {
                  "el": "box",
                  "mobile": "keep",
                  "dir": "row",
                  "gap": 2,
                  "align": "baseline",
                  "children": [
                    {
                      "el": "text",
                      "color": "link",
                      "slot": "number",
                      "role": "label",
                      "font": "mono"
                    },
                    {
                      "el": "text",
                      "color": "textMuted",
                      "slot": "title",
                      "role": "small"
                    }
                  ]
                }
              }
            ]
          }
        ]
      }
    ]
  }
}
Component example: reference/hero.desktop-window-stack.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
<title>hero.desktop-window-stack — Desktop OS</title>
<link rel="stylesheet" href="base.css">
<style>
  .hero { padding: 16px 0 var(--section); align-items: start; }
  .icons { grid-column: 1 / 2; display: grid; gap: 24px; padding-top: 8px; }
  .hero .window { grid-column: 2 / 13; }
  .split { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 32px; align-items: center; }
  .message { grid-column: 1 / 8; display: grid; gap: 20px; }
  .message h1 { font-size: clamp(2.4rem, 5vw, var(--step-6)); max-width: 20ch; }
  .message .lead { font-size: var(--step-1); max-width: 52ch; }
  .setup { grid-column: 8 / 13; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 4px 0 0 var(--edge-panel); padding: 24px; display: grid; gap: 16px; }
  .setup ol { list-style: none; padding: 0; display: grid; gap: 8px; }
  .setup li { display: flex; gap: 12px; align-items: baseline; font-weight: 600; }
  .actions { display: flex; gap: 12px; flex-wrap: wrap; }
  @media (max-width: 640px) { .message, .setup { grid-column: 1 / -1; } .split { gap: 24px; } }
</style>
</head>
<body>
<section class="wrap">
  <div class="hero grid">
    <nav class="icons hide-sm" aria-label="Desktop">
      <a class="icon" href="#product"><svg class="glyph" viewBox="0 0 8 8" aria-hidden="true"><path fill="#55A9FF" d="M1 2h3l1 1h2v4H1z"/></svg>Product</a>
      <a class="icon" href="#pricing"><svg class="glyph" viewBox="0 0 8 8" aria-hidden="true"><path fill="#EDA12F" d="M1 2h6v4H1z"/><path fill="#121309" d="M3 3h2v2H3z"/></svg>Pricing</a>
      <a class="icon" href="#docs"><svg class="glyph" viewBox="0 0 8 8" aria-hidden="true"><path fill="#FCFCF7" stroke="#575A4E" stroke-width=".5" d="M2 1h3l1 1v5H2z"/></svg>Docs</a>
      <a class="icon" href="#changelog"><svg class="glyph" viewBox="0 0 8 8" aria-hidden="true"><path fill="#2350C8" d="M1 1h6v6H1z"/><path fill="#FCFCF7" d="M2 2h4v1H2zm0 2h3v1H2z"/></svg>Changelog</a>
      <a class="icon" href="#trash"><svg class="glyph" viewBox="0 0 8 8" aria-hidden="true"><path fill="#BDC0B2" d="M2 2h4v5H2zM1 1h6v1H1z"/></svg>Trash</a>
    </nav>
    <div class="window">
      <div class="titlebar"><span class="title">~/home/welcome.app</span><span class="mono muted hide-sm">v4.2 · all systems normal</span><span class="controls" aria-hidden="true"><i></i><i></i><i></i></span></div>
      <div class="body split">
        <div class="message">
          <p class="mono link">New: session notes for every tester</p>
          <h1>Your product's <mark>whole story</mark>, in one place</h1>
          <p class="lead">Fieldnote records what people actually do in your app — <mark>clicks, errors and the replays</mark> behind them — so you fix the right thing first.</p>
          <p class="muted">Join 18,000 teams who stopped guessing. Most of them pay nothing.</p>
        </div>
        <aside class="setup">
          <p class="mono link">Set up in five minutes</p>
          <ol>
            <li><span class="mono link">01</span>Free for the first million events</li>
            <li><span class="mono link">02</span>No credit card, no sales call</li>
            <li><span class="mono link">03</span>One script tag, or the CLI</li>
          </ol>
          <div class="actions"><a class="key" href="#start">Get started</a><a class="key secondary" href="#install">Install with CLI</a></div>
        </aside>
      </div>
      <div class="statusbar"><span><b class="link">18k</b> teams</span><span><b class="link">99.98%</b> uptime</span><span><b class="link">38 ms</b> p95</span></div>
    </div>
  </div>
</section>
</body>
</html>

Other patterns in this design

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