ids.alfacom.it/design_guidelines.md

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)