Wobbly borders, handwritten type, hand-drawn underlines and arrows. The Excalidraw / Tldraw aesthetic — friendly, low-stakes, and surprisingly hard to do well.
Everything looks like it was drawn with a Sharpie on graph paper. Borders are imperfect with rough corners, lines are slightly wavy, type is handwritten, and decorative arrows or stars are sketched in. The aesthetic signals "this is a friendly tool, you can play here without breaking anything" — used by Excalidraw, Tldraw, Notion's empty states, and a lot of teaching/onboarding products.
Three layers: (1) a handwritten font family (Caveat, Architects Daughter, Patrick Hand from Google Fonts) for everything; (2) imperfect borders — instead of border-radius, use asymmetric radii like border-radius: 6px 8px 4px 7px / 8px 4px 7px 5px to wobble each corner differently, or use a ::before pseudo-element so the wobble can have its own slight rotation; (3) inline SVG decorations for underlines, arrows, and stars with hand-drawn Bezier curves. A faint notebook grid background (linear-gradient 1px lines) seals the effect.
The whiteboard for messy first drafts. Made for designers, engineers, and anyone who thinks better with a marker in hand.
Build a sketch / hand-drawn whiteboard-app landing. Import Caveat and Architects Daughter from Google Fonts. Background: warm paper #fdfaf2 with a very faint horizontal-line notebook grid (linear-gradient lines at 26px spacing, 18% alpha). Brand name in big Caveat 700. Body and nav links in Architects Daughter. Headline: two highlighted words — one with a yellow-marker rectangle (use linear-gradient(180deg, transparent 60%, #ffe87b 60% 92%, transparent 92%) as a CSS background), one with a hand-drawn squiggle underline (inline SVG path as background-image). CTA button: yellow background, no border-radius, with a ::before pseudo-element that has an asymmetric eight-value border-radius like "50% 8% 50% 8% / 6% 50% 6% 50%" and a 2.5px black border — this creates the wobbly hand-drawn rectangle around it. Add a tilted "sticky note" card on the right with rotated tape strip at the top, an asymmetric-radius black outline pseudo-border, handwritten heading and checklist with red ✓ marks. Scatter hand-drawn arrows (inline SVG), small ★ doodles, and rotate one or two elements slightly off-axis. Use Architects Daughter for body text, Caveat for headings/buttons.