WebForge MCP Server

# S97 — Frosted Glass
## Industry: SaaS

## Style DNA
- **Palette:** Pastel gradients background, white semi-transparent surfaces.
- **Typography:** Modern sans-serif (Inter/SF Pro).
- **Radius:** Large (24px).
- **Shadow:** Soft diffuse shadows.
- **Border:** 1px solid white/20.
- **Patterns:** Blur, noise.
- **Motion:** Floating, slow drifts.

## Do's
- Use backdrop-filter
- White text shadows
- Gradients
- Clean

## Don'ts
- Don't be opaque
- Don't use sharp corners
- Don't use heavy borders

## Design Tokens
```yaml
tokens:
  meta:
    style_id: "S97"
    style_name: "Frosted Glass"
    industry: "SaaS"
    use_case: "Full Landing Page"
  color:
    bg:
      primary: "linear-gradient(135deg, #E0C3FC, #8EC5FC)"
      secondary: "#FFFFFF"
    text:
      primary: "#1A1A2E"
      secondary: "#3D3D5C"
      muted: "#6A6A8E"
    brand:
      primary: "#8EC5FC"
      accent: "#E0C3FC"
    surface:
      glass: "rgba(255, 255, 255, 0.25)"
      dark_glass: "rgba(0, 0, 0, 0.1)"
    border:
      strong: "rgba(255, 255, 255, 0.4)"
      subtle: "rgba(255, 255, 255, 0.2)"
    state:
      success: "#4ADE80"
      warning: "#FBBF24"
      error: "#F87171"
    focus:
      ring: "rgba(255, 255, 255, 0.6)"
  radius:
    none: 0
    sm: 12
    md: 20
    lg: 28
    full: 9999
  border:
    width:
      hairline: 1
      medium: 2
      strong: 3
  shadow:
    glass: "0 8px 32px rgba(0, 0, 0, 0.1)"
    soft: "0 4px 16px rgba(0, 0, 0, 0.05)"
  backdrop:
    blur: "blur(16px) saturate(180%)"
  layout:
    container:
      content: 1120
      wide: 1280
    grid:
      desktop: 12
      tablet: 8
      mobile: 4
    gutter:
      mobile: 16
      desktop: 24
  motion:
    duration:
      fast: 300
      normal: 600
    easing: "cubic-bezier(0.4, 0, 0.2, 1)"
  typography:
    font:
      sans:
        primary: "Inter"
        fallback:
          - "SF Pro Display"
          - "sans-serif"
      display:
        primary: "Plus Jakarta Sans"
        fallback:
          - "sans-serif"
    scale:
      h1: { size: 52, line: 62, weight: 600, tracking: -0.02 }
      h2: { size: 40, line: 50, weight: 600, tracking: -0.01 }
      h3: { size: 28, line: 36, 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: [64, 80]
      desktop: [112, 144]
```