#2 Epic: Complete UI/UX & Visual Identity Refactor

Summary

Perform a complete redesign of Lunare's visual identity and user experience.

The goal is to establish a cohesive, modern, and recognizable design language that positions Lunare as a premium self-hosted music server rather than just another web application.

This epic includes branding, design system, user interface, user experience, accessibility, responsiveness, and component standardization.

---

Motivation

The current interface is functional but lacks a unified visual identity.

As Lunare evolves, it should have a design that users immediately recognize, providing a polished and enjoyable experience across desktop, tablet, and mobile devices.

A consistent UI also simplifies future feature development.

---

Goals

• Create a unique visual identity.
• Improve usability.
• Improve accessibility.
• Improve responsiveness.
• Standardize every UI component.
• Build a reusable design system.
• Strengthen Lunare's branding.

---

Branding

Logo

• Finalize logo
• Create monochrome version
• Create dark/light variants
• Create SVG assets
• Create favicon
• Create PWA icon
• Create GitHub social banner

---

Color Palette

Define an official color system.

Example direction:

Primary

• Purple

Secondary

• Indigo

Accent

• Blue

Background

• Near-black

Surface

• Elevated dark cards

Semantic

• Success
• Warning
• Error
• Info

Every color must include multiple shades.

---

Typography

Define:

• Primary font
• Heading scale
• Body scale
• Monospace font
• Font weights
• Letter spacing

---

Design System

Create reusable components.

Examples:

• Button
• Icon Button
• Input
• Select
• Checkbox
• Radio
• Toggle
• Slider
• Modal
• Dialog
• Drawer
• Sidebar
• Navbar
• Tabs
• Cards
• Tables
• Toast
• Tooltip
• Dropdown
• Progress Bar
• Skeleton
• Avatar
• Badge
• Breadcrumb
• Empty States
• Loading States

Each component should have:

• Variants
• Sizes
• States
• Accessibility support

---

Layout

Redesign the application layout.

Goals:

• Cleaner spacing
• Better hierarchy
• Consistent padding
• Better navigation
• Adaptive sidebar
• Better mobile experience

---

Navigation

Improve navigation flow.

Examples:

• Persistent player
• Better sidebar organization
• Quick actions
• Keyboard shortcuts
• Command palette (future)

---

User Experience

Improve every interaction.

Examples:

• Better loading states
• Better empty states
• Better confirmation dialogs
• Better onboarding
• Better feedback after actions
• Better error messages
• Undo actions when possible

---

Music Experience

The application should feel like a modern music application.

Improve:

• Fullscreen player
• Mini player
• Queue visualization
• Album pages
• Artist pages
• Playlist pages
• Cover artwork presentation
• Playback animations

---

Motion

Introduce subtle animations.

Examples:

• Hover effects
• Card transitions
• Sidebar animation
• Player transitions
• Page transitions
• Queue animation

Animations should be smooth and minimal.

---

Accessibility

Support:

• Keyboard navigation
• Focus indicators
• Screen readers
• High contrast
• Reduced motion
• Proper ARIA attributes

---

Responsiveness

Support:

• Desktop
• Laptop
• Tablet
• Mobile

No feature should become unusable on smaller screens.

---

Icons

Choose a single icon library and standardize it across the project.

All icons should follow the same visual language.

---

Dashboard

Redesign:

• Statistics cards
• Recent activity
• Active downloads
• Queue overview
• Storage usage
• System health

---

Library

Improve:

• Album grid
• Artist pages
• Track list
• Filters
• Search
• Sorting
• Artwork presentation

---

Downloads

Improve:

• Queue visualization
• Progress bars
• Download history
• Error states
• Retry actions

---

Settings

Organize settings into categories.

Examples:

• General
• Library
• Downloads
• Metadata
• Integrations
• Security
• Appearance
• Language

---

Empty States

Create custom empty states for every module.

Include:

• Illustration
• Message
• Call to action

---

Notifications

Standardize:

• Toasts
• Success
• Errors
• Warnings
• Information

---

Acceptance Criteria

• New visual identity implemented.
• Complete design system created.
• Consistent color palette across the application.
• Responsive layouts for all supported devices.
• Improved accessibility.
• Modernized player experience.
• Standardized components.
• Improved navigation and usability.
• Consistent spacing, typography and iconography.
• Updated screenshots and branding assets.

---

Inspiration

The redesign should take inspiration from the overall quality and polish of applications such as:

• Immich
• Linear
• Arc Browser
• Apple Music
• Spotify
• CasaOS

The objective is not to copy these interfaces, but to achieve a similar level of consistency, polish, usability, and attention to detail while maintaining Lunare's own visual identity.