hero.desktop-cascade-windows · Desktop cascade windows

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-cascade-windows". A guide only: DESIGN.md and tokens.json are the source of truth.

Rule
Cascaded windows: the message window on 1–7 over two rows (with a status bar) sits on top of a windowed illustration on 6–12, with a small dialog window under the illustration on 8–12.
Slots
caption, meta, eyebrow, headline, subhead, cta, cta2, facts[3..3], heroImage, sectionLabel, body, stats[2..2], cta3
Grid areas
message 1-7 · art 6-12 · dialog 8-12 (12-column grid, 1-based inclusive spans)
Notes
The message window overlaps the illustration window by two columns, like cascaded app windows; copy always paints above imagery.
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

  • Cascaded windows. The message window on 1–7 spans both rows and stretches to their height (title bar at the top; eyebrow, headline at step 6, lead, two keys; a status bar of three mono key / value readouts at the bottom) and paints over the left edge of a 16:9 illustration window on 6–12 in row 1, like an app opened on top of another. A small dialog window on 8–12 in row 2 (title bar with a mono title, a short line, two figures in a 2-up grid, a small secondary key) completes the stack. Copy always paints above imagery. Phone: message, illustration, dialog, in that order.

Corvid Robotics — identity

Booking projects from June 2026

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

Hours

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

Where

Rua da Boavista 72, 1200-066 Lisboa

Contact

+351 21 340 5512

Northfold — Home

Introducing

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

140+

launches shipped

12

years independent

Our process
Layout tree (as in design/layout.json)
{
  "pattern": "hero.desktop-cascade-windows",
  "kind": "hero",
  "grid": {
    "message": "1-7",
    "art": "6-12",
    "dialog": "8-12"
  },
  "slots": [
    "caption",
    "meta",
    "eyebrow",
    "headline",
    "subhead",
    "cta",
    "cta2",
    "facts[3..3]",
    "heroImage",
    "sectionLabel",
    "body",
    "stats[2..2]",
    "cta3"
  ],
  "notes": "The message window overlaps the illustration window by two columns, like cascaded app windows; copy always paints above imagery.",
  "tree": {
    "el": "grid",
    "gap": 4,
    "align": "stretch",
    "children": [
      {
        "el": "box",
        "span": "1-7",
        "rowSpan": "1-2",
        "bg": "surface",
        "gap": 0,
        "pad": 0,
        "justify": "between",
        "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": "box",
            "gap": 5,
            "pad": [
              10,
              8
            ],
            "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": 18
              },
              {
                "el": "text",
                "slot": "subhead",
                "role": "lead",
                "maxCh": 50
              },
              {
                "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",
            "dir": "row",
            "gap": 6,
            "pad": [
              2,
              4
            ],
            "align": "center",
            "border": "top",
            "children": [
              {
                "el": "repeat",
                "mobile": "stack",
                "slot": "facts",
                "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": "label",
                      "role": "label",
                      "font": "mono"
                    },
                    {
                      "el": "text",
                      "color": "textMuted",
                      "slot": "body",
                      "role": "small"
                    }
                  ]
                }
              }
            ]
          }
        ]
      },
      {
        "el": "media",
        "span": "6-12",
        "rowSpan": "1-1",
        "slot": "heroImage",
        "aspect": "16/9",
        "treatment": "illustration",
        "frame": "window"
      },
      {
        "el": "box",
        "span": "8-12",
        "rowSpan": "2-2",
        "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": "sectionLabel",
                "role": "label",
                "font": "mono"
              }
            ]
          },
          {
            "el": "box",
            "gap": 4,
            "pad": [
              5,
              5
            ],
            "children": [
              {
                "el": "text",
                "slot": "body",
                "role": "small",
                "maxCh": 44
              },
              {
                "el": "repeat",
                "slot": "stats",
                "min": 2,
                "max": 2,
                "layout": "grid",
                "cols": 2,
                "phoneCols": 2,
                "gap": 3,
                "of": {
                  "el": "box",
                  "gap": 0,
                  "children": [
                    {
                      "el": "text",
                      "slot": "number",
                      "role": "number",
                      "step": 4,
                      "weight": 700
                    },
                    {
                      "el": "text",
                      "color": "textMuted",
                      "slot": "title",
                      "role": "small"
                    }
                  ]
                }
              },
              {
                "el": "button",
                "slot": "cta3",
                "variant": "secondary",
                "size": "sm"
              }
            ]
          }
        ]
      }
    ]
  }
}

Other patterns in this design

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