# Design Guidelines: IDF_Mikrotik File Analysis Tool

## Design Approach
**Selected Approach:** Design System (Utility-Focused)
**Primary Reference:** Linear + GitHub file viewer aesthetics
**Key Principle:** Clean, functional interface optimizing for rapid file analysis and clear information hierarchy

## Core Design Elements

### Typography
- **Primary Font:** Inter (Google Fonts)
- **Monospace Font:** JetBrains Mono (for file names, code snippets)
- **Scale:**
  - Headings: text-2xl font-semibold
  - Body: text-base
  - File metadata: text-sm text-gray-600
  - Code/technical: text-sm font-mono

### Layout System
**Spacing Units:** Tailwind units of 3, 4, 6, 8
- Component padding: p-6
- Section gaps: gap-4, gap-6
- Card spacing: space-y-4
- Container max-width: max-w-6xl

### Component Library

#### Upload Zone
- Large drop zone (min-h-64) with dashed border (border-2 border-dashed)
- Center-aligned upload icon (from Heroicons - cloud-arrow-up)
- Two-state design: idle (subtle) and drag-over (highlighted with ring)
- File input with clear "Browse Files" button
- Support text: "Drop ZIP file here or click to browse" (text-sm)

#### File List Display
- Table layout with columns: File Name (monospace), Size, Type, Actions
- Alternating row backgrounds for readability (hover:bg-gray-50)
- File type icons from Heroicons (document-text, code-bracket, photo, etc.)
- Compact row height (py-3) for scanning efficiency

#### Analysis Report Section
- Card-based layout (rounded-lg border shadow-sm p-6)
- Collapsible sections for different analysis aspects
- Syntax-highlighted code previews using monospace font
- Clear section headers with subtle dividers

#### Navigation/Header
- Minimal top bar with project name "IDF_Mikrotik Analyzer"
- Action buttons: "Upload New", "Clear All" (secondary styling)
- Status indicator showing number of files analyzed

#### Progress Indicators
- Linear progress bar during extraction (h-1 bg-blue-600 transition-all)
- Spinner for analysis processing (Heroicons: arrow-path with animate-spin)

### Layout Structure

**Single-Page Application Layout:**
1. **Header:** Fixed top bar (h-16) with title and actions
2. **Main Content:** Two-column layout on desktop (grid-cols-1 lg:grid-cols-2 gap-6)
   - Left: Upload zone + File list
   - Right: Analysis results panel
3. **Mobile:** Stack columns vertically

**Responsive Breakpoints:**
- Mobile: Single column, full-width components
- Desktop: Two-column layout with balanced proportions

### Interaction Patterns
- Drag-and-drop with visual feedback
- Click-to-expand for file details
- Smooth transitions (transition-all duration-200)
- Toast notifications for upload success/errors (top-right positioning)

### Visual Hierarchy
- Primary actions: Blue accent (bg-blue-600, hover:bg-blue-700)
- Secondary actions: Gray outline (border border-gray-300)
- Destructive actions: Red tint (text-red-600, hover:bg-red-50)

## Accessibility
- ARIA labels for upload zones and interactive elements
- Keyboard navigation for all file operations
- Focus visible states (focus:ring-2 focus:ring-blue-500)
- High contrast text (minimum text-gray-700 on white backgrounds)