Illustriertes Hand-Drawn-Studio

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