list.sketchbook-numbered-steps · Sketchbook numbered steps

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

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

Index

Services

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.

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.