WebForge MCP Server

# S30 — Industrial
## Industry: SaaS

## Style DNA
- **Palette:** Safety yellow, black, concrete gray. Warning stripes.
- **Typography:** Stencil fonts, bold industrial sans-serif.
- **Radius:** Chamfered corners or slightly rounded industrial.
- **Shadow:** Heavy drop shadows, utilitarian.
- **Border:** Thick, dashed, or hazard stripes.
- **Patterns:** Caution tape, concrete texture, blueprints.
- **Motion:** Mechanical, clunky (in a good way).

## Do's
- Use safety yellow
- Use industrial textures
- Use bold, readable fonts
- Make it look functional

## Don'ts
- Don't use delicate serifs
- Don't use pastel colors
- Don't hide the structure
- Don't make it too soft

## Design Tokens
```yaml
tokens:
  meta:
    style_id: "S30"
    style_name: "Industrial"
    industry: "SaaS"
    use_case: "Full Landing Page"
  color:
    bg:
      primary: "#F3F4F6"
      secondary: "#E5E7EB"
    text:
      primary: "#111827"
      secondary: "#374151"
      muted: "#6B7280"
    brand:
      primary: "#FACC15"
      accent: "#000000"
    industrial:
      yellow: "#FACC15"
      black: "#000000"
      concrete: "#9CA3AF"
    border:
      strong: "#000000"
      subtle: "#6B7280"
      hazard: "#FACC15"
    state:
      success: "#22C55E"
      warning: "#FACC15"
      error: "#DC2626"
    focus:
      ring: "#FACC15"
  radius:
    none: 0
    sm: 2
    md: 4
    lg: 8
    chamfer: "polygon(0 8px, 8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px))"
  border:
    width:
      hairline: 1
      medium: 2
      thick: 4
      stripe: 6
  shadow:
    heavy: "6px 6px 0 rgba(0,0,0,0.3)"
    industrial: "0 8px 24px 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:
      sans:
        primary: "Chakra Petch"
        fallback:
          - "sans-serif"
      mono:
        primary: "Roboto Mono"
        fallback:
          - "monospace"
    scale:
      h1: { size: 56, line: 64, weight: 700, tracking: 0.02 }
      h2: { size: 42, 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: 500, tracking: 0.01 }
  spacing:
    base: 8
    section_py:
      mobile: [56, 72]
      desktop: [88, 112]
```