Why Every SaaS Looks the Same (And How I Built a Hand-Drawn UI Library With SVG Filters)

Every landing page in 2026 feels like it was cloned from the same prompt: purple mesh gradients, 1px grey borders, and Inter font.

It looks sterile, robotic, and completely devoid of human personality.

A few weeks ago, I started experimenting with a different approach: bringing the tactile, imperfect warmth of physical notebook sketches and wireframes back to the web without shipping a heavy canvas runtime.

The result is Sketchmorphism — an open-source UI design system built on hand-drawn strokes, cross-hatch depth, and paper physics.

Core Philosophy

Strokes over borders: Borders are not straight 1px lines. They wobble naturally using lightweight SVG displacement filters.
Hatches over shadows: Standard blurred CSS box-shadows look out of place on a sketch. Elevation is rendered using 45-degree pencil cross-hatching. When you click a button, it physically sinks into the hatch.
Three-pencil palette: Everything is built using a strict physical palette: Desk, Warm Paper, Charcoal Ink, Draft Blue, and Revision Red.
Zero canvas bloat: Pure CSS and native SVG filter primitives. Full DOM accessibility, native text selection, and 60fps performance on mobile.