WebForge MCP Server

# S38 — Magazine
## Industry: SaaS

## Style DNA
- **Palette:** High fashion contrast. Black/White base with bold accent colors (Hot Pink, Electric Blue).
- **Typography:** Didone (Bodoni/Didot) for titles, clean geometric Sans for geometric layouts.
- **Radius:** Zero radius for images, sharp cuts.
- **Shadow:** None or hard, defining shadows.
- **Border:** Thick framing borders or no borders (full bleed).
- **Patterns:** Large typography integration, overlapping text/images.
- **Motion:** Parallax, smooth sliding, mask reveals.

## Do's
- Use high quality imagery
- Use large titles
- Overlay text on images
- Be bold

## Don'ts
- Don't use small text everywhere
- Don't use low res images
- Don't clutter
- Don't use default fonts

## Design Tokens
```yaml
tokens:
  meta:
    style_id: "S38"
    style_name: "Magazine"
    industry: "SaaS"
    use_case: "Full Landing Page"
  color:
    bg:
      primary: "#FFFFFF"
      secondary: "#F2F2F2"
    text:
      primary: "#000000"
      secondary: "#555555"
      muted: "#888888"
      inverse: "#FFFFFF"
    brand:
      primary: "#000000"
      accent: "#FF1493"
    border:
      strong: "#000000"
      subtle: "#E0E0E0"
    state:
      success: "#00C853"
      warning: "#FF9100"
      error: "#D50000"
    focus:
      ring: "#000000"
  radius:
    none: 0
    sm: 0
    md: 0
    lg: 0
  border:
    width:
      hairline: 1
      frame: 4
      strong: 8
  shadow:
    hard: "8px 8px 0 rgba(0,0,0,0.2)"
    none: "none"
  layout:
    container:
      content: 1200
      wide: 1440
    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:
      serif:
        primary: "Bodoni Moda"
        fallback:
          - "Didot"
          - "serif"
      sans:
        primary: "Inter"
        fallback:
          - "Helvetica"
          - "sans-serif"
    scale:
      h1: { size: 80, line: 84, weight: 400, tracking: -0.02 }
      h2: { size: 56, line: 60, weight: 400, tracking: -0.01 }
      h3: { size: 36, line: 42, weight: 500, tracking: 0 }
      body: { size: 16, line: 26, weight: 400, tracking: 0 }
      small: { size: 12, line: 18, weight: 500, tracking: 0.05 }
  spacing:
    base: 8
    section_py:
      mobile: [64, 80]
      desktop: [120, 160]
```