hero.neo-grotesk-quiet-corner · Quiet corner

A hero pattern from Neo-grotesk Minimal, 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.neo-grotesk-quiet-corner". A guide only: DESIGN.md and tokens.json are the source of truth.

Rule
Tiny labels in the top corners, a deliberate empty band, then a modest headline (step 5, weight 500) bottom-right on 7–12 over a hairline and a three-part base line.
Slots
eyebrow, meta, headline, subhead, cta, address
Grid areas
label 1-3 · meta 10-12 · headline 7-12 · subhead 1-3 · cta 7-8 · address 10-12 (12-column grid, 1-based inclusive spans)
Notes
Most of the hero is empty on purpose. The headline is small for a hero — restraint is the point.
Tokens
bg #FAFAFA · text #1F1F1F · heading #0F0F0F · accent #F95620 · accent2 #9E2C00 · Geist / Geist · radius 2px · space unit 8px (full list in design/tokens.json)

Pattern notes

  • Top row: a tiny uppercase tracked label (step −1) on 1–3 and a tiny muted location/date on 10–12. Then an empty band about 40% of the viewport. The headline sits bottom-right on 7–12 at step 5, weight 500, tight tracking, max ~24 ch. A hairline across the grid, then the base line: subhead in small type on 1–3, an underlined small CTA on 7–8, the muted address (or one fact) on 10–12 — never a caption without an image. At phone width the top labels stay at the top, the empty band takes whatever height is left, and the headline block stacks flush left at the bottom.

Brand & product studio

Booking projects from June 2026

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

Rua da Boavista 72, 1200-066 Lisboa

Layout tree (as in design/layout.json)
{
  "pattern": "hero.neo-grotesk-quiet-corner",
  "kind": "hero",
  "grid": {
    "label": "1-3",
    "meta": "10-12",
    "headline": "7-12",
    "subhead": "1-3",
    "cta": "7-8",
    "address": "10-12"
  },
  "slots": [
    "eyebrow",
    "meta",
    "headline",
    "subhead",
    "cta",
    "address"
  ],
  "notes": "Most of the hero is empty on purpose. The headline is small for a hero — restraint is the point.",
  "tree": {
    "el": "box",
    "gap": 10,
    "justify": "between",
    "minVh": 0.6,
    "children": [
      {
        "el": "grid",
        "gap": 3,
        "align": "start",
        "children": [
          {
            "el": "text",
            "span": "1-3",
            "slot": "eyebrow",
            "role": "eyebrow",
            "step": -1,
            "transform": "uppercase",
            "tracking": "wide"
          },
          {
            "el": "text",
            "span": "10-12",
            "color": "textMuted",
            "slot": "meta",
            "role": "small",
            "step": -1
          }
        ]
      },
      {
        "el": "box",
        "gap": 3,
        "children": [
          {
            "el": "grid",
            "gap": 3,
            "children": [
              {
                "el": "text",
                "span": "7-12",
                "slot": "headline",
                "role": "display",
                "step": 5,
                "weight": 500,
                "tracking": "tight",
                "leading": "tight",
                "maxCh": 24
              }
            ]
          },
          {
            "el": "divider",
            "weight": 1
          },
          {
            "el": "grid",
            "gap": 3,
            "align": "baseline",
            "children": [
              {
                "el": "text",
                "span": "1-3",
                "slot": "subhead",
                "role": "small",
                "maxCh": 36
              },
              {
                "el": "button",
                "span": "7-8",
                "slot": "cta",
                "variant": "underline",
                "size": "sm"
              },
              {
                "el": "text",
                "span": "10-12",
                "color": "textMuted",
                "slot": "address",
                "role": "small"
              }
            ]
          }
        ]
      }
    ]
  }
}
Component example: reference/hero.neo-grotesk-quiet-corner.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
<title>hero.neo-grotesk-quiet-corner — Neo-grotesk Minimal</title>
<link rel="stylesheet" href="base.css">
<style>
  .hero { min-height: 92vh; padding: 24px 0 48px; grid-template-rows: auto 1fr auto auto auto; row-gap: 24px; }
  .hero .top-l { grid-column: 1 / 3; } .hero .top-r { grid-column: 10 / 13; }
  h1 { grid-column: 7 / 13; grid-row: 3; font-size: var(--step-4); max-width: 22ch; align-self: end; }
  .rule { grid-column: 1 / 13; grid-row: 4; }
  .sub { grid-column: 1 / 4; grid-row: 5; } .cta { grid-column: 7 / 9; grid-row: 5; } .cap { grid-column: 10 / 13; grid-row: 5; }
  @media (max-width: 640px) { .hero { min-height: 0; } .hero > * { grid-row: auto !important; } h1 { margin-top: 96px; } }
</style>
</head>
<body>
<section class="wrap">
  <div class="hero grid">
    <p class="label top-l">Halden — Index 01</p>
    <p class="label top-r">Oslo / Remote · Est. 2019</p>
    <h1>Infrastructure for teams that ship quietly.</h1>
    <div class="rule hairline"></div>
    <p class="small sub">Deploys, logs and rollbacks in one place. No dashboards you'll never open.</p>
    <a class="small cta accent" href="/start">Start a project</a>
    <p class="small muted cap">Used by 1,400 engineering teams</p>
  </div>
</section>
</body>
</html>

Other patterns in this design

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