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:

{
  "icons": [
    {
      "src": "/icons/icon-192x192.svg",
      "sizes": "192x192",
      "type": "image/svg+xml",
      "purpose": "any maskable"
    }
  ]
}

HTML Meta Tags

<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:

# 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:

{
  "build": {
    "linux": {
      "icon": "frontend/public/icons/icon-512x512.svg",
      "category": "AudioVideo"
    }
  }
}

Desktop Entry

[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:

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

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

Validate PWA Icons

# Check manifest
cat frontend/public/manifest.json | jq .icons

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

Generate PNG from SVG (if needed)

# 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:

• SVG icons created (8 sizes)
• Rounded corners applied
• Manifest.json updated
• Favicon created
• HTML meta tags updated
• Theme colors updated to purple-blue
• 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 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:

<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:

<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)