12 - UI/UX Design System & Visual Identity
Philosophy: Sublime Software for Music Creators
"A place where creators are treated with care and their product elevated to the highest levels — like clouds to the body."
WAVIC is not just a tool — it is a creative sanctuary. Every pixel, transition, and interaction should communicate that the user's music and creative process are treated with reverence. The design must feel sublime, inspiring, and cause delight — a space that empowers workflow while sparking creative energy.
1. Core Design Principles
1.1 The WOW Impact
Every screen must have a moment that makes the user pause and feel something. This is achieved through:
- 3D elements — the spinning CD/vinyl disc (Three.js GLTF) signals premium, tangible craftsmanship
- Backdrop blurs —
backdrop-blur-smtobackdrop-blur-lgcreate depth and focus layers - Adaptive gradients — colors extracted from the user's own artwork using ColorThief, making the interface feel personalized and alive
- Framer Motion choreography — entrance animations (
fade-in-up, scale transitions, staggered reveals) create a cinematic quality - Animated grid patterns — subtle SVG grids on creation pages evoke studio precision
1.2 Sublime Simplicity
The interface should feel effortless:
- One action per screen — onboarding walks through single-focused steps
- Progressive disclosure — complexity reveals itself only when needed
- Minimal chrome — the Beryllium layout removes sidebar noise; content breathes
- Monochrome-first palette — black, white, and gray let the user's content (album art, waveforms) be the visual hero
- Typography hierarchy — PPMonumentExtended for display/brand moments, Lexend for reading comfort
1.3 Empowered Workflow
Design should never slow down creation:
- Upload anywhere — global drag-and-drop accepts music, covers, and assets from any screen
- Keyboard-first interactions — Enter key advances onboarding, shortcuts throughout
- Contextual actions — floating action buttons (FAB) appear where relevant, not in menus
- Status at a glance — color-coded badges (7-stage workflow) communicate instantly
- Breadcrumb navigation — always know where you are: Artist → Project → Track
1.4 Lego Software (Notion-Style Adaptability)
The platform treats content as modular blocks:
- Attributes as records — track metadata (ISRC, UPC, genre, credits, release date) are structured fields that can be filled progressively
- Portals — slide-out drawers that overlay additional context without losing the current view
- Configurable layouts — 6 layout options (Beryllium, Hydrogen, Helium, Lithium, Boron, Carbon) let users choose their preferred workspace chrome
- Drag-and-drop reordering — tracks within projects can be rearranged by dragging
- Future: custom fields, configurable workflow stages, and user-defined views per project
1.5 Privacy & Trust as Design Elements
Security isn't hidden — it's a brand feature:
- 🔒 "Privacy-first encryption enabled" messaging on loading screen and drag-drop overlay
- "Your files are securely stored and handled with the highest level of care" on direct access pages
- Trust signals are woven into the experience, not relegated to a security page
2. Visual Identity
2.1 Brand Mark
| Element | Description |
|---|---|
| Wordmark | "WAVIC®" — clean, modern sans-serif with registered trademark |
| Logo variants | Full icon+wordmark, compact wordmark, white-on-dark, gray neutral |
| Animated logo | WhiteLogo with sweeping metallic shimmer gradient (3s loop) — used on loading screens |
| Disc icon | CD/vinyl imagery throughout — SVG icon, 3D GLTF model, CD-with-stairs illustration |
2.2 Color System
Monochrome Foundation (Theme-Aware)
The palette inverts completely between light and dark modes:
| Token | Light Mode | Dark Mode | Usage |
|---|---|---|---|
background | #f9fafb (warm white) | #08090e (deep blue-black) | Page background |
foreground | #484848 (charcoal) | #dfdfdf (soft white) | Body text |
primary | #111111 (near-black) | #f1f1f1 (near-white) | Primary actions, headings |
primary-dark | #000000 | #ffffff | Strong emphasis |
gray-0 → gray-1000 | white → black | black → white | Full 12-step scale, inverted |
Accent Colors
| Token | Value | Usage |
|---|---|---|
secondary | #4e36f5 (vivid purple) | Accent highlights, links |
red | #e00 | Errors, destructive actions |
green | #11a849 | Success, approved status |
orange | (warm amber) | Warnings, pending states |
blue | (sky blue) | Information, active states |
Adaptive Gradients
The most distinctive visual feature — gradients derived from user content:
// Artist/project header gradient (from uploaded artwork)
linear-gradient(to bottom,
rgba(dominantColor, 0.9) 0%, // Strong at top
rgba(dominantColor, 0.5) 20%, // Fading
#111 44% // Into dark background
)This creates a unique, personalized visual identity for every artist space, making each feel like a branded experience.
2.3 Typography
| Font | Weight | Usage |
|---|---|---|
| PPMonumentExtended | Black (900) | Artist names, hero text, brand moments |
| PPMonumentExtended | Regular (400) | Subheadings in display contexts |
| PPMonumentExtended | Light (300) | Delicate display text |
| Lexend | Bold (700) | Section headings, navigation |
| Lexend | Regular (400) | Body text, form labels |
| Lexend | Light (300) | Secondary text, captions |
Scale (mobile-first):
- Display:
text-3xl→md:text-5xl→lg:text-7xl - Heading:
text-xl→md:text-2xl - Body:
text-sm→md:text-base - Caption:
text-xs
2.4 Iconography
| Library | Usage |
|---|---|
| react-icons/pi (Phosphor) | Primary icon set — clean, consistent line weight |
| react-icons/ai (Ant Design) | Secondary icons (enter key, specific UI) |
| Custom SVGs | CD icon, waveform markers, brand elements |
| Lucide (via rizzui) | Component-level icons in RizzUI primitives |
2.5 Motion & Animation
Principles
- Purposeful — every animation communicates state change or guides attention
- Quick — 200-400ms for UI transitions, never blocking interaction
- Cinematic — longer durations (500ms-2s) reserved for hero/onboarding moments
- Eased —
easeInOutfor smooth natural feel; never linear
Animation Library
| Animation | Duration | Usage |
|---|---|---|
fade-in-up | 300ms | Card reveals, list items (staggered 100ms) |
popup | 500ms | Modal/toast entrances (scale 0→1.3→1 bounce) |
scaleUp | 500ms | Element appearance (scale 0→1) |
blink | 1.4s loop | Active/recording indicators |
rotate | 8s loop | Spinning elements (loading) |
marquee | variable | Scrolling text in player (long track names) |
skeletonWave | 1.5s loop | Loading placeholder shimmer |
| CD entrance | 550ms + 2.3s delay | Onboarding — scale 3→1, blur 20→0 |
| Logo shimmer | 3s loop | Metallic gradient sweep on WhiteLogo |
Framer Motion Patterns
tsx
// Standard page transition
const fadeVariants = {
hidden: { opacity: 0, y: 10 },
visible: {
opacity: 1,
y: 0,
transition: { duration: 0.6, ease: 'easeInOut' },
},
exit: { opacity: 0, y: 0, transition: { duration: 0.4, ease: 'easeInOut' } },
};
// Staggered children
const containerVariants = {
visible: { transition: { staggerChildren: 0.1 } },
};3. Spatial Design (Depth & Layers)
3.1 Z-Index Hierarchy
| Layer | z-index | Content |
|---|---|---|
| Base | 0 | Page content, grids, backgrounds |
| Floating | 10 | FAB buttons, floating carts |
| Overlay | 20 | Backdrop blur, semi-transparent masks |
| Modal | 30 | Modals, drawers, portals |
| Toast | 40 | Notifications, toasts |
| Loading | 50 | Full-page loading screen |
3.2 Blur & Transparency Vocabulary
| Effect | Classes (Tailwind v4) | Context |
|---|---|---|
| Soft overlay | bg-black/30 backdrop-blur-sm | Backdrop behind FAB, drawers |
| Deep focus | bg-black/40 backdrop-blur-lg | Modal backdrops (dark mode) |
| Subtle glass | bg-white/80 backdrop-blur-md | Sticky headers, floating panels |
| Upload zone | bg-black/50 backdrop-blur-lg | Global drag-drop active state |
| Photo circle | bg-black/10 backdrop-blur-sm | Avatar/photo upload placeholder |
Important (Tailwind v4): Always use the color modifier syntax (
bg-black/30) instead of the removedbg-opacity-*utilities. The oldbg-opacity-30 bg-blackpattern produces zero CSS in Tailwind v4.
3.3 Shadow System
| Level | Usage |
|---|---|
shadow-sm | Cards at rest |
shadow-md | Elevated cards, dropdowns |
shadow-lg | FAB action cards, popovers |
shadow-xl | Modals, floating player |
4. Component Design Language
4.1 Cards
Cards are the primary content container:
- Project cards: Album art + title + type badge, rounded-lg, with hover elevation
- Track cards: Waveform thumbnail + title + comment count, dark background
- Action cards (FAB): Icon + label,
rounded-2xl,shadow-lg, staggered fade-in-up
Dark mode cards: bg-[#171717]/80 with subtle border — semi-transparent to show depth
4.2 Buttons
| Variant | Appearance | Usage |
|---|---|---|
| Primary | bg-black text-white / bg-white text-black (dark) | Main actions (Enter, Save) |
| Ghost/Text | No background, text color | Skip, Cancel, secondary actions |
| Icon | Circular, ActionIcon from RizzUI | Toolbar actions (share, upload, add) |
| Destructive | bg-red text-white | Delete, remove |
Interaction states: hover:bg-gray-100 (light) / hover:bg-gray-800 (dark), disabled:opacity-50
4.3 Forms & Inputs
- Standard inputs: RizzUI
Inputwith rounded borders, clear focus ring - Onboarding input: Custom styled — large, centered, borderless with animated underline
- Select dropdowns: RizzUI
Selectwith search, custom option rendering - Textareas: Auto-growing, with character counts where relevant
4.4 Status Badges
7-stage workflow with color coding:
| Status | Color | Background |
|---|---|---|
| Not Started | Gray | bg-gray-100 dark:bg-gray-800 |
| Demo | Blue | bg-blue-lighter/50 |
| In Progress | Orange | bg-orange-lighter/50 |
| Waiting Feedback | Purple | bg-secondary-lighter/50 |
| Review | Yellow | bg-orange/40 |
| Approved | Green | bg-green-lighter/50 dark:bg-green/40 |
| Completed | Green (solid) | bg-green text-white |
4.5 Navigation
- Sidebar (Beryllium): Minimal icon rail at
xl:88pxwidth, expands on hover - Header: Sticky with glass effect, logo + nav + right menu (search, notifications, avatar)
- Breadcrumbs: Path-based, clickable ancestors
- Tabs: Horizontal for section switching (Comments, Credits, Label Copy)
4.6 Audio Player
The centerpiece interactive element:
- Desktop: Full-width bottom bar with waveform (WaveSurfer.js), controls, version selector
- Mobile: Compact card with play/pause, track name (marquee scroll), mini progress
- Waveform: Interactive — click to seek, hover for time tooltip, timestamped comment markers
- Controls: Play/pause, skip, loop, shuffle, volume slider, version dropdown
4.7 Modals & Drawers
- Modals: Centered,
rounded-xl,shadow-2xl, with backdrop blur overlay - Drawers: Slide from right, used for comments, portals (track metadata), filters
- Portals: Full-height drawers with tabbed sections (Info, Credits, Cover, Audio)
5. Page Archetypes
5.1 Dashboard (Home)
- Artist cards in a grid
- Empty state with illustration + CTA for first artist space
- One-session loading screen with brand animation (WhiteLogo shimmer + progress bar)
5.2 Artist Space
- Hero: Dynamic gradient header from artist image + PPMonumentExtended name
- Projects grid: Card layout with cover art, type badge, action menu (⋯)
- FAB: Floating action button for sharing, uploading, adding projects
- Mobile: Full-width hero with centered avatar circle, projects below
5.3 Project View
- Header: Gradient + project type dropdown (Single/EP/LP/Other) + editable name
- Track list: Draggable cards with waveform previews, status badges, comment counts
- Label Copy: Metadata table (release info, ISRC, credits) in a structured view
5.4 Wave (Track Detail)
- Full-screen waveform: WaveSurfer.js visualization, click-to-comment
- Version timeline: Switch between audio versions with visual diff
- Comment panel: Slide-out drawer with timestamped comments, status toggles
- 3D CD: Spinning disc for empty state / upload prompt
5.5 Onboarding (4 Steps)
- Username: CD-with-stairs entrance animation → single input → Enter
- Photo: Avatar upload circle with blur backdrop → skip-able
- Features showcase: Auto-cycling cards with platform highlights
- First upload: 3D spinning CD + drag-drop / file picker + progress bar → redirects to Wave
5.6 Direct Access (Public Links)
- Backdrop blur when FAB opens
- Action cards stagger-reveal from bottom
- Trust messaging: Security and privacy copy woven into the experience
5.7 New Artist / Creation Flow
- Full-screen canvas: Animated grid background
- Dynamic gradient: Extracts dominant color from uploaded image (ColorThief)
- Two steps: (1) Name + photo, (2) Audio upload with 3D CD
- Keyboard-first: Enter to advance, click or drag-drop for files
6. Responsive Strategy
Breakpoints
| Breakpoint | Width | Layout Changes |
|---|---|---|
| Mobile | < 640px | Single column, compact player, hamburger nav |
| Tablet | 640-1024px | Two-column grids, condensed sidebar |
| Desktop | 1024-1440px | Full sidebar, multi-column grids, expanded player |
| Wide | > 1440px | Max-width containers, generous whitespace |
Mobile Priorities
- Audio playback is the #1 use case on mobile
- Compact player always accessible
- Cards stack vertically
- Gestures: swipe for drawers, pull-to-refresh potential
- Touch-optimized: 44px minimum tap targets
7. Dark Mode as the Default Experience
Dark mode is the primary design surface for music creators:
- Studio environments are typically dark — the interface matches the context
- Album art and waveforms have maximum visual impact on dark backgrounds
- The monochrome-first palette ensures every color decision works in both modes
- Data-attribute system (
data-theme="dark") allows instant switching
Theme Implementation
css
/* Custom variant for Tailwind v4 */
@custom-variant dark (&:where([data-theme="dark"], [data-theme="dark"] *));| Property | Light | Dark |
|---|---|---|
| Background | #f9fafb warm white | #08090e deep blue-black |
| Surface | #ffffff | #171717 |
| Text primary | #111111 | #f1f1f1 |
| Text secondary | #484848 | #dfdfdf |
| Borders | #e3e3e3 | rgba(72,72,72,0.2) |
| Card hover | #f0f0f0 | #383d3f/80 |
8. Competitive Positioning vs. [untitled]
Where We're Similar
- Music project management platform
- Collaboration with roles and permissions
- Audio versioning and feedback
Where WAVIC Delivers More Value
| Dimension | [untitled] | WAVIC |
|---|---|---|
| First impression | Functional | WOW — 3D disc, adaptive gradients, cinematic onboarding |
| Personalization | Static UI | Dynamic gradients from user's artwork |
| Upload experience | Dedicated upload page | Drag-drop anywhere in the app |
| Visual richness | Clean but flat | Layered depth (blur, glass, shadows, 3D) |
| Workflow flexibility | Fixed views | 6 switchable layouts, configurable metadata |
| Brand identity | Generic SaaS | Music-native (waveforms, discs, studio aesthetic) |
| Privacy messaging | Standard | Woven into the experience as a feature |
| Modularity | Monolithic | Lego-style — portals, fields, draggable blocks |
The WAVIC Differentiator Formula
WOW Impact + Effortless Workflow + Content-as-Hero + Music-Native Design = WAVIC9. Upload-Anywhere Philosophy
A core product principle: content creation should never be gated by navigation.
Current Implementation
- Global Dropzone: Wraps entire app via
GlobalDropzonecomponent - Accepts: Audio files (mp3, wav, m4a, flac, aac, aiff), images, documents
- Trigger: Drag file over any part of the app → full-screen blur overlay appears
- Smart routing: If on a
/wave/page → auto-attaches audio version; otherwise → opens modal cascade (select artist → project → track) - Visual feedback:
backdrop-blur-lgwith "Drop your files securely here" + 🔒 privacy message - Disabled on:
/onboardingroute (to avoid conflicts with step-specific uploads)
Design Intent
The user should be able to:
- Drag an audio file from their desktop
- Drop it anywhere in WAVIC
- See it attached to the right track with progress feedback
- Never leave their current context
10. Product Vision: Music Cloud/CRM/ERP
WAVIC positions as the operating system for music creation, delivery, and management:
| ERP Concept | WAVIC Equivalent |
|---|---|
| Contacts | Collaborators (team members with roles) |
| Projects | Album/EP/Single containers with lifecycle |
| Tasks | Track status workflow (7 stages) |
| Documents | Audio versions, cover art, attachments |
| CRM | Artist spaces with collaboration history |
| Delivery | Share links, flash links (roadmap), distribution integration (roadmap) |
| Analytics | Play counts, engagement, storage metrics (roadmap) |
| Contracts | Agreement management (roadmap) |
| Reporting | Project dashboards, time tracking (roadmap) |
The Lego Architecture
Every entity is composable:
- An Artist Space is a container of Projects and Collaborators
- A Project is a container of Tracks with a type and lifecycle
- A Track is a container of Versions, Comments, Metadata, and Attachments
- Portals (drawer-based) overlay contextual data without context-switching
- Future: Custom fields, user-defined workflow stages, template projects
11. Onboarding as First Impression
The onboarding flow is the user's first contact with the WOW factor. It must be:
Current Flow (4 Steps)
- Entrance: CD-with-stairs illustration scales from 3x→1x with blur dissolve (2.3s delay for dramatic effect)
- Username: Clean centered input with Enter button — sets identity
- Photo: Circle upload area with blur backdrop — optional but encouraged
- Features: Auto-cycling showcase of platform capabilities
- First Upload: 3D spinning CD + progress bar → leads directly to Wave view
Design Requirements
- Full-screen, no navigation chrome — total immersion
- Background imagery (light/dark variants) sets mood
- Every step is skip-able — respect the user's time
- Enter key works globally — keyboard-native
- Drag-and-drop enabled on photo and audio steps
- Immediate value: user leaves onboarding with a real track in their workspace
Emotional Journey
Curiosity (entrance animation) → Identity (username) → Personalization (photo)
→ Discovery (features) → Accomplishment (first upload) → Empowerment (workspace)12. Design Tokens Quick Reference
Spacing
gap-2(8px) — tight groupinggap-4(16px) — standard spacinggap-6(24px) — section spacingp-3/p-4— card paddingpx-3 xl:mt-4— page content margins
Borders
rounded-lg— standard cards, inputsrounded-xl— modals, toasts, elevated surfacesrounded-2xl— FAB action cardsrounded-full— avatars, circular buttons
Transitions
duration-200— micro-interactions (hover, focus)duration-300— content transitionsduration-500— page/section transitionsduration-1000— dramatic reveals (background changes)
13. Accessibility Baseline
While the premium aesthetic is paramount, accessibility must not be sacrificed:
- Color contrast: Minimum 4.5:1 for body text, 3:1 for large text
- Focus indicators: Visible focus rings on all interactive elements
- Keyboard navigation: All features reachable via keyboard
- Screen reader: Semantic HTML, ARIA labels where needed
- Reduced motion: Respect
prefers-reduced-motion— disable non-essential animations - Touch targets: Minimum 44×44px on mobile
14. Future Design Directions
Near-Term
- Configurable metadata fields — users add custom attributes to tracks (Notion-style)
- Project templates — pre-configured project structures (Single release, Album workflow)
- Inline editing — click any text to edit without modals
- Enhanced waveform interactions — markers, regions, A/B comparison
Medium-Term
- Dashboard customization — widget-based homepage (recently accessed, activity feed, analytics)
- Theming engine — allow studios to set brand colors, custom accent palettes
- Collaborative cursor presence — see who else is viewing the same track in real-time
- Notification center redesign — grouped by project, actionable inline
Long-Term
- Mobile-native experience — React Native app with haptic feedback, swipe gestures
- AI-assisted workflows — auto-tagging, intelligent version naming, smart notifications
- White-label mode — full brand customization for labels and studios
- Interactive tutorials — contextual onboarding tooltips for new features