hero.frosted-notification-stack · Notification stack

A hero pattern from Frosted Glass, 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.frosted-notification-stack". A guide only: DESIGN.md and tokens.json are the source of truth.

Rule
Headline bottom-left on 1–7; on 8–12 a vertical stack of three or four frosted notification panels floats over a blurred blob.
Slots
eyebrow, headline, subhead, cta, items[3..4]
Grid areas
text 1-7 · glow 9-12 · stack 8-12 (12-column grid, 1-based inclusive spans)
Notes
The notification panels sit on top of the blob in the same cell; stagger them with a small horizontal offset in CSS if you like, but keep one column line.
Tokens
bg #0A0F1F · text #E4EAF6 · heading #FFFFFF · accent #6E8BFF · accent2 #A67AE8 · Sora / Manrope · radius 22px · space unit 8px (full list in design/tokens.json)
Section
vertical padding step 8

Pattern notes

  • Columns 1–7, bottom-aligned: eyebrow, headline at step 6, muted lead, large primary button. Columns 8–12: three or four frosted notification rows (accent dot md, a weight-600 label over a muted line, muted time on the right) stacked with small gaps over an accent2 blob in 9–12. Phone: headline first, then the notifications.

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 project

Discovery sprint

Two weeks of interviews, audits and competitor teardown.

2 weeks

Positioning workshop

A day with your leadership to agree on one story.

1 day

Identity design

Logo, type, colour, motion and a working toolkit.

8 weeks

Layout tree (as in design/layout.json)
{
  "pattern": "hero.frosted-notification-stack",
  "kind": "hero",
  "grid": {
    "text": "1-7",
    "glow": "9-12",
    "stack": "8-12"
  },
  "slots": [
    "eyebrow",
    "headline",
    "subhead",
    "cta",
    "items[3..4]"
  ],
  "notes": "The notification panels sit on top of the blob in the same cell; stagger them with a small horizontal offset in CSS if you like, but keep one column line.",
  "tree": {
    "el": "grid",
    "gap": 4,
    "align": "end",
    "minVh": 0.82,
    "children": [
      {
        "el": "box",
        "span": "1-7",
        "rowSpan": "1-1",
        "alignSelf": "end",
        "gap": 4,
        "children": [
          {
            "el": "text",
            "color": "textMuted",
            "slot": "eyebrow",
            "role": "eyebrow"
          },
          {
            "el": "text",
            "slot": "headline",
            "role": "display",
            "step": 6,
            "weight": 600,
            "tracking": "tight",
            "leading": "tight",
            "maxCh": 13
          },
          {
            "el": "text",
            "color": "textMuted",
            "slot": "subhead",
            "role": "lead",
            "maxCh": 40
          },
          {
            "el": "button",
            "slot": "cta",
            "variant": "primary",
            "size": "lg",
            "arrow": true
          }
        ]
      },
      {
        "el": "shape",
        "span": "9-12",
        "rowSpan": "1-1",
        "mobile": "hide",
        "alignSelf": "center",
        "kind": "blob",
        "size": "xl",
        "fill": "accent2"
      },
      {
        "el": "repeat",
        "span": "8-12",
        "rowSpan": "1-1",
        "alignSelf": "center",
        "slot": "items",
        "min": 3,
        "max": 4,
        "layout": "list",
        "gap": 2,
        "of": {
          "el": "box",
          "mobile": "keep",
          "bg": "surface",
          "dir": "row",
          "gap": 3,
          "pad": [
            2,
            3
          ],
          "align": "center",
          "justify": "between",
          "border": "all",
          "children": [
            {
              "el": "shape",
              "kind": "circle",
              "size": "md",
              "fill": "accent"
            },
            {
              "el": "box",
              "gap": 0,
              "children": [
                {
                  "el": "text",
                  "slot": "title",
                  "role": "label",
                  "weight": 600
                },
                {
                  "el": "text",
                  "color": "textMuted",
                  "slot": "body",
                  "role": "small"
                }
              ]
            },
            {
              "el": "text",
              "color": "textMuted",
              "slot": "meta",
              "role": "small"
            }
          ]
        }
      }
    ]
  }
}

Other patterns in this design

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