Design Rules Handbook
The confirmed design rules, shown as a viewable checklist.
Warming up the lab…
The Lab Wall
Every experiment lives on this wall — come back any time.
Markdown Renderer
A Typora-style Markdown workbench — drop files into public/docs and they appear.
Pencil Button Feedback
A button press should feel like a dent in paper.
Sticky Note Drag
Pin notes to the wall and drag them around.
Letterpaper Typesetting
Would long reads feel slower inside letter-paper rules?
Scattered Photo Grid
Pictures lie scattered on the desk like prints.
Confetti Button
Press it and paper confetti fills the screen.
Font Lab
Pick a heading font against the real site fonts: size, weight, color and line-height, all live.
API Playground
A shelf for APIs I want to try — starting with Bing's sky of the day.
Dark Paper Mode
Can pencil sketches survive in the dark? Only one way to find out.
Handwritten Code Blocks
Code deserves to be copied down like careful class notes.
Ink Loading Numbers
A drop of ink hides between each ticking number.
Cursor Kitty
A pencil kitten strolls after your cursor.
Crayon Highlights
Key words get a quick crayon swipe.
Journal Timeline
Milestones lined up like a journal spread.
Xiaohongshu Messages Replica
A 1:1 replica of the Xiaohongshu desktop messages screen — conversations, bubbles and the emoji panel all work.
Icon Gallery
Browse Lucide and four React Icons collections with search, pagination and SVG downloads.
Sketch Progress Bars
Draw the waiting as a wobbly little line.
Wave Divider Generator
Ten ways to bend a single SketchWave.
Sketched Icon Grid
One icon set, all disciplined exactly two degrees off.
Sketch Drawer Nav
A side drawer that slides out like a sketchbook.
Pencil Toggle Switch
Toggles keep a bit of pencil friction.
Doodle CAPTCHA
Finish the doodle monster to prove you are human.
Crash Drill Ground
Error, 404 and loading fallbacks — trigger them all yourself with one press.
Hand-drawn 404
A 404 page that keeps the pencil warmth even when you are lost.
Doodle Empty States
When there is nothing to show, a small doodle keeps you company.
Paper Scrollbar Lab
Can a scrollbar grow up to look like a pencil?
Sticker Badge System
Tags you could peel off and stick somewhere else.
Collage Cover Study
Cut the references and collage a new cover.
Paper Plane to Top
The back-to-top button is a paper plane.
Pencil Skeleton Screen
Loading placeholders sketched as hatching.