WebForge MCP Server

# S99 — Material You
## Industry: SaaS

## Style DNA
- **Palette:** Dynamic color extraction from wallpaper.
- **Typography:** Roboto Flex / Google Sans.
- **Radius:** Pill shapes, large rounded corners.
- **Shadow:** Tonal surface colors, no drop shadows.
- **Border:** None.
- **Patterns:** Ripple effects.
- **Motion:** Material easing, spring physics.

## Do's
- Use tonal surfaces
- Rounded FABs
- Dynamic color
- Modern Material

## Don'ts
- Don't use shadows for elevation
- Don't use gradients
- Don't use borders

## Design Tokens
```yaml
tokens:
  meta:
    style_id: "S99"
    style_name: "Material You"
    industry: "SaaS"
    use_case: "Full Landing Page"
  color:
    bg:
      primary: "#FFFBFE"
      secondary: "#F3EDF7"
    text:
      primary: "#1C1B1F"
      secondary: "#49454F"
      muted: "#79747E"
    brand:
      primary: "#6750A4"
      accent: "#625B71"
    surface:
      variant: "#E7E0EC"
      container: "#EADDFF"
      container_high: "#D0BCFF"
    border:
      strong: "#CAC4D0"
      subtle: "#E7E0EC"
    state:
      success: "#4CAF50"
      warning: "#FF9800"
      error: "#B3261E"
    focus:
      ring: "#6750A4"
  radius:
    none: 0
    sm: 8
    md: 12
    lg: 16
    xl: 28
    full: 9999
  border:
    width:
      hairline: 1
      medium: 2
      strong: 3
  shadow:
    tonal: "none"
    legacy: "0 1px 2px rgba(0,0,0,0.3)"
  layout:
    container:
      content: 1120
      wide: 1280
    grid:
      desktop: 12
      tablet: 8
      mobile: 4
    gutter:
      mobile: 16
      desktop: 24
  motion:
    duration:
      fast: 200
      normal: 300
    easing: "cubic-bezier(0.2, 0, 0, 1)"
  typography:
    font:
      sans:
        primary: "Roboto Flex"
        fallback:
          - "Google Sans"
          - "Roboto"
          - "sans-serif"
      display:
        primary: "Google Sans Display"
        fallback:
          - "Roboto"
          - "sans-serif"
    scale:
      h1: { size: 57, line: 64, weight: 400, tracking: -0.25 }
      h2: { size: 45, line: 52, weight: 400, tracking: 0 }
      h3: { size: 36, line: 44, weight: 400, tracking: 0 }
      body: { size: 16, line: 24, weight: 400, tracking: 0.5 }
      small: { size: 14, line: 20, weight: 400, tracking: 0.25 }
  spacing:
    base: 8
    section_py:
      mobile: [56, 72]
      desktop: [96, 120]
```