WebForge MCP Server

# S94 — Code Editor
## Industry: SaaS

## Style DNA
- **Palette:** Dark blue-grey (Dracula/Nord), pastel syntax colors.
- **Typography:** Fira Code, JetBrains Mono.
- **Radius:** Small radius (4px).
- **Shadow:** Deep ambient shadows.
- **Border:** Left border accents.
- **Patterns:** Line numbers, syntax highlighting.
- **Motion:** Fast, efficient.

## Do's
- Use syntax colors
- Monospace
- Dark theme
- Clean

## Don'ts
- Don't be bright
- Don't use serif
- Don't be cluttered

## Design Tokens
```yaml
tokens:
  meta:
    style_id: "S94"
    style_name: "Code Editor"
    industry: "SaaS"
    use_case: "Full Landing Page"
  color:
    bg:
      primary: "#282A36"
      secondary: "#21222C"
    text:
      primary: "#F8F8F2"
      secondary: "#6272A4"
      muted: "#44475A"
    brand:
      primary: "#BD93F9"
      accent: "#50FA7B"
    syntax:
      purple: "#BD93F9"
      green: "#50FA7B"
      orange: "#FFB86C"
      pink: "#FF79C6"
      cyan: "#8BE9FD"
      yellow: "#F1FA8C"
    border:
      strong: "#44475A"
      subtle: "rgba(68,71,90,0.5)"
    state:
      success: "#50FA7B"
      warning: "#FFB86C"
      error: "#FF5555"
    focus:
      ring: "#BD93F9"
  radius:
    none: 0
    sm: 4
    md: 6
    lg: 8
  border:
    width:
      hairline: 1
      accent: 3
      strong: 4
  shadow:
    deep: "0 8px 32px rgba(0,0,0,0.4)"
    editor: "inset 0 0 40px rgba(0,0,0,0.2)"
  layout:
    container:
      content: 1120
      wide: 1280
    grid:
      desktop: 12
      tablet: 8
      mobile: 4
    gutter:
      mobile: 16
      desktop: 24
  motion:
    duration:
      fast: 100
      normal: 200
    easing: "ease-out"
  typography:
    font:
      mono:
        primary: "JetBrains Mono"
        fallback:
          - "Fira Code"
          - "monospace"
      sans:
        primary: "Inter"
        fallback:
          - "sans-serif"
    scale:
      h1: { size: 48, line: 56, weight: 600, tracking: -0.01 }
      h2: { size: 36, line: 44, weight: 600, tracking: 0 }
      h3: { size: 24, line: 32, weight: 600, tracking: 0 }
      body: { size: 14, line: 24, weight: 400, tracking: 0 }
      small: { size: 12, line: 20, weight: 400, tracking: 0 }
  spacing:
    base: 8
    section_py:
      mobile: [48, 64]
      desktop: [80, 104]
```