streamflow/docs/LOGO_GUIDE.md

# StreamFlow Logo & PWA Icons

## 🎨 Brand Colors

**Primary Gradient:**
- Start: `#a855f7` (Purple)
- End: `#3b82f6` (Blue)

**Theme Colors:**
- Light Mode Primary: `#a855f7`
- Dark Mode Primary: `#a855f7`
- Secondary: `#3b82f6`

---

## 📱 PWA Icons (Rounded)

All icons feature rounded corners for modern PWA aesthetics:

### Available Sizes (SVG)
- ✅ 72x72 (rounded: 16px)
- ✅ 96x96 (rounded: 21px)
- ✅ 128x128 (rounded: 28px)
- ✅ 144x144 (rounded: 32px)
- ✅ 152x152 (rounded: 34px)
- ✅ 192x192 (rounded: 42px)
- ✅ 384x384 (rounded: 84px)
- ✅ 512x512 (rounded: 112px)

**Location:** `/frontend/public/icons/icon-{size}.svg`

**Format:** SVG with purple-blue gradient background, white play button with flow lines

---

## 🖼️ Icon Features

1. **Gradient Background** - Purple to blue diagonal gradient
2. **Play Button** - Clean white triangle (95% opacity)
3. **Flow Lines** - Dynamic curved lines suggesting streaming motion (40% opacity)
4. **Rounded Corners** - Approximately 22% radius of total size
5. **Maskable** - Safe zone for all platform icon cropping

---

## 🌐 Web App Usage

### Favicon
- **File:** `/frontend/public/favicon.svg`
- **Size:** 32x32px
- **Type:** SVG
- **Usage:** Browser tab icon

### Manifest Icons
All icons referenced in `/frontend/public/manifest.json`:
```json
{
  "icons": [
    {
      "src": "/icons/icon-192x192.svg",
      "sizes": "192x192",
      "type": "image/svg+xml",
      "purpose": "any maskable"
    }
  ]
}
```

### HTML Meta Tags
```html
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<link rel="apple-touch-icon" href="/icons/icon-192x192.svg" />
<meta name="theme-color" content="#a855f7" />
```

---

## 📦 Android APK Icons

For Android builds (Capacitor/Cordova):

### Resource Directories
```
android/app/src/main/res/
├── mipmap-mdpi/ic_launcher.png (48x48)
├── mipmap-hdpi/ic_launcher.png (72x72)
├── mipmap-xhdpi/ic_launcher.png (96x96)
├── mipmap-xxhdpi/ic_launcher.png (144x144)
├── mipmap-xxxhdpi/ic_launcher.png (192x192)
└── mipmap-anydpi-v26/ic_launcher.xml (adaptive)
```

### Adaptive Icon (Android 8+)
Uses rounded SVG icons with safe zone for various launcher shapes.

**Conversion Command:**
```bash
# Install ImageMagick or use online converter
for size in 72 96 144 192; do
  inkscape -w $size -h $size \
    frontend/public/icons/icon-${size}x${size}.svg \
    -o android/res/mipmap-*/ic_launcher.png
done
```

---

## 🐧 Linux AppImage Icons

For Electron AppImage builds:

### Icon Path
**Source:** `/frontend/public/icons/icon-512x512.svg`

**Electron Config:**
```json
{
  "build": {
    "linux": {
      "icon": "frontend/public/icons/icon-512x512.svg",
      "category": "AudioVideo"
    }
  }
}
```

### Desktop Entry
```ini
[Desktop Entry]
Name=StreamFlow
Exec=streamflow
Icon=streamflow
Type=Application
Categories=AudioVideo;Video;Player;
```

---

## 🔐 2FA / Security Icons

For future 2FA implementation:

### Logo Component
**File:** `/frontend/src/components/Logo.jsx`

**Usage:**
```jsx
import Logo from './components/Logo';

// In component
<Logo size={64} />  // 2FA QR code header
<Logo size={40} />  // Sidebar
<Logo size={32} />  // Notification icon
```

### 2FA Badge Icon
Can overlay small shield icon on Logo component for security contexts.

---

## 🎭 Logo Variations

### Current Implementation
- **Main Logo:** Gradient play button with flow lines
- **Favicon:** Simplified 32x32 version
- **Component:** React component with dynamic sizing

### Future Variants (if needed)
- **Monochrome:** White version for dark backgrounds
- **Outline:** Line-only version for minimal contexts
- **Badge:** Small circular variant without text

---

## 📐 Design Specifications

### Play Button
- **Position:** Centered
- **Triangle Points:** Left-aligned, pointing right
- **Fill:** White (#ffffff) at 95% opacity

### Flow Lines
- **Style:** Curved bezier paths
- **Stroke:** White 2-4px (scales with size)
- **Opacity:** 40%
- **Purpose:** Suggest streaming/flow motion

### Corner Radius
- Formula: `size * 0.22` (22% of icon size)
- Examples:
  - 72px → 16px radius
  - 192px → 42px radius
  - 512px → 112px radius

---

## 🚀 Quick Commands

### View Icons
```bash
# Open all icons in browser
cd frontend/public/icons
python3 -m http.server 8080
# Visit: http://localhost:8080
```

### Validate PWA Icons
```bash
# Check manifest
cat frontend/public/manifest.json | jq .icons

# Test with Lighthouse
lighthouse http://localhost:12345 --view
```

### Generate PNG from SVG (if needed)
```bash
# Install rsvg-convert
sudo apt install librsvg2-bin

# Convert all sizes
for svg in frontend/public/icons/*.svg; do
  png="${svg%.svg}.png"
  rsvg-convert "$svg" -o "$png"
done
```

---

## ✅ Checklist

**PWA Setup:**
- [x] SVG icons created (8 sizes)
- [x] Rounded corners applied
- [x] Manifest.json updated
- [x] Favicon created
- [x] HTML meta tags updated
- [x] Theme colors updated to purple-blue
- [x] Logo component created

**Android APK (Future):**
- [ ] Convert SVG to PNG for mipmap directories
- [ ] Create adaptive icon XML
- [ ] Test on various Android launchers
- [ ] Verify safe zone compliance

**Linux AppImage (Future):**
- [ ] Set icon path in electron-builder config
- [ ] Generate .desktop file
- [ ] Test icon on Ubuntu/Fedora/Arch
- [ ] Verify system tray icon

**2FA Integration (Future):**
- [ ] Add Logo to 2FA setup page
- [ ] Create security badge variant
- [ ] Add to email templates
- [ ] Include in authenticator app QR codes

---

## 🎨 Color Palette Reference

```css
/* CSS Variables for Brand Colors */
:root {
  --purple-500: #a855f7;
  --purple-400: #c084fc;
  --purple-600: #9333ea;
  --blue-500: #3b82f6;
  --blue-400: #60a5fa;
  --blue-600: #2563eb;
}

/* Gradient */
background: linear-gradient(135deg, #a855f7 0%, #3b82f6 100%);
```

---

## 📱 Platform-Specific Notes

### iOS Safari
- Uses `apple-touch-icon` meta tag
- Recommended: 180x180 PNG (use 192x192 SVG)
- Background color from manifest.json

### Android Chrome
- Uses manifest.json icons
- Supports maskable icons (all icons have `purpose: "any maskable"`)
- Adaptive to device launcher style

### Desktop PWA
- Uses largest available icon (512x512)
- SVG format ensures crisp rendering at any scale
- Favicon used for browser tab

### Electron/AppImage
- Linux: 512x512 recommended
- Windows: .ico format (multi-resolution)
- macOS: .icns format (if needed)

---

## 🔄 Updates & Maintenance

### Changing Logo Colors
Edit gradient stops in all SVG files:
```xml
<linearGradient id="grad1">
  <stop offset="0%" style="stop-color:#NEW_COLOR_1" />
  <stop offset="100%" style="stop-color:#NEW_COLOR_2" />
</linearGradient>
```

### Adjusting Corner Radius
Update `rx` attribute in `<rect>` elements:
```xml
<rect width="192" height="192" rx="42" fill="url(#grad1)"/>
```

### Version Control
When updating logo:
1. Update all SVG files in `/frontend/public/icons/`
2. Update `favicon.svg`
3. Update `Logo.jsx` component
4. Increment `CACHE_NAME` in `service-worker.js`
5. Update manifest.json if needed

---

**Logo Status:** ✅ Production Ready  
**Last Updated:** December 10, 2025  
**Format:** SVG (Scalable Vector Graphics)  
**License:** Proprietary (StreamFlow IPTV Application)