Doodle Notebook
Ballpoint doodles on ruled paper, a red margin and sticky notes for the important bits.
This style
$9$19
One-time, no subscription · instant download · client use · 7-day refund before download
The idea
A school exercise book brought to life: pale blue ruled lines, a red margin, headlines scrawled in marker-pen handwriting and wobbly hand-drawn boxes around everything. Yellow sticky notes hold the prices. It feels like the inside cover of a notebook where all the good ideas start.
Doodle Notebook recreates the school exercise book: pale blue ruled lines, a red margin rule, ballpoint-blue ink, marker-pen headings and the doodles that fill every spare corner. Everything is drawn by hand — boxes have wobbly edges, underlines curve, circles do not quite close. Yellow sticky notes and highlighter swipes hold the important information. Handwriting faces carry the voice, chosen for legibility at size. It should feel personal, encouraging and a little bit messy, like notes from a friend who always gets good grades.
Principles
- Every border is hand-drawn: wobbly radii, never perfect rectangles.
- Ballpoint blue is the ink; red is the teacher's pen.
- Sticky-note yellow holds the key info — prices, deadlines, tips.
- Keep the ruled lines visible behind text, aligned to the baseline.
- Doodle ornaments in margins, never over text.
Motion
Hand-drawn underlines and circles draw themselves in with a stroke-dashoffset animation over 800ms as each section appears. Cards tilt 1.5° on hover as if the page was nudged.
Do & don't
Do
- ✓ Use asymmetric border-radius values for hand-drawn boxes.
- ✓ Align body text to a 30px ruled-line rhythm.
- ✓ Draw the red margin line down the left of the hero.
Don't
- ✕ Don't use perfect rectangles or circles.
- ✕ Don't use drop shadows except the sticky-note curl.
- ✕ Don't use photography.
+ 3 more of each, and component rules, in the full DESIGN.md.
What's in the DESIGN.md
- 01Overview & principles
- 02Colors (tokens + proportions)
- 03Typography (families + 12-role scale)
- 04Layout & spacing scale
- 05Elevation & depth
- 06Shapes & radii
- 07Motion (easing, durations, signature)
- 08Imagery + generation prompt
- 09Components (button, card, nav, input, badge)
- 10Do's and don'ts
- 11Responsive behaviour
- 12Iteration guide + agent checklist
Plus theme.css (Tailwind v4 @theme), tokens.json (W3C) and the preview page source — 363 lines of DESIGN.md in total.
More like this
All Playful →
Comic Panels
No. 077Ben-Day dots, thick ink panels and speech bubbles. Every section is a splash page.
Gummy Candy
No. 078Glossy gummy gradients, jelly-wobble buttons and a sugar-pink canvas.
Sticker Pop
No. 079Die-cut stickers slapped on at jaunty angles: coral, cobalt and sunshine on cream.
Toy Blocks
No. 080Primary-colour building blocks with studs on top and a satisfying 6px click.
Memphis Party
No. 098Squiggles, confetti triangles and clashing colour: the 1981 design party, still going.
Soft Clay
No. 099Puffy clay cards, plasticine 3D renders and lavender light. Squeezable interfaces.