WebForge MCP Server

# S31 — Skeuomorphic
## Industry: SaaS

## Style DNA
- **Palette:** Realistic textures: Leather (browns), Brushed Metal (silvers), Wood. High detailed gradients.
- **Typography:** Serif for elegance or systemic sans for UI elements. Embossed text effects.
- **Radius:** Rounded corners realistic to materials (e.g. leather stitching).
- **Shadow:** Deep, realistic drop shadows and inner shadows to create volume.
- **Border:** Stitching, bevels, metallic rims.
- **Patterns:** Leather grain, linen texture, brushed metal.
- **Motion:** Physical, heavy, mechanical transitions.

## Do's
- Use realistic textures
- Use inner shadows for depth
- Mimic real-world mateirals
- Pay attention to lighting direction

## Don'ts
- Don't use flat colors
- Don't use impossible physics
- Don't mix clashing materials
- Don't ignore lighting consistency

## Design Tokens
```yaml
tokens:
  meta:
    style_id: "S31"
    style_name: "Skeuomorphic"
    industry: "SaaS"
    use_case: "Full Landing Page"
  color:
    bg:
      primary: "#E0E0E0"
      secondary: "#D6D6D6"
    text:
      primary: "#2D2D2D"
      secondary: "#555555"
      muted: "#888888"
      embossed: "rgba(255,255,255,0.7)"
    brand:
      primary: "#8D6E63"
      accent: "#607D8B"
    border:
      strong: "#A1887F"
      subtle: "#BCAAA4"
    state:
      success: "#4CAF50"
      warning: "#FF9800"
      error: "#F44336"
    focus:
      ring: "#8D6E63"
  radius:
    none: 0
    sm: 4
    md: 8
    lg: 16
  border:
    width:
      hairline: 1
      stitch: 2
      strong: 4
  shadow:
    pressed: "inset 2px 2px 5px rgba(0,0,0,0.2), inset -2px -2px 5px rgba(255,255,255,0.7)"
    raised: "2px 2px 5px rgba(0,0,0,0.2), -2px -2px 5px rgba(255,255,255,0.7)"
    deep: "0 8px 24px rgba(0,0,0,0.3)"
  layout:
    container:
      content: 1080
      wide: 1200
    grid:
      desktop: 12
      tablet: 8
      mobile: 4
    gutter:
      mobile: 16
      desktop: 24
  motion:
    duration:
      fast: 200
      normal: 400
    easing: "ease-in-out"
  typography:
    font:
      sans:
        primary: "Helvetica Neue"
        fallback:
          - "system-ui"
          - "sans-serif"
      serif:
        primary: "Georgia"
        fallback:
          - "Times New Roman"
          - "serif"
    scale:
      h1: { size: 48, line: 58, weight: 600, tracking: 0 }
      h2: { size: 36, line: 46, weight: 600, tracking: 0 }
      h3: { size: 24, line: 32, weight: 600, tracking: 0 }
      body: { size: 16, line: 26, weight: 400, tracking: 0 }
      small: { size: 14, line: 22, weight: 400, tracking: 0 }
  spacing:
    base: 8
    section_py:
      mobile: [56, 72]
      desktop: [88, 112]
```