sketch-notes

Soft hand-drawn illustration style with fresh, refined minimalist editorial aesthetic

Design Aesthetic

Illustration or hand-drawn feel with soft, relaxed brush strokes. Fresh, refined overall style with minimalist editorial approach. Emphasis on precision, clarity and intelligent elegance while prioritizing warmth, approachability and friendliness.

Background

  • Color: Warm Off-White (#FAF8F0)

  • Texture: Subtle paper grain, slightly warm tone to avoid clinical feel

Typography

Primary Font (Headlines)

Bold hand-written marker font or cartoon poster font. Slightly uneven baseline for organic feel. Thick strokes with soft edges. Render as hand-drawn letters, not typed text.

Secondary Font (Body)

Clear handwritten round or hard-pen style mimicking everyday notes. Consistent sizing with slight natural variation. Render as casual handwriting, legible but not mechanical.

Color Palette

Role
Color
Hex
Usage

Background

Warm Off-White

#FAF8F0

Primary background

Primary Text

Deep Charcoal

#2C3E50

Headlines, body text

Alt Text

Deep Brown

#4A4A4A

Secondary text elements

Accent 1

Soft Orange

#F4A261

Highlights, emphasis

Accent 2

Mustard Yellow

#E9C46A

Secondary highlights

Accent 3

Sage Green

#87A96B

Nature, growth concepts

Accent 4

Light Blue

#7EC8E3

Tech, AI elements

Accent 5

Red Brown

#A0522D

Land, infrastructure

Visual Elements

  • Connection lines with hand-drawn wavy feel, not perfectly straight

  • Conceptual abstract icons illustrating ideas rather than literal scenes

  • Color fills don't need to completely fill outlines - preserve hand-painted casual feel

  • Simple geometric shapes with rounded corners

  • Arrows and pointers with sketchy, informal style

  • Doodle-style decorative elements: stars, spirals, underlines

Style Rules

Do

  • Keep layouts open and well-structured

  • Emphasize information hierarchy and readability

  • Use hand-drawn quality for all elements

  • Allow imperfection - slight wobbles add character

  • Layer elements with subtle overlaps

Don't

  • Use perfect geometric shapes

  • Create photorealistic elements

  • Overcrowd with too many elements

  • Use pure white backgrounds

  • Add slide numbers, footers, or logos

Best For

Educational content, knowledge sharing, technical explanations, friendly presentations, tutorials, onboarding materials

Last updated