WebForge MCP Server

# S21 — Claymorphism
## Industry: SaaS

## Style DNA
- **Palette:** Earthy, muted tones. Soft clay colors with natural warmth. Subtle variations create tactile depth.
- **Typography:** Rounded, friendly fonts. Soft edges match clay aesthetic. Medium weights for substance.
- **Radius:** Extra rounded (16-32px). All elements feel moldable and soft.
- **Shadow:** Soft, pressed-in shadows. Multiple layers create clay depth. Inner shadows dominate.
- **Border:** No borders. Clay forms defined by shadows and highlights.
- **Patterns:** Subtle clay texture. Imperfect organic shapes. Hand-molded feel.
- **Motion:** Bouncy, playful animations (400-600ms). Ease-out-back for tactile feedback.

## Do's
- Use soft, rounded shapes
- Create pressed-in effects
- Use earthy colors
- Add tactile shadows

## Don'ts
- Don't use sharp edges
- Don't ignore the depth
- Don't make it flat
- Don't forget the clay feel

## Design Tokens
```yaml
tokens:
  meta:
    style_id: "S21"
    style_name: "Claymorphism"
    industry: "SaaS"
    use_case: "Full Landing Page"
  color:
    bg:
      primary: "#F9F3ED"
      secondary: "#EAD7C0"
    text:
      primary: "#4A3426"
      secondary: "#6B5B4F"
      muted: "#8B7355"
    brand:
      primary: "#D4A574"
      secondary: "#E67E22"
      accent: "#A855F7"
    border:
      strong: transparent
      subtle: transparent
    state:
      success: "#4A7C59"
      warning: "#D4A574"
      error: "#E67E22"
    focus:
      ring: "#D4A574"
  radius:
    none: 0
    sm: 16
    md: 24
    lg: 32
    xl: 40
    pill: 9999
  border:
    width:
      hairline: 1
      medium: 2
      strong: 3
  shadow:
    raised: "8px 8px 16px rgba(155,123,89,0.3), -8px -8px 16px rgba(255,255,255,0.7)"
    pressed: "inset 6px 6px 12px rgba(155,123,89,0.3), inset -6px -6px 12px rgba(255,255,255,0.7)"
    soft: "4px 4px 8px rgba(155,123,89,0.2), -4px -4px 8px rgba(255,255,255,0.8)"
  layout:
    container:
      content: 1080
      wide: 1240
    grid:
      desktop: 12
      tablet: 8
      mobile: 4
    gutter:
      mobile: 20
      desktop: 28
  motion:
    duration:
      fast: 400
      normal: 500
      slow: 600
    easing: "cubic-bezier(0.68, -0.55, 0.265, 1.55)"
  typography:
    font:
      sans:
        primary: "Nunito"
        fallback:
          - "Quicksand"
          - "system-ui"
          - "sans-serif"
      mono:
        primary: "JetBrains Mono"
        fallback:
          - "ui-monospace"
          - "SFMono-Regular"
    scale:
      h1: { size: 56, line: 64, weight: 700, tracking: -0.02 }
      h2: { size: 40, line: 48, weight: 700, tracking: -0.01 }
      h3: { size: 28, line: 36, weight: 700, tracking: -0.005 }
      body: { size: 16, line: 26, weight: 500, tracking: 0 }
      small: { size: 14, line: 22, weight: 500, tracking: 0 }
    measure:
      hero_max: "48ch"
      body_max: "72ch"
  spacing:
    base: 8
    section_py:
      mobile: [80, 96]
      desktop: [128, 144]
```