Illustrated Hand-Drawn Studio

A whimsical website featuring hand-drawn illustration style with sketch borders, doodle icons, and playful hand-lettering effects.

Preview of Illustrated Hand-Drawn Studio
Works with:ClaudeChatGPTv0CursorBolt
illustratedhand-drawnwhimsicalcreativesketch

Prompt

Create an illustrated/hand-drawn style website for a creative studio. The design should feel like a designer's sketchbook come to life with imperfect, charming hand-crafted elements.


Design Requirements

  • Aesthetic: Paper-like background (#fffef2), ink-colored text (#1a1a1a), hand-drawn borders and decorations
  • Borders: Irregular, slightly wobbly borders using CSS clip-path or SVG paths — nothing should be perfectly straight
  • Typography: Mix of handwriting-style fonts for headings and clean sans-serif for readability
  • Icons: Doodle-style icons (use SVG paths that look hand-drawn, not perfect geometric shapes)
  • Accent: Highlight color (#e63946) used like a highlighter pen — behind text or as underlines

  • Sections to Include

  • Header — Hand-lettered logo, navigation with underline doodles on hover
  • Hero — Large hand-drawn headline, sketchy border around CTA, doodle decorations (arrows, stars, squiggles)
  • Work Showcase — Portfolio items in "pinned to board" style with slight CSS rotations and tape/pin decorations
  • Process — Numbered steps connected by hand-drawn arrows, sketch-style icons
  • About — Notebook paper background, "handwritten" text effect
  • Contact — Form styled like a postcard, with stamp and address lines

  • Technical Details

  • CSS clip-path: polygon() with slightly irregular coordinates for sketchy borders
  • CSS transform with small random rotations for pinned-to-board effect
  • SVG filters for pencil/ink texture effects
  • Subtle wiggle animation on doodle elements
  • Border width: 2px
  • Responsive: maintain whimsical feel, simplified on mobile
  • Related Prompts