hero.sketchbook-notebook-page · Sketchbook notebook page

A hero pattern from Sketchbook, drawn alone below with this design's tokens and sample copy. Not used in this design: shown with its tokens for comparison. Give the section root data-pattern="hero.sketchbook-notebook-page". A guide only: DESIGN.md and tokens.json are the source of truth.

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

  • 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°.

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.

Discovery sprint

Positioning workshop

Identity design

Start a projectRead case studies

Corvid Robotics — identity