# MEDIX Q - Branding Guide

## Overview

MEDIX Q has been updated with professional branding using the VectorMedix logo and clean design principles. All emojis have been removed and replaced with a polished logo and icon system.

## Logo Implementation

### Primary Logo
- **File**: `/public/logo.svg`
- **Format**: SVG (scalable vector graphic)
- **Dimensions**: 173 x 32 pixels (responsive)
- **Color**: Primary blue (#083D7A)
- **Usage**: Navigation bar, headers, branding elements

### Logo Placement
The VectorMedix logo appears prominently in:
- **Navbar**: Top-left corner next to "MEDIX Q" text
- **Favicon**: Browser tab (configured in layout.tsx)
- **Responsive**: Automatically scales on all screen sizes

## Design System

### Color Palette
All colors follow the MEDIX design system defined in `globals.css`:

```css
/* Primary Colors */
--medix-primary: #2563EB (Blue)
--medix-primary-soft: #EAF1FF (Light Blue)

/* Backgrounds */
--medix-bg-main: #F8FBFF (Main Background)
--medix-bg-card: #FFFFFF (Card Background)

/* Text */
--medix-text-main: #0F172A (Primary Text)
--medix-text-muted: #64748B (Muted Text)

/* Borders */
--medix-border-soft: #E5E7EB (Soft Border)

/* Semantic Colors */
--medix-success: #10B981 (Success/Green)
--medix-warning: #F59E0B (Warning/Amber)
--medix-danger: #EF4444 (Danger/Red)
```

### Typography
- **Font**: Figtree
- **Weights**: 400 (Regular), 500 (Medium), 600 (SemiBold), 700 (Bold)
- **Usage**: Consistent across all pages and components

## Component Standards

### Badges
Status indicators use semantic colors without emojis:
- `medix-badge-primary` - Waiting (Blue)
- `medix-badge-success` - Completed (Green)
- `medix-badge-warning` - In Progress (Amber)
- `medix-badge-danger` - Cancelled/Error (Red)

### Cards
- `.medix-card` - Standard card with shadow and rounded corners
- `medix-bg-card` - White background for consistency
- `medix-border-soft` - Soft gray border

### Navigation
- `.medix-sidebar-link` - Navigation links with hover states
- Smooth transitions using `medix-transition`
- Active state: Primary color with soft background

### Statistics
- `.medix-stat-card` - Dashboard statistics display
- `.medix-stat-value` - Large number display
- `.medix-stat-label` - Label text

## Icon System

### Icon Library
- **Framework**: Lucide React
- **Icons Used**: Activity, Users, Clock, FileText, BarChart3, Settings
- **Size**: 18px (menu), 24px (cards), 5px-6px (inline)
- **Color**: Matches text color by context

### Icon Guidelines
- Use icons consistently for the same purpose
- Always pair with descriptive text
- Maintain consistent sizing throughout app
- Color icons to match the section's color scheme

## Removed Elements

### Emoji Removal
All emojis have been removed from:
- Navigation bar (replaced with VectorMedix logo)
- Status displays (replaced with semantic badges)
- Documentation files (emojis remain only in Docker guides for clarity)

### Files Updated
1. `components/navbar.tsx` - Logo replaces Activity icon
2. `components/status-badge.tsx` - Semantic class names
3. `app/page.tsx` - Array safety checks

## Implementation Details

### Navbar Logo Component
```tsx
import Image from 'next/image';

<Image
  src="/logo.svg"
  alt="MEDIX Q Logo"
  width={40}
  height={32}
  className="h-8 w-auto"
/>
```

### Status Badges
```tsx
<span className={`medix-badge ${
  queue.status === 'completed' ? 'medix-badge-success' :
  queue.status === 'waiting' ? 'medix-badge-primary' :
  'medix-badge-warning'
}`}>
  {statusLabel}
</span>
```

## File Structure

```
/public/
  └── logo.svg           # VectorMedix logo

/components/
  ├── navbar.tsx         # Navigation with logo
  └── status-badge.tsx   # Status badge component

/app/
  ├── layout.tsx         # Root layout with Figtree font
  ├── page.tsx           # Dashboard with logo usage
  └── globals.css        # Design tokens and styles

/BRANDING_GUIDE.md       # This file
```

## Best Practices

### Logo Usage
- Always maintain aspect ratio
- Use minimum 24px height for readability
- Include adequate spacing around logo
- Don't distort or stretch the logo

### Color Usage
- Use semantic colors for status indicators
- Primary color for active/interactive elements
- Muted text for secondary information
- Maintain sufficient contrast for accessibility

### Typography
- Use Figtree for all text
- Maintain consistent heading hierarchy
- Use proper font weights (400 for body, 600+ for headings)
- Line-height: 1.5 for readability

### Icons
- Always add alt text for image-based icons
- Use semantic icon names (Activity, Users, etc.)
- Maintain consistent icon sizing
- Don't mix different icon styles

## Customization

### Changing Colors
Edit `app/globals.css` to update color tokens:
```css
@theme inline {
  --medix-primary: #NEW_COLOR;
}
```

### Adding Logo Variants
Place alternate logo files in `/public/` and reference in components:
```tsx
<Image src="/logo-white.svg" alt="Logo" ... />
```

### Font Customization
Update `app/layout.tsx`:
```tsx
const figtree = Figtree({
  variable: '--font-figtree',
  weight: ['400', '500', '600', '700']
})
```

## Accessibility

- All text elements use semantic HTML
- Color is not the only indicator (text + color for status)
- Images have descriptive alt text
- Navigation is keyboard accessible
- Proper contrast ratios maintained (WCAG AA)

## Version History

- **v1.0** - Initial MEDIX design system implementation
  - VectorMedix logo added
  - All emojis removed
  - Color tokens created
  - Figtree font implemented

## Support

For questions about branding guidelines or logo usage, refer to:
- MEDIX_DESIGN.md - Overall design system
- globals.css - Technical implementation
- components/ - Component examples