WebForge MCP Server

# S13 — Material-ish
## Industry: SaaS

## Style DNA
- **Palette:** Bold primary colors. White backgrounds. Systematic palette.
- **Typography:** Roboto or similar. Clear hierarchy. Medium weights.
- **Radius:** Consistent (4-8px). Systematic.
- **Shadow:** Elevation system. Multiple levels.
- **Border:** Minimal borders. Rely on shadows.
- **Patterns:** None. Clean surfaces.
- **Motion:** Responsive animations. Standard curves.

## Do's
- Use elevation and shadows
- Follow material principles
- Use bold colors with purpose
- Create clear hierarchy

## Don'ts
- Don't use flat design
- Don't ignore elevation
- Don't use too many elevations
- Don't break material guidelines

## Design Tokens
```yaml
tokens:
  meta:
    style_id: "S13"
    style_name: "Material-ish"
    industry: "SaaS"
    use_case: "Full Landing Page"
  color:
    bg:
      primary: "#FFFFFF"
      secondary: "#FAFAFA"
      surface: "#FFFFFF"
    text:
      primary: "#212121"
      secondary: "#757575"
      muted: "#9E9E9E"
    brand:
      primary: "#6200EE"
      secondary: "#03DAC6"
      accent: "#FF5722"
    border:
      strong: "#E0E0E0"
      subtle: "#F5F5F5"
    state:
      success: "#03DAC6"
      warning: "#FF5722"
      error: "#6200EE"
    focus:
      ring: "#6200EE"
  radius:
    none: 0
    sm: 4
    md: 8
    lg: 16
  border:
    width:
      hairline: 1
      medium: 2
      strong: 3
  shadow:
    elevation1: "0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24)"
    elevation2: "0 3px 6px rgba(0,0,0,0.15), 0 2px 4px rgba(0,0,0,0.12)"
    elevation3: "0 10px 20px rgba(0,0,0,0.15), 0 3px 6px rgba(0,0,0,0.10)"
  layout:
    container:
      content: 1120
      wide: 1280
    grid:
      desktop: 12
      tablet: 8
      mobile: 4
    gutter:
      mobile: 16
      desktop: 24
  motion:
    duration:
      fast: 150
      normal: 250
    easing: "cubic-bezier(0.4, 0, 0.2, 1)"
  typography:
    font:
      sans:
        primary: "Roboto"
        fallback:
          - "Inter"
          - "system-ui"
          - "-apple-system"
          - "Segoe UI"
      mono:
        primary: "JetBrains Mono"
        fallback:
          - "ui-monospace"
          - "SFMono-Regular"
    scale:
      h1: { size: 56, line: 64, weight: 600, tracking: -0.02 }
      h2: { size: 40, line: 48, weight: 600, tracking: -0.01 }
      h3: { size: 28, line: 36, weight: 600, 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]
```