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
The same page, ready to useMake a quick note opens editing. Save notes to the list, filter by keyword and delete entries. Journal, Materials, About and Search reveal content with blank-input validation, no-match and deletion results.
Full-page preview · interact directly
What to look for
- 01Use scribble&’s original navigation and primary CTAs; inspect content and return paths, not just click notices.
- 02Complete the scribble& task, then change inputs or undo and inspect the matching result/state.
- 03Check reflow, focus and validation with keyboard and 390px / 320px viewports; distinguish toolbar reload from in-page clearing and inspect reset-on-reload boundaries.
✓ 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.
Build a complete scribble& page in this style, extending the original hero into content, concrete operations and return paths rather than isolated controls or a partial demo. Preserve brand, hero copy, assets, composition, tokens and all variants. The current YAML preview is authoritative for the brand, original navigation and CTAs; never substitute a generic marketing template. Keep scribble&’s paper ground, original copy and handwritten font fallbacks; use deep ochre #A24A26 for the text CTA so it remains legible on paper. Replace the generic CSS landscape with an original SVG of a hand-drawn flower, ruled note, tape and pencil. Use 1.1 / 1.5 / .65 desktop columns, then stack in reading order on phones with three vertical material notes. Extend the 32px notebook ruling with a double-line spine and tape while keeping form hit areas regular. Reuse current preview.tokens: background #FAF6EE; foreground #2B2B2B; accent #FF8A65 / #2B2B2B; card #FFFDF7; border #2B2B2B; radius 14px 6px 18px 8px; font Comic Sans MS, Chalkboard SE, Marker Felt, PingFang SC, sans-serif; card shadow 2px 3px 0 rgba(43,43,43,0.08). Reuse existing workspace tokens for dark and variants. Share StyleSignatureArt and style-signatures.css between cover and page, preserving the paper, geometric or radio materials. Reflow content on narrow screens. Full-page operations: Make a quick note opens editing. Save notes to the list, filter by keyword and delete entries. Journal, Materials, About and Search reveal content with blank-input validation, no-match and deletion results. Share one renderer between static covers, the detail experience and /style-scenes/hand-drawn/ (English /en/style-scenes/hand-drawn/). Static covers contain no nested live buttons; the detail experience enables the same page’s semantic controls and brand continuation in an independent document. Original navigation and CTAs reach actual content or workflows, not placeholder links, color-only changes or one-line toasts. Interaction state lives only in this page’s memory. Reload, toolbar reset and mode changes restore initial state; do not use localStorage or sessionStorage. In-page clear/reset undoes this visit’s operations without implying cross-page or persistent saves. Provide return, cancel or clear/reset paths and disclose the page-memory state boundary; never fake real payments, email, login, AI or cloud sync. Reflow desktop, 390px and 320px layouts with readable text and usable targets rather than shrinking the desktop page. Give controls accessible names, keyboard access and visible focus; overlays close and return focus, validation/results are announced; respect prefers-reduced-motion. Add no dependencies. Check both languages, original navigation/CTAs, concrete results, return/reset and narrow reflow; report checks actually run and pending items, never requirements as passed results. 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
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.
StylesSimilarA 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
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.
StylesAlternativeWhen 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 withA 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.
ComponentsAffectsA 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.
ComponentsAffects