A notebook-paper design system where imperfect lines, dashed borders, and marker accents make every interface feel genuinely handmade.
Interactive elements that look like they were drawn on graph paper during a meeting.
Button variants
Each swatch is a paint chip pinned to the board. Slightly rotated, slightly personal.
Ink Black
#2c2c2c
Primary text
Paper White
#fffef5
Background
Red Marker
#ff6b6b
Accent / CTA
Teal Marker
#4ecdc4
Secondary accent
Yellow Marker
#ffd93d
Highlight
These are not decorations — they are memories. Tape, pins, rings, and holes tell a story of real use.
Masking tape in yellow, red, or teal pinned to the top center of a card. Use at 40-50% opacity so the background shows through.
A small filled circle at the top center, slightly raised. Colors rotate between red, teal, and yellow.
Links and highlights use wavy teal underlines and red marker variants.
An SVG concentric circle at low opacity (8-12%) in warm brown, placed at a card corner. Adds authentic desktop patina.
Dashed-border circles on the left edge simulate spiral notebook binding. Each hole is 16px, spaced evenly.
Use a linear-gradient background on inline text to simulate highlighter bleed:
The best design systems feel human.
Bold sans-serif with intentional rotations. No serifs, no monospace — this is a marker pen, not a typewriter.
The hand-drawn system uses yellow highlights for key terms, teal wavy underlines for links, and red wavy underlines for critical references.
Sticky notes from a design critique session. Teal for yes, red for no.
Use dashed borders — they feel hand-drawn and friendly
Rotate elements slightly (-2deg to +2deg) for organic charm
Add tape or pin decorations to cards for texture
Offset marker shadows in teal or red for a pen-press feel
Use wavy underlines on links and highlights
Keep line weights consistent, like a real pen nib
Never use solid borders — always border-dashed
Never use rounded-lg or larger — max rounded-sm
Never use dark or gradient backgrounds
Never use monospace or serif fonts
Never use drop-shadow without color intentionality
Never center every element — skew layouts like real notes
Six torn-paper cards from the sketchbook — each with a hand-drawn icon and a core principle.
Slight wobbles and uneven strokes signal humanity. Perfect lines belong to machines.
pg. 1Notebook lines create immediate context — you are reading a real note, not a screen.
pg. 2Tape, pins, coffee rings, and dog-ears are not noise — they are memories of use.
pg. 3Shadows in teal, red, or yellow mimic marker bleed rather than physical depth.
pg. 4Stars, arrows, and squiggles fill white space the way margins fill with thoughts.
pg. 5A 1-2 degree tilt separates authentic handcraft from sterile grid alignment.
pg. 6Every great design started as a doodle on a napkin. This system just gives you the margins to fill.