hero.frosted-layered-panels · Layered panels

A hero pattern from Frosted Glass, drawn alone below with this design's tokens and sample copy. Used in this design on: home page, section 1. Give the section root data-pattern="hero.frosted-layered-panels". A guide only: DESIGN.md and tokens.json are the source of truth.

Rule
Two blurred colour blobs sit behind; the main frosted panel (1–8) holds the headline, and a smaller panel (8–12) overlaps its lower-right corner with live facts.
Slots
eyebrow, headline, subhead, cta, cta2, meta, facts[2..3]
Grid areas
blobA 1-6 · blobB 8-12 · main 1-8 · float 8-12 (12-column grid, 1-based inclusive spans)
Notes
The floating panel shares column 8 and row 3 with the main panel, so it visibly overlaps it. Both panels are frosted; the blobs are blurred 80px+ and hide at phone width.
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

  • Grid of four rows. A blurred accent blob covers 1–6 (rows 1–3) and an accent2 blob covers 8–12 (rows 2–4); both hide at phone width. The main frosted panel spans 1–8 on rows 2–3 with eyebrow (muted), headline at step 6 weight 600 (max ~14 ch), muted lead and a row of a large primary button plus a ghost button. A smaller panel (surfaceAlt frost) spans 8–12 on rows 3–4, bottom-aligned, overlapping the main panel's lower right: a muted label, then 2–3 fact rows split by hairlines, the name at lead size on the left and the value at step 3 weight 600 on the right.

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

Booking projects from June 2026

launches shipped

140+

years independent

12

Layout tree (as in design/layout.json)
{
  "pattern": "hero.frosted-layered-panels",
  "kind": "hero",
  "grid": {
    "blobA": "1-6",
    "blobB": "8-12",
    "main": "1-8",
    "float": "8-12"
  },
  "slots": [
    "eyebrow",
    "headline",
    "subhead",
    "cta",
    "cta2",
    "meta",
    "facts[2..3]"
  ],
  "notes": "The floating panel shares column 8 and row 3 with the main panel, so it visibly overlaps it. Both panels are frosted; the blobs are blurred 80px+ and hide at phone width.",
  "tree": {
    "el": "grid",
    "gap": 4,
    "rowGap": 4,
    "align": "center",
    "minVh": 0.88,
    "children": [
      {
        "el": "shape",
        "span": "1-6",
        "rowSpan": "1-3",
        "mobile": "hide",
        "alignSelf": "start",
        "kind": "blob",
        "size": "xl",
        "fill": "accent"
      },
      {
        "el": "shape",
        "span": "8-12",
        "rowSpan": "2-4",
        "mobile": "hide",
        "alignSelf": "end",
        "kind": "blob",
        "size": "xl",
        "fill": "accent2"
      },
      {
        "el": "box",
        "span": "1-8",
        "rowSpan": "2-3",
        "bg": "surface",
        "gap": 4,
        "pad": [
          6,
          5
        ],
        "border": "all",
        "children": [
          {
            "el": "text",
            "color": "textMuted",
            "slot": "eyebrow",
            "role": "eyebrow"
          },
          {
            "el": "text",
            "slot": "headline",
            "role": "display",
            "step": 6,
            "weight": 600,
            "tracking": "tight",
            "leading": "tight",
            "maxCh": 14
          },
          {
            "el": "text",
            "color": "textMuted",
            "slot": "subhead",
            "role": "lead",
            "maxCh": 44
          },
          {
            "el": "box",
            "dir": "row",
            "gap": 2,
            "wrap": true,
            "children": [
              {
                "el": "button",
                "slot": "cta",
                "variant": "primary",
                "size": "lg",
                "arrow": true
              },
              {
                "el": "button",
                "slot": "cta2",
                "variant": "ghost",
                "size": "lg"
              }
            ]
          }
        ]
      },
      {
        "el": "box",
        "span": "8-12",
        "rowSpan": "3-4",
        "bg": "surfaceAlt",
        "alignSelf": "end",
        "gap": 3,
        "pad": [
          4,
          4
        ],
        "border": "all",
        "children": [
          {
            "el": "text",
            "color": "textMuted",
            "slot": "meta",
            "role": "label"
          },
          {
            "el": "repeat",
            "slot": "facts",
            "min": 2,
            "max": 3,
            "layout": "list",
            "gap": 1,
            "divider": true,
            "of": {
              "el": "box",
              "mobile": "keep",
              "dir": "row",
              "pad": [
                1,
                0
              ],
              "align": "center",
              "justify": "between",
              "children": [
                {
                  "el": "text",
                  "slot": "title",
                  "role": "lead",
                  "weight": 500
                },
                {
                  "el": "text",
                  "slot": "number",
                  "role": "number",
                  "step": 3,
                  "weight": 600,
                  "tracking": "tight"
                }
              ]
            }
          }
        ]
      }
    ]
  }
}
Component example: reference/hero.frosted-layered-panels.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
<title>hero.frosted-layered-panels — Frosted Glass</title>
<link rel="stylesheet" href="base.css">
<style>
  .hero { min-height: 88vh; padding: calc(var(--unit) * 8) 0; grid-template-rows: repeat(4, auto); align-items: center; row-gap: calc(var(--unit) * 4); }
  .blob.a { grid-column: 1 / 7; grid-row: 1 / 4; background: var(--accent); }
  .blob.b { grid-column: 8 / 13; grid-row: 2 / 5; background: var(--accent2); align-self: end; }
  .main { grid-column: 1 / 9; grid-row: 2 / 4; padding: calc(var(--unit) * 6) calc(var(--unit) * 5); display: grid; gap: calc(var(--unit) * 4); }
  .main h1 { font-size: var(--step-6); max-width: 14ch; }
  .main .lead { font-size: var(--step-1); max-width: 44ch; }
  .actions { display: flex; gap: calc(var(--unit) * 2); flex-wrap: wrap; }
  .float { grid-column: 8 / 13; grid-row: 3 / 5; align-self: end; padding: calc(var(--unit) * 4); display: grid; gap: calc(var(--unit) * 3); z-index: 1; }
  .float dl { display: grid; }
  .float div { display: flex; justify-content: space-between; padding: 10px 0; border-top: 1px solid var(--border); }
  .float dd { font-family: var(--font-mono); color: var(--heading); }
  @media (max-width: 640px) { .main h1 { font-size: var(--step-4); } .main { padding: calc(var(--unit) * 4) calc(var(--unit) * 3); } }
</style>
</head>
<body>
<section class="wrap">
  <div class="hero grid">
    <div class="blob a" aria-hidden="true"></div>
    <div class="blob b" aria-hidden="true"></div>
    <div class="main glass">
      <p class="eyebrow">Treasury for remote-first companies</p>
      <h1>See every account at once.</h1>
      <p class="lead muted">Balances, runway and card spend from 40 banks in one quiet view. Updated every minute.</p>
      <div class="actions"><a class="btn" href="#start">Open a demo workspace <span aria-hidden="true">→</span></a><a class="btn ghost" href="#tour">Take the tour</a></div>
    </div>
    <aside class="float glass alt" aria-label="Live balances">
      <p class="eyebrow">Live · 09:41 UTC</p>
      <dl>
        <div><dt>Operating, EUR</dt><dd>€1.284m</dd></div>
        <div><dt>Payroll, USD</dt><dd>$412k</dd></div>
        <div><dt>Runway</dt><dd>31 months</dd></div>
      </dl>
    </aside>
  </div>
</section>
</body>
</html>

Other patterns in this design

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