features.sketchbook-sticky-board · Sketchbook sticky board

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

Rule
Intro with h2, line, 4:3 doodle and ghost link in 1–4; four to six blue sticky notes in a two-column masonry in 5–12.
Slots
sectionLabel, title, body, image, cta, features[4..6]
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

  • Intro in 1–4: note, h2 at step 5 (≤14 ch), a muted line, a 4:3 doodle and a ghost arrow link. Columns 5–12: four to six blue sticky notes in a two-column masonry, 24 px apart: a handwritten number at step 3, the title at step 2 and a line of body text.

What you get

What we do

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.

Start a project

01

Positioning

Find the one sentence your best customers already believe.

02

Identity systems

Logos, type and colour that work on a factory floor and a pitch deck.

03

Websites

Fast, editable sites built on the CMS your team already knows.

04

Sales enablement

Decks, one-pagers and demos your reps actually use.

05

Product naming

Names that survive trademark search and a noisy trade show.

Layout tree (as in design/layout.json)
{
  "pattern": "features.sketchbook-sticky-board",
  "kind": "features",
  "slots": [
    "sectionLabel",
    "title",
    "body",
    "image",
    "cta",
    "features[4..6]"
  ],
  "tree": {
    "el": "grid",
    "gap": 6,
    "align": "start",
    "children": [
      {
        "el": "box",
        "span": "1-4",
        "gap": 3,
        "children": [
          {
            "el": "text",
            "color": "link",
            "slot": "sectionLabel",
            "role": "label",
            "step": 2,
            "rotate": -3,
            "font": "heading"
          },
          {
            "el": "text",
            "slot": "title",
            "role": "h2",
            "step": 5,
            "maxCh": 14
          },
          {
            "el": "text",
            "color": "textMuted",
            "slot": "body",
            "role": "body"
          },
          {
            "el": "media",
            "mobile": "hide",
            "slot": "image",
            "aspect": "4/3",
            "treatment": "sketch",
            "frame": "none"
          },
          {
            "el": "button",
            "slot": "cta",
            "variant": "ghost",
            "arrow": true
          }
        ]
      },
      {
        "el": "repeat",
        "span": "5-12",
        "slot": "features",
        "min": 4,
        "max": 6,
        "layout": "masonry",
        "cols": 2,
        "gap": 4,
        "of": {
          "el": "box",
          "bg": "surfaceAlt",
          "gap": 2,
          "pad": [
            5,
            5
          ],
          "children": [
            {
              "el": "text",
              "slot": "number",
              "role": "number",
              "step": 3
            },
            {
              "el": "text",
              "slot": "title",
              "role": "h3"
            },
            {
              "el": "text",
              "slot": "body",
              "role": "body"
            }
          ]
        }
      }
    ]
  }
}
Component example: reference/features.sketchbook-sticky-board.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
<title>features.sketchbook-sticky-board — Sketchbook</title>
<link rel="stylesheet" href="base.css">
<style>
  section { padding-block: var(--section); align-items: start; }
  .intro { grid-column: 1 / 5; display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
  h2 { font-size: var(--step-5); max-width: 14ch; }
  .board { grid-column: 5 / 13; columns: 2; column-gap: 32px; }
  .board article { break-inside: avoid; margin-bottom: 32px; padding: 40px; display: grid; gap: 16px; }
  /* Sticky notes tilt alternately, never the copy inside them on its own. */
  .board article:nth-child(odd) { rotate: -1deg; } .board article:nth-child(even) { rotate: 1.2deg; }
  .board .num { font-size: var(--step-3); }
  .board h3 { font-size: var(--step-2); }
  @media (max-width: 640px) { .board { columns: 1; } .board article { rotate: none !important; padding: 28px; } }
  @media (prefers-reduced-motion: reduce) { .board article { rotate: none; } }
</style>
</head>
<body>
<main class="wrap">
  <section class="grid" data-pattern="features.sketchbook-sticky-board">
    <div class="intro">
      <span class="note">Why it works</span>
      <h2>What we do</h2>
      <p class="muted">Each engagement starts with a two-week audit: interviews with customers, sales and the people who build the product.</p>
      <svg class="doodle" viewBox="0 0 320 220" role="img" aria-label="Hand-drawn wireframe of a web page"><rect class="hl" x="180" y="150" width="60" height="22"/><path d="M20 24 H300 M24 20 V200 M296 22 V198 M20 196 H300 M20 52 H300"/><path d="M44 74 L150 176 M150 74 L44 176 M44 74 H150 V176 H44 Z"/><path d="M174 82 H276 M174 104 H262 M174 126 H270"/></svg>
      <a class="link-u" href="/process">Our process →</a>
    </div>
    <div class="board">
      <article class="sticky sketch"><span class="num">01</span><h3>Positioning</h3><p>Find the one sentence your best customers already believe.</p></article>
      <article class="sticky sketch"><span class="num">02</span><h3>Identity systems</h3><p>Logos, type and colour that work on a factory floor and a pitch deck.</p></article>
      <article class="sticky sketch"><span class="num">03</span><h3>Websites</h3><p>Fast, editable sites on the CMS your team already knows.</p></article>
      <article class="sticky sketch"><span class="num">04</span><h3>Sales enablement</h3><p>Decks, one-pagers and demos your reps actually use.</p></article>
    </div>
  </section>
</main>
</body>
</html>

Other patterns in this design

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