Skip to content
SloplessTry the picker

Base style · contemporary · balanced

Sketchbook

Hand-drawn whiteboard and notebook look: dotted off-white paper, wobbly marker outlines, pastel sticky notes, yellow highlighter swipes, hand-ringed numbers, marker doodles and handwritten headlines over a clean sans.

Moods
playful, friendly, warm, raw
Suits
saas, devtools, ai, education, portfolio, events
Type
Kalam + Figtree

Principles

  • Draw every outline by hand: cards, buttons, inputs and frames get a 2 px ink stroke with uneven sketch corners, rules are wavy marker lines
  • Handwriting for headlines, numbers and margin notes only; every paragraph, label and form stays in a clean readable sans
  • Use three markers and no more: yellow highlighter, red pen and blue pen, on off-white dotted paper with pastel sticky notes
  • Annotate instead of decorating: rotated blue notes, hand-drawn rings around numbers, highlighter swipes behind key words
  • Illustrate with marker doodles in ink and one flat highlighter colour, never with photos, gradients or glossy 3D

Hard rules

  • No perfect boxes: no grey hairline cards, uniform radii, soft shadows, glass, gradients or glows.
  • No light or coloured outlines: the stroke is always the ink `border` colour.
  • No handwriting for paragraphs, form labels, legal text or anything under step 1; no all-caps tracked eyebrows.
  • No more than three markers (yellow `accent`, red `accent2`, blue `link`); red and yellow are never text colours.
  • No text on doodles, rings or dots; no photos, 3D renders or glossy icons.
  • No rotated headlines, paragraphs, forms or buttons; only notes, captions and tags tilt (max ±4°).

Full page preview with sample copy, rendered from the same tokens and layout the agent receives.

For coding agents

Rules and live patterns

Every pattern Sketchbook owns, drawn by the same renderer as the picker with the style's default tokens and sample copy. Each has an anchor (#<pattern id>). A design's own DESIGN.md and tokens.json stay the source of truth; this page shows what the patterns look like.

Do

  • Put the page on dotted paper (the dot-grid texture under Surfaces); sticky notes and white sheets sit on top and hide it.
  • Outline by hand: cards, sheets, buttons, inputs and framed images take the 2 px ink sketch outline; every rule is a wavy marker line.
  • Use two kinds of panel only: white sheets (`surface`) and flat sticky notes (`surfaceAlt`, or `accent` for single callouts). No shadows.
  • Handwriting face for headlines, numbers, quotes and margin notes (display at step 6–7); the body sans for every paragraph, label, button and input.
  • One highlighter swipe (`mark`) per section at most, behind the hero headline or one title, never on body text.
  • Margin notes: handwriting at step 1–2 in the blue-pen `link` colour, rotated −2° to −4°, on the paper or a white sheet only. Circle figures with a hand-drawn ring.
  • Illustrate with marker doodles (`treatment: sketch`); explanatory drawings carry numbered callouts matched by a numbered key.
  • Buttons: primary yellow `accent` with ink text and outline, secondary white with an ink outline. Hover nudges 1 px up and −1°; reduced motion only darkens the fill.
  • At 375 px: stack in source order, notes full width, drop decorative rings and dots, display at step 5–6.

Don't

  • No perfect boxes: no grey hairline cards, uniform radii, soft shadows, glass, gradients or glows.
  • No light or coloured outlines: the stroke is always the ink `border` colour.
  • No handwriting for paragraphs, form labels, legal text or anything under step 1; no all-caps tracked eyebrows.
  • No more than three markers (yellow `accent`, red `accent2`, blue `link`); red and yellow are never text colours.
  • No text on doodles, rings or dots; no photos, 3D renders or glossy icons.
  • No rotated headlines, paragraphs, forms or buttons; only notes, captions and tags tilt (max ±4°).

Heroes (5)

Sketchbook annotated split

hero.sketchbook-annotated-split · hero

Desktop, 1440 px
Phone, 390 px
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

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).

Sketchbook whiteboard board

hero.sketchbook-whiteboard-board · hero

Desktop, 1440 px
Phone, 390 px
Rule
One white sketch board: display headline in 1–8, lead and buttons in 9–12; a 16:9 doodle in 1–7 and three sticky-note stats in 8–12.
Slots
eyebrow, headline, subhead, cta, cta2, heroImage, stats[3..3]

One white sketch-outlined board across all 12 columns (padding 64 px), at least 80 vh: a note and the display headline at step 7 (≤16 ch) in 1–8, the lead and a primary plus ghost arrow button bottom-aligned in 9–12. Under them, a 16:9 marker doodle drawn straight on the board in 1–7 and three blue sticky-note stats stacked in 8–12: a handwritten number at step 5 beside a bold label.

Sketchbook sticky wall

hero.sketchbook-sticky-wall · hero

Desktop, 1440 px
Phone, 390 px
Rule
Highlighted display headline in 1–8, lead and an arrow button in 9–12, then a row of four sticky notes: number, title, line.
Slots
eyebrow, headline, subhead, cta, features[4..4]

A note and a highlighted display headline at step 7 (≤16 ch) in 1–8, a muted lead and one large primary arrow button bottom-aligned in 9–12. Below, a wall of four blue sticky notes across all columns (stacked on phones): a handwritten number at step 5 at the top, the title at step 2 and a small line at the bottom.

Sketchbook notebook page

hero.sketchbook-notebook-page · hero

Desktop, 1440 px
Phone, 390 px
Rule
Notebook page: page number and date in the margin left of a red rule, headline, lead, ringed to-dos and buttons in 3–8, a 3:4 doodle in 9–12.
Slots
index, date, eyebrow, headline, subhead, items[3..4], cta, cta2, heroImage, caption

A notebook page. Column 1 is the margin: the page number at step 5 in the blue pen and a muted date; column 2 holds the red margin rule (a 2 px vertical line in `accent2`), both hidden on phones. Columns 3–8: a note, display headline at step 6 (≤18 ch), muted lead, three or four to-dos each led by a small red hand-drawn ring, and a primary button with an underline link. Columns 9–12: a 3:4 doodle in a sketch frame with a muted handwritten caption rotated 2°.

Sketchbook callout sketch

hero.sketchbook-callout-sketch · hero

Desktop, 1440 px
Phone, 390 px
Rule
Waitlist: headline, lead and a yellow sticky with an email form in 1–6; a 1:1 drawing with three callouts and its numbered key in 7–12.
Slots
eyebrow, headline, subhead, label, signup, meta, heroImage, items[3..3]

For waitlists and launches. Columns 1–6: a note, display headline at step 6 (≤16 ch), muted lead, a yellow sticky note holding a bold line and an inline email form, and a muted small line under it. Columns 7–12: a 1:1 marker drawing with three numbered callouts (01–03), and a three-column key under it: the handwritten number in the blue pen and a bold one-line title.

Navigation (2)

Content blocks (16)

Sketchbook sticky board

features.sketchbook-sticky-board · features

Desktop, 1440 px
Phone, 390 px
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]

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.

Sketchbook doodle cards

features.sketchbook-doodle-cards · features

Desktop, 1440 px
Phone, 390 px
Rule
Title row (note, highlighted h2, muted lead), then four white sketch cards: 4:3 doodle, title, line.
Slots
sectionLabel, title, body, items[4..4]

Title row: note and the h2 at step 6 (≤18 ch) with the highlighter swipe in 1–7, a muted lead bottom-aligned in 8–12. Then four white sketch-outlined cards in one row (stacked on phones): a 4:3 marker doodle, the title at step 2 in the handwriting face and a small line.

Sketchbook whiteboard matrix

features.sketchbook-whiteboard-matrix · features

Desktop, 1440 px
Phone, 390 px
Rule
Dense, for docs: a white sketch board with h2 and button, then six to eight features in two divided columns: blue number, title, line.
Slots
sectionLabel, title, cta, features[6..8]

The dense block for docs and dev tools. One white board (padding 48 px): a note and h2 at step 5 with a secondary arrow button on one row, then six to eight features in two columns divided by wavy rules, each a handwritten number at step 3 in the blue pen in a narrow column beside the title (step 1) and a small line.

Sketchbook numbered steps

list.sketchbook-numbered-steps · list

Desktop, 1440 px
Phone, 390 px
Rule
Intro with h2, line and 4:3 doodle in 1–5; three or four divided steps in 6–12, each a yellow sticky number beside title and text.
Slots
sectionLabel, title, body, image, steps[3..4]

Intro in 1–5: note, h2 at step 6 (≤14 ch), a muted line and a 4:3 doodle. Columns 6–12: three or four steps divided by wavy rules, each a yellow sticky note (3 of 12 columns) holding the step number at step 4, beside the title at step 2 and a paragraph (≤52 ch).

Sketchbook to-do list

list.sketchbook-todo-list · list

Desktop, 1440 px
Phone, 390 px
Rule
A white sketch sheet: h2, line and button in 1–4; five or six divided to-dos in 5–12, each a red ring, title, line and a blue tag.
Slots
sectionLabel, title, body, cta, items[5..6]

One white sheet (padding 48 px). Columns 1–4: note, h2 at step 5, a line and a primary button. Columns 5–12: five or six to-dos divided by wavy rules: a small red hand-drawn ring, the title at step 1 and a small line, and a handwritten tag in the blue pen on the right rotated −2° (hidden on phones).

Sketchbook circled figures

stats.sketchbook-circled-figures · stats

Desktop, 1440 px
Phone, 390 px
Rule
Title row, then four figures: a handwritten number inside a blue hand-drawn ring, a bold label and a muted line, centred.
Slots
sectionLabel, title, body, stats[4..4]

Title row: note and h2 at step 5 in 1–6, a muted line in 7–12. Four figures in four columns (two-up on phones), each a number at step 5 in the handwriting face centred inside a big blue hand-drawn ring that does not quite close, then a bold centred label and a muted centred line.

Sketchbook pinned note

testimonial.sketchbook-pinned-note · testimonial

Desktop, 1440 px
Phone, 390 px
Rule
A blue sticky in 1–7 with a handwritten quote and a yellow dot by the name; note, h3, a framed 4:3 doodle and caption in 8–12.
Slots
quote, author, role, sectionLabel, title, image, caption

A big blue sticky note in 1–7 (padding 64 px): the quote in the handwriting face at step 4 (≤34 ch), then a hand-drawn yellow dot beside the bold name and the role. Columns 8–12: a note, h3 at step 3, a 4:3 doodle in a sketch frame and a muted caption.

Sketchbook plan notes

pricing.sketchbook-plan-notes · pricing

Desktop, 1440 px
Phone, 390 px
Rule
Title row, then one white sketch sheet listing three plans in divided rows: handwritten name, price, details, button.
Slots
sectionLabel, title, body, plans[3..3]

Title row: note and h2 at step 6 in 1–7, muted lead in 8–12. Then one white sketch sheet listing three plans as rows divided by wavy rules: the plan name handwritten at step 3 in 1–2, the price at step 6 in 3–5, a bold line and small details in 6–9, and a yellow primary button right-aligned in 10–12. Never three equal plan cards.

Sketchbook margin notes

faq.sketchbook-margin-notes · faq

Desktop, 1440 px
Phone, 390 px
Rule
Intro in 1–4 with highlighted h2, a line and a yellow contact sticky; four to six divided questions in 5–12, answers visible.
Slots
sectionLabel, title, body, caption, cta, faqs[4..6]

Intro in 1–4: note, h2 at step 5 (≤12 ch) with the highlighter swipe, a muted line and a small yellow sticky with a bold contact line and an underline arrow link. Columns 5–12: four to six questions divided by wavy rules, the question handwritten at step 2 and the answer in body text (≤66 ch), all answers visible.

Sketchbook sticky callout

cta.sketchbook-sticky-callout · cta

Desktop, 1440 px
Phone, 390 px
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

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).

Sketchbook scribble names

logos.sketchbook-scribble-names · logos

Desktop, 1440 px
Phone, 390 px
Rule
A red ring and a handwritten label, then five or six client names written in the handwriting face in one row.
Slots
sectionLabel, clients[5..6]

A small red hand-drawn ring beside a muted handwritten label, then five or six client names written in the handwriting face at step 2 in muted ink, spread across one row (scrolls sideways on phones). No logo images.

Sketchbook doodle portraits

team.sketchbook-doodle-portraits · team

Desktop, 1440 px
Phone, 390 px
Rule
Note and h2 with a ghost arrow link, then four to eight round doodle portraits with a handwritten name and role.
Slots
sectionLabel, title, cta, team[4..8]

Note and h2 at step 6 in 1–7, a ghost arrow link bottom-right in 10–12. Four to eight people in four columns (two on phones): a round marker-doodle portrait in a circular frame, the name at step 2 in the handwriting face and a muted role.

Sketchbook journal entries

blog.sketchbook-journal-entries · blog

Desktop, 1440 px
Phone, 390 px
Rule
Note, h2 and a button, then three divided entries: blue handwritten date, title, muted line and a framed 4:3 doodle.
Slots
sectionLabel, title, cta, posts[3..3]

Note and h2 at step 6 with a secondary arrow button on one row. Three entries divided by wavy rules, each a 12-column row: the date handwritten in the blue pen in 1–2, the title at step 3 in 3–7, a muted line in 8–10 and a 4:3 doodle in a sketch frame in 11–12.

Sketchbook annotated diagram

content.sketchbook-annotated-diagram · content

Desktop, 1440 px
Phone, 390 px
Rule
A framed 4:3 drawing with four callouts in 1–7; note, h2, paragraph and the four-part numbered key in 8–12.
Slots
drawing, sectionLabel, title, body, items[4..4]

A 4:3 marker drawing in a sketch frame in 1–7 with four numbered callouts. Columns 8–12: a note, h2 at step 5, a paragraph (≤46 ch) and the four-part key: the handwritten number in the blue pen beside a bold title and a muted line.

Sketchbook pinboard

gallery.sketchbook-pinboard · gallery

Desktop, 1440 px
Phone, 390 px
Rule
Note, h2 and a muted line, then six white sketch cards in a three-column masonry: 4:5 doodle, title, handwritten year.
Slots
sectionLabel, title, body, items[6..6]

Note and h2 at step 5 with a muted line on one row. Six white sketch cards in a three-column masonry (two on phones): a 4:5 marker doodle, the title at step 1 and a handwritten year on one row.

Sketchbook letter form

contact.sketchbook-letter-form · contact

Desktop, 1440 px
Phone, 390 px
Rule
A white sketch sheet with h2, line and contact form in 1–7; a blue sticky with email, phone, address and hours over a doodle in 8–12.
Slots
sectionLabel, title, body, contact, email, phone, address, hours, image

A white sketch sheet in 1–7 (padding 48 px): note, h2 at step 5, a line and the name / email / message form with sketch-outlined inputs. Columns 8–12: a blue sticky note with the email at step 2 in the handwriting face, phone, address and hours, over a 4:3 doodle.

Footers (2)

Sketchbook scrawl sign-off

footer.sketchbook-scrawl-signoff · footer

Desktop, 1440 px
Phone, 390 px
Rule
A wavy rule, then wordmark, handwritten tagline and newsletter form, stacked links, email and address; legal and a blue note last.
Slots
siteName, tagline, newsletter, pages, email, address, legal, meta

A wavy hand-drawn rule, then: wordmark, a handwritten tagline at step 4 (≤24 ch) and an inline newsletter form in 1–6, stacked plain links in 8–9, the bold email and a muted address in 10–12. Last row: the muted legal line left and a blue handwritten note rotated −2° right.

Sketchbook index card

footer.sketchbook-index-card · footer

Desktop, 1440 px
Phone, 390 px
Rule
One white sketch index card: monogram, underlined links and a button on one row, a wavy rule, the legal line.
Slots
siteName, pages, cta, legal

One white sketch-outlined index card (padding 40 × 48 px): monogram, underline links and a small secondary button on one row, a wavy rule, then the legal line.