Hand-Drawn / Doodle

---
name: hand-drawn-doodle
description: Apply the Hand-Drawn / Doodle visual design system when building or restyling websites and UI. Use whenever the user asks to build, theme, restyle, or "make it look like" Hand-Drawn / Doodle, mentions doodle style, sketchy UI, hand-sketched, or describes wobbly hand-drawn strokes, handwritten typography, crayon primary accents — even if they don't name the style explicitly. Do NOT use for non-visual tasks or when another named design system is requested.
license: MIT
---

# Hand-Drawn / Doodle Design System

Sketchy, imperfect human marks: wobbly hand-drawn borders, crayon-primary accents on cream, handwritten Caveat and Patrick Hand type, arrows and marginalia doodled around content. The interface looks like a clever friend explained it on paper.

Apply this system holistically: colors, type, spacing, radius, borders, shadows, and motion together produce the look. Token values are representative interpretations of the aesthetic, not an official spec. When in doubt, match the reference sites listed at the end.

## When to use

- Building a new page or component that should read as Hand-Drawn / Doodle.
- Restyling existing UI to this aesthetic.
- The user names the style, an alias (doodle style, sketchy UI, hand-sketched, rough-drawn, excalidraw style), or describes its traits: wobbly hand-drawn strokes; handwritten typography; crayon primary accents; doodle arrows and marginalia; cream paper background; sketchy hatched shading.

## Design tokens

### Color palette

- Warm paper-white background: `#fffdf7` (--color-bg)
- Card background, clean paper: `#ffffff` (--color-surface)
- Soft ink black primary text: `#2b2b2b` (--color-text)
- Secondary text, pencil gray: `#6d6a63` (--color-text-muted)
- Crayon red — primary accent for links, arrows, and circles: `#d62828` (--color-accent)
- Crayon blue — secondary accent and info highlights: `#457b9d` (--color-blue)
- Highlighter yellow — marker-swipe emphasis behind text: `#f4d35e` (--color-yellow)
- Crayon green — success doodles and checkmarks: `#6a994e` (--color-green)
- Ink-colored hand-drawn borders: `#2b2b2b` (--color-border)

### Typography

- Display / headings: Caveat (fallback: Comic Sans MS, cursive)
- Body: Patrick Hand (fallback: Comic Sans MS, cursive)
- Mono / data: Space Mono (fallback: Courier New, monospace)
- Type scale: 1.333 ratio, base 18px — computed steps: 18px / 24px / 32px / 43px / 57px / 76px (body / h5 / h4 / h3 / h2 / h1; scale further for display sizes)
- Headings: weight 700, line-height 1.2, letter-spacing 0
- Body: line-height 1.55, letter-spacing 0.01em

### Spacing, radius, border

- Spacing scale (px): 4, 8, 16, 24, 32, 48, 64, 96 — Playfully loose: uneven-feeling gaps (within a real grid), wide margins doubling as sketchbook space for arrows and notes.
- Border radius: sm 4px, md 8px, wobble 255px 15px 225px 15px / 15px 225px 15px 255px — Radii barely matter — the wobble border-radius trick plus rough strokes make rectangles read as hand-drawn.
- Border treatment: 2px solid #2b2b2b — Every border should look drawn in one confident pass: slightly uneven weight, corners that overshoot a hair (rough.js or SVG filters).

### Shadows

- hatch: `3px 3px 0 rgba(43, 43, 43, 0.2)` — Sketchy offset suggesting hatched shading under cards
- hatch-hover: `5px 5px 0 rgba(43, 43, 43, 0.25)` — Hover lift for drawn elements

### Layout

- Max content width: 1080px
- Content islands connected by hand-drawn arrows and dotted paths
- Marginalia: small doodles, stars, and notes in the gutters
- Slight rotation (-2 to 2 degrees) on cards and stickers
- Highlighter-yellow marker swipes behind key phrases

### Effects

- Rough.js-style wobbly stroke rendering on borders, underlines, and dividers
- Hand-drawn arrows, circles, and squiggle underlines as attention devices
- Crosshatch shading patches behind featured elements
- Paper grain at low opacity; occasional coffee-ring or tape-corner props

### Motion

- Easing: cubic-bezier(0.34, 1.3, 0.64, 1); durations 150ms / 300ms / 600ms
- Strokes draw themselves in via stroke-dashoffset, like live sketching
- Hover gives elements a tiny 1-degree wiggle, as if nudged on the desk
- Checkmarks and doodles animate as single pen strokes

## CSS variables (drop-in)

```css
:root {
  --color-bg: #fffdf7;
  --color-surface: #ffffff;
  --color-text: #2b2b2b;
  --color-text-muted: #6d6a63;
  --color-accent: #d62828;
  --color-blue: #457b9d;
  --color-yellow: #f4d35e;
  --color-green: #6a994e;
  --color-border: #2b2b2b;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-wobble: 255px 15px 225px 15px / 15px 225px 15px 255px;
  --shadow-hatch: 3px 3px 0 rgba(43, 43, 43, 0.2);
  --shadow-hatch-hover: 5px 5px 0 rgba(43, 43, 43, 0.25);
  --border-default: 2px solid #2b2b2b;
  --font-display: Caveat, "Comic Sans MS", cursive;
  --font-body: "Patrick Hand", "Comic Sans MS", cursive;
  --font-mono: "Space Mono", "Courier New", monospace;
  --text-base: 18px;
  --leading-heading: 1.2;
  --leading-body: 1.55;
  --tracking-heading: 0;
  --tracking-body: 0.01em;
  --ease: cubic-bezier(0.34, 1.3, 0.64, 1);
  --duration-fast: 150ms;
  --duration-base: 300ms;
  --duration-slow: 600ms;
}
```

Google Fonts: `<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Caveat:wght@500;700&family=Patrick+Hand:wght@400&family=Space+Mono:wght@400&display=swap" rel="stylesheet">`

## Component recipes

- **Nav:** Paper-white bar with a wobbly ink underline instead of a border; logo in Caveat, links in Patrick Hand with squiggle underlines on hover
- **Hero:** Big Caveat headline with a crayon-red circle scribbled around the key word, hand-drawn arrow pointing to the CTA, doodle illustrations floating in the margins
- **Card:** White paper card with 2px wobbly ink border, hatch shadow, slight rotation, doodle icon top-left, Patrick Hand text
- **Button (primary):** Crayon-red fill drawn with a rough edge, paper-white text, hatch shadow; wiggles subtly on hover, flattens on press
- **Button (secondary):** Paper fill with wobbly ink border and ink text; gains a highlighter-yellow swipe behind it on hover
- **Form fields:** Paper fill with a single hand-drawn underline instead of a box; focus redraws the underline thicker in crayon blue

Where this spec is silent (footers, responsive breakpoints, empty states), derive the treatment from the tokens above and the Do/Don't rules — never fall back to generic defaults. Every interactive element needs a visible keyboard focus state consistent with the style (use the accent color or the border treatment, not the browser default).

## Signature element

Rough, wobbly stroke rendering on every border and underline — rough.js-style paths with visible overshoot at corners — plus hand-drawn arrows and circled annotations pointing at whatever matters most. Spend boldness here; keep everything else quiet.

## Do

- Render every stroke imperfect: wobble, overshoot, uneven weight
- Use arrows, circles, and marker swipes to direct attention like a whiteboard talk
- Keep the palette to ink, paper, and a few crayon primaries
- Let elements sit slightly rotated — perfection breaks the illusion

## Don't

- No crisp geometric borders or perfect circles anywhere
- Don't mix in polished gradients or glossy icons — everything is drawn or it isn't there
- Avoid Comic Sans as the actual face; use real handwriting fonts
- Don't let wobble touch data: charts may be sketchy, numbers must be exact

## Accessibility notes

- Ink #2b2b2b on paper passes at ~14:1 and crayon red #d62828 at ~4.9:1; highlighter yellow is background emphasis only, never text
- Handwriting faces are harder to read at length — keep paragraphs short, sizes 18px+, and offer real emphasis (bold, swipes) rather than italic scrawl
- Self-drawing stroke and wiggle animations must respect prefers-reduced-motion

## Reference sites

- Excalidraw: https://excalidraw.com
- tldraw: https://www.tldraw.com
- rough.js: https://roughjs.com

For the exhaustive machine-readable spec, see references/tokens.md and tokens.json in this skill folder.

Install this skill

unzip hand-drawn-doodle.zip -d ~/.claude/skills/

npx shadcn add https://claude-design-skills.convoke.software/r/hand-drawn-doodle.json

Settings → Capabilities → Skills → Upload skill → hand-drawn-doodle.zip