A hand-drawn design system for playful interfaces
I
A collection of marker highlights, crayon strokes, and ink washes inspired by notebook doodles.
Sunshine
#FFF176
Bubblegum
#F8BBD9
Sky
#81D4FA
Sprout
#C5E1A5
Tangerine
#FFCC80
Grape
#E1BEE7
Apple
#E74C3C
Ocean
#3498DB
Clover
#27AE60
Plum
#9B59B6
Carrot
#E67E22
Mint
#1ABC9C
II
Caveat brings whimsy to headlines, Patrick Hand adds friendly notes, and Nunito keeps body text readable.
Aa Bb Cc Dd
Let's Doodle Together!
Ideas Worth Scribbling
Quick notes and reminders go here
The quick brown fox jumps over the lazy dog. This friendly typeface makes reading a breeze while maintaining that approachable, hand-crafted feel we love.
Fine print, captions, and tiny notes appear here in a smaller size.
Text can have a yellow highlight to emphasize important points, or a pink highlight for something special, even a green highlight for success states.
Use the doodle underline for links and emphasis.
Sometimes you need to cross things out to make a point.
"Every child is an artist. The problem is how to remain an artist once we grow up." - Pablo Picasso
III
A playful scale that keeps things nicely organized like a tidy notebook.
IV
Chunky, clickable buttons with hand-drawn borders and playful shadows.
Try clicking them! They have a satisfying press effect.
V
Friendly inputs that feel like filling out a fun form in your favorite notebook.
Checkboxes
Radio Buttons
VI
Sticky note styled cards that look like they're pinned to a corkboard.
Don't forget to add more doodles to the margins. They make everything better.
What if buttons could wiggle? And forms could smile? Just thinking out loud...
Finish the sketchy border effect. Maybe add more star doodles?
The best designs feel like they were made by a human, not a machine. Embrace the imperfections!
VII
Little labels with wobbly borders for categorizing and highlighting content.
Tags work great for categories, status indicators, and labels in your interface!
VIII
More playful elements to complete your sketchy design toolkit.
Star
Arrow
Circle
Mon
Tue
Wed
Thu