Hand-Drawn Doodle

Hand Drawn Doodle — Style Reference

Scribbles in a notebook: dashed lines, marker colors, tape and pushpins.

Theme: light

Hand Drawn Doodle turns the interface into a page of sticky notes: a cream paper ground (#fffef5), every border a 2 to 3px dashed line, and shadows that are solid colored offsets — yellow, red or teal — rather than grey. Headings may skew three degrees and cards rotate slightly on hover. The ornament set includes tape strips, pushpins and paperclips, and it is what separates this from the quieter pencil sketch: doodle is loud. Type runs bold sans, never monospace, because notebook writing is casual.

Colors

Typography

Baloo 2 — Headings and buttons at weight 800, allowed a three-degree skew — the rounded sans is the doodle's voice.

• Substitute: 'Comic Sans MS', 'Trebuchet MS', sans-serif
• Weights: 600, 800
• Sizes: 14, 18, 24, 32, 44
• Line height: 1.1 (display), 1.2 (headings), 1.55 (body)
• Letter spacing: 0.02em on display, 0.12em on uppercase labels

Nunito — Body and captions — readable while keeping the hand-written tone.

• Substitute: 'Segoe UI', system-ui, sans-serif
• Weights: 400, 600
• Sizes: 14, 16, 18
• Line height: 1.4 (display), 1.4 (headings), 1.65 (body)
• Letter spacing: 0 on display, 0.12em on uppercase labels

Type Scale

Spacing & Layout

Base unit: 8px Density: comfortable

Spacing Scale

Border Radius

• Page max-width: 1080px
• Section gap: 96px
• Card padding: 32px
• Element gap: 24px

Components

Doodle Button

Role: Action button

Cream fill, a 2px dashed ink border, 2px radius, 18px at weight 800 uppercase on 0.12em, 12px 24px padding, shadow 4px 4px 0 in marker red. Hover cuts the fill to ink, flips the text to cream, lifts 4px, shifts 1px right, rotates a degree and swaps the shadow to marker teal at 6px; press translates 3px 3px, scales 0.98, returns the rotation to zero and removes the shadow. 150ms linear.

• Sizes: padding 12px 24px; label 18px
• States: hover: invert, rotate 1deg, teal shadow; active: translate 3px, shadow none

Note Card

Role: Sticky note and content card

Cream fill, a 3px dashed ink border, 2px radius, 32px padding, shadow 5px 5px 0 in marker yellow. Titles run 32px/800 skewed three degrees by default and straighten on hover. The card itself lifts 4px, rotates -1 degree and swaps the shadow to marker red at 8px. 150ms linear.

Tape Strip

Role: Decorative tape

96px wide, 24px tall, rotated -4 degrees, 80% marker yellow with a 2px zigzag cut on each short end via clip-path, no border, no shadow. It sits on a card corner, overlapping the border by 4px. Purely decorative, never interactive.

Scribble Input

Role: Forms and note input

Cream fill, a 2px dashed ink border, 2px radius, 12px 16px padding at 16px sans. The placeholder sits at 30% ink. Focus turns the border marker red and adds a 2px 2px 0 hard shadow in marker yellow without resizing. 200ms.

Doodle Underline

Role: Hand-drawn underlines and circles

A single-period SVG wave with a 2px stroke in one marker color, sitting 4px under the text and six percent wider. A circle annotation uses an ellipse tilted six degrees and left unclosed by 12px, deployed once so the emphasis stays scarce.

Do's and Don'ts

Do

• Every border is dashed at 2 to 3px
• Shadows are solid colored offsets
• Cards may rotate up to two degrees
• Use tape, pushpins and other physical ornament
• Bold headings, skewed up to three degrees
• Motion runs 150ms on a linear curve

Don't

• No solid borders
• No grey blurred shadows
• No monospace type
• No gradients
• No precise right angles or geometry
• No large radii

Surfaces

Elevation

• Default: 5px 5px 0 #ffd93d
• Hover: 8px 8px 0 #ff6b6b
• Button default: 4px 4px 0 #ff6b6b
• Pressed: none

Imagery

Doodle illustration, photos of sticky notes, hand-drawn step diagrams. A photo may be presented as a Polaroid with tape on it. No realistic photography, gradients or precise vector art.

Layout

Capped at 1080px with 24px padding, sections 96px apart. Cards may rotate up to two degrees, with at most three rotated on one screen. Elements may sit slightly out of line like notes on a wall. The grid stays readable; tidiness is not the goal.

Agent Prompt Guide

QUICK COLOR REFERENCE:

• text: #2c2c2c
• background: #fffef5
• red: #ff6b6b
• teal: #4ecdc4
• yellow: #ffd93d
• olive: #a98d16

EXAMPLE COMPONENT PROMPTS:

1. Build a doodle button: background #fffef5, a 2px dashed #2c2c2c border, 2px radius, 18px/800 uppercase at 0.12em tracking, 12px 24px padding and box-shadow 4px 4px 0 #ff6b6b. Hover fills #2c2c2c, flips the text to #fffef5, applies translate(-1px, -4px) rotate(1deg) and swaps the shadow to 6px 6px 0 #4ecdc4. Active applies translate(3px,3px) scale(0.98) with no shadow. Transition 150ms linear. The page ground is #fffef5.

Similar Brands

• Sketch Style — Also hand-drawn, though pencil is quieter and doodle is louder
• Collage Art — Same physical-collage language, though collage pushes material and cutting harder

Quick Start

:root {
  /* Colors */
  --color-ink: #2c2c2c;
  --color-cream: #fffef5;
  --color-marker-red: #ff6b6b;
  --color-marker-teal: #4ecdc4;
  --color-marker-yellow: #ffd93d;
  --color-olive: #a98d16;

  /* Typography — Font Families */
  --font-sans: 'Baloo 2', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-body: 'Nunito', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-display: 44px;
  --leading-display: 1.1;
  --tracking-display: 0.02em;
  --text-heading: 32px;
  --leading-heading: 1.15;
  --text-subheading: 24px;
  --leading-subheading: 1.25;
  --text-body-lg: 18px;
  --leading-body-lg: 1.6;
  --text-body: 16px;
  --leading-body: 1.65;
  --text-label: 14px;
  --leading-label: 1.35;
  --tracking-label: 0.12em;

  /* Typography — Weights */
  --font-weight-regular: 400;
  --font-weight-semibold: 600;
  --font-weight-extrabold: 800;

  /* Spacing */
  --spacing-unit: 8px;
  --spacing-8: 8px;
  --spacing-16: 16px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-48: 48px;
  --spacing-64: 64px;
  --spacing-96: 96px;

  /* Layout */
  --page-max-width: 1080px;
  --section-gap: 96px;
  --card-padding: 32px;
  --element-gap: 24px;
  --density: comfortable;

  /* Border Radius */
  --radius-cards: 2px;
  --radius-buttons: 2px;
  --radius-inputs: 2px;
  --radius-doodles: 60% 40% 50% 50%;

  /* Surfaces */
  --surface-cream: #fffef5;
  --surface-note: #fffef5;
}