hero.sketchbook-annotated-split · Sketchbook annotated split

A hero pattern from Sketchbook, 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.sketchbook-annotated-split". A guide only: DESIGN.md and tokens.json are the source of truth.

Rule
Note, highlighted display headline, lead, buttons and a ringed line in 1–7; a 4:5 doodle in a sketch frame in 8–12 with a sticky note over its corner.
Slots
eyebrow, headline, subhead, cta, cta2, meta, heroImage, caption, label
Tokens
bg #FBF8F0 · text #2A2722 · heading #1B1915 · accent #FFD43B · accent2 #C92A2A · Kalam / Figtree · radius 12px · space unit 8px (full list in design/tokens.json)
Section
vertical padding step 6

Pattern notes

  • Two halves, vertically centred, at least 86 vh. Columns 1–7 on the dotted paper: a blue handwritten note rotated −3°, the display headline at step 7 (≤14 ch) with the yellow highlighter swipe behind it, a muted lead (≤46 ch), a yellow primary and a white secondary arrow button, and a red hand-drawn ring beside a muted one-line note. Columns 8–12: a 4:5 marker doodle in a sketch frame, a blue sticky note (caption at step 2 in the handwriting face, a small line) overlapping its bottom-left, and a hand-drawn yellow dot sticker on its top-right (hidden on phones).

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

Corvid Robotics — identity

Introducing

Layout tree (as in design/layout.json)
{
  "pattern": "hero.sketchbook-annotated-split",
  "kind": "hero",
  "slots": [
    "eyebrow",
    "headline",
    "subhead",
    "cta",
    "cta2",
    "meta",
    "heroImage",
    "caption",
    "label"
  ],
  "tree": {
    "el": "grid",
    "gap": 6,
    "align": "center",
    "minVh": 0.86,
    "children": [
      {
        "el": "box",
        "span": "1-7",
        "rowSpan": "1-1",
        "gap": 4,
        "align": "start",
        "children": [
          {
            "el": "text",
            "color": "link",
            "slot": "eyebrow",
            "role": "label",
            "step": 2,
            "rotate": -3,
            "font": "heading"
          },
          {
            "el": "text",
            "slot": "headline",
            "role": "display",
            "step": 7,
            "maxCh": 14,
            "mark": true
          },
          {
            "el": "text",
            "color": "textMuted",
            "slot": "subhead",
            "role": "lead",
            "maxCh": 46
          },
          {
            "el": "box",
            "dir": "row",
            "gap": 3,
            "align": "center",
            "wrap": true,
            "children": [
              {
                "el": "button",
                "slot": "cta",
                "variant": "primary",
                "size": "lg"
              },
              {
                "el": "button",
                "slot": "cta2",
                "variant": "secondary",
                "size": "lg",
                "arrow": true
              }
            ]
          },
          {
            "el": "box",
            "mobile": "keep",
            "dir": "row",
            "gap": 3,
            "align": "center",
            "children": [
              {
                "el": "shape",
                "kind": "ring",
                "size": "sm",
                "fill": "accent2",
                "hand": true
              },
              {
                "el": "text",
                "color": "textMuted",
                "slot": "meta",
                "role": "small",
                "maxCh": 44
              }
            ]
          }
        ]
      },
      {
        "el": "grid",
        "span": "8-12",
        "rowSpan": "1-1",
        "cols": 12,
        "gap": 3,
        "children": [
          {
            "el": "media",
            "span": "1-12",
            "rowSpan": "1-3",
            "slot": "heroImage",
            "aspect": "4/5",
            "treatment": "sketch",
            "frame": "border"
          },
          {
            "el": "shape",
            "span": "10-12",
            "rowSpan": "1-1",
            "mobile": "hide",
            "alignSelf": "start",
            "kind": "circle",
            "size": "md",
            "fill": "accent",
            "hand": true
          },
          {
            "el": "box",
            "span": "1-8",
            "rowSpan": "3-3",
            "bg": "surfaceAlt",
            "alignSelf": "end",
            "gap": 1,
            "pad": [
              3,
              4
            ],
            "children": [
              {
                "el": "text",
                "slot": "caption",
                "role": "h4",
                "step": 2
              },
              {
                "el": "text",
                "slot": "label",
                "role": "small"
              }
            ]
          }
        ]
      }
    ]
  }
}
Component example: reference/hero.sketchbook-annotated-split.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
<title>hero.sketchbook-annotated-split — Sketchbook</title>
<link rel="stylesheet" href="base.css">
<style>
  .hero { min-height: 86vh; align-items: center; padding-block: 48px; }
  .copy { grid-column: 1 / 8; display: flex; flex-direction: column; align-items: flex-start; gap: 32px; }
  h1 { font-size: var(--step-7); line-height: 1.02; max-width: 14ch; }
  .lead { font-size: var(--step-1); color: var(--muted); max-width: 46ch; }
  .actions { display: flex; flex-wrap: wrap; gap: 24px; }
  .aside { display: flex; align-items: center; gap: 16px; }
  .drawing { grid-column: 8 / 13; position: relative; }
  .frame { padding: 24px; background: var(--surface); }
  .pin { position: absolute; left: -8px; bottom: -24px; width: 66%; padding: 24px 32px; }
  .pin h4 { font-size: var(--step-2); }
  .sticker { position: absolute; top: -20px; right: -16px; width: 72px; height: 72px; color: var(--accent); }
  @media (max-width: 640px) { h1 { font-size: var(--step-5); } .pin { position: static; width: auto; margin-top: 16px; } .sticker { display: none; } }
</style>
</head>
<body>
<main class="wrap">
  <section class="grid hero" data-pattern="hero.sketchbook-annotated-split">
    <div class="copy">
      <span class="note">Brand &amp; product studio</span>
      <h1><span class="mark">We make complicated companies simple to choose</span></h1>
      <p class="lead">A 14-person studio helping manufacturers, labs and B2B teams explain what they do.</p>
      <div class="actions"><a class="btn lg" href="/contact">Start a project</a><a class="btn lg secondary" href="/work">Read case studies <span aria-hidden="true">→</span></a></div>
      <p class="aside small muted"><svg class="ring" viewBox="0 0 100 100" aria-hidden="true"><path d="M50 9 C74 8 92 26 91 50 C90 75 72 92 49 91 C25 90 9 73 10 49 C11 30 24 15 42 11" fill="none" stroke="currentColor" stroke-width="7" stroke-linecap="round"/></svg> Booking projects from June</p>
    </div>
    <figure class="drawing">
      <div class="frame sketch">
        <svg class="doodle" viewBox="0 0 320 400" role="img" aria-label="Hand-drawn bar chart rising to the right">
          <rect class="hl" x="232" y="128" width="30" height="214" transform="rotate(1 247 235)"/>
          <line x1="48" y1="60" x2="46" y2="344"/><path d="M40 342 C120 340 210 343 292 340"/>
          <path d="M70 342 V270 H98 V342 M118 342 V244 H146 V342 M166 342 V210 H194 V342 M214 342 V170 H242 V342"/>
          <path d="M62 262 C120 236 168 218 214 168 L246 112 M232 116 L247 110 L250 126"/>
        </svg>
      </div>
      <svg class="sticker" viewBox="0 0 100 100" aria-hidden="true"><path d="M50 4 C78 5 96 24 95 51 C94 78 74 96 48 95 C22 94 4 76 5 49 C6 23 24 3 50 4Z" fill="currentColor"/></svg>
      <figcaption class="pin sticky sketch"><h4>Corvid Robotics — identity</h4><p class="small">Introducing the new brand</p></figcaption>
    </figure>
  </section>
</main>
</body>
</html>

Other patterns in this design

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