# Typography System

## Display Typeface

| Property | Specification |
|----------|--------------|
| **Register** | Handwritten or humanist — visibly drawn, imperfect |
| **Examples** | Caveat, Patrick Hand, Kalam, Architects Daughter |
| **Weight** | 400-700 (medium to bold — ink is confident) |
| **Tracking** | 0-0.01em (natural, near-zero — handwriting doesn't letter-space) |
| **Size** | `clamp(1.75rem, 4vw, 3.5rem)` — larger than sans, the headline is the hero mark |
| **Transform** | Sentence case, NEVER uppercase — handwriting has no caps lock |
| **Baseline wobble** | Use `rotate(-0.5deg)` or `translateY(±1px)` variance — lines shouldn't sit perfectly straight |

**Why handwritten type:** The display face IS the declaration of human authorship. Caveat and Patrick Hand carry the wobble, the varying stroke weight, the imperfect letterforms of a real hand. The headline should look like it was written on the page, not set on a grid.

---

## Body Typeface

| Property | Specification |
|----------|--------------|
| **Register** | Clean, humanist sans-serif — readable, quiet |
| **Examples** | Nunito Sans, Inter, Public Sans, Source Sans 3 |
| **Weight** | 400-500 (regular — readable at length) |
| **Tracking** | 0.01em-0.02em (standard) |
| **Size** | `clamp(0.9375rem, 1vw, 1.0625rem)` — 15-17px |
| **Line Height** | 1.6-1.75 (generous, relaxed reading) |

**Why clean sans for body:** Handwritten fonts are exhausting at paragraph length. The body steps back — clean and neutral — so the reader can actually read. The contrast between handwritten display and clean body is the pairing: the hand shouts, the body speaks.

---

## Hand-Drawn / Illustrated Type

| Property | Specification |
|----------|--------------|
| **Register** | Type as illustration — lettering drawn for the moment |
| **Examples** | Custom-drawn words, outlined SVG text, sketched annotations |
| **Weight** | N/A — drawn, not set |
| **Size** | Any — whatever the sketch calls for |
| **Transform** | Uppercase OK here — a stamp, a sketch note, a margin doodle |

**Usage:** For the strongest moments — a single word circled in marker, a sketched "HANDMADE" stamp, a margin note next to a diagram — draw the type itself as an SVG or image. This is the top of the typography system: type as human mark. Use it once or twice per page; it's the exclamation point, not the sentence.

---

## Micro / Label Type

| Property | Specification |
|----------|--------------|
| **Register** | Handwritten, small and quick — like a margin annotation |
| **Examples** | Caveat, Patrick Hand at small size |
| **Weight** | 400 |
| **Tracking** | 0.01em-0.02em (natural) |
| **Size** | 12-14px |
| **Transform** | Sentence case — annotations are written, not shouted |

**Usage:** Captions, sketch notes, marginalia, page numbers, "see fig. 3" annotations. These tiny handwritten labels make the page feel like a working sketchbook — a person's notes, not a CMS's metadata.

---

## Type Scale

```
Display:  clamp(1.75rem, 4vw, 3.5rem)  — handwritten, the hero mark
Body:     clamp(0.9375rem, 1vw, 1.0625rem) — clean sans, 15-17px
Micro:    12-14px                       — handwritten annotations
```

The scale is compact — 12px to 56px. The hierarchy comes from the register change (handwritten → clean) more than from size jumps. A hand-drawn headline at 3rem and an annotation at 12px feel like the same hand on the same page.

---

## Font Pairing Logic

**Two-family approach:** One handwritten face (Caveat or Patrick Hand) for display, labels, and annotations; one humanist sans (Nunito Sans or Inter) for body. The pair mirrors the style's core contrast — human mark vs. clean reading — without either side fighting.

**Never:** Geometric or technical faces (Futura-style — too mechanical), corporate serifs (too polished), comic-book novelty fonts (childish instead of artisanal), or monospace (too digital). The handwritten face must look drawn, not packaged.

# Color Architecture

## Ground

The ground is the paper itself — warm, cream, slightly textured. There is no flat digital background:

```css
--color-paper: #F6F1E4;          /* Warm cream, like unbleached paper */
--color-paper-dark: #2E2A24;     /* Charcoal-warm, for inverted sections */
```

**Why warm cream:** Not pure #FFFFFF — pure white feels printed and digital. A warm cream (#F6F1E4) reads like real paper under hand-drawn ink, giving every element a physical, human surface to sit on.

---

## Warm Earthy Palette

```css
--terracotta: #C05A33;       /* Burnt clay — the warm anchor */
--ochre: #C98A2B;            /* Golden earth — sunlit, slightly dusty */
--sage: #7E8C6E;             /* Muted green — natural, calm */
--cream: #F5EFE0;            /* Paper tone — the light field */
--charcoal: #33302A;         /* Warm near-black — ink lines, text */
```

**These are the primary colors.** They feel like pigments — clay, soil, leaf, fiber — mixed by hand rather than picked from a swatch. Every value is slightly muted (terracotta is not fire-engine red, ochre is not gold) so the palette stays earthy and artisanal, never corporate.

---

## Bold Marker Accents

```css
--marker-cobalt: #2B4FC4;    /* Marker blue — bold, primary */
--marker-vermillion: #DC3A24; /* Marker red-orange — urgent, warm */
--marker-lemon: #F2C230;     /* Marker yellow — bright, happy */
```

**Usage:** Bold marker colors appear as accents — one highlighted word, an arrow, a circled section, a doodle filling. They read like someone grabbed a Sharpie and emphasized what matters. Use them sparingly: one marker accent per section, never a full marker-palette page.

**Rule:** Warm earthy is the default voice; bold marker is the exclamation point. If everything is marker-bright, the human emphasis is lost.

---

## Ink & Text

```css
--color-ink: #2A2420;                       /* Warm near-black ink */
--color-ink-soft: #4A3F36;                  /* Muted brown-gray, for secondary text */
--color-text-on-dark: rgba(246, 241, 228, 0.92);  /* Cream on charcoal */
--color-text-muted: rgba(42, 36, 32, 0.6);  /* Faded ink, for labels */
```

**Why warm ink:** Text is written with a pen, not rendered by a screen — so the black has a warm brown undertone (#2A2420) like fountain-pen ink on paper. Pure #000000 reads digital; warm ink reads handwritten.

---

## Hand-Drawn Accents

```css
--highlight-marker: #F2C230;   /* Lemon marker over body text */
--underline-pencil: rgba(192, 90, 51, 0.5);  /* Terracotta pencil underline */
--splat-ink: #2A2420;          /* Ink splatter, drawn not placed */
--washi-wash: rgba(126, 140, 110, 0.25);     /* Sage watercolor wash */
```

**Usage:** These are the non-flat colors — the marker swipe, the pencil underline, the watercolor wash, the ink splatter. They are applied as textures and strokes, never as full fills. They give the page the feel of a marked-up sketchbook page.

---

## Color Don'ts

| Don't | Do Instead |
|-------|------------|
| Pure #000000 or #FFFFFF | Warm ink #2A2420 and cream paper #F6F1E4 |
| Neon or fully saturated palette | Muted earthy pigments with rare marker accents |
| Corporate blues/grays | Terracotta, ochre, sage, cream, charcoal |
| Flat digital fills | Pigment-like colors with visible texture |
| Perfect color transitions | Hand-applied washes with slight bleed and variance |
| Matching brand-color-perfect palettes | Slightly off register — like pigment mixed by hand |

# Motion Principles

## Philosophy

Motion in Hand-Drawn Organic is **gentle, organic, and hand-made**. Nothing snaps, nothing slides with mechanical easing, nothing moves like a component library. Elements move like a drawing coming to life — lines draw themselves on, shapes wobble like they're held by a hand, everything breathes at a human rhythm. The motion should feel like watching a sketch animate: the hand is still visible in every movement.

---

## Draw-On Animation (stroke-dasharray)

```css
.draw-on path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: draw-on 2s ease-out forwards;
}

@keyframes draw-on {
  to { stroke-dashoffset: 0; }
}
```

**Purpose:** SVG line art draws itself onto the page — the pen moves, the line appears. This is THE signature motion of the style. The line should draw in a natural, slightly varying speed (2s is a comfortable pen stroke; adjust dasharray to match each path's length). Lines appear like someone is drawing the page in front of you.

---

## Wobble / Hand Tremble

```css
@keyframes wobble {
  0%, 100% { transform: rotate(-1deg) translateY(0); }
  25% { transform: rotate(1.5deg) translateY(-1px); }
  50% { transform: rotate(-1.5deg) translateY(1px); }
  75% { transform: rotate(1deg) translateY(0); }
}

.wobble {
  animation: wobble 4s ease-in-out infinite;
  transform-origin: 50% 50%;
}
```

**Purpose:** The hand tremble — small rotation and position variance, like a held pen. Applied to doodles, stamps, badges, drawn containers. The wobble is small (±1.5deg) and slow (4s), never a shake. It says "this is held, not placed."

---

## Breathing / Ink Settling

```css
@keyframes breathe {
  0%, 100% { opacity: 0.92; transform: scale(1.0); }
  50% { opacity: 1.0; transform: scale(1.015); }
}

.breathe {
  animation: breathe 5s ease-in-out infinite;
}
```

**Purpose:** Subtle breathing on illustrated elements and watercolor washes — like ink settling into paper. Barely perceptible: a 1.5% scale change over 5 seconds. The page feels alive, gently, at a human pace.

---

## Entrance Animations

| Element | Animation | Duration | Easing | Delay |
|---------|-----------|----------|--------|-------|
| Draw-on line art | stroke-dashoffset 1000 → 0 | 2000ms | `ease-out` | 0ms |
| Headline | Opacity 0→1 + translateY(10px)→0 + tiny rotate(-1deg)→0 | 900ms | `ease-out` | 300ms |
| Illustrated elements | Opacity 0→1 + scale(0.95)→1 (like being set down) | 800ms | `ease-out` | 600ms |
| Body text | Opacity 0→1 | 700ms | `ease-out` | 800ms |

**Key:** Durations are human-paced — 700-2000ms, matching the speed of a pen stroke or a hand setting something down. Elements enter like they're being drawn or placed, not rendered.

---

## Interaction States

| Element | Hover State | Active State |
|---------|------------|-------------|
| Buttons | Ink fill grows — background spreads like a marker (300ms) | Pressed: scale(0.97) + rotate(-0.5deg), like pushing a paper button |
| Links | Underline draws on via stroke-dashoffset (400ms) | Color shifts to terracotta |
| Doodles | Wobble amplitude increases (rotate ±1°→±2.5°) | — |
| Illustrations | Slight scale 1.0 → 1.03 (400ms) | — |

**All hover transitions are hand-paced (300-500ms).** Quick mechanical hovers feel digital and break the drawn illusion. Hovering should feel like the illustration noticing you.

---

## Scroll-Triggered Drawing

| Effect | Specification |
|--------|--------------|
| Draw-on reveal | Line art draws itself as it enters the viewport (IntersectionObserver + dashoffset) |
| Paper movement | Sections shift 3-6px vertically, like pages settling |
| Margin notes | Marginalia slides in from the edge (translateX(12px)→0) with a slight rotate |
| Wash reveal | Watercolor washes fade in with opacity 0→1 + slight blur(2px)→0 |

**The scroll should feel like turning pages of a sketchbook.** Each section reveals its drawn elements the moment they enter view — nothing is pre-drawn, everything appears by hand.

---

## Reduced Motion

When `prefers-reduced-motion: reduce`:
- All draw-on animations: show line art fully drawn (dashoffset 0)
- Wobble: disabled (static)
- Breathing: disabled
- Scroll reveals: instant appearance, no transitions

```css
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .draw-on path { stroke-dashoffset: 0 !important; }
}
```

---

## What NOT to Animate

| Never | Why |
|-------|-----|
| Mechanical linear slides | Motion must feel hand-driven, not machine-driven |
| Bounce or spring physics | Too energetic — this is gentle and organic |
| Fast snappy transitions (<300ms) | Hands don't move that fast |
| Staggered choreographed reveals | Motion should feel spontaneous, not rehearsed |
| Auto-playing carousels | The user turns the pages |
| Particle effects / confetti | Too digital — the texture is ink and paper |
| Perfectly synced simultaneous animations | Real hands draw one thing at a time |

# Layout Grammar

## Grid System

**No visible grid.** The layout follows the illustration, not the other way around. Content is loose, organic, and asymmetric — anchored by hand-drawn elements rather than column math. Internally:

- Sections: fluid width, `max-width: 1200px` with generous `clamp(2rem, 6vw, 6rem)` edge margins
- Text containers: flexible width, never rigid 8-column boxes — width follows the illustration
- Illustration containers: `aspect-ratio` preserved, elements allowed to break out of bounds
- Dividers: hand-drawn strokes and doodle separators, never 1px border lines
- Marginalia: sketch notes, arrows, and scribbles placed in the whitespace

---

## Hero Section

| Property | Specification |
|----------|--------------|
| Height | `min-h-[80dvh]` — full, but not monumental |
| Background | Paper texture (cream `#F5F0E1`) with ink/pencil marks |
| Text position | Asymmetric — offset left or right, on a hand-drawn underline or scribble banner |
| Headline size | `clamp(2rem, 5vw, 4rem)` — bold, slightly rotated (`-2deg` to `2deg`) |
| Typography | Handwritten display (Caveat, Patrick Hand) with a hand-drawn accent stroke |

```
┌─────────────────────────────────────────┐
│  [Paper background, faint pencil marks] │
│                                         │
│  ✏️  sketch marginalia           |      │
│                                         │
│   HAND-MADE                             │
│   ~for humans, by humans~               │
│   [hand-drawn underline]                │
│   [wobbly line-art illustration]        │
│   [INKS: button with marker fill]       │
└─────────────────────────────────────────┘
```

**The illustration is the hero.** A large wobbly line-art drawing (plant, vessel, character, object) dominates the lower half, breaking out of any container. Text sits above it on hand-drawn strokes.

---

## Section Spacing

```css
--section-padding-y: clamp(3rem, 10vh, 8rem);
--content-max-width: 640px;
--edge-margin: clamp(1.5rem, 6vw, 6rem);
```

**Spacing breathes like a sketchbook page.** Sections feel like separate pages or panels in a sketchbook — each with its own doodle, watercolor wash, or marginalia. Whitespace is part of the composition, not empty.

---

## Layout Patterns

### Pattern 1: Illustration Breaking Out of Container
```
┌─────────────────────────────────────────┐
│  [Section content — headline + text]    │
│                                         │
│   ┌────────────────────┐   (drawing    │
│   │ [text container]   │   escapes     │
│   │                    │   the box —   │
│   └────────────────────┘   wobbly      │
│    \  .  \  .  \         outline)      │
│     \ .   \ .   \  ~~~< (doodle)       │
└─────────────────────────────────────────┘
```

### Pattern 2: Split — Sketch + Annotation
```
┌──────────────────┬──────────────────────┐
│                  │                      │
│  [Hand-drawn     │  Scribble headline   │
│   illustration]  │  Body text (clean    │
│  (visible media  │  sans, generous      │
│   texture)       │  line-height)        │
│                  │  [hand-drawn arrow →]│
│                  │                      │
└──────────────────┴──────────────────────┘
```

### Pattern 3: Marginalia Column
```
┌─────────────────────────────────────────┐
│  [Main content — illustration + text]  │
│            / sketch note \              │
│  (doodle) <  "see fig. 1" >  (arrow)    │
│            \  hand label  /             │
│  [ink splatter accent]                  │
└─────────────────────────────────────────┘
```

---

## Responsive Behavior

| Breakpoint | Layout Change |
|------------|--------------|
| **Desktop (1200px+)** | Full layout freedom — illustrations break out, marginalia scattered in whitespace |
| **Tablet (768px)** | Illustration breakout reduced, marginalia tucked inline, dividers simplified |
| **Mobile (375px)** | Single column, illustrations contained (still wobbly), marginalia hidden or inline |

**On mobile:** The organic feel is kept through rotation, wobble, and hand-drawn accents — not through layout gymnastics. Illustrations stay full-width but stop breaking out of containers.

---

## Layout Don'ts

| Don't | Do Instead |
|------|------------|
| Rigid 12-column grids | Loose, asymmetric composition that follows the illustration |
| Perfect rectangles and bordered cards | Wobbly, hand-drawn containers with irregular outlines |
| Centered, symmetrical layouts | Offset, sketchbook-like asymmetry |
| Straight horizontal dividers | Hand-drawn wavy separators and doodle rules |
| Clip-art placement in tidy boxes | Illustrations that break out and overlap text |
| Dense, cramped sections | Sketchbook whitespace with marginalia |
| Perfectly aligned columns | Intentional misalignment and slight rotation (1-3deg) |

# Texture & Surface

## Primary Texture: Paper

The paper is the foundation — everything sits on paper, never on a flat digital background:

| Quality | Description |
|---------|-------------|
| **Tooth** | Subtle grain — like cold-press watercolor paper or sketchbook stock |
| **Warm tone** | Cream (#F6F1E4), not white — paper has a color |
| **Edge** | Slightly irregular — torn paper edges or rough masks for section breaks |
| **Fade** | Slight vignette — paper darkens toward the edges like a real sheet |

**The goal:** The page should feel like you could touch it. Every element sits ON paper — the paper texture is the ground truth, visible behind all drawings, text, and washes.

---

## Media Textures

Visible media marks are the texture system — each is a distinct material, applied deliberately:

| Media | Description | Application |
|-------|-------------|-------------|
| **Pencil grain** | Fine graphite noise, light gray, low contrast | Underlines, shading, filled areas |
| **Watercolor bleed** | Soft, blurred color edges that spread unevenly | Washes, background fields, section tints |
| **Ink splatter** | Random small ink dots near line work | Accents near headings, stamps, margin corners |
| **Marker streaks** | Slightly uneven parallel strokes with lighter gaps | Highlight swipes, badge fills, underlines |
| **Eraser marks** | Faint lighter smudges in shaded areas | Behind pencil shading, at line ends |
| **Crayon grain** | Chunkier, waxy uneven coverage | Bold accent fills, large doodle areas |

**The rule:** Media texture is visible or it doesn't count. No flat fills — every filled area should show its material (streaks, grain, bleed). The texture IS the human mark.

---

## Paper Texture (CSS)

```css
.paper-surface {
  background-color: #F6F1E4;
  background-image:
    radial-gradient(ellipse at 20% 50%, rgba(51, 48, 42, 0.03) 0%, transparent 60%),
    url("data:image/svg+xml,..."); /* fine noise SVG at 2-3% opacity */
  background-size: 200px 200px, 140px 140px;
}
```

**Purpose:** A two-layer paper — a faint uneven warm-darkening (the vignette) plus a fine noise overlay at 2-3% opacity (the tooth). The grain must be subtle: visible only when you look for it, never dominating the drawn content.

---

## Watercolor Bleed (CSS)

```css
.watercolor-wash {
  background: radial-gradient(
    ellipse at 60% 40%,
    rgba(192, 90, 51, 0.18) 0%,
    rgba(192, 90, 51, 0.06) 45%,
    rgba(246, 241, 228, 0) 70%
  );
  filter: blur(2px) contrast(0.98);
}
```

**Purpose:** A color field with a soft, irregular edge — like pigment bleeding into wet paper. The blur (2px) and the uneven radial falloff create the bleed. Real watercolor never has a hard edge; neither should this.

---

## Ink Splatter (SVG Filter)

```svg
<filter id="splatter">
  <feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="2" result="noise"/>
  <feColorMatrix in="noise" type="matrix" values="0 0 0 0 0.16  0 0 0 0 0.14  0 0 0 0 0.13  0 0 0 0.8 -0.25" result="dots"/>
  <feComposite in="dots" in2="SourceGraphic" operator="in"/>
</filter>
```

**Purpose:** Add speckled ink dots along drawn lines and around stamps. The turbulence generates random dot placement — every render is a slightly different splatter, like real ink. Apply at low opacity (0.4-0.6) so it reads as flung ink, not noise.

---

## Surface Rules

| Surface | Treatment |
|---------|-----------|
| Background | Cream paper with tooth and vignette |
| Illustration areas | Full media texture — ink lines, washes, splatter |
| Buttons | Hand-drawn border (wobbled path), marker fill or ink outline |
| Badges / stamps | Marker streak fill, slight rotation, splatter near edges |
| Dividers | Hand-drawn squiggles, dotted lines, or ink underlines — never straight rules |
| Cards / panels | Drawn containers with irregular borders — hand-sketch outlines, not box shadows |
| Text highlights | Lemon marker swipe behind text (rotated, uneven) |
| Navigation | Minimal — margin annotations and doodled arrows |

**No flat panels, no box shadows, no glass, no gradients.** Every surface shows its material — drawn, painted, or written. If a border exists, it wobbles; if a fill exists, it streaks.

---

## Texture Don'ts

| Don't | Do Instead |
|-------|------------|
| AI-generated imagery | Hand-drawn illustration with visible human mark |
| Perfect geometric shapes | Wobbly, imperfect, organic shapes |
| Flat digital fills | Media textures — pencil grain, marker streaks, watercolor bleed |
| Box shadows for depth | Hand-drawn outlines, ink underlines, slight rotation |
| Glassmorphism / blur panels | Paper and ink surfaces |
| Smooth digital gradients | Watercolor washes with uneven edges |
| Noise-free cleanliness | Visible media texture — grain, splatter, eraser marks |

# Vocabulary Bank

## Primary Terms

| Term | Why It Matters |
|------|---------------|
| `hand-drawn` | The core signal — every line, shape, and texture must look made by a human hand |
| `illustration` | Drawn imagery, not photography or render — the page is an artwork |
| `watercolor bleed` | Wet pigment seeping past its stroke — imperfect, alive, human |
| `ink splatter` | Random droplets and drips — happy accidents as design elements |
| `human mark` | Visible imperfection proving human authorship — the anti-AI declaration |
| `bespoke` | Every page element feels custom-drawn for this brand, never templated |

---

## Secondary Terms

| Term | Effect |
|------|--------|
| `line weight` | Thick-to-thin stroke variation — the drawing hand's pressure and confidence |
| `hatching` | Parallel sketch strokes building tone — a pencil, not a fill tool |
| `doodle` | Small loose drawings as decoration — stars, arrows, underlines, faces |
| `marker bleed` | Marker ink soaking into paper, slightly overshooting the stroke |
| `sketch` | Quick, loose, unfinished-looking draft quality — sophistication through restraint |
| `paper texture` | Visible grain underneath everything — the page has a physical surface |
| `eraser marks` | Faint smudges where lines were corrected — the hand made mistakes |
| `wobble` | Lines that drift slightly off-straight — no ruler, no pen tool |
| `outline` | Thick irregular contour around shapes, closing imperfectly |
| `marginalia` | Sketch notes and annotations in the margins as design elements |

---

## Context Terms

| Term | Mood |
|------|------|
| `artisanal` | Made by hand, in small batches, with visible craft |
| `organic` | Shapes follow nature's flow, not geometry |
| `imperfect` | Intentional flaw as the point — charm over polish |
| `warm` | Earthy, welcoming, human temperature |
| `handwritten` | Type that looks penned, with uneven baseline and letterforms |
| `draw-on` | Strokes appearing stroke-by-stroke — the drawing happens in front of you |

---

## Banned Terms

| Term | Why It Breaks the Style |
|------|------------------------|
| `AI-generated imagery` | The style is a declaration of human authorship — no synthetic imagery |
| `perfect geometric shapes` | Circles, squares, and straight lines reveal a machine hand |
| `corporate polish` | Clean, aligned, managed — everything this style rejects |
| `digital precision` | Pixel-perfect edges and exact spacing kill the human mark |
| `smooth gradients` | Transitions must show strokes, bleed, and paper, not blending |
| `perfect symmetry` | A human hand never balances — asymmetry is the rhythm |
| `glossy surfaces` | Physical media (pencil, ink, watercolor) is matte and tactile |
| `sleek motion` | Motion must wobble and breathe — mechanical easing feels fake |

---

## Prompt-Ready Phrases

```
"hand-drawn line art and doodles as the core imagery"
"visible human mark — wobbly lines, imperfect shapes, varied line weight"
"watercolor bleed and ink splatter as texture"
"marker streaks, pencil grain, eraser marks over paper texture"
"handwritten display type (Caveat, Patrick Hand) with clean sans body"
"warm earthy palette — terracotta, ochre, sage, cream, charcoal"
"bold marker accents — cobalt, vermillion, lemon"
"SVG draw-on animations (stroke-dasharray) — strokes appear stroke by stroke"
"wobble/breathing effects — gentle, organic, nothing mechanical"
"loose asymmetric layout — illustrations break out of containers"
"hand-drawn dividers and marginalia as design elements"
"layout follows the illustration, not the grid"
```

# When to Use

## Perfect For

| Context | Why This Style Works |
|---------|---------------------|
| **Education/edtech** | Sketchy, friendly illustration makes learning feel approachable and human |
| **Nonprofits/NGOs** | The handmade, sincere aesthetic signals authenticity and human mission |
| **Wellness/mental health** | Warm, imperfect marks feel reassuring — the opposite of clinical |
| **Children's brands** | Doodles, wobble motion, and marker colors are native to childhood |
| **Independent publishers** | Hand-drawn covers and marginalia give small press an artisanal identity |
| **Artisan food** | Watercolor bleed, paper texture, and ink labels echo craft and provenance |
| **Illustrator/designer portfolios** | The style *is* the medium — showcasing illustration as the product |
| **Craft & stationery brands** | Marker texture, sketch notes, and paper grain match the physical goods |

## Brand Personality Match

This style reinforces brands that are:
- **Human** — visible hand, visible imperfection, a declaration of human authorship
- **Warm** — earthy palette (terracotta, ochre, sage, cream, charcoal), never cold
- **Artisanal** — bespoke, crafted, one-of-one rather than mass-produced
- **Imperfect** — comfortable with wobble, bleed, and splatter; nothing mechanical
- **Bespoke** — every page feels individually drawn, not templated

## Avoid When

| Context | Why It Fails |
|---------|-------------|
| **Corporate/B2B services** | Hand-drawn informality undercuts gravitas and perceived scale |
| **Finance/banking** | Trust in this category reads as precision — sketchiness signals unreliability |
| **Legal/government** | Regulatory and compliance content needs neutral, serious presentation |
| **Enterprise SaaS (technical)** | Complex dense UIs need grid discipline the organic layout can't provide |
| **Data-heavy dashboards** | Loose layout and wobble make numbers and charts feel imprecise |
| **Photography-led brands** | The style competes with photography instead of supporting it |
| **Luxury/high-end products** | Heritage luxury wants polish and restraint, not hand-drawn charm |

## How to Decide

Ask: **"Does my brand want to declare a human hand — warm, artisanal, visibly imperfect?"**

If yes → Hand-Drawn / Organic Illustration / Human Mark.
If no → Consider Playful Interactive Maximal (if you want playfulness with loud energy), Organic Botanical Warmth (if you want warmth and organic shapes without the sketchy hand), or Bold Anti-Corporate Color (if you want to break corporate norms through color and layout, not illustration).

# Reference Gallery

## Live Sites

### Mailchimp (mailchimp.com)
- **What works:** Signature illustrated mascot and hand-drawn spot illustrations across a consumer product, proof that illustration-led design scales to enterprise software
- **URL:** mailchimp.com
- **Study:** How illustration is used as the primary brand signal while UI stays functional — and how wobbly, imperfect mascot art humanizes a SaaS brand

### Sketchbook (sketchbook.com)
- **What works:** Illustration-forward marketing that treats the canvas, pencil, and brush as hero elements
- **URL:** sketchbook.com
- **Study:** How tool texture (stroke, grain, bleed) is rendered as surface and mood rather than decoration

### Studiocanoe (studiocanoe.com)
- **What works:** Editorial illustration studio with sketchy line work, hand-lettering, and painterly texture
- **URL:** studiocanoe.com
- **Study:** How a studio site lets each illustration break the container — layouts follow the art, not the grid

### The New Yorker Cartoons (newyorker.com/cartoons)
- **What works:** The definitive editorial cartoon aesthetic — ink line, loose hatching, one-line wit
- **URL:** newyorker.com/cartoons
- **Study:** How confident, imperfect ink strokes carry humor and narrative with minimal elements

### Aardman Animations (aardman.com)
- **What works:** Clay-mation craft brand whose site uses hand-made texture, warm palette, and playful character design
- **URL:** aardman.com
- **Study:** How handcrafted imperfection builds a warm, artisanal brand identity

### Etsy (etsy.com)
- **What works:** Marketplace of handmade goods whose brand language leans on hand-drawn marks, paper texture, and craft warmth
- **URL:** etsy.com
- **Study:** How "handmade" is communicated through color (warm neutrals) and sketchy visual language

## Key Visual References

### Line & Mark
- **Wobbly line work** — inconsistent stroke weight, deliberate double-strokes and overshoots
- **Ink splatter & drips** — controlled mess as accent, never random noise
- **Hatching/cross-hatching** — editorial shading from cartoons and sketchbooks
- **Eraser marks & pencil grain** — visible media texture proving the hand

### Color References
- **Warm, earthy** — terracotta, ochre, sage, cream, charcoal as the base
- **Bold marker accents** — cobalt, vermillion, lemon used sparingly like a marker thrown into a sketch
- **Paper background** — cream/off-white canvas underneath everything

### Typography References
- **Handwritten display** — Caveat, Patrick Hand for headlines and labels
- **Clean sans body** — neutral, readable, lets the hand-drawn type and illustration sing
- **Hand-lettered accents** — pull quotes, margin notes, and dividers drawn rather than typeset

### Motion References
- **SVG draw-on** — stroke-dasharray animations that "sketch" lines onto the page
- **Wobble/breathing** — gentle 1-2% scale or rotation, organic easing, nothing mechanical
- **Ink bleed reveals** — watercolor washes fading in slowly

## Screenshot Notes

> When capturing references for this style, look for:
> - The illustration (must be hand-drawn in appearance — wobbly, textured, imperfect)
> - The color palette (must be warm earthy base with bold marker accents)
> - The texture (must show paper grain, pencil, watercolor bleed, or ink)
> - The layout (must follow the illustration — elements breaking out of containers)
> - The motion (must be gentle, organic, draw-on — never mechanical)
> - The typography (must mix handwritten display with clean body sans)
> - The overall mood (must feel human, warm, artisanal — not machine-made)