hero.y2k-chrome-window · OS window

A hero pattern from Y2K Chrome, 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.y2k-chrome-window". A guide only: DESIGN.md and tokens.json are the source of truth.

Rule
The hero copy lives in a desktop-OS window on 3–10: an accent title bar with a pixel label and three dots, then a centred chrome headline, lead and buttons; a blob and a star float behind it.
Slots
eyebrow, headline, subhead, cta, cta2
Grid areas
blob 1-5 · window 3-10 · star 10-12 (12-column grid, 1-based inclusive spans)
Notes
The window has a 2 px light border, full token radius on the outer corners, and a soft glow shadow. It overlaps the blob.
Tokens
bg #F6FBFF · text #192028 · heading #091018 · accent #00B0FB · accent2 #7D9FFF · Unbounded / Sora · radius 28px · space unit 8px (full list in design/tokens.json)

Pattern notes

  • Behind: a large blob in accent2 on 1–5 and a sparkle star in accent on 10–12 (both hidden at phone width). In front, on 3–10: a window panel on the surface colour with the token radius, a 2 px border and a glow shadow. Its title bar is an accent strip holding a pixel-font label (onAccent) on the left and three small circles on the right. The window body is centred: headline at step 6, weight 700, uppercase, chrome fill; lead (max 46 ch); a row of pill buttons. At phone width the window spans the full width.

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
Layout tree (as in design/layout.json)
{
  "pattern": "hero.y2k-chrome-window",
  "kind": "hero",
  "grid": {
    "blob": "1-5",
    "window": "3-10",
    "star": "10-12"
  },
  "slots": [
    "eyebrow",
    "headline",
    "subhead",
    "cta",
    "cta2"
  ],
  "notes": "The window has a 2 px light border, full token radius on the outer corners, and a soft glow shadow. It overlaps the blob.",
  "tree": {
    "el": "grid",
    "gap": 3,
    "align": "center",
    "minVh": 0.86,
    "children": [
      {
        "el": "shape",
        "span": "1-5",
        "rowSpan": "1-2",
        "mobile": "hide",
        "kind": "blob",
        "size": "fill",
        "fill": "accent2"
      },
      {
        "el": "shape",
        "span": "10-12",
        "rowSpan": "1-1",
        "mobile": "hide",
        "kind": "star",
        "size": "lg",
        "fill": "accent",
        "rotate": -8
      },
      {
        "el": "box",
        "span": "3-10",
        "rowSpan": "1-2",
        "bg": "surface",
        "gap": 0,
        "border": "all",
        "children": [
          {
            "el": "box",
            "mobile": "keep",
            "bg": "accent",
            "dir": "row",
            "pad": [
              1,
              2
            ],
            "align": "center",
            "justify": "between",
            "children": [
              {
                "el": "text",
                "color": "onAccent",
                "slot": "eyebrow",
                "role": "label",
                "transform": "uppercase",
                "font": "mono"
              },
              {
                "el": "box",
                "mobile": "keep",
                "dir": "row",
                "gap": 1,
                "children": [
                  {
                    "el": "shape",
                    "kind": "circle",
                    "size": "sm",
                    "fill": "onAccent"
                  },
                  {
                    "el": "shape",
                    "kind": "circle",
                    "size": "sm",
                    "fill": "onAccent"
                  },
                  {
                    "el": "shape",
                    "kind": "circle",
                    "size": "sm",
                    "fill": "onAccent"
                  }
                ]
              }
            ]
          },
          {
            "el": "box",
            "gap": 3,
            "pad": [
              6,
              4
            ],
            "align": "center",
            "children": [
              {
                "el": "text",
                "slot": "headline",
                "role": "display",
                "step": 6,
                "align": "center",
                "transform": "uppercase",
                "weight": 700,
                "tracking": "tight",
                "leading": "tight",
                "maxCh": 14
              },
              {
                "el": "text",
                "slot": "subhead",
                "role": "lead",
                "align": "center",
                "maxCh": 46
              },
              {
                "el": "box",
                "dir": "row",
                "gap": 2,
                "justify": "center",
                "wrap": true,
                "children": [
                  {
                    "el": "button",
                    "slot": "cta",
                    "variant": "primary",
                    "size": "md"
                  },
                  {
                    "el": "button",
                    "slot": "cta2",
                    "variant": "ghost",
                    "size": "md"
                  }
                ]
              }
            ]
          }
        ]
      }
    ]
  }
}

Other patterns in this design

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