features.desktop-tab-panel · Desktop tab panel

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

Rule
Section head on the wallpaper, then one tabbed panel framed in accent2: four tabs on the colour strip over a surface pane with a ruled feature list beside a windowed screenshot.
Slots
title, body, sectionLabel, features[3..3], statement, items[3..4], cta, image
Grid areas
list 1-5 · shot 6-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

  • Section head on the wallpaper: h2 at step 5 (≤24 ch) on the left, a muted paragraph bottom-aligned on the right. Then the tabbed panel: `accent2` frame, the raised active tab (the section's label) and three more tabs on the strip, and a surface pane (32 px padding) with, on 1–5, an h3 statement, a ruled list of three or four items (title at 600, muted small line) and a primary key; on 6–12 a 16:9 screenshot in a window frame.

What we do

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.

What you get

Positioning

Identity systems

Websites

Most rebrands fail because they start with a logo. Ours start with a sales call recording and a spreadsheet of lost deals.

Positioning

Find the one sentence your best customers already believe.

Identity systems

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

Websites

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

Start a project
Northfold — Home
Layout tree (as in design/layout.json)
{
  "pattern": "features.desktop-tab-panel",
  "kind": "features",
  "grid": {
    "list": "1-5",
    "shot": "6-12"
  },
  "slots": [
    "title",
    "body",
    "sectionLabel",
    "features[3..3]",
    "statement",
    "items[3..4]",
    "cta",
    "image"
  ],
  "tree": {
    "el": "box",
    "gap": 6,
    "children": [
      {
        "el": "box",
        "dir": "row",
        "gap": 6,
        "align": "end",
        "justify": "between",
        "children": [
          {
            "el": "text",
            "slot": "title",
            "role": "h2",
            "step": 5,
            "weight": 700,
            "tracking": "tight",
            "leading": "tight",
            "maxCh": 24
          },
          {
            "el": "text",
            "color": "textMuted",
            "slot": "body",
            "role": "body",
            "maxCh": 48
          }
        ]
      },
      {
        "el": "box",
        "bg": "accent2",
        "gap": 2,
        "pad": 2,
        "children": [
          {
            "el": "box",
            "mobile": "scroll-x",
            "dir": "row",
            "gap": 1,
            "align": "center",
            "children": [
              {
                "el": "box",
                "bg": "surface",
                "dir": "row",
                "pad": [
                  2,
                  4
                ],
                "children": [
                  {
                    "el": "text",
                    "slot": "sectionLabel",
                    "role": "label",
                    "weight": 600
                  }
                ]
              },
              {
                "el": "repeat",
                "mobile": "keep",
                "slot": "features",
                "min": 3,
                "max": 3,
                "layout": "row",
                "gap": 1,
                "of": {
                  "el": "box",
                  "dir": "row",
                  "pad": [
                    2,
                    4
                  ],
                  "children": [
                    {
                      "el": "text",
                      "slot": "title",
                      "role": "label",
                      "weight": 600
                    }
                  ]
                }
              }
            ]
          },
          {
            "el": "box",
            "bg": "surface",
            "gap": 0,
            "pad": [
              8,
              8
            ],
            "children": [
              {
                "el": "grid",
                "gap": 8,
                "align": "start",
                "children": [
                  {
                    "el": "box",
                    "span": "1-5",
                    "gap": 5,
                    "children": [
                      {
                        "el": "text",
                        "slot": "statement",
                        "role": "h3",
                        "weight": 700
                      },
                      {
                        "el": "repeat",
                        "slot": "items",
                        "min": 3,
                        "max": 4,
                        "layout": "list",
                        "gap": 0,
                        "divider": true,
                        "of": {
                          "el": "box",
                          "gap": 1,
                          "pad": [
                            3,
                            0
                          ],
                          "children": [
                            {
                              "el": "text",
                              "slot": "title",
                              "role": "body",
                              "weight": 600
                            },
                            {
                              "el": "text",
                              "color": "textMuted",
                              "slot": "body",
                              "role": "small"
                            }
                          ]
                        }
                      },
                      {
                        "el": "button",
                        "slot": "cta",
                        "variant": "primary"
                      }
                    ]
                  },
                  {
                    "el": "media",
                    "span": "6-12",
                    "slot": "image",
                    "aspect": "16/9",
                    "treatment": "product",
                    "frame": "window"
                  }
                ]
              }
            ]
          }
        ]
      }
    ]
  }
}
Component example: reference/features.desktop-tab-panel.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
<title>features.desktop-tab-panel — Desktop OS</title>
<link rel="stylesheet" href="base.css">
<style>
  section { padding: var(--section) 0; display: grid; gap: 24px; }
  .head { display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; }
  .head h2 { font-size: var(--step-5); max-width: 24ch; }
  .head p { max-width: 48ch; }
  .pane .grid { align-items: start; gap: 32px; }
  .list { grid-column: 1 / 6; display: grid; gap: 20px; }
  .list ul { list-style: none; padding: 0; }
  .list li { padding: 12px 0; border-bottom: 1px solid var(--border); }
  .list li b { display: block; color: var(--heading); }
  .shot { grid-column: 6 / 13; }
  .shot .frame { aspect-ratio: 4 / 3; background: var(--surface-alt); }
</style>
</head>
<body>
<section class="wrap">
  <div class="head">
    <div><p class="mono link">What's inside</p><h2>Everything you'd otherwise <mark>glue together</mark></h2></div>
    <p class="muted">Five tools that share one event stream, so a replay, an error and a funnel step are the same moment — not three tabs.</p>
  </div>
  <div class="tabs">
    <div role="tablist" aria-label="Tools">
      <button role="tab" aria-selected="true" aria-controls="p1" id="t1">Replays</button>
      <button role="tab" aria-selected="false" aria-controls="p2" id="t2" tabindex="-1">Errors</button>
      <button role="tab" aria-selected="false" tabindex="-1">Funnels</button>
      <button role="tab" aria-selected="false" tabindex="-1">Flags</button>
    </div>
    <div class="pane" role="tabpanel" id="p1" aria-labelledby="t1">
      <div class="grid">
        <div class="list">
          <h3>Watch the bug happen, then fix it</h3>
          <ul>
            <li><b>Every click, scroll and rage-tap</b><span class="muted">Recorded with private fields masked by default.</span></li>
            <li><b>Errors pinned to the frame</b><span class="muted">Jump from a stack trace to the second it broke.</span></li>
            <li><b>Shareable in one link</b><span class="muted">No seat needed to watch a replay.</span></li>
          </ul>
          <a class="key" href="#replays">Try replays</a>
        </div>
        <figure class="shot window">
          <div class="titlebar"><span class="title">replay — checkout.html</span><span class="controls" aria-hidden="true"><i></i><i></i><i></i></span></div>
          <div class="frame" role="img" aria-label="Session replay of a checkout page"></div>
        </figure>
      </div>
    </div>
  </div>
</section>
</body>
</html>

Other patterns in this design

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