Design Philosophy

Design Philosophy

Supernova isn't meant to look like an old-school data table. It aims to compete aesthetically with top-tier commercial streaming platforms.

Core Directives

1. Absolute Glassmorphism

   • MANDATORY: The UI MUST heavily utilize glassmorphism. This means backdrop filters (backdrop-filter: blur()), semi-transparent overlays (rgba()), and softly glowing borders.
   • We strictly avoid flat, opaque, or generic color palettes (e.g., standard red/blue/green). Instead, UI elements must dynamically theme themselves to the dominant colors of the currently playing album artwork, shining through the glass layers.

2. Dynamic UI & Micro-animations

   • Hover States: Every interactive element (buttons, track rows, sidebar links) must provide immediate, smooth visual feedback using CSS transitions (e.g. transform: scale(1.05), background color shifts).
   • Context Menus: Native browser alert() or confirm() dialogs are strictly prohibited. The app uses custom Toast providers for notifications and highly styled viewport-aware right-click context menus.

3. Typography

   • Clean, modern, sans-serif typography (like Inter, Roboto, or Outfit) is enforced. Default browser fonts are unacceptable. Font weights should be manipulated to create clear hierarchies (e.g., bold track titles, muted artist text).

4. The Fullscreen Experience

   • When the user enables Fullscreen mode, the application transcends the typical web page. It uses the native browser Fullscreen API and React Portals to render entirely outside the standard DOM flow, maximizing screen real estate for album art and synchronized lyrics.

5. Responsiveness without Clutter

   • Mobile and desktop users should get a tailored experience. The layout must use Flexbox/CSS Grid to reflow gracefully.
   • Interactive elements like "Play" or "Heart" buttons inside a tracklist row remain hidden until hovered, reducing visual clutter.