Illustriertes Hand-Drawn-Studio

Create an illustrated, hand-drawn website for a creative studio — a sketchbook come to life, with imperfect, charming, hand-made marks everywhere.

Brief

Subject: Pocket Moth — a two-person illustration and animation studio making picture books and explainer films

Give the studio a voice: real project names and clients, a short story of how they work, copy with a light sense of humour

Design Requirements

Aesthetic: Paper background (#fffef2), ink text (#1f2a44), hand-drawn borders and doodles

Lines: Wobbly borders drawn with inline SVG paths (or SVG feTurbulence + feDisplacementMap on boxes) — nothing perfectly straight; stroke width 2px

Typography: A hand-lettered display face (e.g. Caveat Brush, Gochi Hand) for headings, a friendly readable face for body

Drawings: Inline SVG doodles — arrows, stars, squiggles, little characters — drawn with irregular paths

Accent: #ffd23f used like a highlighter or crayon: behind words, in underlines, on one drawing

Sections to Include

Header — Hand-lettered logo, nav links with a scribbled underline on hover

Hero — Big hand-drawn headline, a doodle illustration, and a CTA in a sketchy border with an arrow pointing at it

Work Showcase — Projects pinned to a board with tape, slight rotations and handwritten captions

Process — Their real working steps, joined by hand-drawn arrows

About — Notebook-paper panel with the studio's story

Contact — Form styled as a postcard with stamp and address lines

Technical Details

Small random rotations (−3° to 3°) on pinned items

A gentle wiggle on one or two doodles only, disabled under prefers-reduced-motion

Project art as SVG/CSS illustrations, not stock photos

Responsive: keep the charm, simplify decoration on mobile

Accessible contrast and visible focus states