Sketch / Hand-Drawn
Also called: Hand-drawn UI, Sketchy, Doodle style, Notebook UI
Wobbly pencil outlines, handwriting fonts, ruled notebook paper, highlighter marks and doodled arrows — UI that looks drawn by hand in class.
Design keywords
Say these words to ask for this style.
Sketch style makes the interface look like it was drawn in a school notebook. Every box has a wobbly 2px graphite outline made with irregular elliptical border radii, cards sit a degree off-straight, and the page is ruled with pale blue lines and a red margin. Headlines and labels use handwriting fonts, key words get a yellow highlighter swipe, sticky notes carry quotes and calls to action, and doodles — arrows, stars, squiggles, scribbled circles — point at what matters. It feels approachable, playful and unfinished on purpose.
Best for
- Learning platforms, tutoring and study tools
- Wireframe and brainstorming apps
- Friendly onboarding and empty states
- Indie products, personal blogs and workshops
Avoid for
- Banking, insurance and legal products
- Luxury and premium brands
- Dense, long-session data tools
✓ Do
- Use irregular border-radius (e.g. 255px 15px 225px 15px / 15px 225px 15px 255px) on every outlined element
- Keep body copy in a legible handwriting face (Patrick Hand / Mali) at 17px+
- Tilt only decorative cards (±0.5–1.5°), never inputs or tables
✕ Don't
- Don’t mix in perfect geometric icons at heavy weights — keep strokes thin and round
- Don’t set long paragraphs in a messy script
- Avoid hard black offset shadows (that is Neubrutalism)
Not to be confused with
On mobile
Rule the phone screen like a notebook page with a red margin, keep wobbly outlines on cards, chips and the tab bar, and circle the active tab with a red-pen scribble. Tilt only the featured index card; lists, inputs and buttons stay straight for easy tapping.
Prompt builder
Paste into Claude, Cursor, v0, Lovable or any coding agent to recreate this style.