WebForge MCP Server

# S07 — Retro 80s (Synthwave)
## Industry: SaaS

## Style DNA
- **Palette:** Gradient neons (pink, purple, cyan). Sunset palettes. Dark backgrounds.
- **Typography:** Retro-futuristic fonts. Chrome effects. Outlined text.
- **Radius:** Rounded (8-16px). Soft edges.
- **Shadow:** Neon glows. Gradient shadows.
- **Border:** Glowing outlines. Gradient borders.
- **Patterns:** Perspective grids. Sun/horizon imagery.
- **Motion:** Smooth, flowing. Pulsing glows.

## Do's
- Use gradient neons (pink, purple, cyan)
- Add grid patterns
- Use retro-futuristic imagery
- Create depth with perspective

## Don'ts
- Don't use flat colors
- Don't use modern minimalism
- Don't forget the sunset gradients
- Don't use serif fonts

## Design Tokens
```yaml
tokens:
  meta:
    style_id: "S07"
    style_name: "Retro 80s (Synthwave)"
    industry: "SaaS"
    use_case: "Full Landing Page"
  color:
    bg:
      primary: "#1A0A2E"
      secondary: "#16082A"
    text:
      primary: "#FFFFFF"
      secondary: "#FF6AD5"
      muted: "#9D8CFF"
    brand:
      primary: "#FF6AD5"
      secondary: "#C774E8"
      accent: "#00D4FF"
    border:
      strong: "#FF6AD5"
      subtle: "#4A2C6A"
    state:
      success: "#00D4FF"
      warning: "#FF6AD5"
      error: "#C774E8"
    focus:
      ring: "#00D4FF"
    gradient:
      sunset: "linear-gradient(180deg, #FF6AD5 0%, #C774E8 50%, #00D4FF 100%)"
  radius:
    none: 0
    sm: 8
    md: 16
    lg: 24
  border:
    width:
      hairline: 1
      medium: 2
      strong: 3
  shadow:
    glow: "0 0 30px rgba(255,106,213,0.5)"
    neon: "0 0 20px #FF6AD5"
  layout:
    container:
      content: 1120
      wide: 1400
    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: "Outrun Future"
        fallback:
          - "Audiowide"
          - "Orbitron"
          - "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: 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]
```