hero.frosted-aurora-stage · Aurora stage

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

Rule
A mesh-gradient backdrop fills the whole hero; a frosted panel sits low on 2–7 with the headline, a small status chip floats high on 9–12.
Slots
heroImage, eyebrow, headline, subhead, cta, meta
Grid areas
backdrop 1-12 · chip 9-12 · panel 2-7 (12-column grid, 1-based inclusive spans)
Notes
The backdrop is a rounded media cell (radius token) with a slow mesh gradient from accent/accent2; the panel and chip are frosted over it. Never centre the panel.
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 4

Pattern notes

  • A rounded media cell with a slow mesh gradient (accent → accent2 over the page bg) fills 1–12 across both rows. A status chip (small frosted capsule: accent2 dot + label) floats top-right on 9–12 and hides on phone. The frosted panel sits bottom-left on 2–7: eyebrow, h1 at step 5 weight 600, a muted paragraph and a large primary button. The panel never centres.

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 project
Layout tree (as in design/layout.json)
{
  "pattern": "hero.frosted-aurora-stage",
  "kind": "hero",
  "grid": {
    "backdrop": "1-12",
    "chip": "9-12",
    "panel": "2-7"
  },
  "slots": [
    "heroImage",
    "eyebrow",
    "headline",
    "subhead",
    "cta",
    "meta"
  ],
  "notes": "The backdrop is a rounded media cell (radius token) with a slow mesh gradient from accent/accent2; the panel and chip are frosted over it. Never centre the panel.",
  "tree": {
    "el": "grid",
    "gap": 4,
    "rowGap": 8,
    "pad": [
      5,
      0
    ],
    "minVh": 0.9,
    "children": [
      {
        "el": "media",
        "span": "1-12",
        "rowSpan": "1-2",
        "slot": "heroImage",
        "treatment": "gradient-mesh",
        "fill": true,
        "frame": "rounded"
      },
      {
        "el": "box",
        "span": "9-12",
        "rowSpan": "1-1",
        "mobile": "hide",
        "bg": "surface",
        "alignSelf": "start",
        "dir": "row",
        "gap": 2,
        "pad": [
          1,
          3
        ],
        "align": "center",
        "border": "all",
        "children": [
          {
            "el": "shape",
            "kind": "circle",
            "size": "sm",
            "fill": "accent2"
          },
          {
            "el": "text",
            "slot": "meta",
            "role": "label"
          }
        ]
      },
      {
        "el": "box",
        "span": "2-7",
        "rowSpan": "2-2",
        "bg": "surface",
        "alignSelf": "end",
        "gap": 3,
        "pad": [
          5,
          5
        ],
        "border": "all",
        "children": [
          {
            "el": "text",
            "color": "textMuted",
            "slot": "eyebrow",
            "role": "eyebrow"
          },
          {
            "el": "text",
            "slot": "headline",
            "role": "h1",
            "step": 5,
            "weight": 600,
            "tracking": "tight",
            "leading": "tight",
            "maxCh": 16
          },
          {
            "el": "text",
            "color": "textMuted",
            "slot": "subhead",
            "role": "body",
            "maxCh": 46
          },
          {
            "el": "button",
            "slot": "cta",
            "variant": "primary",
            "size": "lg",
            "arrow": true
          }
        ]
      }
    ]
  }
}

Other patterns in this design

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