WebForge MCP Server

# S12 — Nature Organic
## Industry: SaaS

## Style DNA
- **Palette:** Earthy, natural colors. Greens, browns, blues. Organic feel.
- **Typography:** Humanist sans-serif. Natural flow. Mixed weights.
- **Radius:** Organic (4-12px). Natural shapes.
- **Shadow:** Soft, diffused shadows. Natural depth.
- **Border:** Soft, organic borders. Natural materials.
- **Patterns:** Organic patterns. Leaves, wood grain, water.
- **Motion:** Gentle, flowing. Natural rhythms.

## Do's
- Use earth tones and natural colors
- Add organic shapes and curves
- Use natural textures
- Create flowing layouts

## Don'ts
- Don't use harsh geometric shapes
- Don't use artificial colors
- Don't make it too rigid
- Don't forget the organic feel

## Design Tokens
```yaml
tokens:
  meta:
    style_id: "S12"
    style_name: "Nature Organic"
    industry: "SaaS"
    use_case: "Full Landing Page"
  color:
    bg:
      primary: "#F8F7F4"
      secondary: "#F0EDE6"
    text:
      primary: "#2D3748"
      secondary: "#4A5568"
      muted: "#718096"
    brand:
      primary: "#38A169"
      secondary: "#805AD5"
      accent: "#3182CE"
    border:
      strong: "#CBD5E0"
      subtle: "#E2E8F0"
    state:
      success: "#38A169"
      warning: "#D69E2E"
      error: "#E53E3E"
    focus:
      ring: "#38A169"
  radius:
    none: 0
    sm: 4
    md: 8
    lg: 12
    xl: 16
  border:
    width:
      hairline: 1
      medium: 2
      strong: 3
  shadow:
    soft: "0 2px 8px rgba(0,0,0,0.06)"
    medium: "0 4px 16px rgba(0,0,0,0.08)"
  layout:
    container:
      content: 1200
      wide: 1400
    grid:
      desktop: 12
      tablet: 8
      mobile: 4
    gutter:
      mobile: 20
      desktop: 32
  motion:
    duration:
      fast: 200
      normal: 400
    easing: ease-out
  typography:
    font:
      sans:
        primary: "Lato"
        fallback:
          - "Open Sans"
          - "Roboto"
          - "sans-serif"
      mono:
        primary: "JetBrains Mono"
        fallback:
          - "ui-monospace"
          - "SFMono-Regular"
    scale:
      h1: { size: 56, line: 64, weight: 600, tracking: -0.02 }
      h2: { size: 40, line: 48, weight: 600, tracking: -0.01 }
      h3: { size: 28, line: 36, weight: 600, tracking: -0.005 }
      body: { size: 16, line: 24, weight: 450, tracking: 0 }
      small: { size: 14, line: 20, weight: 450, tracking: 0 }
    measure:
      hero_max: "48ch"
      body_max: "72ch"
  spacing:
    base: 8
    section_py:
      mobile: [64, 80]
      desktop: [112, 128]
```