StylesStyle / Visual Language

Hand-drawn UI

手绘涂鸦

Aliases:手绘风涂鸦风格手绘描边歪歪扭扭的线纸感手写界面hand-drawn UIdoodle UIsketchy UI

What is it

Wobbly strokes, skewed borders, paper texture and marker highlights as a human-made interface look. Circles stay imperfect, outlines tremble, icons read as quick sketches. Human warmth against machine-perfect UI.

Design spec

Typography

Hand-feel sans or rounded face, headings slightly tilted

Color

Paper #FAF6EE, ink #2B2B2B, highlight yellow #FFE566

Border

2px wobbly strokes with asymmetric radii

Shadow

Barely-there paper shadows, hugging the surface

Spacing

Casual misalignment and slight tilts

Motion

150–250ms slight wobbly offsets with a hint of bounce; honour prefers-reduced-motion

States

Hover tilts and deepens the wobbly stroke; focus shows a visible 2px hand-drawn frame; active flattens the wobble; disabled desaturates but keeps the stroke; error looks like a red pen correction

Style in action

See the full page, then try the interactive scene

Full-page preview

⌄ notebook.day⋮

scribble&JournalMaterialsAbout⌕

A little crooked
is fine

A human touch feels more trustworthy than perfect pixels.

Make a quick note

PERFECT CIRCLES ARE A LIE.

Wobbly outlines

Circles with character

Paper texture

Ruled notebook pages

Marker highlights

Mark what matters

Interactive scene

Loading demo…

✓ When to use

Independent creators, craft brands and education products needing warmth
Empty states, coach marks and easter eggs where doodles season the dish
Breaking the over-smooth sameness of AI-generated UI

✕ When not to use

Finance, legal and medical UIs that must read precise and authoritative
Dense tables and dashboards — wobbly lines wreck numeric alignment
Long reading areas where texture and highlights pile up and hurt

Variants

Marker sketch

马克笔草图

Thick marker strokes with highlighter swipes under the type

Notebook doodle

笔记本涂鸦

Ruled paper, ballpoint thin lines, corner doodles

Sticker chaos

贴纸乱贴

Tilted doodle stickers stacked like a binder cover

Implementation

border-radius: 255px 15px 225px 15px / 15px 225px 15px 255pxborder: 2px solid #2B2B2Bbackground: linear-gradient() #FFE566 高亮transform: rotate(-1deg)box-shadow: 2px 2px 0 rgba(0,0,0,0.08)

Fake wobbly borders with asymmetric border-radius values — no SVG filter required. For more tremor use SVG feTurbulence displacement, but keep it static under prefers-reduced-motion. Marker highlight is a translucent yellow linear-gradient band behind the lower 60% of the text. Paper texture is low-opacity noise or repeating horizontal rules under 0.12 opacity. Tilt two to four elements per page; more reads unfinished.

Agent prompts

Four prompt layers run from “what it is” all the way to a ready-to-run task. On the Agent task layer you can stack a visual style and extra requirements, then copy it to your coding agent in one click.

Style

Dark mode supportRespect prefers-reduced-motionNo new dependenciesRun existing checks and list modified files

Implement Hand-drawn UI visual style in the current project.

Inspect existing components and texture assets first; keep hand-drawn effects on the visual layer only, hit targets untouched.
Requirements:
- Asymmetric wobbly radii and strokes, two to four slightly tilted elements
- Paper ground (rules or noise under 0.12 opacity) plus marker highlights
- Sketchy icon paths, decoration aria-hidden
- Buttons keep regular rectangular hit areas; only the visual stroke wobbles
- Dark mode on kraft brown; motion respects prefers-reduced-motion
- Text contrast compliant, no new dependencies
Run existing project checks when done and list the modified files.

Additional requirements:
- Dark mode support
- Respect prefers-reduced-motion
- No new dependencies
- Run existing checks and list modified files

Hand to your coding agent — stack a style and extra requirements on top

Related concepts

Organic有机自然

A visual language of natural shapes, warm materials and muted earth tones. Soft contours and generous spacing create an unhurried rhythm while text and controls keep clear boundaries. It suits lifestyle and sustainability themes, provided organic decoration supports content without weakening readability or interaction.

StylesSimilar

Neobrutalism新粗野主义

A loud visual language of thick black outlines, saturated clashing colors and hard offset shadows: elements sit on the page like bold stickers, paired with chunky radii and punchy badges. It deliberately rejects polish and subtlety, trading refinement for instant recognition and a rebellious, playful voice.

StylesSimilar

Minimalism极简主义

A visual language built on "less is more": generous whitespace, a restrained monochrome palette and very few type scales let the content speak. All decoration is stripped away; hierarchy is created purely by space, weight and rhythm. Quiet, restrained, content-first.

StylesAlternative

Empty State空状态

When a list or page has no data, don't leave a void — fill it with an illustration, one sentence of explanation and a clear next action. It solves the "blank screen" problem where users can't tell what happened or what to do next, turning dead space into a starting point: onboarding for first use, a way out for fruitless searches.

PatternsUsed with

Button按钮

A clickable block that triggers one clear action — the most basic interactive element of any interface. Fill, outline and ghost styles rank primary against secondary actions; presses give instant sink-in feedback, and a busy state disables further clicks to prevent double submission.

ComponentsAffects

Card卡片

A self-contained rectangular container outlined by rounded borders or a surface colour, aggregating related content: cover, title, excerpt and actions. The universal display unit of content feeds, dashboards and commerce lists.