Hand-Drawn & Doodle

Published on 2025-12-28 08:19:59

The Hand-Drawn/Doodle style is a timeless "counter-culture" trend in digital design. Amidst the wave of Pixel Perfection and high-fidelity 3D rendering, this style evokes nostalgia and intimacy by returning to Analog Media—paper, pen, and ink. It does not aim for refined artistry but emphasizes Spontaneity and Roughness. It often recalls school notebooks, sketchpads, napkin scribbles, or the aesthetics of Indie Games. It breaks the coldness of digital products, imbuing the interface with a unique, human personality. Visual Characteristics Wobbly Lines & Imperfection: The core characteristic.Borders, dividers, and shapes are never perfectly straight; they exhibit natural hand jitter. Lines vary in weight, showing ink bleed or re-traced strokes, mimicking real penmanship. Analog Textures (Paper & Ink): Backgrounds are rarely solid colors; instead, they simulate paper textures (graph paper, crumpled paper, kraft paper). Color-wise, it often features black ink outlines paired with highlighter markers (neon yellow, pink) or watercolor washes, mimicking manual coloring. Playful Typography & Layout: Font choice is critical, relying heavily on Handwritten Fonts (e.g., Patrick Hand, Amatic SC). Layouts often feature elements that are tilted, overlapping, or visually "pinned" with tape or paperclips, breaking the strict grid system to create a relaxed, "scattered on a desk" vibe.

Style System

**Role:** You are a Frontend Artist who loves "The Imperfect Web." You specialize in using SVG filters and CSS `border-radius` manipulation to create organic, hand-drawn interfaces. **Task:** Build a Hand-Drawn / Doodle style landing page for "SKETCH_PAD". **[CONFIGURATION]** - **[STYLE_NAME]:** Hand-Drawn / Doodle - **[INDUSTRY]:** Creative Portfolio - **[PROJECT_NAME]:** SKETCH_PAD - **[TECH_STACK]:** HTML5 + Modern CSS3 (SVG Filters & Clip-path). - **[PAGE_STRUCTURE]:** Notebook Nav, Doodled Hero, Sketchy Grid, Footer. **Technical Requirements:** 1. **Global Variables (`:root`):** - **Colors:** `--ink-black: #2b2b2b;`, `--paper-bg: #fdf6e3;` (Warm cream), `--marker-yellow: rgba(255, 255, 0, 0.4);`. - **Fonts:** `--font-hand: 'Patrick Hand', 'Gochi Hand', cursive;`, `--font-marker: 'Permanent Marker', cursive;`. - **Background:** Use a repeating CSS radial gradient to simulate "Dot Grid Paper" (`background-image: radial-gradient(#ccc 1px, transparent 1px); background-size: 20px 20px;`). 2. **Visual Effects (The "Doodle" Look):** - **The "Squiggle" Filter (CRUCIAL):** Create an SVG filter in the HTML body to distort standard elements. ```html <svg style="display: none;"> <filter id="wavy"> <feTurbulence type="fractalNoise" baseFrequency="0.02" numOctaves="5" result="noise" /> <feDisplacementMap in="SourceGraphic" in2="noise" scale="2" /> </filter> </svg> ``` Apply `filter: url(#wavy);` to buttons or containers to make their edges rough. - **Messy Borders:** Instead of `border: solid`, use `border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;` (random large/small values) to create wobbly box shapes. - **Marker Highlight:** Create a `.highlight` class using `linear-gradient` that only covers the bottom half of the text and is slightly rotated (`transform: rotate(-1deg)`). - **Box Shadow:** Use `box-shadow: 2px 2px 0px var(--ink-black);` (Solid offset) to look like a pen drawing. 3. **Layout Strategy:** - **Playful Misalignment:** Use `transform: rotate()` randomly on grid items (e.g., `-2deg`, `1deg`, `3deg`) so nothing looks grid-locked. - **Tape Effect:** Add a pseudo-element `::before` on top of images that looks like a piece of semi-transparent tape. 4. **Specific Components:** - **Hero:** Main title uses the `--font-marker` font with a "Highlighter" background. - **Buttons:** Apply a CSS `@keyframes` animation called `wiggle` that slightly changes the `border-radius` on hover to make it feel alive. - **Scrollbar:** A thin, scribbly line style. - The result should feel like a digital sketchbook.