SKETCHBOOK KIT

Reusable pieces for slides and static web content in the style of the “learn anything” lightning-lesson slides. Every piece is plain HTML, CSS or SVG. Add sketchbook.css and sketchbook.js to a page, then paste in any chunk. Drop the icons and characters in as images anywhere.

Example: a whole slide built only from kit pieces

How to get the agent
to teach you anything

The learning loop

1Add sources

books, manuals, transcripts, code

2Filter + focus

use a lens: “what do I care about?”

3Create new source

pull out just the parts that matter

4Create a projection

audio summary, infographic, quiz

5Validate + iterate

teach back, quiz me, spaced repetition

Insight: “I want to learn a book while driving.”
Copy the code
<div class="sk-slide sk-paper"><div class="sk-slide-body">
  <h1 class="sk-title" style="font-size:2.7em"><span class="sk-burst"><span class="sk-hl">How to get the agent</span><br><span class="sk-hl">to teach you anything</span></span></h1>
  <h2 class="sk-section" style="font-size:1.7em;margin:.4em 0 .5em">The learning loop</h2>
  <div class="sk-row" style="font-size:.78em">
    <div class="sk-panel sk-mustard">
  <div class="sk-step"><span class="sk-num">1</span><span class="sk-label">Add sources</span></div>
  <img src="icons/books.svg" alt="">
  <p>books, manuals, transcripts, code</p>
</div>
    <svg class="sk-arrow" viewBox="0 0 40 20" aria-hidden="true"><line x1="4" y1="10" x2="30" y2="10" stroke-width="4" stroke-linecap="round" marker-end="url(#sk-head)" filter="url(#sk-wobble-line)"/></svg>
    <div class="sk-panel sk-teal">
  <div class="sk-step"><span class="sk-num">2</span><span class="sk-label">Filter + focus</span></div>
  <img src="icons/magnifier.svg" alt="">
  <p>use a lens: <span class="sk-em">“what do I care about?”</span></p>
</div>
    <svg class="sk-arrow" viewBox="0 0 40 20" aria-hidden="true"><line x1="4" y1="10" x2="30" y2="10" stroke-width="4" stroke-linecap="round" marker-end="url(#sk-head)" filter="url(#sk-wobble-line)"/></svg>
    <div class="sk-panel sk-forest sk-dashed">
  <div class="sk-step"><span class="sk-num">3</span><span class="sk-label">Create new source</span></div>
  <img src="icons/page-pencil.svg" alt="">
  <p>pull out just the parts that matter</p>
</div>
    <svg class="sk-arrow" viewBox="0 0 40 20" aria-hidden="true"><line x1="4" y1="10" x2="30" y2="10" stroke-width="4" stroke-linecap="round" marker-end="url(#sk-head)" filter="url(#sk-wobble-line)"/></svg>
    <div class="sk-panel sk-coral">
  <div class="sk-step"><span class="sk-num">4</span><span class="sk-label">Create a projection</span></div>
  <img src="icons/headphones.svg" alt="">
  <p>audio summary, infographic, quiz</p>
</div>
    <svg class="sk-arrow" viewBox="0 0 40 20" aria-hidden="true"><line x1="4" y1="10" x2="30" y2="10" stroke-width="4" stroke-linecap="round" marker-end="url(#sk-head)" filter="url(#sk-wobble-line)"/></svg>
    <div class="sk-panel sk-blue">
  <div class="sk-step"><span class="sk-num">5</span><span class="sk-label">Validate + iterate</span></div>
  <img src="icons/checklist.svg" alt="">
  <p>teach back, quiz me, spaced repetition</p>
</div>
  </div>
  <div style="margin:0 7% 0 7%"><svg class="sk-loop" viewBox="0 0 1000 70" aria-hidden="true"><path d="M960 6 C 950 50, 820 54, 500 54 C 180 54, 50 50, 40 8" fill="none" stroke-width="5" stroke-linecap="round" marker-end="url(#sk-head)" filter="url(#sk-wobble-soft)"/></svg></div>
  <div style="display:flex;align-items:center;justify-content:center;gap:1.5em;margin-top:-.6em">
    <div class="sk-ribbon" style="font-size:1.3em"><img src="icons/car.svg" alt=""><span class="sk-kicker">Insight:</span> “I want to learn a book while driving.”</div>
    <img src="characters/learner.svg" alt="" style="height:6.2em;margin-top:.6em">
  </div>
</div></div>

Chunks

Title on highlighter

Big marker caps on a yellow highlighter swash. Wrap each line's words in .sk-hl; add .sk-burst for the tick marks.

How to get the agent
to teach you anything

Copy the code
<h1 class="sk-title"><span class="sk-burst"><span class="sk-hl">How to get the agent</span><br><span class="sk-hl">to teach you anything</span></span></h1>

Section heading

Label caps in deep teal with a rule either side.

The learning loop

Copy the code
<h2 class="sk-section">The learning loop</h2>

Step panel

A numbered step in one of the five main colours. Add .sk-dashed for a dotted outline, to highlight the step you're talking about. Use .sk-em for accent text.

2Filter + focus

use a lens: “what do I care about?”

3Create new source

pull out just the parts that matter

Copy the code
<div class="sk-row">
<div class="sk-panel sk-teal">
  <div class="sk-step"><span class="sk-num">2</span><span class="sk-label">Filter + focus</span></div>
  <img src="icons/magnifier.svg" alt="">
  <p>use a lens: <span class="sk-em">“what do I care about?”</span></p>
</div>
<div class="sk-panel sk-forest sk-dashed">
  <div class="sk-step"><span class="sk-num">3</span><span class="sk-label">Create new source</span></div>
  <img src="icons/page-pencil.svg" alt="">
  <p>pull out just the parts that matter</p>
</div>
</div>

Speech bubble

Something a person says or asks. Add .sk-tail-right to move the tail to the right.

“I want to learn Chapter 1 of Shape Up, while I’m driving.”
Copy the code
<div class="sk-bubble">“I want to learn <span class="sk-em">Chapter 1 of Shape Up</span>, while I’m driving.”</div>

Ribbon banner

An insight or takeaway. The kicker word goes in .sk-kicker, and an icon is optional.

Insight: “I want to learn a book while driving.”
Copy the code
<div class="sk-ribbon"><img src="icons/car.svg" alt=""><span class="sk-kicker">Insight:</span> “I want to learn a book while driving.”</div>

Arrows

A short slate connector between steps, and the blue loop-back arrow that sits under a row of panels. Their colours come from the CSS.

Copy the code
<svg class="sk-arrow" viewBox="0 0 40 20" aria-hidden="true"><line x1="4" y1="10" x2="30" y2="10" stroke-width="4" stroke-linecap="round" marker-end="url(#sk-head)" filter="url(#sk-wobble-line)"/></svg>
<svg class="sk-loop" viewBox="0 0 1000 70" aria-hidden="true"><path d="M960 6 C 950 50, 820 54, 500 54 C 180 54, 50 50, 40 8" fill="none" stroke-width="5" stroke-linecap="round" marker-end="url(#sk-head)" filter="url(#sk-wobble-soft)"/></svg>

Panel wash

Add .sk-wash to a panel for a pale wash of its accent colour mixed with the page, about 9%. Use it to set a card apart from the page.

1Add sources

books, manuals, transcripts, code

2Filter + focus

use a lens: “what do I care about?”

Copy the code
<div class="sk-row">
<div class="sk-panel sk-mustard sk-wash">
  <div class="sk-step"><span class="sk-num">1</span><span class="sk-label">Add sources</span></div>
  <img src="icons/books.svg" alt="">
  <p>books, manuals, transcripts, code</p>
</div>
<div class="sk-panel sk-teal sk-wash">
  <div class="sk-step"><span class="sk-num">2</span><span class="sk-label">Filter + focus</span></div>
  <img src="icons/magnifier.svg" alt="">
  <p>use a lens: <span class="sk-em">“what do I care about?”</span></p>
</div>
</div>

Highlighter anywhere

.sk-hl works outside a title too: on a phrase, or on a whole row to mark the one you're on. Add .sk-sweep to sweep it in once, for a moment worth marking; it stays still for people who ask for less motion.

Next is the lesson leads your coach thread.

The course outline shows where you are
You can ask your coach anything
A side question goes in a side chat
Copy the code
<p style="font-size:1.4em;margin:0 0 .6em">Next is <span class="sk-hl">the lesson leads your coach thread</span>.</p>
<div style="font-size:1.4em">
  <div>The course outline shows where you are</div>
  <div class="sk-hl sk-sweep">You can ask your coach anything</div>
  <div>A side question goes in a side chat</div>
</div>

Tick

A hand-drawn tick for something done or passing. It takes the size of the text around it, and the forest text colour; set color to change it. Give it a label when it stands alone.

Three Examples hold.

Copy the code
<p style="font-size:1.4em;margin:0"><span class="sk-tick" role="img" aria-label="done"></span> Three Examples hold.</p>
<p style="font-size:2.6em;margin:0"><span class="sk-tick" role="img" aria-label="passing"></span></p>

Buttons

.sk-btn is the one main action on a screen: deep teal with paper lettering. Add .sk-secondary for the others: an ink outline.

Copy the code
<button class="sk-btn" type="button">Start the course →</button>
<button class="sk-btn sk-secondary" type="button">Use a different project</button>

Progress meter

A wobbly bar. Set --sk-value from 0% to 100%; the fill takes the accent, so a colour modifier changes it. Put the count in words next to it.

3 of 10 Examples hold
Copy the code
<div style="display:flex;align-items:center;gap:.8em;font-size:1.3em">
  <div class="sk-meter" role="progressbar" aria-label="Examples that hold" aria-valuemin="0" aria-valuemax="10" aria-valuenow="3" style="--sk-value:30%;width:10em"></div>
  <span>3 of 10 Examples hold</span>
</div>
<div class="sk-meter sk-mustard" role="progressbar" aria-label="Lessons done" aria-valuemin="0" aria-valuemax="9" aria-valuenow="6" style="--sk-value:66%;width:10em;margin-top:1em"></div>

Characters

A person reading a book with headphones on. Studying, learning, taking something in.characters/learner.svg
A person pointing up with an idea. Explaining, teaching, a tip or insight.characters/explainer.svg
A person waving. Hello, welcome, getting someone's attention, goodbye.characters/waver.svg
A person holding a mug of coffee. Relaxed, a break, informal chat.characters/coffee.svg
A person pointing up with an idea. An alternative to the explainer.characters/pointer.svg
A sitting cat, winking. Playful aside, a light moment.characters/cat.svg
A sitting dog with its head tilted. Curiosity, a question, loyalty.characters/dog.svg
Four people and a dog side by side. A team, a community, working together.characters/group.svg

Doodle icons

One colour for simple objects; up to three when the object has distinct parts. Always from the palette.

Brand words

A steaming mug with a heart. Warmth, welcome, a break, a chat over coffee. Stands for 'warm'.icons/mug.svg
A colourful kite. Play, curiosity, freedom, trying things out. Stands for 'whimsical'.icons/kite.svg
An owl. Knowledge, good judgement, a wise guide. Stands for 'wise'.icons/owl.svg

Learning

A stack of books. Sources, reading, research, a body of knowledge.icons/books.svg
A page with a pencil. Writing, notes, drafting, creating something new.icons/page-pencil.svg
A magnifying glass. Looking closely, searching, focusing, filtering.icons/magnifier.svg
A lightbulb. An idea, an insight, a moment of understanding.icons/lightbulb.svg
A checklist with ticks. Steps done, validation, testing, a plan.icons/checklist.svg
Headphones. Listening, audio, podcasts, learning on the go.icons/headphones.svg

Working together

Two speech bubbles. Conversation, feedback, asking questions.icons/chat.svg
Two puzzle pieces fitting together. Collaboration, integration, parts of a solution.icons/puzzle.svg
A sticky note. Ideas on a wall, workshops, capturing a thought.icons/sticky-note.svg
A compass. Direction, strategy, finding your way, goals.icons/compass.svg

Tech & systems

A laptop. Computers, coding, working online.icons/laptop.svg
A friendly robot. AI, agents, automation.icons/robot.svg
A robot scanning a page. AI reading, research, finding information.icons/robot-scan.svg
A robot sharing a checked result. AI reporting back, completing a task.icons/robot-report.svg
Gears. Systems, processes, how things work, machinery.icons/gear.svg
A sprout. Growth, learning, starting small, progress.icons/sprout.svg
A car. Travel, a journey, learning on the move, speed.icons/car.svg

Tokens: colours (CSS variables in sketchbook.css; also tokens.json)

--sk-mustard#EEA306Step colour 1. Panels, icon washes, warm accents.
--sk-teal#039695Step colour 2. Panels, icon washes.
--sk-forest#4A7D4BStep colour 3. Panels, icon washes.
--sk-coral#F76C37Step colour 4. Panels, icon washes.
--sk-blue#1F78A8Step colour 5. Panels, icon washes, the loop-back arrow.
--sk-slate#36545CConnector arrows between steps.
--sk-rust#D6631CAccent text in speech bubbles, and ribbon kickers.
--sk-deep-teal#094854Section headings and their rules.
--sk-highlighter#FFEEB8The swash behind big titles.
--sk-paper#FCF9F3The page background.
--sk-ribbon#FAEED3Ribbon banner fill.
--sk-bubble#EEF4F5Speech bubble fill.
--sk-ink#2A2724Outlines and line drawing.
--sk-ink-title#1B1B1BBig title lettering.
--sk-body-text#3A3631Sentences and captions.

Tokens: roles (what the pieces paint with)

Use these rather than the palette when you build something new.

--sk-pagevar(--sk-paper)The page behind everything.
--sk-textvar(--sk-body-text)Sentences and captions.
--sk-title-textvar(--sk-ink-title)Big title lettering and its burst ticks.
--sk-linevar(--sk-ink)Outlines of bubbles and secondary buttons.
--sk-headingvar(--sk-deep-teal)Section headings and their rules, primary buttons.
--sk-on-headingvar(--sk-paper)Text on a primary button.
--sk-connectorvar(--sk-slate)Connector arrows between steps.
--sk-loopvar(--sk-blue)The loop-back arrow.
--sk-bubble-fillvar(--sk-bubble)Speech bubble fill.
--sk-swashvar(--sk-highlighter)What the highlighter swash reads as: a solid colour for tints and contrast checks.
--sk-trackcolor-mix(in oklab, var(--sk-ink) 12%, var(--sk-paper))The empty part of a progress meter.
--sk-mustard-textcolor-mix(in oklch, var(--sk-mustard) 55%, var(--sk-ink))Mustard that reads as text.
--sk-teal-textcolor-mix(in oklch, var(--sk-teal) 70%, var(--sk-ink))Teal that reads as text.
--sk-forest-textcolor-mix(in oklch, var(--sk-forest) 85%, var(--sk-ink))Forest that reads as text. Ticks.
--sk-coral-textcolor-mix(in oklch, var(--sk-coral) 55%, var(--sk-ink))Coral that reads as text.
--sk-blue-textcolor-mix(in oklch, var(--sk-blue) 85%, var(--sk-ink))Blue that reads as text.
--sk-rust-textcolor-mix(in oklch, var(--sk-rust) 70%, var(--sk-ink))Rust that reads as text: bubble accents, ribbon kickers.
--sk-deep-teal-textvar(--sk-deep-teal)Deep teal that reads as text.

Tokens: type

Luckiest Guy
Big titles only, always in capitals.--sk-font-title
Patrick Hand SC
Step labels and section headings.--sk-font-label
Patrick Hand
Sentences and captions.--sk-font-body