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.
Live Demos and Source Code
The entire system is 100% open source under the MIT license.
- Live Interactive Demo: https://viditx.github.io/sketchmorphism/prototypes/full-website-demo.html
- GitHub Repository: https://github.com/viditx/sketchmorphism
Author and Connect
Built by Vidit Patil (@viditx) — a 15-year-old guy obsessed with systems and clean UI.
- GitHub: github.com/viditx
- Instagram: @vyditpvt
- Telegram: @VYDITPVT
Check out the demo and let me know your thoughts on the design direction!
Top comments (0)