Purpose: Ensure consistent, on-brand visual implementation for Spectrum Eye Care
DESIGN_SYSTEM: {
  color_palette: {
    primary: {
      brand_blue: "#1B4F72",
      medical_teal: "#0B7A8F",
      trust_navy: "#2C3E50"
    },
    secondary: {
      warm_gray: "#6C757D",
      light_gray: "#F8F9FA",
      soft_white: "#FFFFFF"
    },
    accent: {
      warm_orange: "#E67E22",
      success_green: "#27AE60",
      alert_red: "#E74C3C"
    }
  },
  visual_hierarchy: {
    headings: {
      h1: {
        font_size: "clamp(2rem, 4vw, 3.5rem)",
        font_weight: "700",
        color: "#1B4F72",
        line_height: "1.2",
        letter_spacing: "-0.02em"
      },
      h2: {
        font_size: "clamp(1.5rem, 3vw, 2.5rem)",
        font_weight: "600",
        color: "#2C3E50",
        line_height: "1.3",
        letter_spacing: "-0.01em"
      },
      h3: {
        font_size: "clamp(1.25rem, 2.5vw, 1.75rem)",
        font_weight: "600",
        color: "#0B7A8F",
        line_height: "1.4"
      }
    },
    body_text: {
      font_size: "clamp(1rem, 2vw, 1.125rem)",
      line_height: "1.6",
      color: "#495057",
      font_weight: "400"
    },
    small_text: {
      font_size: "0.875rem",
      line_height: "1.5",
      color: "#6C757D",
      font_weight: "400"
    }
  },
  typography: {
    font_families: {
      primary: "'Inter', 'Helvetica Neue', Arial, sans-serif",
      headings: "'Poppins', 'Inter', sans-serif",
      monospace: "'Source Code Pro', monospace"
    },
    font_weights: [300, 400, 500, 600, 700]
  },
  spacing_system: {
    base_unit: "8px",
    scale: {
      xs: "4px",
      sm: "8px", 
      md: "16px",
      lg: "24px",
      xl: "32px",
      xxl: "48px",
      xxxl: "64px"
    },
    margins: {
      small: "16px",
      medium: "32px", 
      large: "64px"
    },
    padding: {
      small: "12px 16px",
      medium: "16px 24px",
      large: "24px 32px"
    }
  },
  component_styles: {
    buttons: {
      primary: {
        background: "#1B4F72",
        color: "#FFFFFF",
        border_radius: "8px",
        padding: "14px 28px",
        font_weight: "600",
        font_size: "1rem",
        border: "2px solid #1B4F72",
        transition: "all 0.2s ease",
        hover: {
          background: "#2C3E50",
          border_color: "#2C3E50",
          transform: "translateY(-1px)",
          box_shadow: "0 4px 12px rgba(27, 79, 114, 0.3)"
        }
      },
      secondary: {
        background: "transparent",
        color: "#1B4F72",
        border_radius: "8px",
        padding: "14px 28px",
        font_weight: "600",
        font_size: "1rem",
        border: "2px solid #1B4F72",
        transition: "all 0.2s ease",
        hover: {
          background: "#1B4F72",
          color: "#FFFFFF"
        }
      },
      cta_phone: {
        background: "#E67E22",
        color: "#FFFFFF",
        border_radius: "25px",
        padding: "12px 24px",
        font_weight: "600",
        font_size: "0.95rem",
        border: "none",
        hover: {
          background: "#D35400",
          transform: "scale(1.02)"
        }
      }
    },
    cards: {
      service_card: {
        background: "#FFFFFF",
        border: "1px solid #E9ECEF",
        border_radius: "12px",
        box_shadow: "0 2px 8px rgba(0, 0, 0, 0.08)",
        padding: "24px",
        transition: "all 0.3s ease",
        hover: {
          box_shadow: "0 8px 24px rgba(0, 0, 0, 0.12)",
          transform: "translateY(-4px)"
        }
      },
      location_card: {
        background: "#F8F9FA",
        border: "2px solid #DEE2E6",
        border_radius: "10px",
        padding: "20px",
        hover: {
          border_color: "#0B7A8F",
          box_shadow: "0 4px 16px rgba(11, 122, 143, 0.15)"
        }
      },
      staff_card: {
        background: "#FFFFFF",
        border: "none",
        border_radius: "16px",
        box_shadow: "0 4px 16px rgba(0, 0, 0, 0.1)",
        overflow: "hidden",
        hover: {
          transform: "scale(1.02)"
        }
      }
    },
    forms: {
      input_field: {
        border: "2px solid #DEE2E6",
        border_radius: "8px",
        padding: "14px 16px",
        font_size: "1rem",
        background: "#FFFFFF",
        focus: {
          border_color: "#1B4F72",
          box_shadow: "0 0 0 3px rgba(27, 79, 114, 0.1)"
        }
      }
    }
  },
  layout_specifications: {
    max_width: "1200px",
    breakpoints: {
      mobile: "320px",
      tablet: "768px", 
      desktop: "1024px",
      wide: "1200px"
    },
    grid: {
      columns: 12,
      gap: "24px",
      mobile_gap: "16px"
    }
  },
  animation_guidelines: {
    transitions: {
      fast: "0.15s ease-out",
      normal: "0.2s ease-in-out",
      slow: "0.3s ease-in-out"
    },
    hover_effects: {
      buttons: "Transform scale(1.02) with shadow enhancement",
      cards: "Lift effect with translateY(-4px) and enhanced shadow",
      images: "Subtle zoom scale(1.05) with overflow hidden"
    },
    loading_states: {
      skeleton: "Shimmer effect with gradient animation",
      spinner: "Rotating circle with brand primary color",
      progress: "Linear progress bar with brand colors"
    },
    page_transitions: {
      duration: "0.4s",
      easing: "cubic-bezier(0.4, 0, 0.2, 1)"
    }
  },
  accessibility_standards: {
    contrast_ratios: {
      normal_text: "4.5:1 minimum",
      large_text: "3:1 minimum",
      ui_components: "3:1 minimum"
    },
    focus_indicators: {
      outline: "2px solid #1B4F72",
      offset: "2px",
      border_radius: "4px"
    },
    touch_targets: {
      minimum_size: "44px x 44px",
      spacing: "8px minimum between targets"
    }
  }
}

Implementation Steps:

1. Style Guide Creation: 
   - Document all color values with accessibility ratings
   - Create typography scale with responsive font sizes
   - Define component specifications with code examples
   - Establish spacing and layout guidelines

2. Component Design:
   - Build reusable service cards with hover states
   - Create location cards with contact information layout
   - Design staff bio cards with professional imagery
   - Develop form components with validation states
   - Implement navigation components with mobile responsiveness

3. Accessibility Standards:
   - Ensure WCAG 2.1 AA compliance across all components
   - Implement keyboard navigation support
   - Add proper ARIA labels and semantic HTML
   - Test color contrast ratios for all text combinations
   - Provide alternative text for all images

4. Performance Optimization:
   - Optimize all images with WebP format and lazy loading
   - Minimize CSS and JavaScript bundles
   - Implement critical CSS inlining
   - Use system fonts as fallbacks
   - Compress and optimize background images for hero sections

Brand-Specific Design Considerations:
- Professional medical aesthetic with warm, approachable elements
- Clean typography that maintains readability across all devices
- Consistent use of brand colors to build trust and recognition
- Subtle animations that enhance UX without being distracting
- Mobile-first approach prioritizing touch-friendly interactions
- Location-specific design elements (parking validation, hours)
- Integration points for Instagram feed and social media
- Promotional banner styles that stand out without being overwhelming