hero.desktop-tabbed-app · Desktop tabbed app

A hero 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="hero.desktop-tabbed-app". A guide only: DESIGN.md and tokens.json are the source of truth.

Rule
Headline and subhead on the wallpaper, then a full-width app panel framed in accent2: a strip of tabs on the colour and a surface pane with a windowed screenshot beside a checklist.
Slots
eyebrow, headline, subhead, cta, cta2, features[3..3], heroImage, sectionLabel, title2, body, items[3..3]
Grid areas
headline 1-7 · subhead 8-12 · panel 1-12 · shot 1-7 · copy 8-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)
Section
vertical padding step 6

Pattern notes

  • The headline (step 7, ≤16 ch) with a mono eyebrow on 1–7 bottom-aligned with the lead and two keys on 8–12, straight on the wallpaper. Under them, across the grid, the tabbed panel: an `accent2` frame (8 px padding) with the raised active tab and three more tabs on the strip, and a surface pane (32 px padding) holding a 16:9 screenshot in a window frame on 1–7 and, on 8–12, an h2 at step 4, a paragraph and a ruled three-row checklist.

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.

Start a projectRead case studies

Introducing

Positioning

Identity systems

Websites

Northfold — Home

Brands built from the product out

Northfold is a 14-person studio helping manufacturers, labs and B2B teams explain what they do — and look like they mean it.

01

Discovery sprint

02

Positioning workshop

03

Identity design

Layout tree (as in design/layout.json)
{
  "pattern": "hero.desktop-tabbed-app",
  "kind": "hero",
  "grid": {
    "headline": "1-7",
    "subhead": "8-12",
    "panel": "1-12",
    "shot": "1-7",
    "copy": "8-12"
  },
  "slots": [
    "eyebrow",
    "headline",
    "subhead",
    "cta",
    "cta2",
    "features[3..3]",
    "heroImage",
    "sectionLabel",
    "title2",
    "body",
    "items[3..3]"
  ],
  "tree": {
    "el": "grid",
    "gap": 6,
    "align": "end",
    "children": [
      {
        "el": "box",
        "span": "1-7",
        "gap": 4,
        "children": [
          {
            "el": "text",
            "color": "link",
            "slot": "eyebrow",
            "role": "label",
            "font": "mono"
          },
          {
            "el": "text",
            "slot": "headline",
            "role": "display",
            "step": 7,
            "weight": 700,
            "tracking": "tight",
            "leading": "tight",
            "maxCh": 16
          }
        ]
      },
      {
        "el": "box",
        "span": "8-12",
        "gap": 4,
        "children": [
          {
            "el": "text",
            "slot": "subhead",
            "role": "lead",
            "maxCh": 44
          },
          {
            "el": "box",
            "dir": "row",
            "gap": 3,
            "align": "center",
            "wrap": true,
            "children": [
              {
                "el": "button",
                "slot": "cta",
                "variant": "primary",
                "size": "lg"
              },
              {
                "el": "button",
                "slot": "cta2",
                "variant": "secondary",
                "size": "lg"
              }
            ]
          }
        ]
      },
      {
        "el": "box",
        "span": "full",
        "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": "center",
                "children": [
                  {
                    "el": "media",
                    "span": "1-7",
                    "slot": "heroImage",
                    "aspect": "16/9",
                    "treatment": "product",
                    "frame": "window"
                  },
                  {
                    "el": "box",
                    "span": "8-12",
                    "gap": 4,
                    "children": [
                      {
                        "el": "text",
                        "slot": "title2",
                        "role": "h2",
                        "step": 4,
                        "weight": 700,
                        "tracking": "tight",
                        "leading": "tight"
                      },
                      {
                        "el": "text",
                        "slot": "body",
                        "role": "body",
                        "maxCh": 48
                      },
                      {
                        "el": "repeat",
                        "slot": "items",
                        "min": 3,
                        "max": 3,
                        "layout": "list",
                        "gap": 0,
                        "divider": true,
                        "of": {
                          "el": "box",
                          "mobile": "keep",
                          "dir": "row",
                          "gap": 3,
                          "pad": [
                            2,
                            0
                          ],
                          "align": "baseline",
                          "children": [
                            {
                              "el": "text",
                              "color": "link",
                              "slot": "number",
                              "role": "label",
                              "font": "mono"
                            },
                            {
                              "el": "text",
                              "slot": "title",
                              "role": "body",
                              "weight": 600
                            }
                          ]
                        }
                      }
                    ]
                  }
                ]
              }
            ]
          }
        ]
      }
    ]
  }
}

Other patterns in this design

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