hero.brutalist-raw-document · Raw document

A hero pattern from Brutalist, 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.brutalist-raw-document". A guide only: DESIGN.md and tokens.json are the source of truth.

Rule
The hero is a plain HTML document: a mono path line, an uppercase h1 at step 8 across the full width, a 1 px rule, a paragraph and bare underlined links. No grid, no image.
Slots
eyebrow, headline, subhead, cta, cta2, meta
Notes
Looks like an unstyled page that happens to be enormous. Links are default-blue underlined text, never buttons.
Tokens
bg #FAFAFA · text #1F1F1F · heading #0F0F0F · accent #012FD3 · accent2 #4980FE · Space Mono / Space Mono · radius 0px · space unit 8px (full list in design/tokens.json)
Section
vertical padding step 4

Pattern notes

  • Stack, full width, no grid: a mono small line like a file path or "last modified" stamp; the headline in uppercase at step 8, heaviest weight, leading tight, allowed to run edge to edge and break mid-word on phones; a 1 px rule; the subhead as a plain paragraph (max 60 ch); then two bare links (underlined, accent colour, no padding, no fill) side by side; a 1 px rule and a mono meta line. Nothing is boxed or aligned beyond the left edge.

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

Layout tree (as in design/layout.json)
{
  "pattern": "hero.brutalist-raw-document",
  "kind": "hero",
  "slots": [
    "eyebrow",
    "headline",
    "subhead",
    "cta",
    "cta2",
    "meta"
  ],
  "notes": "Looks like an unstyled page that happens to be enormous. Links are default-blue underlined text, never buttons.",
  "tree": {
    "el": "box",
    "gap": 2,
    "children": [
      {
        "el": "text",
        "slot": "eyebrow",
        "role": "small",
        "font": "mono"
      },
      {
        "el": "text",
        "slot": "headline",
        "role": "display",
        "step": 8,
        "transform": "uppercase",
        "tracking": "tight",
        "leading": "tight"
      },
      {
        "el": "divider",
        "weight": 1
      },
      {
        "el": "text",
        "slot": "subhead",
        "role": "body",
        "maxCh": 60
      },
      {
        "el": "box",
        "dir": "row",
        "gap": 3,
        "wrap": true,
        "children": [
          {
            "el": "button",
            "slot": "cta",
            "variant": "link"
          },
          {
            "el": "button",
            "slot": "cta2",
            "variant": "link"
          }
        ]
      },
      {
        "el": "divider",
        "weight": 1
      },
      {
        "el": "text",
        "color": "textMuted",
        "slot": "meta",
        "role": "small",
        "font": "mono"
      }
    ]
  }
}
Component example: reference/hero.brutalist-raw-document.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
<title>hero.brutalist-raw-document — Brutalist</title>
<link rel="stylesheet" href="base.css">
<style>
  .hero { display: grid; gap: 16px; padding-block: 32px; }
  h1 { font-size: clamp(56px, 13vw, var(--step-8)); }
  hr { border: 0; border-top: 1px solid var(--text); }
  .links { display: flex; gap: 24px; flex-wrap: wrap; }
  p { max-width: 60ch; }
</style>
</head>
<body>
<section class="wrap hero">
  <p class="mono-small">~/index.html — last modified 2026-10-24 22:41</p>
  <h1>We make records nobody asked for</h1>
  <hr>
  <p>Independent label, Rotterdam. Noise, tape loops and field recordings, pressed in runs of 300. No algorithm, no playlists, no refunds.</p>
  <p class="links"><a href="/catalogue">Browse the catalogue</a> <a href="/mailing-list">Join the mailing list</a></p>
  <hr>
  <p class="mono-small" style="color: var(--muted)">47 releases · 12 artists · shipping worldwide</p>
</section>
</body>
</html>

Other patterns in this design

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