WebForge MCP Server

# S06 — Cyberpunk
## Industry: SaaS

## Style DNA
- **Palette:** Neon colors (cyan, magenta, yellow) on dark backgrounds. Glowing effects.
- **Typography:** Futuristic, tech-inspired fonts. Glowing text effects.
- **Radius:** Mixed. Sharp for panels, rounded for buttons.
- **Shadow:** Neon glows. Colored shadows.
- **Border:** Glowing borders. Circuit-like patterns.
- **Patterns:** Grid lines, circuit patterns, glitch effects.
- **Motion:** Glitch effects. Fast, erratic.

## Do's
- Use neon colors on dark backgrounds
- Add glitch effects sparingly
- Use futuristic typography
- Create depth with layers

## Don'ts
- Don't use warm, natural colors
- Don't use traditional layouts
- Don't make it too clean
- Don't forget the tech aesthetic

## Design Tokens
```yaml
tokens:
  meta:
    style_id: "S06"
    style_name: "Cyberpunk"
    industry: "SaaS"
    use_case: "Full Landing Page"
  color:
    bg:
      primary: "#0A0A0F"
      secondary: "#12121A"
    text:
      primary: "#FFFFFF"
      secondary: "#00FFFF"
      muted: "#8888AA"
    brand:
      primary: "#00FFFF"
      secondary: "#FF00FF"
      accent: "#FFFF00"
    border:
      strong: "#00FFFF"
      subtle: "#FF00FF"
    state:
      success: "#00FF00"
      warning: "#FFFF00"
      error: "#FF00FF"
    focus:
      ring: "#00FFFF"
  radius:
    none: 0
    sm: 4
    md: 8
    lg: 12
  border:
    width:
      thin: 1
      medium: 2
      strong: 3
  shadow:
    neon_cyan: "0 0 20px #00FFFF"
    neon_magenta: "0 0 20px #FF00FF"
    neon_yellow: "0 0 20px #FFFF00"
  layout:
    container:
      content: 1200
      wide: 1440
    grid:
      desktop: 12
      tablet: 8
      mobile: 4
    gutter:
      mobile: 16
      desktop: 24
  motion:
    duration:
      fast: 150
      normal: 300
    easing: ease-in-out
  typography:
    font:
      sans:
        primary: "Orbitron"
        fallback:
          - "Rajdhani"
          - "Arial"
          - "sans-serif"
      mono:
        primary: "Share Tech Mono"
        fallback:
          - "Fira Code"
          - "monospace"
    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]
```