ArtisanalTextureLudiqueOrganique

Hand Drawn Design Reference

Overview

Hand Drawn is a warm, illustrative web design aesthetic that replaces sterile digital precision with the unmistakable character of human illustration. Every element -- from borders and icons to backgrounds and navigation -- looks as though it was sketched with pencil, inked with a pen, or colored with markers and watercolors. The style draws its visual language from sketchbooks, comic panels, children's book illustrations, cafe chalkboards, and the casual doodles that fill notebook margins. It is fundamentally an anti-corporate, anti-AI statement: where algorithmic design systems pursue mathematical perfection, Hand Drawn design celebrates the wobble of a real hand, the grain of actual paper, and the imperfect charm that only a human illustrator can produce.

The aesthetic gained traction in the late 2000s as a reaction to the sterile uniformity of early Web 2.0 glossy gradients, and it has surged again in the mid-2020s as designers seek to distinguish human-crafted work from AI-generated content. Brands like MailChimp, Innocent Drinks, and Etsy pioneered the use of hand-drawn illustration in digital interfaces, proving that sketchy, organic visuals can coexist with professional usability. The approach works especially well for creative portfolios, artisan brands, children's products, cafes and bakeries, independent publishers, and any project that wants to communicate approachability, authenticity, and personal warmth.

Unlike its close relative Human Scribble -- which emphasizes raw, annotation-style marks layered over existing content -- Hand Drawn is a more complete illustrative system. It builds entire interfaces from illustrated components: hand-drawn buttons, sketchy card frames, illustrated hero scenes, and marker-colored backgrounds. The goal is not to annotate a digital page but to make the entire page feel like an opened sketchbook. Line quality matters deeply: visible pencil grain, ink flow variation, natural pressure changes in strokes, and slight baseline drift in lettering all contribute to the impression that a real artist sat down and drew this website by hand. The result is a digital experience that feels personal, crafted, and deeply human -- a warm handshake in a world of automated interfaces.

Visual Characteristics

Core Design Traits

Sketchy, imperfect outlines -- all borders, frames, and containers use lines with visible wobble, pressure variation, and slight irregularity rather than pixel-perfect edges
Marker and watercolor fills -- background colors appear as though applied with real art supplies, featuring subtle texture, uneven saturation, and soft bleeding edges
Illustrated icons and UI elements -- buttons, checkboxes, arrows, and navigation items are drawn in a consistent illustrative style rather than using geometric icon sets
Pencil grain and ink textures -- surfaces carry the subtle noise of real drawing media, whether graphite on paper, ink on card stock, or chalk on a board
Hand-lettered typography -- headings and display text use fonts that faithfully reproduce the character of actual handwriting, with natural stroke variation and baseline drift
Paper and sketchbook backgrounds -- the page feels like a physical surface: cream paper, kraft card, graph paper, or a watercolor pad with visible tooth
Visible line weight variation -- strokes thicken and thin naturally, as if responding to real pen pressure rather than uniform stroke-width values
Doodle ornaments and flourishes -- stars, swirls, arrows, flowers, and abstract squiggles serve as decorative accents around headings and between sections
Soft, rounded shapes -- containers and elements favor organic blob-like forms over sharp rectangles, achieved with irregular border-radius values
Layered illustrative depth -- foreground illustrations overlap background sketches, creating a sense of handmade collage and visual storytelling
Slight element rotation -- cards, images, and text blocks are tilted 1-3 degrees as if casually placed on a desk rather than snapped to a grid
Comic panel and storyboard influences -- content sections may be framed like comic panels with thick hand-drawn borders and speech bubble callouts

Design Principles

Warmth over precision -- every design decision should make the interface feel approachable and human rather than clinically efficient
Consistency of illustration style -- all hand-drawn elements should look like they came from the same artist's sketchbook, maintaining coherent line weight, color application, and character
Readable despite imperfection -- the sketchy style must never compromise legibility; body text remains clean and structured even when headings are hand-lettered
Authentic materiality -- textures and effects should reference real art supplies (pencil, ink, watercolor, marker, chalk) rather than abstract digital distortions
Illustration as interface -- hand-drawn elements are not decoration layered on top of a conventional layout; they are the interface itself
Playful but purposeful -- the sketchy aesthetic communicates friendliness and creativity, but information architecture remains clear and navigable
Anti-perfection ethos -- slight misalignments, overlapping strokes, and visible corrections are features, not flaws; they signal genuine human craft
Contrast between structure and spontaneity -- the underlying layout grid provides usability while the hand-drawn surface provides character

Color Palette

The Hand Drawn palette takes its cues from real art supplies and the surfaces they mark. Colors feel as though they were mixed on a palette, squeezed from a tube, or uncapped from a set of markers. Saturation is moderate -- not the full blast of digital color, but the softer, slightly muted tones that occur when pigment meets textured paper. Backgrounds lean warm and papery, while accents draw from the familiar hues of colored pencils, watercolor pans, and felt-tip marker sets.

Swatch	Hex	Role/Usage
Sketchbook Cream	`#FAF6ED`	Primary page background, the warm off-white of quality drawing paper
Kraft Tan	`#E8D5B5`	Secondary backgrounds, card surfaces, and sidebar panels
Pencil Graphite	`#3B3B3B`	Primary text color, heading outlines, and sketch borders
Ink Black	`#2C2825`	Bold emphasis strokes, thick outlines, and marker lettering
Eraser Pink	`#F5C6C2`	Subtle highlight areas, soft accent backgrounds, and notification badges
Watercolor Blue	`#5B9BD5`	Primary accent color, links, illustrated water and sky elements
Marker Coral	`#E87461`	Call-to-action elements, warm highlights, and illustrated fruit or flowers
Colored Pencil Green	`#6DAE6D`	Success states, nature illustrations, and secondary accents
Crayon Yellow	`#F7D55E`	Attention-grabbing highlights, star doodles, and badge backgrounds
Chalk Lilac	`#B8A9D4`	Tertiary accents, tags, and decorative flourish coloring
Felt-Tip Orange	`#E8943A`	Warm secondary accent, illustrated citrus, and hover states
Brush Pen Teal	`#4AADA1`	Cool secondary accent, illustrated ocean, and info callouts
Charcoal Smoke	`#6B6560`	Secondary text, captions, and muted UI labels
Paper Shadow	`#D9CEBC`	Card shadows, divider lines, and depth layering
Whiteboard White	`#FFFFFF`	High-contrast areas, modal overlays, and clean content zones

CSS Custom Properties

:root {
  /* Paper and background tones */
  --hand-paper: #FAF6ED;
  --hand-paper-mid: #F3EBDA;
  --hand-kraft: #E8D5B5;
  --hand-paper-shadow: #D9CEBC;

  /* Ink and text */
  --hand-graphite: #3B3B3B;
  --hand-ink: #2C2825;
  --hand-charcoal: #6B6560;
  --hand-pencil-light: #A09888;

  /* Illustrative accents */
  --hand-blue: #5B9BD5;
  --hand-coral: #E87461;
  --hand-green: #6DAE6D;
  --hand-yellow: #F7D55E;
  --hand-lilac: #B8A9D4;
  --hand-orange: #E8943A;
  --hand-teal: #4AADA1;
  --hand-pink: #F5C6C2;

  /* Functional mappings */
  --hand-bg-primary: var(--hand-paper);
  --hand-bg-secondary: var(--hand-kraft);
  --hand-bg-card: #FFFFFF;
  --hand-text-primary: var(--hand-graphite);
  --hand-text-heading: var(--hand-ink);
  --hand-text-muted: var(--hand-charcoal);
  --hand-accent-primary: var(--hand-blue);
  --hand-accent-warm: var(--hand-coral);
  --hand-accent-success: var(--hand-green);
  --hand-accent-warning: var(--hand-yellow);
  --hand-border: var(--hand-pencil-light);
  --hand-link: var(--hand-blue);
  --hand-link-hover: var(--hand-coral);
}

Typography

Hand Drawn typography pairs hand-lettered display fonts with clean, legible body text. Headings and accent text use fonts that capture the character of real handwriting -- the natural variation in stroke width, the slight baseline wobble, and the personality embedded in someone's actual penmanship. Body text, however, stays in a friendly rounded sans-serif to ensure comfortable reading at length. The contrast between illustrated headings and structured body text is central to the aesthetic: it says "an artist drew the signs, but the content is clear."

Recommended Google Fonts

Font	Style	Weight Range	Best For
Architects Daughter	Casual architectural lettering	400	Primary display headings, hero text
Patrick Hand	Clean casual handwriting	400	Section headings, subheadings
Caveat	Flowing natural handwriting	400-700	Annotations, callouts, labels
Fredericka the Great	Sketchy serif display	400	Hero headlines, large decorative text
Shadows Into Light	Soft rounded handwriting	400	Pull quotes, featured testimonials
Indie Flower	Loose playful handwriting	400	Informal notes, decorative captions
Permanent Marker	Bold felt-tip marker	400	Emphasis text, badge labels
Nunito	Rounded friendly sans-serif	300-700	Primary body text, paragraphs
Quicksand	Geometric rounded sans-serif	300-700	UI labels, navigation, metadata

Font Pairing Recommendations

Context	Heading Font	Body Font	Effect
Friendly Portfolio	Architects Daughter	Nunito	Casual, approachable creative showcase
Children's Brand	Fredericka the Great	Quicksand	Playful, storybook-like warmth
Artisan Cafe	Patrick Hand	Nunito	Warm, menu-board charm with readability
Creative Blog	Shadows Into Light	Nunito	Personal, journaling tone
Indie Product	Permanent Marker	Quicksand	Bold, crafted, maker energy

Typography CSS Example

@import url('https://fonts.googleapis.com/css2?family=Architects+Daughter&family=Patrick+Hand&family=Caveat:wght@400;700&family=Fredericka+the+Great&family=Shadows+Into+Light&family=Permanent+Marker&family=Nunito:wght@300;400;600;700&family=Quicksand:wght@400;500;600&display=swap');

/* Body text -- clean rounded sans-serif for readability */
body {
  font-family: 'Nunito', 'Quicksand', -apple-system, sans-serif;
  font-size: 17px;
  line-height: 1.75;
  color: var(--hand-text-primary);
  -webkit-font-smoothing: antialiased;
}

/* Primary display heading -- hand-lettered */
h1 {
  font-family: 'Architects Daughter', 'Patrick Hand', cursive;
  font-size: clamp(2.4rem, 6vw, 4.2rem);
  color: var(--hand-text-heading);
  line-height: 1.2;
  letter-spacing: 0.01em;
}

/* Section headings */
h2 {
  font-family: 'Patrick Hand', 'Architects Daughter', cursive;
  font-size: clamp(1.6rem, 4vw, 2.6rem);
  color: var(--hand-text-heading);
  line-height: 1.3;
}

/* Subsection headings */
h3 {
  font-family: 'Patrick Hand', cursive;
  font-size: clamp(1.3rem, 3vw, 1.9rem);
  color: var(--hand-accent-warm);
  line-height: 1.35;
}

/* Annotation and callout text */
.hand-annotation {
  font-family: 'Caveat', 'Indie Flower', cursive;
  font-size: 1.3rem;
  color: var(--hand-accent-primary);
  transform: rotate(-1.5deg);
  display: inline-block;
}

/* Bold marker emphasis */
.hand-marker {
  font-family: 'Permanent Marker', cursive;
  font-size: 1.2rem;
  color: var(--hand-accent-warm);
}

/* Pull quotes */
blockquote {
  font-family: 'Shadows Into Light', cursive;
  font-size: 1.5rem;
  color: var(--hand-charcoal);
  line-height: 1.6;
  border-left: 3px solid var(--hand-coral);
  padding-left: 1.5rem;
  margin: 2rem 0;
}

/* Navigation and UI labels */
.hand-label {
  font-family: 'Quicksand', sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--hand-text-muted);
}

Layout Principles

Sketchbook page metaphor -- the entire viewport should feel like an opened sketchbook or artist's journal, with cream paper backgrounds and generous margins
Underlying grid, organic surface -- use CSS Grid or Flexbox for structural integrity, then apply slight rotations, offsets, and irregular borders to break the mechanical feel
Generous whitespace -- hand-drawn designs need breathing room; crowded layouts undermine the casual, sketched quality of the aesthetic
Comfortable reading width -- content containers max out at 800-950px, mimicking the proportions of an actual sketchbook page
Slight rotations on cards and images -- elements tilted 0.5-2.5 degrees feel hand-placed rather than machine-aligned
Layered depth with overlapping elements -- illustrations, doodle ornaments, and decorative sketches overlap content edges to create a sense of handmade collage
Section variety through illustration -- alternate between full-width illustrated scenes, contained card grids, and single-column text with margin doodles
Asymmetric but balanced -- avoid perfectly mirrored layouts; instead, balance heavier illustrated areas against lighter whitespace zones
Visible section dividers -- use hand-drawn wavy lines, doodle borders, or illustrated scene transitions instead of plain horizontal rules
Sticky and pinned metaphors -- secondary content (notes, tips, asides) presented as sticky notes, pinned scraps, or taped-on cards that break the grid
Mobile-first simplification -- on small screens, reduce decorative elements and rotations while preserving the core hand-drawn typography and paper textures
Vertical storytelling flow -- guide the eye downward through illustrated transitions, hand-drawn arrows, and narrative section sequencing

CSS / Design Techniques

Sketchy Card Component

/* Hand-drawn card with wobble border via SVG filter and organic shadow */
.hand-card {
  background: var(--hand-bg-card);
  padding: 2rem;
  border-radius: 12px 8px 14px 6px;
  position: relative;
  transform: rotate(-0.5deg);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow:
    2px 3px 0 var(--hand-paper-shadow),
    4px 6px 12px rgba(44, 40, 37, 0.08);
}

.hand-card::before {
  content: '';
  position: absolute;
  inset: -2px;
  border: 2.5px solid var(--hand-graphite);
  border-radius: 14px 6px 16px 8px;
  opacity: 0.7;
  pointer-events: none;
  /* Irregular border simulating hand-drawn line */
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Crect x='2' y='2' width='196' height='196' rx='10' fill='none' stroke='black' stroke-width='2.5' stroke-dasharray='4 1 8 1 6 2' stroke-linecap='round'/%3E%3C/svg%3E");
}

.hand-card:hover {
  transform: rotate(0.3deg) translateY(-3px);
  box-shadow:
    3px 5px 0 var(--hand-paper-shadow),
    6px 10px 20px rgba(44, 40, 37, 0.12);
}

.hand-card h3 {
  font-family: 'Patrick Hand', cursive;
  margin-bottom: 0.75rem;
}

.hand-card p {
  font-family: 'Nunito', sans-serif;
  color: var(--hand-text-primary);
  line-height: 1.7;
}

Hand-Drawn Button

/* Button that looks illustrated with marker-filled background */
.hand-btn {
  font-family: 'Patrick Hand', cursive;
  font-size: 1.15rem;
  padding: 0.75rem 2rem;
  color: #FFFFFF;
  background-color: var(--hand-coral);
  border: 2.5px solid var(--hand-ink);
  border-radius: 30px 8px 24px 12px;
  cursor: pointer;
  position: relative;
  transform: rotate(-0.8deg);
  transition: all 0.25s ease;
  box-shadow: 2px 3px 0 var(--hand-ink);
  letter-spacing: 0.02em;
}

.hand-btn:hover {
  background-color: var(--hand-blue);
  transform: rotate(0.5deg) translateY(-2px);
  box-shadow: 3px 5px 0 var(--hand-ink);
}

.hand-btn:active {
  transform: rotate(-0.3deg) translateY(1px);
  box-shadow: 1px 1px 0 var(--hand-ink);
}

/* Secondary / outlined variant */
.hand-btn--outline {
  background-color: transparent;
  color: var(--hand-ink);
  border: 2.5px dashed var(--hand-ink);
}

.hand-btn--outline:hover {
  background-color: var(--hand-yellow);
  border-style: solid;
  color: var(--hand-ink);
}

/* Sketchy top navigation with hand-drawn underline effect */
.hand-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 2rem;
  background: var(--hand-paper);
  border-bottom: 2.5px solid var(--hand-graphite);
  border-image: repeating-linear-gradient(
    90deg,
    var(--hand-graphite) 0px,
    var(--hand-graphite) 8px,
    transparent 8px,
    transparent 10px,
    var(--hand-graphite) 10px,
    var(--hand-graphite) 22px,
    transparent 22px,
    transparent 25px
  ) 1;
}

.hand-nav__logo {
  font-family: 'Architects Daughter', cursive;
  font-size: 1.6rem;
  color: var(--hand-text-heading);
  text-decoration: none;
}

.hand-nav__links {
  display: flex;
  gap: 2rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.hand-nav__link {
  font-family: 'Patrick Hand', cursive;
  font-size: 1.15rem;
  color: var(--hand-text-primary);
  text-decoration: none;
  position: relative;
  padding-bottom: 2px;
  transition: color 0.2s ease;
}

/* Hand-drawn wavy underline on hover */
.hand-nav__link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 100%;
  height: 6px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='6'%3E%3Cpath d='M0 3 Q 10 0, 20 3 T 40 3 T 60 3 T 80 3 T 100 3' fill='none' stroke='%23E87461' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x;
  background-size: 100px 6px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}

.hand-nav__link:hover {
  color: var(--hand-accent-warm);
}

.hand-nav__link:hover::after {
  transform: scaleX(1);
}

/* Mobile hamburger */
@media (max-width: 768px) {
  .hand-nav__links {
    display: none;
    flex-direction: column;
    gap: 1rem;
  }

  .hand-nav__links.active {
    display: flex;
  }
}

Hero Section

/* Illustrated hero section with paper texture and hand-drawn frame */
.hand-hero {
  position: relative;
  min-height: 80vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 4rem 2rem;
  background-color: var(--hand-paper);
  /* Subtle paper grain texture */
  background-image:
    radial-gradient(
      ellipse at 20% 50%,
      rgba(232, 213, 181, 0.3) 0%,
      transparent 60%
    ),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23grain)' opacity='0.04'/%3E%3C/svg%3E");
  overflow: hidden;
}

.hand-hero__title {
  font-family: 'Architects Daughter', cursive;
  font-size: clamp(2.8rem, 7vw, 5rem);
  color: var(--hand-text-heading);
  line-height: 1.15;
  margin-bottom: 1rem;
  position: relative;
}

/* Sketchy underline decoration under hero title */
.hand-hero__title::after {
  content: '';
  display: block;
  width: 60%;
  height: 8px;
  margin: 0.5rem auto 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='8'%3E%3Cpath d='M2 5 Q 25 1, 50 4 T 100 5 T 150 3 T 198 5' fill='none' stroke='%23E87461' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x;
  background-size: 200px 8px;
}

.hand-hero__subtitle {
  font-family: 'Patrick Hand', cursive;
  font-size: clamp(1.2rem, 3vw, 1.6rem);
  color: var(--hand-charcoal);
  max-width: 600px;
  margin: 1rem auto 2rem;
  line-height: 1.5;
}

/* Doodle decorations scattered around hero */
.hand-hero__doodle {
  position: absolute;
  opacity: 0.15;
  pointer-events: none;
}

.hand-hero__doodle--star {
  top: 10%;
  right: 12%;
  width: 60px;
  height: 60px;
  animation: doodle-float 6s ease-in-out infinite;
}

.hand-hero__doodle--swirl {
  bottom: 15%;
  left: 8%;
  width: 80px;
  height: 80px;
  animation: doodle-float 8s ease-in-out infinite reverse;
}

@keyframes doodle-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-10px) rotate(5deg); }
}

Paper Texture Background

/* Realistic sketchbook paper background with subtle grain */
.hand-paper-bg {
  background-color: var(--hand-paper);
  background-image:
    /* Fine horizontal ruled lines (optional, for notebook feel) */
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 31px,
      rgba(59, 59, 59, 0.04) 31px,
      rgba(59, 59, 59, 0.04) 32px
    ),
    /* Paper fiber noise */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
}

/* Clean paper variant without ruled lines */
.hand-paper-bg--clean {
  background-color: var(--hand-paper);
  background-image:
    radial-gradient(
      ellipse at 50% 0%,
      rgba(255, 255, 255, 0.4) 0%,
      transparent 70%
    ),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.025'/%3E%3C/svg%3E");
}

/* Graph paper variant */
.hand-paper-bg--graph {
  background-color: var(--hand-paper);
  background-image:
    linear-gradient(rgba(59, 59, 59, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(59, 59, 59, 0.06) 1px, transparent 1px);
  background-size: 24px 24px;
}

Sketchy Divider Lines

/* Hand-drawn horizontal rule replacement */
.hand-divider {
  border: none;
  height: 8px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='8'%3E%3Cpath d='M2 4 Q 20 1, 40 5 T 80 3 T 120 5 T 160 3 T 200 5 T 240 3 T 280 5 T 320 4 T 360 5 T 398 4' fill='none' stroke='%23A09888' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x center;
  background-size: 400px 8px;
  margin: 3rem auto;
  max-width: 80%;
}

/* Doodle star divider */
.hand-divider--stars {
  border: none;
  height: 20px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='20'%3E%3Ctext x='20' y='15' font-size='14' fill='%23A09888'%3E%E2%9C%A6%3C/text%3E%3Cpath d='M40 10 Q 60 7, 80 10 T 120 10 T 160 10' fill='none' stroke='%23A09888' stroke-width='1.5' stroke-linecap='round'/%3E%3Ctext x='175' y='15' font-size='14' fill='%23A09888'%3E%E2%9C%A6%3C/text%3E%3C/svg%3E") repeat-x center;
  background-size: 200px 20px;
  margin: 3rem auto;
}

Wobble Animation for Sketchy Elements

/* Subtle wobble keyframes to make elements feel hand-drawn */
@keyframes hand-wobble {
  0%   { transform: rotate(-0.5deg) scale(1); }
  25%  { transform: rotate(0.3deg) scale(1.002); }
  50%  { transform: rotate(-0.2deg) scale(0.998); }
  75%  { transform: rotate(0.5deg) scale(1.001); }
  100% { transform: rotate(-0.5deg) scale(1); }
}

.hand-wobble {
  animation: hand-wobble 4s ease-in-out infinite;
}

/* Pencil drawing-in animation */
@keyframes hand-draw-in {
  from {
    stroke-dashoffset: 1000;
    opacity: 0;
  }
  to {
    stroke-dashoffset: 0;
    opacity: 1;
  }
}

.hand-draw-in svg path {
  stroke-dasharray: 1000;
  animation: hand-draw-in 2s ease forwards;
}

/* Marker fill-in effect */
@keyframes hand-fill {
  from {
    clip-path: inset(0 100% 0 0);
    opacity: 0.5;
  }
  to {
    clip-path: inset(0 0 0 0);
    opacity: 1;
  }
}

.hand-fill-in {
  animation: hand-fill 0.8s ease-out forwards;
}

/* Comic-style speech bubble tooltip */
.hand-bubble {
  position: relative;
  background: var(--hand-bg-card);
  border: 2.5px solid var(--hand-ink);
  border-radius: 20px 16px 20px 4px;
  padding: 1rem 1.5rem;
  font-family: 'Caveat', cursive;
  font-size: 1.1rem;
  color: var(--hand-text-primary);
  max-width: 280px;
  box-shadow: 2px 3px 0 var(--hand-paper-shadow);
  transform: rotate(-1deg);
}

/* Speech bubble tail */
.hand-bubble::after {
  content: '';
  position: absolute;
  bottom: -16px;
  left: 24px;
  width: 0;
  height: 0;
  border-left: 12px solid transparent;
  border-right: 8px solid transparent;
  border-top: 18px solid var(--hand-ink);
}

.hand-bubble::before {
  content: '';
  position: absolute;
  bottom: -12px;
  left: 26px;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 6px solid transparent;
  border-top: 15px solid var(--hand-bg-card);
  z-index: 1;
}

Design Do's and Don'ts

Do's

Do maintain a consistent illustration style across all hand-drawn elements; they should look like one artist drew the entire site, not a collage of mismatched clip art
Do use real art-supply textures as your reference -- study how pencils, pens, markers, and watercolors actually behave on paper and replicate those qualities
Do keep body text in a clean, readable font -- hand-lettered typography is for headings and accents only; paragraphs need legibility
Do apply slight rotations sparingly -- 0.5 to 2.5 degrees on cards and decorative elements creates charm; more than that creates chaos
Do use SVG for complex hand-drawn borders and illustrations -- they scale cleanly and can be animated with draw-in effects
Do test on multiple screen sizes -- ensure sketchy borders and rotated elements do not cause overflow or layout breakage on mobile
Do pair the aesthetic with warm, genuine copy -- the hand-drawn visual language promises authenticity, so the writing should deliver on that promise
Do include accessibility considerations -- ensure sufficient color contrast between hand-drawn text and paper backgrounds (WCAG AA minimum)

Don'ts

Don't use hand-drawn fonts for long body text -- handwriting fonts become fatiguing and difficult to read after more than a few sentences
Don't over-rotate elements -- excessive tilting makes the page feel drunk rather than charming; subtlety is key
Don't mix too many handwriting fonts -- one or two for display plus one for annotations is sufficient; more creates visual noise
Don't use perfectly geometric shapes -- round circles, straight lines, and uniform border-radius values contradict the entire aesthetic
Don't forget about performance -- SVG textures and background images should be optimized; large paper texture PNGs can bloat page load significantly
Don't apply wobble animations to interactive elements -- buttons and links that move unpredictably frustrate users trying to click them
Don't confuse hand-drawn with low-effort -- the aesthetic requires careful, intentional design; it should look handmade, not hastily assembled
Don't ignore hover and focus states -- hand-drawn buttons still need clear interactive feedback for usability and accessibility

Aesthetic	Relationship	Key Difference
Human Scribble	Close sibling -- shares hand-drawn marks and anti-AI ethos	Human Scribble annotates over existing digital content; Hand Drawn builds entire interfaces from illustrated components
DIY Punk	Shares handmade authenticity and anti-corporate stance	DIY Punk is aggressive, xerox-degraded, and confrontational; Hand Drawn is warm, inviting, and illustrative
Craftcore	Both celebrate visible human craftsmanship	Craftcore references textile and fiber arts; Hand Drawn references drawing and illustration
Ligne Claire	Both use prominent line work and illustration	Ligne Claire uses uniform line weights and flat color; Hand Drawn embraces pressure variation and texture
Flat Design	Both avoid photorealistic depth	Flat Design is geometrically precise; Hand Drawn is organic and imperfect
Cottagecore	Both project warmth and human-scale authenticity	Cottagecore focuses on rural domesticity; Hand Drawn focuses on the act of illustration itself
Claymorphism	Both aim for tactile, handmade-feeling interfaces	Claymorphism uses 3D soft clay forms; Hand Drawn stays in the 2D world of pen and paper
Kid Science	Both use playful, illustrated elements	Kid Science targets educational contexts with specific visual tropes; Hand Drawn is a broader illustrative system

Quick-Start HTML Template

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Hand Drawn -- Sketchy Web Design Template</title>

  <!-- Google Fonts -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Architects+Daughter&family=Patrick+Hand&family=Caveat:wght@400;700&family=Fredericka+the+Great&family=Shadows+Into+Light&family=Permanent+Marker&family=Nunito:wght@300;400;600;700&family=Quicksand:wght@400;500;600&display=swap" rel="stylesheet">

  <style>
    /* ================================================
       CSS CUSTOM PROPERTIES
       ================================================ */
    :root {
      /* Paper and background tones */
      --hand-paper: #FAF6ED;
      --hand-paper-mid: #F3EBDA;
      --hand-kraft: #E8D5B5;
      --hand-paper-shadow: #D9CEBC;

      /* Ink and text */
      --hand-graphite: #3B3B3B;
      --hand-ink: #2C2825;
      --hand-charcoal: #6B6560;
      --hand-pencil-light: #A09888;

      /* Illustrative accents */
      --hand-blue: #5B9BD5;
      --hand-coral: #E87461;
      --hand-green: #6DAE6D;
      --hand-yellow: #F7D55E;
      --hand-lilac: #B8A9D4;
      --hand-orange: #E8943A;
      --hand-teal: #4AADA1;
      --hand-pink: #F5C6C2;

      /* Functional mappings */
      --hand-bg-primary: var(--hand-paper);
      --hand-bg-secondary: var(--hand-kraft);
      --hand-bg-card: #FFFFFF;
      --hand-text-primary: var(--hand-graphite);
      --hand-text-heading: var(--hand-ink);
      --hand-text-muted: var(--hand-charcoal);
      --hand-accent-primary: var(--hand-blue);
      --hand-accent-warm: var(--hand-coral);
      --hand-accent-success: var(--hand-green);
      --hand-link: var(--hand-blue);
      --hand-link-hover: var(--hand-coral);
      --hand-border: var(--hand-pencil-light);
    }

    /* ================================================
       RESET AND BASE STYLES
       ================================================ */
    *, *::before, *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      font-family: 'Nunito', 'Quicksand', -apple-system, sans-serif;
      font-size: 17px;
      line-height: 1.75;
      color: var(--hand-text-primary);
      background-color: var(--hand-paper);
      /* Paper grain texture */
      background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.025'/%3E%3C/svg%3E");
      -webkit-font-smoothing: antialiased;
    }

    /* ================================================
       TYPOGRAPHY
       ================================================ */
    h1, h2, h3, h4 {
      color: var(--hand-text-heading);
      line-height: 1.25;
    }

    h1 {
      font-family: 'Architects Daughter', cursive;
      font-size: clamp(2.4rem, 6vw, 4.2rem);
      line-height: 1.15;
    }

    h2 {
      font-family: 'Patrick Hand', cursive;
      font-size: clamp(1.7rem, 4vw, 2.6rem);
    }

    h3 {
      font-family: 'Patrick Hand', cursive;
      font-size: clamp(1.3rem, 3vw, 1.9rem);
      color: var(--hand-accent-warm);
    }

    p {
      margin-bottom: 1.2rem;
    }

    a {
      color: var(--hand-link);
      text-decoration: none;
      border-bottom: 1.5px dashed var(--hand-link);
      transition: color 0.2s, border-color 0.2s;
    }

    a:hover {
      color: var(--hand-link-hover);
      border-bottom-color: var(--hand-link-hover);
      border-bottom-style: solid;
    }

    blockquote {
      font-family: 'Shadows Into Light', cursive;
      font-size: 1.4rem;
      color: var(--hand-charcoal);
      border-left: 3px solid var(--hand-coral);
      padding-left: 1.5rem;
      margin: 2rem 0;
      line-height: 1.6;
      transform: rotate(-0.5deg);
    }

    /* ================================================
       LAYOUT UTILITIES
       ================================================ */
    .container {
      width: 100%;
      max-width: 960px;
      margin: 0 auto;
      padding: 0 1.5rem;
    }

    .section {
      padding: 4rem 0;
    }

    .section--alt {
      background-color: var(--hand-paper-mid);
    }

    .section--kraft {
      background-color: var(--hand-kraft);
    }

    /* ================================================
       NAVIGATION
       ================================================ */
    .hand-nav {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 1rem 2rem;
      background: var(--hand-paper);
      border-bottom: 2.5px solid var(--hand-graphite);
      border-image: repeating-linear-gradient(
        90deg,
        var(--hand-graphite) 0px,
        var(--hand-graphite) 8px,
        transparent 8px,
        transparent 11px,
        var(--hand-graphite) 11px,
        var(--hand-graphite) 20px,
        transparent 20px,
        transparent 24px
      ) 1;
      position: sticky;
      top: 0;
      z-index: 100;
    }

    .hand-nav__logo {
      font-family: 'Architects Daughter', cursive;
      font-size: 1.6rem;
      color: var(--hand-text-heading);
      text-decoration: none;
      border-bottom: none;
    }

    .hand-nav__links {
      display: flex;
      gap: 2rem;
      list-style: none;
    }

    .hand-nav__link {
      font-family: 'Patrick Hand', cursive;
      font-size: 1.15rem;
      color: var(--hand-text-primary);
      text-decoration: none;
      border-bottom: none;
      position: relative;
      padding-bottom: 3px;
      transition: color 0.2s;
    }

    .hand-nav__link::after {
      content: '';
      position: absolute;
      left: 0;
      bottom: -4px;
      width: 100%;
      height: 6px;
      background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='6'%3E%3Cpath d='M0 3Q10 0,20 3T40 3T60 3T80 3T100 3' fill='none' stroke='%23E87461' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x;
      background-size: 100px 6px;
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 0.3s ease;
    }

    .hand-nav__link:hover {
      color: var(--hand-accent-warm);
    }

    .hand-nav__link:hover::after {
      transform: scaleX(1);
    }

    .hand-nav__toggle {
      display: none;
      background: none;
      border: 2px solid var(--hand-ink);
      border-radius: 6px;
      padding: 0.4rem 0.6rem;
      font-family: 'Patrick Hand', cursive;
      font-size: 1.2rem;
      cursor: pointer;
      color: var(--hand-ink);
    }

    @media (max-width: 768px) {
      .hand-nav__links {
        display: none;
        flex-direction: column;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--hand-paper);
        padding: 1rem 2rem;
        border-bottom: 2px solid var(--hand-graphite);
        gap: 1rem;
      }

      .hand-nav__links.active {
        display: flex;
      }

      .hand-nav__toggle {
        display: block;
      }
    }

    /* ================================================
       HERO SECTION
       ================================================ */
    .hand-hero {
      position: relative;
      min-height: 85vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 5rem 2rem;
      overflow: hidden;
      background-color: var(--hand-paper);
      background-image:
        radial-gradient(
          ellipse at 25% 40%,
          rgba(232, 213, 181, 0.35) 0%,
          transparent 55%
        ),
        radial-gradient(
          ellipse at 75% 60%,
          rgba(245, 198, 194, 0.2) 0%,
          transparent 50%
        );
    }

    .hand-hero__title {
      font-family: 'Architects Daughter', cursive;
      font-size: clamp(2.8rem, 7vw, 5rem);
      color: var(--hand-text-heading);
      line-height: 1.15;
      margin-bottom: 1rem;
      position: relative;
    }

    .hand-hero__title::after {
      content: '';
      display: block;
      width: 55%;
      height: 8px;
      margin: 0.6rem auto 0;
      background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='8'%3E%3Cpath d='M2 5Q25 1,50 4T100 5T150 3T198 5' fill='none' stroke='%23E87461' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x;
      background-size: 200px 8px;
    }

    .hand-hero__subtitle {
      font-family: 'Patrick Hand', cursive;
      font-size: clamp(1.2rem, 3vw, 1.6rem);
      color: var(--hand-charcoal);
      max-width: 580px;
      margin: 1rem auto 2.5rem;
      line-height: 1.55;
    }

    .hand-hero__annotation {
      font-family: 'Caveat', cursive;
      font-size: 1.2rem;
      color: var(--hand-accent-primary);
      transform: rotate(-3deg);
      display: inline-block;
      margin-top: 1rem;
      opacity: 0.75;
    }

    /* Floating doodle decorations */
    .doodle {
      position: absolute;
      pointer-events: none;
      opacity: 0.12;
    }

    .doodle--star {
      top: 12%;
      right: 10%;
      font-size: 4rem;
      animation: doodle-float 7s ease-in-out infinite;
    }

    .doodle--circle {
      bottom: 18%;
      left: 8%;
      width: 70px;
      height: 70px;
      border: 3px solid var(--hand-ink);
      border-radius: 55% 45% 50% 50% / 45% 55% 45% 55%;
      animation: doodle-float 9s ease-in-out infinite reverse;
    }

    .doodle--squiggle {
      top: 65%;
      right: 6%;
      width: 100px;
      height: 30px;
      animation: doodle-float 6s ease-in-out infinite 1s;
    }

    .doodle--arrow {
      bottom: 30%;
      left: 12%;
      font-size: 2.5rem;
      transform: rotate(25deg);
      animation: doodle-float 5s ease-in-out infinite 2s;
    }

    @keyframes doodle-float {
      0%, 100% { transform: translateY(0) rotate(0deg); }
      50% { transform: translateY(-12px) rotate(4deg); }
    }

    /* ================================================
       CARDS
       ================================================ */
    .card-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 2rem;
      margin-top: 2.5rem;
    }

    .hand-card {
      background: var(--hand-bg-card);
      padding: 2rem;
      border: 2.5px solid var(--hand-graphite);
      border-radius: 12px 6px 14px 8px;
      position: relative;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      box-shadow:
        2px 3px 0 var(--hand-paper-shadow),
        4px 6px 12px rgba(44, 40, 37, 0.06);
    }

    .hand-card:nth-child(odd) {
      transform: rotate(-0.8deg);
    }

    .hand-card:nth-child(even) {
      transform: rotate(0.5deg);
    }

    .hand-card:hover {
      transform: rotate(0deg) translateY(-4px);
      box-shadow:
        3px 5px 0 var(--hand-paper-shadow),
        6px 10px 20px rgba(44, 40, 37, 0.1);
    }

    .hand-card__icon {
      font-size: 2.5rem;
      margin-bottom: 1rem;
      display: block;
    }

    .hand-card h3 {
      font-family: 'Patrick Hand', cursive;
      font-size: 1.5rem;
      margin-bottom: 0.75rem;
    }

    .hand-card p {
      font-size: 0.95rem;
      color: var(--hand-text-muted);
      line-height: 1.7;
    }

    .hand-card__tag {
      display: inline-block;
      font-family: 'Quicksand', sans-serif;
      font-size: 0.72rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--hand-accent-warm);
      background: var(--hand-pink);
      padding: 0.2rem 0.65rem;
      border-radius: 10px 4px 8px 4px;
      margin-top: 1rem;
    }

    /* ================================================
       BUTTONS
       ================================================ */
    .hand-btn {
      font-family: 'Patrick Hand', cursive;
      font-size: 1.15rem;
      padding: 0.75rem 2rem;
      color: #FFFFFF;
      background-color: var(--hand-coral);
      border: 2.5px solid var(--hand-ink);
      border-radius: 28px 8px 22px 10px;
      cursor: pointer;
      display: inline-block;
      text-decoration: none;
      transform: rotate(-0.6deg);
      transition: all 0.25s ease;
      box-shadow: 2px 3px 0 var(--hand-ink);
      letter-spacing: 0.02em;
    }

    .hand-btn:hover {
      background-color: var(--hand-blue);
      transform: rotate(0.4deg) translateY(-2px);
      box-shadow: 3px 5px 0 var(--hand-ink);
      border-bottom: 2.5px solid var(--hand-ink);
      color: #FFFFFF;
    }

    .hand-btn:active {
      transform: rotate(-0.2deg) translateY(1px);
      box-shadow: 1px 1px 0 var(--hand-ink);
    }

    .hand-btn--outline {
      background-color: transparent;
      color: var(--hand-ink);
      border: 2.5px dashed var(--hand-ink);
      box-shadow: none;
    }

    .hand-btn--outline:hover {
      background-color: var(--hand-yellow);
      border-style: solid;
      color: var(--hand-ink);
      box-shadow: 2px 3px 0 var(--hand-ink);
    }

    .hand-btn--small {
      font-size: 1rem;
      padding: 0.5rem 1.3rem;
    }

    /* ================================================
       FEATURES / ILLUSTRATED LIST
       ================================================ */
    .features {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 2rem 3rem;
      margin-top: 2rem;
    }

    @media (max-width: 640px) {
      .features {
        grid-template-columns: 1fr;
      }
    }

    .feature {
      display: flex;
      gap: 1rem;
      align-items: flex-start;
    }

    .feature__icon {
      font-size: 2rem;
      flex-shrink: 0;
      margin-top: 0.2rem;
    }

    .feature h4 {
      font-family: 'Patrick Hand', cursive;
      font-size: 1.3rem;
      color: var(--hand-text-heading);
      margin-bottom: 0.3rem;
    }

    .feature p {
      font-size: 0.92rem;
      color: var(--hand-text-muted);
      margin-bottom: 0;
      line-height: 1.65;
    }

    /* ================================================
       TESTIMONIAL / QUOTE SECTION
       ================================================ */
    .testimonial {
      background: var(--hand-bg-card);
      border: 2px solid var(--hand-graphite);
      border-radius: 16px 8px 12px 20px;
      padding: 2.5rem;
      max-width: 640px;
      margin: 2.5rem auto;
      position: relative;
      transform: rotate(0.5deg);
      box-shadow: 3px 4px 0 var(--hand-paper-shadow);
    }

    .testimonial__quote {
      font-family: 'Shadows Into Light', cursive;
      font-size: 1.4rem;
      color: var(--hand-charcoal);
      line-height: 1.6;
      margin-bottom: 1.5rem;
    }

    .testimonial__author {
      font-family: 'Caveat', cursive;
      font-size: 1.2rem;
      color: var(--hand-accent-warm);
    }

    /* Decorative quote mark */
    .testimonial::before {
      content: '\201C';
      position: absolute;
      top: -20px;
      left: 20px;
      font-family: 'Fredericka the Great', cursive;
      font-size: 5rem;
      color: var(--hand-pink);
      line-height: 1;
    }

    /* ================================================
       HAND-DRAWN DIVIDER
       ================================================ */
    .hand-divider {
      border: none;
      height: 8px;
      background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='8'%3E%3Cpath d='M2 4Q20 1,40 5T80 3T120 5T160 3T200 5T240 3T280 5T320 4T360 5T398 4' fill='none' stroke='%23A09888' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x center;
      background-size: 400px 8px;
      margin: 0 auto;
      max-width: 70%;
    }

    /* ================================================
       NEWSLETTER / CTA SECTION
       ================================================ */
    .cta-section {
      text-align: center;
      padding: 4rem 2rem;
      background-color: var(--hand-kraft);
      position: relative;
    }

    .cta-section h2 {
      font-family: 'Architects Daughter', cursive;
      margin-bottom: 0.75rem;
    }

    .cta-section p {
      max-width: 500px;
      margin: 0 auto 2rem;
      color: var(--hand-text-muted);
    }

    .cta-form {
      display: flex;
      gap: 0.75rem;
      justify-content: center;
      flex-wrap: wrap;
      max-width: 480px;
      margin: 0 auto;
    }

    .cta-form input[type="email"] {
      font-family: 'Nunito', sans-serif;
      font-size: 1rem;
      padding: 0.7rem 1.2rem;
      border: 2.5px solid var(--hand-ink);
      border-radius: 10px 4px 8px 6px;
      background: var(--hand-bg-card);
      color: var(--hand-text-primary);
      flex: 1;
      min-width: 220px;
      outline: none;
      transition: border-color 0.2s;
    }

    .cta-form input[type="email"]:focus {
      border-color: var(--hand-blue);
      box-shadow: 0 0 0 3px rgba(91, 155, 213, 0.2);
    }

    .cta-form input[type="email"]::placeholder {
      color: var(--hand-pencil-light);
      font-family: 'Caveat', cursive;
      font-size: 1.05rem;
    }

    /* ================================================
       FOOTER
       ================================================ */
    .hand-footer {
      background: var(--hand-ink);
      color: var(--hand-paper-shadow);
      padding: 3rem 2rem;
      text-align: center;
    }

    .hand-footer__content {
      max-width: 960px;
      margin: 0 auto;
    }

    .hand-footer h3 {
      font-family: 'Architects Daughter', cursive;
      color: var(--hand-paper);
      font-size: 1.4rem;
      margin-bottom: 0.75rem;
    }

    .hand-footer p {
      font-size: 0.9rem;
      color: var(--hand-pencil-light);
      margin-bottom: 1.5rem;
      line-height: 1.7;
    }

    .hand-footer__links {
      display: flex;
      justify-content: center;
      gap: 2rem;
      list-style: none;
      flex-wrap: wrap;
      margin-bottom: 2rem;
    }

    .hand-footer__links a {
      font-family: 'Patrick Hand', cursive;
      color: var(--hand-paper-shadow);
      border-bottom: 1px dashed var(--hand-charcoal);
      font-size: 1rem;
      transition: color 0.2s;
    }

    .hand-footer__links a:hover {
      color: var(--hand-coral);
      border-bottom-color: var(--hand-coral);
    }

    .hand-footer__copy {
      font-family: 'Caveat', cursive;
      font-size: 1rem;
      color: var(--hand-charcoal);
      border-top: 1px dashed var(--hand-charcoal);
      padding-top: 1.5rem;
    }

    /* ================================================
       UTILITY CLASSES
       ================================================ */
    .text-center { text-align: center; }
    .mt-1 { margin-top: 0.5rem; }
    .mt-2 { margin-top: 1rem; }
    .mt-3 { margin-top: 2rem; }
    .mb-2 { margin-bottom: 1rem; }
    .mb-3 { margin-bottom: 2rem; }

    .hand-annotation {
      font-family: 'Caveat', cursive;
      font-size: 1.2rem;
      color: var(--hand-accent-primary);
      transform: rotate(-2deg);
      display: inline-block;
    }

    .hand-highlight {
      background: linear-gradient(
        transparent 55%,
        rgba(247, 213, 94, 0.35) 55%,
        rgba(247, 213, 94, 0.35) 90%,
        transparent 90%
      );
      padding: 0 0.15rem;
    }

    /* Wobble animation for decorative elements */
    @keyframes hand-wobble {
      0%   { transform: rotate(-0.5deg); }
      25%  { transform: rotate(0.3deg); }
      50%  { transform: rotate(-0.2deg); }
      75%  { transform: rotate(0.5deg); }
      100% { transform: rotate(-0.5deg); }
    }

    .hand-wobble {
      animation: hand-wobble 4s ease-in-out infinite;
    }
  </style>
</head>
<body>

  <!-- ============================================
       NAVIGATION
       ============================================ -->
  <nav class="hand-nav">
    <a href="#" class="hand-nav__logo">Sketchbook Studio</a>
    <button class="hand-nav__toggle" onclick="document.querySelector('.hand-nav__links').classList.toggle('active')" aria-label="Toggle navigation">
      Menu
    </button>
    <ul class="hand-nav__links">
      <li><a href="#work" class="hand-nav__link">Work</a></li>
      <li><a href="#about" class="hand-nav__link">About</a></li>
      <li><a href="#services" class="hand-nav__link">Services</a></li>
      <li><a href="#testimonials" class="hand-nav__link">Kind Words</a></li>
      <li><a href="#contact" class="hand-nav__link">Say Hello</a></li>
    </ul>
  </nav>

  <!-- ============================================
       HERO SECTION
       ============================================ -->
  <section class="hand-hero">
    <!-- Floating doodle decorations -->
    <div class="doodle doodle--star">&#10038;</div>
    <div class="doodle doodle--circle"></div>
    <svg class="doodle doodle--squiggle" viewBox="0 0 100 30" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M2 15 Q 12 5, 22 15 T 42 15 T 62 15 T 82 15 T 98 15" stroke="#3B3B3B" stroke-width="2.5" stroke-linecap="round"/>
    </svg>
    <div class="doodle doodle--arrow">&#10230;</div>

    <h1 class="hand-hero__title">Made by Humans,<br>Not Machines</h1>
    <p class="hand-hero__subtitle">
      We believe great design starts with a pencil, not an algorithm.
      Every line, every color, every idea -- sketched by hand.
    </p>
    <div>
      <a href="#work" class="hand-btn">See Our Work</a>
      <a href="#contact" class="hand-btn hand-btn--outline" style="margin-left: 0.75rem;">Get in Touch</a>
    </div>
    <span class="hand-hero__annotation">^ no AI was harmed in the making of this site</span>
  </section>

  <!-- ============================================
       WORK / CARD GRID SECTION
       ============================================ -->
  <section id="work" class="section">
    <div class="container">
      <h2 class="text-center">Recent Sketches</h2>
      <p class="text-center" style="max-width: 560px; margin: 0.5rem auto 0; color: var(--hand-text-muted);">
        A selection of hand-crafted projects from our studio sketchbook.
      </p>

      <div class="card-grid">
        <div class="hand-card">
          <span class="hand-card__icon">&#9997;</span>
          <h3>Bloom Bakery</h3>
          <p>A warm, illustrated brand identity for a neighborhood bakery -- hand-lettered menus, sketchy packaging, and a website that smells like fresh bread.</p>
          <span class="hand-card__tag">Branding</span>
        </div>

        <div class="hand-card">
          <span class="hand-card__icon">&#127912;</span>
          <h3>Tiny Tales App</h3>
          <p>A children's storytelling app where every screen feels like a page from a picture book, with illustrated characters and watercolor backgrounds.</p>
          <span class="hand-card__tag">UI Design</span>
        </div>

        <div class="hand-card">
          <span class="hand-card__icon">&#9749;</span>
          <h3>Roast & Draw Cafe</h3>
          <p>Complete web presence for a coffee shop and art studio -- featuring chalkboard-style menus and a gallery of customer doodles.</p>
          <span class="hand-card__tag">Web Design</span>
        </div>

        <div class="hand-card">
          <span class="hand-card__icon">&#127793;</span>
          <h3>Grow Together</h3>
          <p>An illustrated annual report for a community garden nonprofit -- turning statistics into hand-drawn infographics that tell a human story.</p>
          <span class="hand-card__tag">Print + Digital</span>
        </div>
      </div>
    </div>
  </section>

  <!-- Divider -->
  <hr class="hand-divider">

  <!-- ============================================
       ABOUT / FEATURES SECTION
       ============================================ -->
  <section id="about" class="section section--alt">
    <div class="container">
      <h2 class="text-center">Why Hand Drawn?</h2>
      <p class="text-center" style="max-width: 540px; margin: 0.5rem auto 0; color: var(--hand-text-muted);">
        In a world of pixel-perfect templates, the sketchy line stands out.
      </p>

      <div class="features">
        <div class="feature">
          <span class="feature__icon">&#10084;</span>
          <div>
            <h4>Warmth & Personality</h4>
            <p>Hand-drawn elements communicate friendliness and make visitors feel welcome -- like a handwritten letter in a world of emails.</p>
          </div>
        </div>

        <div class="feature">
          <span class="feature__icon">&#9996;</span>
          <div>
            <h4>Human Authenticity</h4>
            <p>Every wobble and texture variation proves a real person made this. In the age of AI, that authenticity is priceless.</p>
          </div>
        </div>

        <div class="feature">
          <span class="feature__icon">&#127752;</span>
          <div>
            <h4>Memorable Brand Voice</h4>
            <p>Illustrated interfaces are unique by nature. No two hand-drawn designs look alike, giving your brand an instantly recognizable identity.</p>
          </div>
        </div>

        <div class="feature">
          <span class="feature__icon">&#128161;</span>
          <div>
            <h4>Creative Storytelling</h4>
            <p>Illustrations can guide users through a narrative, turning a simple scroll into an engaging visual journey.</p>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- ============================================
       SERVICES SECTION
       ============================================ -->
  <section id="services" class="section">
    <div class="container">
      <h2 class="text-center">What We Sketch</h2>

      <div class="card-grid" style="margin-top: 2rem;">
        <div class="hand-card">
          <h3>Illustrated Websites</h3>
          <p>Fully hand-drawn web experiences -- from hero scenes to icon sets. Every pixel has personality.</p>
        </div>

        <div class="hand-card">
          <h3>Brand Identity</h3>
          <p>Logos, color palettes, and visual systems that feel like they came from an artist's studio, not a design factory.</p>
        </div>

        <div class="hand-card">
          <h3>Packaging Design</h3>
          <p>Illustrated packaging that tells your product's story -- from label sketches to full box art.</p>
        </div>
      </div>
    </div>
  </section>

  <!-- Divider -->
  <hr class="hand-divider">

  <!-- ============================================
       TESTIMONIAL SECTION
       ============================================ -->
  <section id="testimonials" class="section section--alt">
    <div class="container">
      <h2 class="text-center">Kind Words</h2>

      <div class="testimonial">
        <p class="testimonial__quote">
          Working with Sketchbook Studio felt like collaborating with a friend who happens to be brilliantly talented. They turned our brand into something that actually feels like us -- warm, real, and a little bit wobbly.
        </p>
        <p class="testimonial__author">-- Sarah Chen, Bloom Bakery</p>
      </div>

      <blockquote style="max-width: 580px; margin: 2rem auto; text-align: center; border-left: none; border-bottom: 2px dashed var(--hand-coral); padding: 0 0 1rem 0;">
        "They draw websites the way we wish the whole internet looked."
      </blockquote>
    </div>
  </section>

  <!-- ============================================
       NEWSLETTER / CTA SECTION
       ============================================ -->
  <section id="contact" class="cta-section">
    <div class="container">
      <h2>Let's Draw Something Together</h2>
      <p>Drop your email and we'll send you a hand-sketched hello (plus occasional design inspiration).</p>
      <form class="cta-form" onsubmit="event.preventDefault(); alert('Thanks for subscribing!');">
        <input type="email" placeholder="your.email@example.com" required>
        <button type="submit" class="hand-btn hand-btn--small">Subscribe</button>
      </form>
      <span class="hand-annotation mt-2">no spam, pinky promise</span>
    </div>
  </section>

  <!-- ============================================
       FOOTER
       ============================================ -->
  <footer class="hand-footer">
    <div class="hand-footer__content">
      <h3>Sketchbook Studio</h3>
      <p>Hand-drawn design for humans who appreciate the wobble.</p>
      <ul class="hand-footer__links">
        <li><a href="#work">Work</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#services">Services</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
      <p class="hand-footer__copy">
        Sketched with care, 2025. No algorithms were used in the making of this site.
      </p>
    </div>
  </footer>

</body>
</html>

Implementation Tips

Use SVG for hand-drawn borders and decorations -- SVGs scale perfectly across screen sizes, can be animated with draw-in effects using stroke-dasharray and stroke-dashoffset, and remain crisp on retina displays
Leverage CSS border-radius asymmetry -- values like 12px 6px 14px 8px on containers create the irregular, organic shapes characteristic of hand-drawn frames without requiring any images
Consider the Rough.js library for generating dynamic hand-drawn shapes in JavaScript -- it renders SVG or Canvas elements with natural wobble and fill hatch patterns that look genuinely sketched
Optimize paper texture backgrounds -- use CSS-generated textures (SVG filters like feTurbulence, gradient noise) rather than large raster images; this keeps page weight under control while achieving authentic paper grain
Apply the Doodle.css framework for rapid prototyping -- it provides a drop-in CSS theme that converts standard HTML elements into hand-drawn styled components with sketchy borders and comic-style fills
Test hand-drawn fonts at multiple sizes -- handwriting fonts that look charming at 2rem can become illegible at 0.8rem; ensure each font in your stack is readable at the size you intend to use it
Limit CSS transform: rotate() to decorative elements -- avoid rotating form inputs, navigation links, or other interactive elements, as even small rotations can make click targets feel unreliable
Provide a systematic illustration style guide -- before building, sketch 10-15 key UI components (buttons, cards, icons, dividers) by hand to establish consistent line weight, corner style, and fill treatment, then translate those sketches into code

← Zurück zu den Designs

Hand Drawn Design Reference

Overview

Visual Characteristics

Core Design Traits

Design Principles

Color Palette

CSS Custom Properties

Typography

Recommended Google Fonts

Font Pairing Recommendations

Typography CSS Example

Layout Principles

CSS / Design Techniques

Sketchy Card Component

Hand-Drawn Button

Navigation Bar

Hero Section

Paper Texture Background

Sketchy Divider Lines

Wobble Animation for Sketchy Elements

Illustrated Tooltip / Speech Bubble

Design Do's and Don'ts

Do's

Don'ts

Quick-Start HTML Template

Implementation Tips

Hand Drawn Design Reference

Overview

Visual Characteristics

Core Design Traits

Design Principles

Color Palette

CSS Custom Properties

Typography

Recommended Google Fonts

Font Pairing Recommendations

Typography CSS Example

Layout Principles

CSS / Design Techniques

Sketchy Card Component

Hand-Drawn Button

Navigation Bar

Hero Section

Paper Texture Background

Sketchy Divider Lines

Wobble Animation for Sketchy Elements

Illustrated Tooltip / Speech Bubble

Design Do's and Don'ts

Do's

Don'ts

Related Aesthetics

Quick-Start HTML Template

Implementation Tips