# MediaVerse — UX/UI Design System ## 1. Design Philosophy ### Core Principles 1. **Clarity First**: Every element serves a purpose. No decorative noise. 2. **Efficiency**: Power users should feel at home. Keyboard shortcuts everywhere. 3. **Delight**: Micro-interactions that make the experience memorable. 4. **Adaptability**: Works beautifully from 13" laptops to ultrawide monitors. 5. **Accessibility**: WCAG 2.1 AA compliance as baseline. ### Design Personality - **Professional but approachable**: Not corporate, not playful—confident - **Content-forward**: Media is the hero, UI gets out of the way - **Responsive feedback**: Every action has a clear reaction - **Progressive disclosure**: Simple by default, powerful when needed --- ## 2. Design Tokens ### 2.1 Color System #### Primary Palette | Token | Light Mode | Dark Mode | Usage | |-------|------------|-----------|-------| | `--color-primary-50` | `#eff6ff` | `#1e3a5f` | Light backgrounds | | `--color-primary-100` | `#dbeafe` | `#1e4a7c` | Hover states | | `--color-primary-200` | `#bfdbfe` | `#2563ab` | Borders | | `--color-primary-300` | `#93c5fd` | `#3b82d6` | Secondary accents | | `--color-primary-400` | `#60a5fa` | `#60a5fa` | Interactive elements | | `--color-primary-500` | `#3b82f6` | `#93c5fd` | Primary actions | | `--color-primary-600` | `#2563eb` | `#bfdbfe` | Active states | | `--color-primary-700` | `#1d4ed8` | `#dbeafe` | Text emphasis | | `--color-primary-800` | `#1e40af` | `#eff6ff` | Headings | | `--color-primary-900` | `#1e3a8a` | `#ffffff` | High contrast | #### Surface Colors | Token | Light Mode | Dark Mode | Usage | |-------|------------|-----------|-------| | `--color-bg-primary` | `#ffffff` | `#0a0a0a` | Main background | | `--color-bg-secondary` | `#fafafa` | `#141414` | Card backgrounds | | `--color-bg-tertiary` | `#f5f5f5` | `#1a1a1a` | Elevated surfaces | | `--color-bg-elevated` | `#ffffff` | `#1f1f1f` | Modals, popovers | | `--color-border` | `#e5e5e5` | `#2a2a2a` | Borders | | `--color-border-hover` | `#d4d4d4` | `#3a3a3a` | Hover borders | | `--color-text-primary` | `#171717` | `#fafafa` | Primary text | | `--color-text-secondary` | `#737373` | `#a3a3a3` | Secondary text | | `--color-text-tertiary` | `#a3a3a3` | `#737373` | Tertiary text | #### Semantic Colors | Token | Value | Usage | |-------|-------|-------| | `--color-success` | `#22c55e` | Success states | | `--color-success-bg` | `#dcfce7` | Success backgrounds | | `--color-warning` | `#f59e0b` | Warnings | | `--color-warning-bg` | `#fef3c7` | Warning backgrounds | | `--color-error` | `#ef4444` | Errors | | `--color-error-bg` | `#fee2e2` | Error backgrounds | | `--color-info` | `#3b82f6` | Information | | `--color-info-bg` | `#dbeafe` | Info backgrounds | ### 2.2 Typography #### Font Stack ```css --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-mono: 'JetBrains Mono', 'Fira Code', Consolas, monospace; --font-display: 'Inter', sans-serif; /* For headings */ ``` #### Type Scale | Token | Size | Line Height | Weight | Usage | |-------|------|-------------|--------|-------| | `--text-xs` | 12px | 16px | 400 | Captions, timestamps | | `--text-sm` | 14px | 20px | 400 | Secondary text | | `--text-base` | 16px | 24px | 400 | Body text | | `--text-lg` | 18px | 28px | 400 | Large body | | `--text-xl` | 20px | 28px | 500 | Subheadings | | `--text-2xl` | 24px | 32px | 600 | Section titles | | `--text-3xl` | 30px | 36px | 600 | Page titles | | `--text-4xl` | 36px | 40px | 700 | Hero text | #### Font Weights | Token | Value | Usage | |-------|-------|-------| | `--font-normal` | 400 | Body text | | `--font-medium` | 500 | Emphasis, labels | | `--font-semibold` | 600 | Headings, buttons | | `--font-bold` | 700 | Strong emphasis | ### 2.3 Spacing Scale | Token | Value | Usage | |-------|-------|-------| | `--space-0` | 0 | None | | `--space-1` | 4px | Tight spacing | | `--space-2` | 8px | Compact elements | | `--space-3` | 12px | Default padding | | `--space-4` | 16px | Standard spacing | | `--space-5` | 20px | Medium gaps | | `--space-6` | 24px | Section padding | | `--space-8` | 32px | Large gaps | | `--space-10` | 40px | Section margins | | `--space-12` | 48px | Major sections | | `--space-16` | 64px | Page sections | ### 2.4 Border Radius | Token | Value | Usage | |-------|-------|-------| | `--radius-none` | 0 | Sharp corners | | `--radius-sm` | 4px | Small elements | | `--radius-md` | 6px | Buttons, inputs | | `--radius-lg` | 8px | Cards, panels | | `--radius-xl` | 12px | Large cards | | `--radius-2xl` | 16px | Modals | | `--radius-full` | 9999px | Pills, avatars | ### 2.5 Shadows | Token | Light Mode | Dark Mode | Usage | |-------|------------|-----------|-------| | `--shadow-sm` | `0 1px 2px rgba(0,0,0,0.05)` | `0 1px 2px rgba(0,0,0,0.3)` | Subtle elevation | | `--shadow-md` | `0 4px 6px -1px rgba(0,0,0,0.1)` | `0 4px 6px -1px rgba(0,0,0,0.4)` | Cards, dropdowns | | `--shadow-lg` | `0 10px 15px -3px rgba(0,0,0,0.1)` | `0 10px 15px -3px rgba(0,0,0,0.5)` | Modals, popovers | | `--shadow-xl` | `0 20px 25px -5px rgba(0,0,0,0.1)` | `0 20px 25px -5px rgba(0,0,0,0.6)` | Overlays | ### 2.6 Motion #### Duration | Token | Value | Usage | |-------|-------|-------| | `--duration-instant` | 0ms | No animation | | `--duration-fast` | 100ms | Micro-interactions | | `--duration-normal` | 200ms | Standard transitions | | `--duration-slow` | 300ms | Complex animations | | `--duration-slower` | 500ms | Page transitions | #### Easing | Token | Value | Usage | |-------|-------|-------| | `--ease-linear` | `linear` | Continuous motion | | `--ease-in` | `cubic-bezier(0.4, 0, 1, 1)` | Entering | | `--ease-out` | `cubic-bezier(0, 0, 0.2, 1)` | Exiting | | `--ease-in-out` | `cubic-bezier(0.4, 0, 0.2, 1)` | Standard | | `--ease-spring` | `cubic-bezier(0.34, 1.56, 0.64, 1)` | Bouncy | --- ## 3. Component Library ### 3.1 Buttons #### Variants ``` ┌─────────────────────────────────────────────────────────────┐ │ Primary Button │ │ ┌─────────────────────────────────────────────────────┐ │ │ │ [▶ Download] [⬇ Downloading...] [✓ Downloaded] │ │ │ │ bg: primary-500 bg: primary-400 bg: success │ │ │ │ text: white text: white text: white │ │ │ │ hover: primary-600 cursor: wait icon: check │ │ │ └─────────────────────────────────────────────────────┘ │ │ │ │ Secondary Button │ │ ┌─────────────────────────────────────────────────────┐ │ │ │ [Cancel] [Learn More →] │ │ │ │ bg: transparent bg: transparent │ │ │ │ border: border text: primary │ │ │ │ hover: bg-secondary hover: underline │ │ │ └─────────────────────────────────────────────────────┘ │ │ │ │ Ghost Button │ │ ┌─────────────────────────────────────────────────────┐ │ │ │ [⚙️] [🗑️] [✏️] │ │ │ │ bg: transparent │ │ │ │ hover: bg-secondary │ │ │ │ size: icon-only │ │ │ └─────────────────────────────────────────────────────┘ │ │ │ │ Destructive Button │ │ ┌─────────────────────────────────────────────────────┐ │ │ │ [Delete] [Remove from Library] │ │ │ │ bg: error-500 bg: transparent │ │ │ │ hover: error-600 text: error │ │ │ └─────────────────────────────────────────────────────┘ │ └─────────────────────────────────────────────────────────────┘ ``` #### Button Specifications | Property | Value | |----------|-------| | Height | 36px (sm), 40px (md), 48px (lg) | | Padding | 12px 16px (sm), 16px 20px (md), 20px 24px (lg) | | Border Radius | `--radius-md` (6px) | | Font Size | `--text-sm` (sm), `--text-base` (md, lg) | | Font Weight | `--font-medium` (500) | | Icon Size | 16px (sm), 20px (md, lg) | | Icon Gap | 8px | ### 3.2 Inputs ``` ┌─────────────────────────────────────────────────────────────┐ │ Text Input │ │ ┌─────────────────────────────────────────────────────┐ │ │ │ Label │ │ │ │ ┌───────────────────────────────────────────────┐ │ │ │ │ │ 🔗 https://youtube.com/watch?v=... │ │ │ │ │ └───────────────────────────────────────────────┘ │ │ │ │ Helper text or error message │ │ │ └─────────────────────────────────────────────────────┘ │ │ │ │ States: │ │ • Default: border-gray-300 │ │ • Focus: border-primary-500, ring-2 ring-primary-200 │ │ • Error: border-error-500, text-error-500 │ │ • Disabled: bg-gray-100, text-gray-400 │ │ │ │ Search Input │ │ ┌─────────────────────────────────────────────────────┐ │ │ │ ┌───────────────────────────────────────────────┐ │ │ │ │ │ 🔍 Search your library... │ │ │ │ │ └───────────────────────────────────────────────┘ │ │ │ └─────────────────────────────────────────────────────┘ │ │ │ │ With clear button and shortcuts: │ │ ┌─────────────────────────────────────────────────────┐ │ │ │ ┌───────────────────────────────────────────────┐ │ │ │ │ │ 🔍 tutorial lighting [⌘K] [✕] │ │ │ │ │ └───────────────────────────────────────────────┘ │ │ │ └─────────────────────────────────────────────────────┘ │ └─────────────────────────────────────────────────────────────┘ ``` ### 3.3 Cards ``` ┌─────────────────────────────────────────────────────────────┐ │ Media Card │ │ ┌─────────────────────────────────────────────────────┐ │ │ │ ┌─────────────────────────────────────────────┐ │ │ │ │ │ │ │ │ │ │ │ [Thumbnail] │ │ │ │ │ │ 16:9 aspect │ │ │ │ │ │ ▶ (on hover) │ │ │ │ │ │ │ │ │ │ │ │ ┌─────────────────────────────────────┐ │ │ │ │ │ │ │ 12:34 │ 1080p │ │ │ │ │ │ │ │ └─────────────────────────────────────┘ │ │ │ │ │ └─────────────────────────────────────────────┘ │ │ │ │ │ │ │ │ Title of the Video Goes Here... │ │ │ │ Channel Name • 2.3M views • 2 days ago │ │ │ │ │ │ │ │ [#tag1] [#tag2] │ │ │ └─────────────────────────────────────────────────────┘ │ │ │ │ Hover: shadow-md, scale(1.02) │ │ Selected: ring-2 ring-primary-500 │ └─────────────────────────────────────────────────────────────┘ ``` #### Card Specifications | Property | Value | |----------|-------| | Background | `--color-bg-secondary` | | Border Radius | `--radius-lg` (8px) | | Shadow | `--shadow-sm` (default), `--shadow-md` (hover) | | Transition | `transform 200ms ease-out, box-shadow 200ms ease-out` | | Thumbnail Ratio | 16:9 | | Padding | 0 (image), 12px (content) | ### 3.4 Lists ``` ┌─────────────────────────────────────────────────────────────┐ │ Download List Item │ │ ┌─────────────────────────────────────────────────────┐ │ │ │ ┌────┐ Title of Download │ │ │ │ │ 🖼️ │ youtube.com • 45% • 2.3 MB/s │ │ │ │ └────┘ ████████████████░░░░░░░░░░░░░░░░░░░░░░ │ │ │ │ │ │ │ │ [⏸️] [⏹️] [⏏️] 2:34 ETA │ │ │ └─────────────────────────────────────────────────────┘ │ │ │ │ Media List Item │ │ ┌─────────────────────────────────────────────────────┐ │ │ │ ┌────┐ Title │ │ │ │ │ 🖼️ │ 12:34 • 1080p • MP4 • 234 MB │ │ │ │ └────┘ [#tutorial] [#youtube] │ │ │ │ │ │ │ │ [▶️] [⭐] [📁] [🏷️] [⋯] │ │ │ └─────────────────────────────────────────────────────┘ │ └─────────────────────────────────────────────────────────────┘ ``` ### 3.5 Modals & Dialogs ``` ┌─────────────────────────────────────────────────────────────┐ │ Confirmation Dialog │ │ ┌─────────────────────────────────────────────────────┐ │ │ │ │ │ │ │ ┌─────────────┐ │ │ │ │ │ ⚠️ │ │ │ │ │ └─────────────┘ │ │ │ │ │ │ │ │ Delete this download? │ │ │ │ │ │ │ │ "Tutorial: Advanced Lighting" │ │ │ │ will be moved to trash. │ │ │ │ │ │ │ │ [Cancel] [Delete] │ │ │ │ │ │ │ └─────────────────────────────────────────────────────┘ │ │ │ │ Backdrop: bg-black/50 │ │ Animation: scale(0.95) → scale(1), opacity 0 → 1 │ │ Duration: 200ms ease-out │ └─────────────────────────────────────────────────────────────┘ ``` ### 3.6 Navigation ``` ┌─────────────────────────────────────────────────────────────┐ │ Sidebar Navigation │ │ ┌─────────────────────────────────────────────────────┐ │ │ │ 📁 Library │ │ │ │ ├─ 📂 All Media │ │ │ │ ├─ 🎬 Videos │ │ │ │ ├─ 🎵 Audio │ │ │ │ └─ 🖼️ Images │ │ │ │ │ │ │ │ ───────────────────── │ │ │ │ │ │ │ │ 📂 Folders │ │ │ │ ├─ 📂 Work │ │ │ │ │ └─ 📂 Projects │ │ │ │ └─ 📂 Personal │ │ │ │ │ │ │ │ ───────────────────── │ │ │ │ │ │ │ │ ⭐ Collections │ │ │ │ ├─ ⭐ Favorites │ │ │ │ ├─ ⏱️ Recently Added │ │ │ │ └─ 📥 Downloads │ │ │ │ │ │ │ │ ───────────────────── │ │ │ │ │ │ │ │ ⚙️ Automation │ │ │ │ ⚙️ Settings │ │ │ └─────────────────────────────────────────────────────┘ │ │ │ │ Width: 240px │ │ Background: --color-bg-secondary │ │ Border-right: 1px solid --color-border │ └─────────────────────────────────────────────────────────────┘ ``` ### 3.7 Player Controls ``` ┌─────────────────────────────────────────────────────────────┐ │ Video Player Controls │ │ ┌─────────────────────────────────────────────────────┐ │ │ │ │ │ │ │ [Video Content Area] │ │ │ │ │ │ │ │ ┌─────────────────────────────────────────────┐ │ │ │ │ │ │ │ │ │ │ │ ──────────────────────────────────────── │ │ │ │ │ │ ●──────⚪────────────────────────── 12:34 │ │ │ │ │ │ │ │ │ │ │ │ [⏮️] [⏪] [⏯️] [⏩] [⏭️] [🔊──] [⛶] [⚙️] │ │ │ │ │ │ │ │ │ │ │ └─────────────────────────────────────────────┘ │ │ │ │ │ │ │ └─────────────────────────────────────────────────────┘ │ │ │ │ Controls fade out after 3s of inactivity │ │ Show on mouse movement or keyboard interaction │ └─────────────────────────────────────────────────────────────┘ ``` --- ## 4. Layout System ### 4.1 Grid System ``` ┌─────────────────────────────────────────────────────────────┐ │ 12-Column Grid │ ├─────────────────────────────────────────────────────────────┤ │ │ │ ┌─────────────────────────────────────────────────────┐ │ │ │ ┌────┐ ┌────┐ ┌────┐ ┌────┐ ┌────┐ ┌────┐ │ │ │ │ │ 1 │ │ 2 │ │ 3 │ │ 4 │ │ 5 │ │ 6 │ │ │ │ │ └────┘ └────┘ └────┘ └────┘ └────┘ └────┘ │ │ │ │ ┌────┐ ┌────┐ ┌────┐ ┌────┐ ┌────┐ ┌────┐ │ │ │ │ │ 7 │ │ 8 │ │ 9 │ │ 10 │ │ 11 │ │ 12 │ │ │ │ │ └────┘ └────┘ └────┘ └────┘ └────┘ └────┘ │ │ │ └─────────────────────────────────────────────────────┘ │ │ │ │ Gap: 16px (default), 24px (large screens) │ │ Max Width: 1920px │ │ Padding: 16px (mobile), 24px (tablet), 32px (desktop) │ │ │ └─────────────────────────────────────────────────────────────┘ ``` ### 4.2 Responsive Breakpoints | Breakpoint | Width | Columns | Card Size | |------------|-------|---------|-----------| | Mobile | < 640px | 1-2 | Full width | | Tablet | 640-1024px | 2-3 | 50% width | | Desktop | 1024-1440px | 3-4 | 33% width | | Wide | 1440-1920px | 4-5 | 25% width | | Ultrawide | > 1920px | 5-6 | 20% width | ### 4.3 Layout Patterns #### Main Layout ``` ┌─────────────────────────────────────────────────────────────┐ │ Header (64px) │ │ ┌─────────────────────────────────────────────────────┐ │ │ │ [Logo] [Search Bar] [Downloads] [👤] │ │ │ └─────────────────────────────────────────────────────┘ │ ├──────────┬──────────────────────────────────────────────────┤ │ │ │ │ Sidebar │ Main Content │ │ (240px) │ │ │ │ ┌───────────────────────────────────────────┐ │ │ │ │ [Filter Bar] │ │ │ │ │ │ │ │ │ │ ┌─────┐ ┌─────┐ ┌─────┐ ┌─────┐ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ └─────┘ └─────┘ └─────┘ └─────┘ │ │ │ │ │ │ │ │ │ │ ┌─────┐ ┌─────┐ ┌─────┐ ┌─────┐ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ └─────┘ └─────┘ └─────┘ └─────┘ │ │ │ │ │ │ │ │ │ └───────────────────────────────────────────┘ │ │ │ │ │ │ │ ├──────────┴──────────────────────────────────────────────────┤ │ Player Bar (72px, when active) │ │ ┌─────────────────────────────────────────────────────┐ │ │ │ [Thumbnail] Title - Artist [⏮️] [⏯️] [⏭️] [🔊] │ │ │ └─────────────────────────────────────────────────────┘ │ └─────────────────────────────────────────────────────────────┘ ``` --- ## 5. Motion System ### 5.1 Micro-interactions | Element | Trigger | Animation | |---------|---------|-----------| | Button | Hover | `scale(1.02)`, shadow increase | | Button | Active | `scale(0.98)` | | Card | Hover | `translateY(-4px)`, shadow increase | | Input | Focus | Border color change, ring appear | | Checkbox | Check | Scale bounce `0.8 → 1.1 → 1` | | Toast | Enter | Slide in from right + fade | | Toast | Exit | Fade out + slide up | | Modal | Open | Scale + fade | | Modal | Close | Scale down + fade | | List Item | Add | Slide in from left | | List Item | Remove | Slide out to right | ### 5.2 Page Transitions ```typescript // Page transition variants const pageVariants = { initial: { opacity: 0, y: 20 }, animate: { opacity: 1, y: 0, transition: { duration: 0.3, ease: [0.4, 0, 0.2, 1] } }, exit: { opacity: 0, y: -20, transition: { duration: 0.2 } } }; // Stagger children const containerVariants = { animate: { transition: { staggerChildren: 0.05 } } }; const itemVariants = { initial: { opacity: 0, y: 20 }, animate: { opacity: 1, y: 0, transition: { duration: 0.3, ease: [0.4, 0, 0.2, 1] } } }; ``` ### 5.3 Loading States ``` ┌─────────────────────────────────────────────────────────────┐ │ Skeleton Loading │ │ ┌─────────────────────────────────────────────────────┐ │ │ │ ┌─────────────────────────────────────────────┐ │ │ │ │ │ ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ │ │ │ │ │ │ ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ │ │ │ │ │ │ ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ │ │ │ │ │ └─────────────────────────────────────────────┘ │ │ │ │ │ │ │ │ ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ │ │ │ │ ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ │ │ │ └─────────────────────────────────────────────────────┘ │ │ │ │ Animation: shimmer gradient from left to right │ │ Duration: 1.5s infinite │ └─────────────────────────────────────────────────────────────┘ ``` --- ## 6. Screen Designs ### 6.1 Desktop Screens #### Library View (Default) ``` ┌─────────────────────────────────────────────────────────────────────────────┐ │ MediaVerse [🔍 Search...] [⬇️] [👤] │ ├──────────────┬──────────────────────────────────────────────────────────────┤ │ │ [All ▼] [Sort: Date Added ▼] [Grid ▦] [List ☰] │ │ 📁 Library │ │ │ All Media │ ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐ │ │ Videos │ │ ▶️ │ │ ▶️ │ │ ▶️ │ │ ▶️ │ │ │ Audio │ │ │ │ │ │ │ │ │ │ │ Images │ │ │ │ │ │ │ │ │ │ │ │ │ 12:34 1080│ │ 45:23 4K │ │ 8:45 720 │ │ 2:34:56 │ │ │ ─────────── │ └──────────┘ └──────────┘ └──────────┘ └──────────┘ │ │ │ Title One Title Two Title Three Title Four │ │ 📂 Folders │ Channel A Channel B Channel C Channel D │ │ Work │ 2.3M views 1.1M views 890K views 2.1M views │ │ Personal │ 2 days ago 1 week ago 3 days ago 1 month ago │ │ │ │ │ ─────────── │ ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐ │ │ │ │ ▶️ │ │ ▶️ │ │ ▶️ │ │ ▶️ │ │ │ ⭐ Collections│ │ │ │ │ │ │ │ │ │ │ Favorites │ │ │ │ │ │ │ │ │ │ │ Recent │ │ │ │ │ │ │ │ │ │ │ Downloads │ └──────────┘ └──────────┘ └──────────┘ └──────────┘ │ │ │ │ │ │ [1] [2] [3] ... [10] [Next →] │ │ │ │ ├──────────────┴──────────────────────────────────────────────────────────────┤ │ [🖼️] Now Playing: Title - Channel [⏮️] [⏯️] [⏭️] [🔊] │ └─────────────────────────────────────────────────────────────────────────────┘ ``` #### Download View ``` ┌─────────────────────────────────────────────────────────────────────────────┐ │ MediaVerse [🔍 Search...] [⬇️] [👤] │ ├──────────────┬──────────────────────────────────────────────────────────────┤ │ │ Downloads │ │ 📁 Library │ [➕ Add URL] [📋 Paste] [📁 Batch Import] │ │ │ │ │ ─────────── │ ┌─────────────────────────────────────────────────────────┐ │ │ │ │ ⏳ Downloading (3) │ │ │ ⬇️ Downloads│ ├─────────────────────────────────────────────────────────┤ │ │ │ │ │ │ │ ─────────── │ │ ┌────┐ Understanding Exposure... │ │ │ │ │ │ 🖼️ │ youtube.com • 45% • 2.3 MB/s │ │ │ │ │ └────┘ ████████████████████░░░░░░░░░░░░░░░░░░░░░░░░░░ │ │ │ │ │ [⏸️] [⏹️] [⏏️] 2:34 ETA │ │ │ │ │ │ │ │ │ │ ┌────┐ Advanced Color Grading... │ │ │ │ │ │ 🖼️ │ vimeo.com • 12% • 1.8 MB/s │ │ │ │ │ └────┘ ██████░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ │ │ │ │ │ [⏸️] [⏹️] [⏏️] 8:45 ETA │ │ │ │ │ │ │ │ │ │ ┌────┐ Cinematic Lighting Setup... │ │ │ │ │ │ 🖼️ │ youtube.com • 78% • 3.1 MB/s │ │ │ │ │ └────┘ ████████████████████████████████████████░░░░░░ │ │ │ │ │ [⏸️] [⏹️] [⏏️] 0:45 ETA │ │ │ │ │ │ │ │ │ └─────────────────────────────────────────────────────────┘ │ │ │ │ │ │ ┌─────────────────────────────────────────────────────────┐ │ │ │ │ ✓ Completed (12) │ │ │ │ ├─────────────────────────────────────────────────────────┤ │ │ │ │ ┌────┐ Composition Rules... [▶️] [🗑️] │ │ │ │ │ │ 🖼️ │ youtube.com • 12:34 • 1080p • 234 MB │ │ │ │ │ └────┘ Downloaded 2 hours ago │ │ │ │ └─────────────────────────────────────────────────────────┘ │ │ │ │ └──────────────┴──────────────────────────────────────────────────────────────┘ ``` #### Media Detail View ``` ┌─────────────────────────────────────────────────────────────────────────────┐ │ [← Back] Understanding Exposure Basics [✏️] [🗑️] │ ├─────────────────────────────────────────────────────────────────────────────┤ │ │ │ ┌─────────────────────────────────────────┐ ┌─────────────────────────┐ │ │ │ │ │ Metadata │ │ │ │ │ │ ─────────────────────── │ │ │ │ [Video Player] │ │ Duration: 12:34 │ │ │ │ │ │ Quality: 1080p │ │ │ │ ▶️ │ │ Size: 234 MB │ │ │ │ │ │ Format: MP4 │ │ │ │ │ │ Codec: H.264 │ │ │ │ │ │ │ │ │ │ [Progress Bar] │ │ Source │ │ │ │ │ │ ─────────────────────── │ │ │ │ [⏮️] [⏪] [⏯️] [⏩] [⏭️] │ │ Platform: YouTube │ │ │ │ │ │ Channel: PhotoMaster │ │ │ │ │ │ Uploaded: Jan 15, 2024 │ │ │ │ │ │ Views: 2.3M │ │ │ │ │ │ │ │ │ └─────────────────────────────────────────┘ │ Tags │ │ │ │ ─────────────────────── │ │ │ [▶️ Play] [➕ Add to Collection] [📤 Share] │ [#tutorial] [#photo] │ │ │ │ [#lighting] [#beginner]│ │ │ Description: │ │ │ │ Learn the fundamentals of exposure... │ Location │ │ │ │ ─────────────────────── │ │ │ [💬 Comments] [📋 Chapters] [🔗 Related] │ ~/MediaVerse/YouTube/ │ │ │ │ [Show in Folder] │ │ │ └─────────────────────────┘ │ │ │ └─────────────────────────────────────────────────────────────────────────────┘ ``` ### 6.2 Mobile Screens #### Mobile Library ``` ┌─────────────────────────────────────────┐ │ MediaVerse [🔍] [⬇️] [≡] │ ├─────────────────────────────────────────┤ │ │ │ [All ▼] [Sort ▼] [Grid ▦] │ │ │ │ ┌──────────┐ ┌──────────┐ │ │ │ ▶️ │ │ ▶️ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ 12:34 │ │ 45:23 │ │ │ └──────────┘ └──────────┘ │ │ Title One Title Two │ │ Channel A Channel B │ │ │ │ ┌──────────┐ ┌──────────┐ │ │ │ ▶️ │ │ ▶️ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ 8:45 │ │ 2:34:56 │ │ │ └──────────┘ └──────────┘ │ │ Title Three Title Four │ │ │ │ [Load More...] │ │ │ ├─────────────────────────────────────────┤ │ [🖼️] Title... [⏮️] [⏯️] [⏭️] │ └─────────────────────────────────────────┘ ``` #### Mobile Navigation (Bottom Sheet) ``` ┌─────────────────────────────────────────┐ │ ═══════════════════════════════════ │ │ │ │ 📁 Library │ │ ├─ All Media │ │ ├─ Videos │ │ ├─ Audio │ │ └─ Images │ │ │ │ 📂 Folders │ │ ├─ Work │ │ └─ Personal │ │ │ │ ⭐ Collections │ │ ├─ Favorites │ │ └─ Recent │ │ │ │ ───────────────────────────────────── │ │ │ │ ⚙️ Settings │ │ ❓ Help & Support │ │ │ └─────────────────────────────────────────┘ ``` --- ## 7. Dark Mode ### 7.1 Color Inversion Strategy | Light Mode | Dark Mode | Notes | |------------|-----------|-------| | Backgrounds | Invert | Light → Dark | | Text | Invert | Dark → Light | | Primary | Adjust | Keep hue, adjust lightness | | Borders | Lighten | Dark mode borders lighter | | Shadows | Remove/Reduce | Less shadow in dark mode | | Images | Preserve | Don't invert images | ### 7.2 Dark Mode Specifics ```css /* Dark mode adjustments */ [data-theme="dark"] { /* Reduce pure black */ --color-bg-primary: #0a0a0a; /* Elevated surfaces get lighter */ --color-bg-elevated: #1f1f1f; /* Borders are visible but subtle */ --color-border: #2a2a2a; /* Text has more contrast range */ --color-text-primary: #fafafa; --color-text-secondary: #a3a3a3; /* Shadows are softer */ --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.4); /* Primary colors are more saturated */ --color-primary-500: #60a5fa; } ``` --- ## 8. Accessibility ### 8.1 Color Contrast | Element | Minimum Ratio | Target | |---------|---------------|--------| | Normal text | 4.5:1 | 7:1 | | Large text | 3:1 | 4.5:1 | | UI components | 3:1 | 4.5:1 | ### 8.2 Focus Indicators ```css /* Visible focus states */ :focus-visible { outline: 2px solid var(--color-primary-500); outline-offset: 2px; } /* Skip link for keyboard users */ .skip-link { position: absolute; top: -40px; left: 0; background: var(--color-primary-500); color: white; padding: 8px; z-index: 100; } .skip-link:focus { top: 0; } ``` ### 8.3 Screen Reader Support - All interactive elements have accessible names - Status updates use `aria-live` regions - Modal dialogs trap focus - Skip navigation links provided - Semantic HTML structure --- ## 9. Icon System ### 9.1 Icon Library **Primary:** Lucide React (consistent, modern, tree-shakeable) | Category | Icons | |----------|-------| | Navigation | Home, Library, Folder, Settings | | Media | Play, Pause, Skip, Volume, Fullscreen | | Actions | Download, Upload, Share, Delete, Edit | | Status | Check, X, Alert, Info, Loading | | File | File, Image, Video, Audio, Document | ### 9.2 Icon Sizes | Size | Usage | |------|-------| | 16px | Inline with text, small buttons | | 20px | Buttons, list items | | 24px | Navigation, toolbars | | 32px | Feature illustrations | | 48px | Empty states | --- ## 10. Design Resources ### 10.1 Figma Structure ``` MediaVerse Design System ├── 📁 Foundations │ ├── Colors │ ├── Typography │ ├── Spacing │ └── Shadows ├── 📁 Components │ ├── Buttons │ ├── Inputs │ ├── Cards │ ├── Lists │ ├── Modals │ └── Navigation ├── 📁 Patterns │ ├── Layouts │ ├── Forms │ ├── Tables │ └── Empty States ├── 📁 Screens │ ├── Desktop │ ├── Tablet │ └── Mobile └── 📁 Prototypes ├── User Flows └── Interactions ``` --- *Document Version: 1.0* *Last Updated: 2026-05-27* *Owner: Design Team*