Human Scribble

the anti-AI aesthetic -- imperfect by design, honest by intention

A deliberate embrace of imperfection, hand-drawn marks, and visible human authorship in an age of algorithmically generated content. Scribbles over logos, doodles on photographs, sketch-like overlays, handwritten margin notes, signature typography. Every wobble and ink blot says "a human made this."

Where polished digital design strives for pixel-perfect alignment and mathematical precision, Human Scribble celebrates the warmth of a shaky hand, the charm of crossed-out corrections, and the personality embedded in someone's actual handwriting.

It is a counter-movement to sterile AI-generated perfection -- asserting that imperfection is not a flaw but a signature of genuine human presence.

Visual Characteristics

the defining traits

The Human Scribble aesthetic is built on a set of visual principles that all point to the same idea: a real person touched this page. Here are its defining characteristics:

Wobbly Lines

Deliberately imperfect lines, borders, and paths that mimic real pen strokes with natural hand tremor.

Arrow Annotations

Hand-drawn arrows with labels pointing to content, like a teacher marking up a student's work.

Doodle Overlays

Stars, hearts, squiggles, and speech bubbles layered on images as if someone doodled on a printed photo.

oldnew!

Crossed-Out Corrections

Visible strikethroughs with handwritten replacements above, showing the thinking process in real time.

Sticky Notes

Post-it style callouts with tape effects, slightly rotated and overlapping content like real desk notes.

Sketchy Underlines

Wavy, hand-drawn underlines under important text -- emphatic, like scribbling in a notebook.

More Visual Traits

  • Organic blob shapes -- containers with irregular border-radius that feel amoeba-like
  • Ink splatter and blot accents -- decorative marks that resemble pen drips on paper
  • Notebook and paper textures -- lined paper, graph paper, kraft backgrounds
  • Slight rotation on elements -- cards tilted 1-3 degrees, casually placed
  • Mixed typography contrast -- clean sans-serif body alongside handwritten headings
  • Warm, lived-in color temperature -- cream backgrounds and real art-supply colors
  • Sketch-like border decorations -- uneven thickness, wobbly corners, deliberate gaps

Color Palette

real art supply colors

The palette is rooted in real-world art supplies and paper -- warm naturals, actual ink colors, and the accidental tones of pens, markers, and highlighters on imperfect paper. Not stark digital whites or pure blacks, but the warm cast of things that exist in physical space.

Paper Tones

Warm Cream
#FBF7F0
Parchment
#F5EDE0
Aged Cream
#EDE3D2
Kraft Brown
#C4A97D

Ink & Text

Warm Black
#2A2520
Charcoal
#4A4540
Dark Brown
#3D3530
Pencil Gray
#9E9588

Art Supply Accents

Sage Green
#7D8C64
Warm Sienna
#C47D5A
Red Pen
#D45040
Ballpoint Blue
#4A6FA5
Highlighter
#FFE066
Soft Coral
#E8927C
Warm Shadow
#D5CBBC
Marker Dark
#35302B
Color restraint matters!
Limit accent colors to 2-3 per view. Real notebooks use one or two pen colors, not a rainbow.

Typography

the contrast is the message

Human Scribble typography is defined by the contrast between hand-drawn and machine-set text. Clean body text says "this is the content," while handwritten overlays say "a person was here". The juxtaposition is the entire point.

Caveat Primary handwritten headings & annotations
Patrick Hand Section headings and longer handwritten passages
Indie Flower Doodle labels, fun annotations, informal callouts
Dancing Script Signature-style accent text and pull quotes
Satisfy Elegant handwritten accents and featured quotes
Permanent Marker Bold emphasis and highlighted labels
Inter Primary body text -- clean, readable, modern
DM Sans Secondary body text, UI labels, captions

The target is everyday handwriting and quick sketches, not formal calligraphy. Casual, not precious. The kind of marks people leave on paper when thinking out loud.


Key Design Elements

The building blocks of Human Scribble design -- each one a deliberate assertion of human craft over machine precision.

Hand-Drawn Borders & Frames

The defining decorative element. Borders that look sketched by hand rather than rendered by a computer. Wobbly rectangular borders, double-line sketch borders, corner flourishes with small doodle marks, torn-edge effects, and variable stroke width mimicking real pen pressure.

Notice the border on this very card -- imperfect by intention.

Crossed-Out Corrections

Original text crossed out and replaced, just like editing a draft in pen. The humanity perfection    is in showing the process. Visible mistakes decisions convey authenticity. Carets, insertion marks, and scribbled-over text all mimic the look of a hand-edited manuscript.

Sticky Notes & Paper Scraps

Secondary content presented on "stuck-on" elements that break the grid, like real desk clutter with purpose:

Remember: the goal isn't messy. It's alive. There's a difference.
Layer annotations over structure. Let digital and analog coexist.
Use rotation sparingly. 1 degree = human. 15 degrees = broken.

Doodle-Style List Markers

Replace standard bullets with hand-drawn marks -- checkboxes, stars, and arrows:

Checkbox Style

  • Wobbly lines because hands wobble
  • Notes in margins because thoughts overflow
  • Corrections that show the thinking

Star Bullets

  • Ink splatter accents near text
  • Organic blob-shaped containers
  • Tape and pin decorations

Arrow Bullets

  • Curved hand-drawn arrows pointing from labels to content
  • Looping, playful arrow paths that curve and double back
  • Arrows with handwritten labels: "look here!", "important!"

Layout Principles

The spatial composition of Human Scribble is intentionally imperfect but carefully designed. Like a notebook page, content does not fill every pixel -- breathing room suggests a human laid this out casually.

Use CSS Grid/Flexbox for structure, then apply slight rotations to individual elements to break the mechanical feel.

Key web techniques: transform: rotate() on cards, organic border-radius values on containers, SVG doodle elements positioned absolutely, and max-width containers (700-900px) for comfortable reading width.


Materials & Textures

physical to digital translation

Every texture in Human Scribble maps from a real-world stationery reference to a web equivalent:

Notebook Paper Warm background + CSS noise
Lined Paper Repeating linear-gradient
Kraft Paper Brown bg + SVG noise texture
Pen Ink Dark brown-black in handwriting fonts
Ballpoint Pen Blue ink in italic/script fonts
Red Pen Strikethroughs and margin marks
Highlighter Semi-transparent yellow behind text
Adhesive Tape Semi-transparent rotated rectangle

Paper Texture Demos

This is what lined notebook paper looks like as a web element. The lines are created with a repeating linear gradient, and the red margin line is a pseudo-element. Content sits on the lines just like writing in a real notebook. You can almost hear the pen scratching.

Kraft Paper Section

This section uses a warm kraft brown background with SVG fractal noise texture, evoking cardboard, packing paper, and natural materials. Dark text over kraft paper creates a warm, tactile feeling that no amount of digital polish can replicate.

this feels physical

Graph Paper Background

Two-axis linear gradients create a light grid pattern. Perfect for technical content areas, wireframe-style layouts, or anywhere you want to evoke engineering notebooks and precise-but-human documentation.


Interactive Elements

hover to feel the analog

Touch and cursor interactions should feel analog -- hover effects that gently straighten tilted elements (as if picking up a piece of paper), click effects that press down slightly, transitions that feel physical rather than digital.

Buttons

Hand-drawn SVG borders wrap around each button. Hover straightens and lifts. Click presses down.

Text Effects

Wavy underline · Red wavy · Blue wavy

Highlighted text · Marker text · Blue marker

SVG sketchy underline

polished personal


Imagery Guidelines

When sourcing or creating imagery for Human Scribble designs, the core principle is visible human authorship:

  • Layer hand-drawn elements over photography -- add SVG scribbles, arrows, circles, and doodles on top of photos
  • Favor imperfect, candid compositions -- avoid overly polished stock photography
  • Mix media types -- photographs alongside hand-drawn illustrations and sketches
  • Avoid AI-generated imagery -- the entire point is asserting human authorship
  • Scan real sketches -- authentic scanned doodles carry more visual truth than digital equivalents
  • Muted, warm color grading -- lean warm (cream, amber, soft brown) not cool or hyper-saturated
Never use this aesthetic to disguise AI-generated content. The entire philosophical foundation is human authenticity.

Related Aesthetics

the family tree

Implementation Notes

The Rules of Scribble

  • Warm and inviting, not messy -- visible human presence, not visual disorder
  • Contrast is essential -- without clean body text, the handwritten overlays lose meaning
  • Imperfection must be designed -- rotations 0.5-3 degrees, wobbles gentle, doodles purposeful
  • SVG is your primary tool -- CSS alone cannot produce convincingly hand-drawn lines
  • Accessibility is critical -- handwriting fonts only for headings and short labels, never body text
  • Performance matters -- use inline SVG data URIs for small elements, external files for larger pieces
  • Color restraint -- limit to 2-3 accent colors per view, like a real pen collection
Paradoxically, achieving the "imperfect" look requires careful design choices. Over-rotating or over-scribbling becomes distracting rather than charming. The magic is in subtlety.

Key CSS Techniques

:root { --scribble-paper-light: #FBF7F0; --scribble-ink: #2A2520; --scribble-red-pen: #D45040; } /* Organic blob shape */ .blob { border-radius: 60% 40% 50% 50% / 40% 60% 50% 50%; } /* Casual placement */ .card { transform: rotate(-0.5deg); } /* Highlighter mark */ mark { background: linear-gradient(to bottom, transparent 40%, rgba(255, 224, 102, 0.45) 40%, rgba(255, 224, 102, 0.45) 85%, transparent 85% ); }

Human Scribble is not about being sloppy or careless. It is about making the deliberate choice to show the hand behind the work. In a world increasingly filled with content that could have been made by anyone -- or anything -- the visible mark of a specific human being is the most powerful design statement there is.

Every wobble is a choice. Every mistakerevision is a story. Every ink blot is proof of life.