hero.scandinavian-arch-window · Arch window

A hero pattern from Scandinavian Soft, 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.scandinavian-arch-window". A guide only: DESIGN.md and tokens.json are the source of truth.

Rule
Text block in columns 2–6, vertically centred; an arch-framed 3:4 photograph in 7–11 with a large pebble circle on its lower edge. Columns 1 and 12 stay empty.
Slots
eyebrow, headline, subhead, cta, cta2, heroImage
Grid areas
text 2-6 · window 7-11 · pebble 10-11 (12-column grid, 1-based inclusive spans)
Notes
Display at step 6, weight 400, normal leading. A large surfaceAlt pebble circle rests on the window's lower edge (columns 10–11, overlapping the arch) and hides at phone width. The second CTA is a quiet text link.
Tokens
bg #FDF9F4 · text #241E16 · heading #150E06 · accent #69A382 · accent2 #5DA29C · Nunito / Nunito Sans · radius 16px · space unit 8px (full list in design/tokens.json)
Section
vertical padding step 10

Pattern notes

  • Text block in columns 2–6, vertically centred beside the window, with 80 px of air above and below: muted eyebrow, display headline at step 6 (weight 400, normal leading, ≤16 ch), a muted lead paragraph, then a large primary button and a quiet text link with an arrow on one line (they wrap, left-aligned, at phone width). A 3:4 photograph with an arch frame (top corners fully rounded into a semicircle) stands in 7–11. A large surfaceAlt pebble circle rests on the window's lower edge in columns 10–11, overlapping the photo, and hides at phone width. Columns 1 and 12 stay empty. Phone: text first, then the arch photo.

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.scandinavian-arch-window",
  "kind": "hero",
  "grid": {
    "text": "2-6",
    "window": "7-11",
    "pebble": "10-11"
  },
  "slots": [
    "eyebrow",
    "headline",
    "subhead",
    "cta",
    "cta2",
    "heroImage"
  ],
  "notes": "Display at step 6, weight 400, normal leading. A large surfaceAlt pebble circle rests on the window's lower edge (columns 10–11, overlapping the arch) and hides at phone width. The second CTA is a quiet text link.",
  "tree": {
    "el": "grid",
    "gap": 6,
    "align": "center",
    "children": [
      {
        "el": "box",
        "span": "2-6",
        "alignSelf": "center",
        "gap": 4,
        "children": [
          {
            "el": "text",
            "color": "textMuted",
            "slot": "eyebrow",
            "role": "eyebrow"
          },
          {
            "el": "text",
            "slot": "headline",
            "role": "display",
            "step": 6,
            "weight": 400,
            "leading": "normal",
            "maxCh": 16
          },
          {
            "el": "text",
            "color": "textMuted",
            "slot": "subhead",
            "role": "lead",
            "maxCh": 40
          },
          {
            "el": "box",
            "mobile": "keep",
            "dir": "row",
            "gap": 5,
            "align": "center",
            "wrap": true,
            "children": [
              {
                "el": "button",
                "slot": "cta",
                "variant": "primary",
                "size": "lg"
              },
              {
                "el": "button",
                "slot": "cta2",
                "variant": "link",
                "arrow": true
              }
            ]
          }
        ]
      },
      {
        "el": "media",
        "span": "7-11",
        "rowSpan": "1-1",
        "slot": "heroImage",
        "aspect": "3/4",
        "treatment": "photo",
        "frame": "arch"
      },
      {
        "el": "shape",
        "span": "10-11",
        "rowSpan": "1-1",
        "mobile": "hide",
        "alignSelf": "end",
        "kind": "circle",
        "size": "lg",
        "fill": "surfaceAlt"
      }
    ]
  }
}
Component example: reference/hero.scandinavian-arch-window.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
<title>hero.scandinavian-arch-window — Scandinavian Soft</title>
<link rel="stylesheet" href="base.css">
<style>
  .hero { min-height: 82vh; padding: calc(var(--unit) * 10) 0; align-items: center; row-gap: calc(var(--unit) * 6); }
  .hero .text { grid-column: 2 / 7; grid-row: 1; display: grid; gap: calc(var(--unit) * 4); }
  .hero h1 { font-size: var(--step-6); font-weight: 400; line-height: 1.2; max-width: 16ch; }
  .hero .lead { font-size: var(--step-1); max-width: 40ch; }
  .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; }
  .link { color: var(--heading); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
  .arch { grid-column: 7 / 12; grid-row: 1; aspect-ratio: 3 / 4; }
  .arch img { border-radius: 999px 999px var(--radius) var(--radius); }
  .pebble { grid-column: 10 / 12; grid-row: 1; align-self: end; justify-self: end; margin-bottom: -48px; width: min(100%, 160px); aspect-ratio: 1; border-radius: 50%; background: var(--surface-alt); }
  @media (max-width: 640px) { .hero h1 { font-size: var(--step-4); } }
</style>
</head>
<body>
<section class="wrap">
  <div class="hero grid">
    <div class="text">
      <p class="eyebrow muted">Bakery &amp; café — Södermalm</p>
      <h1>Slow bread, baked before the city wakes.</h1>
      <p class="lead muted">Sourdough, cardamom buns and strong coffee at long oak tables. Open every morning from seven.</p>
      <div class="actions">
        <a class="btn btn-primary" href="#menu">See today's bake</a>
        <a class="link" href="#visit">Find us →</a>
      </div>
    </div>
    <div class="arch"><img src="https://images.unsplash.com/photo-1509440159596-0249088772ff?w=900" alt="Loaves cooling on a wooden rack by a window"></div>
    <div class="pebble hide-phone" aria-hidden="true"></div>
  </div>
</section>
</body>
</html>

Other patterns in this design

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