cta.sketchbook-sticky-callout · Sketchbook sticky callout

A cta pattern from Sketchbook, drawn alone below with this design's tokens and sample copy. Used in this design on: home page, section 10. Give the section root data-pattern="cta.sketchbook-sticky-callout". A guide only: DESIGN.md and tokens.json are the source of truth.

Rule
One big yellow sticky: h2, lead and an email form in 1–7; a white card with a 1:1 doodle and a red ring above it in 8–12.
Slots
title, body, newsletter, image
Tokens
bg #FBF8F0 · text #2A2722 · heading #1B1915 · accent #FFD43B · accent2 #C92A2A · Kalam / Figtree · radius 12px · space unit 8px (full list in design/tokens.json)

Pattern notes

  • One big yellow sticky note across all columns (padding 80 × 64 px): h2 at step 6 (≤16 ch), a lead and an inline email form in 1–7; a white sketch card holding a 1:1 doodle in 8–12 with a red hand-drawn ring scribbled just above its top-right corner (hidden on phones).

Have a hard thing to explain?

Each engagement starts with a two-week audit: interviews with customers, sales and the people who build the product. The brief writes itself after that.

Email
you@example.com
Subscribe
Layout tree (as in design/layout.json)
{
  "pattern": "cta.sketchbook-sticky-callout",
  "kind": "cta",
  "slots": [
    "title",
    "body",
    "newsletter",
    "image"
  ],
  "tree": {
    "el": "box",
    "bg": "accent",
    "pad": [
      10,
      8
    ],
    "children": [
      {
        "el": "grid",
        "cols": 12,
        "gap": 6,
        "align": "center",
        "children": [
          {
            "el": "box",
            "span": "1-7",
            "gap": 4,
            "children": [
              {
                "el": "text",
                "slot": "title",
                "role": "h2",
                "step": 6,
                "maxCh": 16
              },
              {
                "el": "text",
                "slot": "body",
                "role": "lead",
                "maxCh": 44
              },
              {
                "el": "form",
                "slot": "newsletter",
                "fields": [
                  "email"
                ],
                "inline": true
              }
            ]
          },
          {
            "el": "grid",
            "span": "8-12",
            "cols": 12,
            "gap": 0,
            "children": [
              {
                "el": "shape",
                "span": "10-12",
                "rowSpan": "1-1",
                "mobile": "hide",
                "alignSelf": "end",
                "kind": "ring",
                "size": "md",
                "fill": "accent2",
                "hand": true
              },
              {
                "el": "box",
                "span": "1-11",
                "rowSpan": "2-2",
                "bg": "surface",
                "pad": [
                  3,
                  3
                ],
                "children": [
                  {
                    "el": "media",
                    "slot": "image",
                    "aspect": "1/1",
                    "treatment": "sketch",
                    "frame": "none"
                  }
                ]
              }
            ]
          }
        ]
      }
    ]
  }
}
Component example: reference/cta.sketchbook-sticky-callout.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
<title>cta.sketchbook-sticky-callout — Sketchbook</title>
<link rel="stylesheet" href="base.css">
<style>
  section { margin-block: var(--section); padding: 80px 64px; align-items: center; }
  .copy { grid-column: 1 / 8; display: grid; gap: 24px; }
  h2 { font-size: var(--step-6); max-width: 16ch; }
  .lead { font-size: var(--step-1); max-width: 44ch; }
  form { display: flex; gap: 12px; flex-wrap: wrap; }
  form input { flex: 1 1 240px; }
  form .btn { background: var(--heading); color: var(--accent); }
  .card { grid-column: 8 / 13; position: relative; padding: 24px; }
  .card .ring { position: absolute; top: -40px; right: -24px; width: 88px; height: 88px; }
  @media (max-width: 640px) { section { padding: 40px 24px; } h2 { font-size: var(--step-4); } .card .ring { display: none; } }
</style>
</head>
<body>
<main class="wrap">
  <section class="grid sticky yellow sketch" data-pattern="cta.sketchbook-sticky-callout">
    <div class="copy">
      <h2>Have a hard thing to explain?</h2>
      <p class="lead">Eleven people: strategists, writers, designers and two engineers who ship what the others draw.</p>
      <form action="/subscribe"><label class="hide-phone" for="e" hidden>Email</label><input class="field" id="e" type="email" placeholder="you@example.com" aria-label="Email"><button class="btn" type="submit">Subscribe</button></form>
    </div>
    <div class="card sheet sketch">
      <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>
      <svg class="doodle" viewBox="0 0 300 300" role="img" aria-label="Hand-drawn light bulb"><circle class="hl" cx="150" cy="128" r="64"/><path d="M150 52 C200 52 228 90 222 132 C218 160 196 172 188 200 H112 C104 172 82 160 78 132 C72 90 100 52 150 52 Z"/><path d="M114 214 H186 M118 232 H182 M130 250 H170"/><path d="M150 18 V34 M70 46 L82 58 M230 46 L218 58 M36 128 H52 M248 128 H264"/></svg>
    </div>
  </section>
</main>
</body>
</html>

Other patterns in this design

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