docs(design): add design system documentation and missing alt text - Phase 2

Add comprehensive design system documentation:
- Z-index scale (z-10 through z-[100])
- Spacing scale based on 4pt baseline
- Opacity guidelines for glass/translucent effects
- Transition timing standards (150-300ms)
- Focus state requirements
- Cursor affordance rules
- WCAG AA contrast requirements
- Button state implementation patterns
- Form element best practices
- Modal hierarchy guidance
- Migration checklist

Accessibility improvements:
- Add alt text to OCR preview image in Scanner
- Verify all images have descriptive alt text
- Establish transition consistency guidelines

This ensures design consistency and accessibility across the application.

frontend/components/Scanner.tsx

@@ -236,7 +236,12 @@ export default function Scanner({ onScanSuccess, onOCRMatch, paused }: ScannerPr
         {isSelecting && capturedImage && (
           <div className="absolute inset-0 z-50 bg-slate-950 flex flex-col">
             <div className="relative flex-1 bg-black flex items-center justify-center overflow-hidden">
-               <img src={capturedImage || undefined} className="max-w-full max-h-full object-contain" id="ocr-canvas-preview" />
+               <img
+                 src={capturedImage || undefined}
+                 className="max-w-full max-h-full object-contain"
+                 id="ocr-canvas-preview"
+                 alt="OCR text detection preview with detected words highlighted"
+               />
                <div className="absolute inset-0 flex items-center justify-center">
                   <div className="relative" style={{ width: '100%', height: '100%' }}>
                     {detectedWords.map((w, i) => (