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 filmsGive the studio a voice: real project names and clients, a short story of how they work, copy with a light sense of humourA sketchbook come to life: every border wobbles, every picture is drawn, every note looks handwrittenDesign Tokens
Use these exact values. Where the spec is silent, stay consistent with them.
colors:
accent: "#ffd23f"
background: "#fffef2"
board: "color-mix(in srgb, #ffd23f 14%, #fffef2)"
border: "#1f2a44"
muted: "color-mix(in srgb, #1f2a44 82%, #fffef2)"
notebookLine: "#bfd0ea, margin line #e7a0a0"
sticky: "#dcebf7"
surface: "color-mix(in srgb, #fffef2 40%, #ffffff)"
tape: rgb(226 220 194 / 0.82)
text: "#1f2a44"
tints: "blue #a9c6e8, pink #f4b9b2, green #b8d8a8 for drawings only"
effects:
dotGrid: "radial-gradient(ink at 4.5% 1px, transparent 1.2px) at 22px × 22px on the body"
highlighter: "an accent band from 42% of the line height to the baseline, 0.12em past each side, border-radius 40% 12% 38% 14% / 30% 55% 22% 60%, rotated -1.6°"
sketchBox: "border 2px solid ink, border-radius 22px 8px 18px 10px / 10px 18px 8px 22px, filter url(#rough)"
stampEdge: "radial-gradient(circle, transparent 4.5px, white 5px) at -7px -7px, 14px repeat"
tapeEdge: clip-path polygon with jagged left and right ends
fonts:
accent:
fallback: cursive
family: Caveat
weights: [500, 700]
body:
fallback: "system-ui, sans-serif"
family: Nunito
weights: [400, 600, 700, 800]
display:
fallback: cursive
family: Caveat Brush
weights: [400]
layout:
breakpoints:
columns: 900px
mobile: 760px
process: 1060px
container: 1140px including the gutters; 1200px for the process row
gutter: 24px
motion:
durations:
button: 200ms
flap: 2.6s
navScribble: 350ms
nudge: 1.8s
pin: 300ms
easings:
all: ease
loops: "ease-in-out, infinite"
radii:
blob: "50% 46% 52% 48% / 48% 54% 46% 52% for circles"
card: 6px 3px 7px 4px / 4px 7px 3px 6px
sketch: 22px 8px 18px 10px / 10px 18px 8px 22px
shadows:
card: "3px 5px 0 ink at 12%"
postcard: "6px 8px 0 ink at 12%"
sticky: "4px 6px 0 ink at 12%"
spacing:
hero: "56px top, 80px bottom"
section: "96px top and bottom, 72px under 760px; section heads 48px above content"
type:
body:
font: body
lineHeight: 1.65
size: 1.0625rem; lede 1.12–1.18rem
tracking: 0
weight: 400
caption:
font: accent
lineHeight: 1.15
size: 1.25–1.7rem
tracking: 0
weight: 700
display:
font: display
lineHeight: 1.05
size: "clamp(3.1rem, 7.4vw, 5.9rem)"
tracking: 0.5px
weight: 400
headline:
font: display
lineHeight: 1.05
size: "clamp(2.6rem, 5.4vw, 3.8rem)"
tracking: 0
weight: 400
title:
font: display
lineHeight: 1.05
size: 1.85rem
tracking: 0
weight: 400
Style Rules
Sketch boxes: a pseudo-element with a 2px ink border, an irregular border-radius and the rough SVG filter, sitting behind the content; important boxes get a faint second outline offset 3–4pxHand-lettered headings in Caveat Brush at weight 400; handwritten notes, captions and form text in Caveat; body copy in Nunito for readabilityThe accent is a highlighter: a slightly tilted band behind words, the nav scribble, the primary button and one glow in the hero drawingThings are pinned, taped and tilted (-3° to 3°), and straighten when you reach for themShadows are hard offsets in the ink at 10–18% with no blur, like paper lifted off a deskThe paper has a faint 22px dot grid in the ink at 4.5%Drawings share one hand: round caps, the sketch width, the paper and tint fills, no gradientsPage Layout
container 1140px incl. gutters; paper with a faint dot grid; ⌇ = wobbly sketch border
(moth) Name ······································ Work Process About Say hello
∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿∿
We draw ▓small▓ ⌇ hero drawing: mascot, ✶ ✶ ⌇ (badge 9°) ← hero
stories that do big jobs. wings flap
‾‾‾‾‾‾‾‾ scribble
lede, two sentences
⌇[ Start a project ]⌇ ↶ psst… this button! or peek at the work first
Pinned to the board / squiggle / lede ← work
⌇ board · dot texture ·································································⌇
▭tape ▭tape ▭tape
⌇[art 4:3]⌇ -2° ⌇[art 4:3]⌇ 3° ⌇[art 4:3]⌇ -1° handwritten captions
⌇[art 4:3]⌇ 2° ⌇[art 4:3]⌇ -3° ⌇[art 4:3]⌇ 1°
How a thing gets made ← process
⌇①⌇ ↗ ⌇②⌇ ↘ ⌇③⌇ ↗ ⌇④⌇ ↘ ⌇⑤⌇ even steps lower
About us ← about
⌇ notebook: holes │ ruled lines, story, sign-off ⌇ ⌇polaroid⌇ ⌇polaroid⌇
⌇ sticky note: facts ⌇
Send us a postcard ← contact
⌇ Dear …, ruled message ········ ∿ │ [stamp] ◎postmark / name__ email__ type__ / address / [Pop it in the post] ⌇
Sections
Header — Not fixed; 22px top padding, logo left and links right with clamp(0.9rem, 2.6vw, 2.2rem) gaps, 14px above the ruleContent:Studio nameFour links: Work, Process, About, Say helloComponents:Logo: the mascot doodle and the name in Caveat Brush at 2.1remNav links: Nunito 700; hover draws a two-stroke accent scribble under the word (an SVG background growing from 0 to 100% width over 350ms)A wavy 14px SVG rule under the rowMobile: Links wrap under the logoHero — 56px top and 80px bottom padding; two columns 1.15fr / 1fr, 40px gap, vertically centred: headline (display), lede (1.18rem, muted, max 34em), the button row 2rem below; the hero drawing (max 500px) on the right with the badge pinned to its top-right cornerContent:Headline: 6–9 words on what they draw and why it matters, with a small/big contrastLede: two sentences naming the people, where they work and what they makeButton: 'Start a project'Components:Highlighter: one or two words in the headline sit on the highlighter band; one more word gets an SVG scribble underline in the inkPrimary button: a sketch box filled with the accent, a faint second sketch outline offset behind it, Caveat Brush 1.75rem in the ink, padding 0.65em 1.15emHandwritten aside: 'psst… this button!' in Caveat 700 at 1.5rem, rotated -3°, with a curved 110×56 SVG arrow pointing at the buttonA wavy-underlined text link to the workBooking badge: a 122px wobbly circle on paper, rotated 9°, 'now booking' and a season in Caveat with the season in Caveat BrushStates:The button tilts -1.5° and scales to 1.03 on hover, and drops 2px when pressedMobile: One column under 900px with the drawing (max 380px) below; the badge hidesMotion: The mascot's wings flap ±5° every 2.6s and the arrow nudges 6px every 1.8s; nothing else moves on its ownWork Showcase — Section head 48px above the board; pins in an auto-fill grid of minmax(260px, 1fr) with 56px row and 40px column gapsContent:Headline 'Pinned to the board' and a ledeSix projects (books, films, posters) with clients, years and a one-line note eachComponents:Section head: headline, a 190×18 squiggle SVG under it, a muted lede (1.12rem, max 640px)Board: a sketch box filled with the board colour and a 14px dot texture, 64px paddingPin: a white sketch card (14px padding) rotated between -3° and 3°, a strip of tape across the top edge (104×30, jagged ends, its own small rotation), the 4:3 drawing in a 2px ink frame, then a handwritten caption: the title (1.7rem, 700), client and year (1.22rem, muted) and a '↳' noteMobile: Rotations halve under 760px; board padding 48px topMotion: Hover and focus straighten a pin to 0° and lift it 6px over 300msProcess — Five columns with 54px gaps in a 1200px container; even steps sit 3.4rem lowerContent:Headline 'How a thing gets made' and a lede with real timelinesFive working steps with names in the studio's voice and durationsComponents:Step: a sketch box on paper (1.4rem 1.15rem padding); top row with the step number in a wobbly circle (2.7rem, Caveat Brush 1.6rem) and the 64×48 doodle; title in Caveat Brush 1.85rem; two sentences in 0.97rem muted Nunito; the duration in Caveat 700Arrows: 58×40 hand-drawn SVG arrows between steps, flipped vertically on even stepsMobile: Under 1060px one column (max 540px) with steps tilted ±0.6° and arrows turned to point down between themAbout — Two columns 1.55fr / 1fr, 56px gap: the notebook on the left; polaroids above the sticky note on the right, 44px apartContent:Headline about the studio and its mascotThree paragraphs of the studio's story with a founding moment and numbersTwo peopleFour funny factsComponents:Notebook: ruled lines every 2rem in the notebook-line colour, a 2px margin line at about 64px, punched holes down the left edge, the hard shadow; heading in Caveat Brush 2.4rem; body on the lines; a handwritten sign-offPolaroids: two 150px white sketch cards rotated -3° and 2.5° with tape, a portrait doodle, and the name and role handwritten belowSticky note: the sticky colour, rotated 1.8°, max 340px, 'Shed facts' (or the studio's equivalent) and four handwritten facts with ✶ bulletsMobile: One column under 900px; notebook left padding 62pxContact — Section head, then the postcard (max 1000px, centred, padding clamp(22px, 4vw, 48px))Content:Headline 'Send us a postcard' and a ledeFields: message, name, email, project typeThe studio's postal addressComponents:Postcard: a sketch box on near-white with the large hard shadow; three columns 1.1fr / auto / 1frLeft: a handwritten label, 'Dear …,' in Caveat 2rem, a message textarea in Caveat 1.45rem on 2.25rem ruled linesMiddle: a wavy vertical SVG dividerRight: a 112×134 stamp with a perforated edge, a drawn stamp picture in a 2px ink frame, rotated 4°, and a circular postmark overlapping it at -12°; line fields (name, email, project type) in Caveat 1.5rem on scribbled underlines; the studio's address in Caveat; the primary buttonStates:Focus: a 3px dashed ink outline and an accent wash at 28% behind the fieldOn submit a handwritten line confirmsMobile: One column under 900px with the divider turned horizontalImagery & Icons
Inline SVG drawings with round caps and joins, slightly irregular paths, the ink colour at the sketch width, filled with the paper colour and the three tints: a hero scene with the studio's mascot character, six project illustrations at 4:3, five 64×48 process doodles, two portrait doodles for the polaroids, a stampDecorations: stars, squiggles, little arrows and dots scattered at section edges (hidden under 760px), plus the wavy section rulesThe logo is a 48×40 doodle of the mascot beside the nameImplementation Notes
Define the rough filters once in an inline SVG: feTurbulence type fractalNoise, baseFrequency 0.03, numOctaves 2, into feDisplacementMap scale 3 (rough), a second with another seed (rough2), and scale 1.5 for art frames (roughSoft)Footer: a wavy rule, © year, a handwritten sign-off and three linksDon'ts
No perfectly straight boxes, rules or underlinesNo second display face: Caveat Brush for headings, Caveat only for handwritten notesNo emoji, stock photos or icon-font icons: every picture is a drawingNo blurred shadows, gradients across sections or glassy effectsNo accent on large areas beyond the primary buttonNo fonts, colours, radii or shadows outside the design tokens and rules aboveNo sections, features or effects that this spec doesn't listNo placeholder copy (lorem ipsum, "Elevate your workflow"): every word comes from the subjectNo pill-shaped eyebrow labels above headings and no gradient text, unless this spec asks for themNo grid of identical icon cards: vary size and emphasis by importanceQuality Floor
Mobile-first and responsive from 360px to 1440px and wider, with no horizontal scrollingText contrast meets WCAG 2.1 AA: 4.5:1 for body text, 3:1 for large textSemantic landmarks (header, nav, main, section, footer), one h1, descriptive alt textEvery interactive element has hover, visible focus and active states and works from the keyboardHonour prefers-reduced-motion: keep opacity fades, drop movementTech Stack
Framework: HTML/CSS/JS — Deliver one self-contained index.html: styles in a <style> block, scripts in a <script type="module"> block, no build step.Styling: Vanilla CSS — Plain CSS. Declare every design token as a custom property on :root (--color-accent, --font-display, --radius-card…) and use only those properties for colours, fonts, radii, shadows and timing.Language: JavaScript — JavaScript as ES modules; no TypeScript.UI library: None — No component library: build every component from the design tokens.Motion: CSS only — CSS transitions and keyframes only, with durations and easings from the design tokens.Icons: Inline SVG — Inline SVG icons drawn for this style, with one stroke width and corner treatment across the page.Acceptance Checklist
No border on the page is perfectly straight: boxes use the sketch recipe and rules are wavy SVG pathsEvery sketch line is the ink colour at the sketch widthHeadings use Caveat Brush only; handwritten notes and captions use Caveat; body copy is NunitoThe accent appears only as the highlighter band, the nav scribble, the primary button fill and the hero drawing's glowPinned projects are white cards with tape, rotated between -3° and 3°, straightening on hoverAll art is inline SVG in the ink colour and the three illustration tints; there are no photos or emojiProcess steps are joined by hand-drawn arrows and alternate up and down on desktopThe contact form is a postcard: ruled message, stamp, postmark and scribble-underlined fieldsShadows are hard offsets with no blurUnder reduced motion the wing flap, arrow nudge and hover transforms stop
