Pencil-drawn borders, paper textures, hand-written feel. Imperfect lines that carry warmth and intention.
An interactive sketchbook showing the style in context. Click on items, shuffle doodles, explore the anatomy.
Four foundational qualities that define the pencil-sketch aesthetic. Each element reinforces the hand-crafted feel.
Never white. Always the warm cream #f5f0e8 with SVG diagonal noise at 3% opacity to simulate sketchbook paper grain.
border-dashed is the default. Solid borders get a slight rotation (+-0.5deg) to appear hand-drawn. No perfect lines.
Georgia, serif, italic. The slight slant of italic text mimics handwriting. Bold for headings, regular for body.
Hard-offset box shadows (4px 4px 0) with no blur, at 15-25% opacity. Simulates pencil shading rather than CSS drop shadow.
Every component carries the hand-drawn character. Interact with each tab.
Primary — Pencil Fill (hover to shade)
Icon buttons — sketch feel
Size variants
Four named patterns that define how sketch-style elements respond to interaction. Hover and click each demo to feel the pencil-drawn physicality.
hover:bg-[#2c2c2c] hover:text-[#f5f0e8]
transition-all duration-200
Hover to simulate pencil shading into the border
Transparent background fills to pencil gray on hover, reversing text color. Fast 200ms — pencil moves quickly.
hover:-translate-x-0.5 hover:-translate-y-0.5
hover:rotate-[0.5deg] transition-all duration-200
Hover this card
Hover the card for jitter shift
Slight translate + rotate on hover simulates the natural instability of hand-drawn elements. Subtle but essential.
underline decoration-dashed underline-offset-4
hover: decoration-wavy (scribble emphasis)
Regular paragraph with a dashed link inside it that goes wavy on hover.
Hover links or heading for wavy reveal
Dashed underline is the resting state. Wavy on hover intensifies the emphasis — like scribbling under key words.
active:translate-y-[4px] active:translate-x-[4px]
active:shadow-none active:rotate-[-2deg] duration-150
Click and hold to feel the paper press
Active state: translate matches the shadow offset, shadow disappears, element tilts. Simulates pressing pencil tip to paper.
These are the lines you must not cross — and the ones you must always draw. Hand-drawn design demands discipline in its imperfection.
“Perfection is the enemy of the hand-drawn line. The wobble, the dent, the slight misalignment — these are features, not bugs.”