WebForge MCP Server

# S51 — Hand Drawn
## Industry: SaaS

## Style DNA
- **Palette:** Black ink on white/cream paper. Minimal color accents.
- **Typography:** Handwritten, sketchy fonts.
- **Radius:** Wobbly hand-drawn circles and boxes.
- **Shadow:** Hatched shading lines.
- **Border:** Sketchy, uneven stroke widths.
- **Patterns:** Doodles, scribbles, cross-hatching.
- **Motion:** Drawing animations, wiggle effect.

## Do's
- Use subtle wobbly lines
- Look like a sketchbook
- Keep it simple
- Use negative space

## Don'ts
- Don't use straight vector lines
- Don't perfect the shapes
- Don't overuse color
- Don't use digital effects

## Design Tokens
```yaml
tokens:
  meta:
    style_id: "S51"
    style_name: "Hand Drawn"
    industry: "SaaS"
    use_case: "Full Landing Page"
  color:
    bg:
      primary: "#FFFFFF"
      secondary: "#FDFBF7"
    text:
      primary: "#2C3E50"
      secondary: "#4A5568"
      muted: "#718096"
    brand:
      primary: "#2C3E50"
      accent: "#E74C3C"
    ink:
      primary: "#2C3E50"
      accent: "#E74C3C"
      blue: "#3B82F6"
    border:
      strong: "#2C3E50"
      subtle: "rgba(44,62,80,0.3)"
    state:
      success: "#48BB78"
      warning: "#ECC94B"
      error: "#E74C3C"
    focus:
      ring: "#2C3E50"
  radius:
    none: 0
    sm: 4
    md: 8
    lg: 16
    sketch: "255px 15px 225px 15px / 15px 225px 15px 255px"
  border:
    width:
      stroke: 2
      medium: 3
      strong: 4
  shadow:
    sketch: "2px 2px 0 rgba(44,62,80,0.1)"
    none: "none"
  layout:
    container:
      content: 960
      wide: 1080
    grid:
      desktop: 12
      tablet: 8
      mobile: 4
    gutter:
      mobile: 16
      desktop: 24
  motion:
    duration:
      fast: 300
      normal: 600
    easing: "ease-out"
  typography:
    font:
      sans:
        primary: "Patrick Hand"
        fallback:
          - "Caveat"
          - "cursive"
      display:
        primary: "Kalam"
        fallback:
          - "cursive"
    scale:
      h1: { size: 52, line: 64, weight: 400, tracking: 0 }
      h2: { size: 40, line: 52, weight: 400, tracking: 0 }
      h3: { size: 28, line: 38, weight: 400, tracking: 0 }
      body: { size: 18, line: 30, weight: 400, tracking: 0 }
      small: { size: 16, line: 26, weight: 400, tracking: 0 }
  spacing:
    base: 8
    section_py:
      mobile: [56, 72]
      desktop: [96, 120]
```