pluriwave/openspec/changes/premium-award-ui-icons-code-review/design.md

Design: premium-award-ui-icons-code-review

Objetivo

Elevar PluriWave a una maqueta/UI premium de nivel award: radio global, audio vivo, favoritos, búsqueda, reproductor, EQ y ajustes con una dirección visual propia: “Ondas vivas globales”.

La UI debe sentirse como lujo digital oscuro: vidrio profundo, ondas concéntricas, energía magenta/coral y una familia de iconos propia. Primero fundamentos: tokens, tema, componentes e iconografía. Nada de maquillaje suelto arriba de widgets existentes.

Contexto técnico verificado

• App Flutter/Dart con Provider + ChangeNotifier.
• Tema actual en lib/app.dart usa Material 3 dark + ColorScheme.fromSeed.
• Navegación actual usa Icons.* de Material.
• Assets declarados: assets/images/ y assets/icons/.
• Tests existentes bajo test/.
• Riesgo actual a hardenear: _PaginaPrincipalState.didChangeDependencies() escucha errorStream sin guardar/cancelar suscripción local; debe moverse a initState con StreamSubscription y cancelarse en dispose.

Dirección de arte

Concepto

Ondas vivas globales: PluriWave conecta emisoras del mundo a través de ondas sonoras visibles, como una red orbital sobre vidrio oscuro.

Visualmente:

• Fondo oscuro violeta-negro.
• Esferas/global waves con gradientes controlados.
• Superficies glassmorphism sobrias, no “neón barato”.
• Brillos premium: pocos, intencionales, con blur suave.
• Iconos coherentes: ondas concéntricas + geometría redondeada.

Paleta base

Definir tokens, no colores hardcodeados.

voidBlack:        #07040F
deepViolet:       #140722
midnightPurple:   #211039
royalViolet:      #6E35FF
electricMagenta:  #FF2BD6
warmCoral:        #FF7A59
softRose:         #FFD0E8
auroraCyan:       #35E8FF
glassWhite:       rgba(255,255,255,0.08)
glassStroke:      rgba(255,255,255,0.16)
dangerCoral:      #FF5A6A
successMint:      #5FFFCB

Gradientes

• heroGlobalWave: deep violet → royal violet → magenta.
• activeGlow: electric magenta → warm coral.
• glassSurface: white 10% → white 4%.
• playerOrb: royal violet → magenta → coral.
• eqSpectrum: cyan → magenta → coral.

Tipografía

Mantener Inter si ya está instalado, pero con escala propia:

• Display: hero/player titles.
• Title: cards, screen headers.
• Body: station metadata.
• Label: chips, nav, settings.

Decisión: tipografía sobria. El lujo viene de composición, contraste y ritmo, no de fuentes extravagantes.

Tokens y tema

Crear capa de tema propia:

lib/tema/pluriwave_tokens.dart
lib/tema/pluriwave_theme.dart
lib/tema/pluriwave_motion.dart

Usar ThemeExtension para colores premium, gradientes, radios, blur/elevation/glow, spacing y duraciones de motion.

Tokens sugeridos:

spacing: 4, 8, 12, 16, 20, 24, 32
radius: 12, 16, 20, 28, 999
stroke: 1, 1.5, 2
blur: 12, 20, 32
glow: subtle, active, hero
motion: fast 120ms, base 220ms, expressive 420ms

Regla: cualquier pantalla/componente nuevo consume tokens. No hardcodear paleta en widgets.

Sistema de componentes

App shell

• PluriWaveScaffold.
• Fondo premium persistente: gradiente oscuro base, ondas radiales sutiles, puntos/orbitas globales con opacidad baja.
• Respeta safe areas.
• Evita rebuilds caros del fondo.

Superficies

• PluriGlassSurface: color glass tokenizado, borde translúcido, blur moderado, sombra/glow opcional.
• Variantes: subtle, elevated, active, danger.

Navegación

• Reemplazar Material Icons por PluriIcon.
• Bottom nav glass flotante.
• Estado activo: icono filled, glow magenta/coral, label con contraste alto.
• Estado inactivo: outline, baja opacidad, pero accesible.

Tarjeta de emisora

• PluriStationCard con nombre, país/idioma/tag, estado reproduciendo, favorito y mini onda/visualizer.
• Variantes: compacta, destacada, reorderable favorite.
• Debe tener semantics claros: estación, país, acción reproducir, favorito.

Mini reproductor

• Glass pill persistente.
• Orb/onda animada cuando reproduce.
• Botón play/pause con PluriIcon.playerOrb.
• Evitar animaciones pesadas; envolver visualizer en RepaintBoundary.

Reproductor

• Pantalla hero con globo/orbe de ondas, metadata de emisora, controles primarios, acceso EQ, favorito y timer.
• La jerarquía debe hacer obvio qué está sonando.

EQ

• PluriEqPanel.
• Sliders con onda/spectrum.
• Presets como chips premium.
• Toggle “preset propio de esta emisora”.
• Estado unavailable accesible cuando EQ no está disponible.

Estados vacíos/error

• No usar pantallas muertas.
• Empty state con icono propio + copy corto.
• Error offline con acción retry.
• Loading con shimmer sutil.

Pantallas

Inicio

• Hero “PluriWave” con globo de ondas.
• Sección Tendencias.
• Sección Populares.
• Accesos rápidos por país/tag.
• Mini reproductor siempre abajo si hay emisora activa.

Buscar

• Search premium con chips: país, idioma, tag.
• Loading controlado.
• Evitar stale results: la última búsqueda gana.

Favoritos

• Lista reorderable.
• Drag handle propio.
• Persistencia de orden.
• Si falla persistencia: rollback visual y snackbar.
• Evitar duplicados por uuid.

Reproductor

• Foco absoluto en la emisora actual.
• Controles grandes y accesibles.
• Visualizer vivo, pero pausado/reducido si accesibilidad reduce motion.

Ajustes

• Cards agrupadas: audio/EQ, import/export, timer, app info.
• Iconos propios por grupo.

Sistema de iconos

Crear PluriIcon como contrato visual propio, con variantes outline, filled, activeGlow.

Iconos core:

homeWave, searchOrbit, heartSignal, playerOrb, eqConstellation,
settingsPrism, sleepMoonWave, globeRadio, stationTower,
importWave, exportWave, timerRing, errorPulse

Geometría:

• Grid base 24x24.
• Stroke 2px.
• Caps y joins redondeados.
• Motivo común: ondas concéntricas/orbitas.
• Filled no debe ser solo outline pintado.
• Active glow se logra con composición, no con bitmap borroso incontrolable.

Implementación recomendada:

• Core UI icons: code-native Flutter widgets/painters o assets vectoriales controlados.
• Assets generados por IA: usar para hero, mockups, marketing, splash o iconos complejos, pasando por pipeline de validación.
• Tradeoff: los iconos code-native son menos “ilustración AI”, pero ganan recolor, accesibilidad, consistencia y tests.

Prompt para mockup premium

Create a premium mobile app UI mockup for "PluriWave", a global radio streaming app.
Art direction: living global audio waves, luxury dark glass, deep violet black background, electric magenta, royal violet, warm coral highlights, subtle cyan accents.
The app includes home, search, favorites, now playing, equalizer, and settings surfaces.
Use elegant glassmorphism, restrained glow, layered depth, rounded premium cards, orbiting wave motifs, global radio map energy, custom wave-based icons, outline and filled active icon states.
Make it look like an award-winning product design case study, polished, editorial, cinematic, high-end digital luxury.
No fake brand logos, no illegible paragraphs, minimal readable labels only: Inicio, Buscar, Favoritos, Ajustes, PluriWave.
Vertical smartphone composition, 9:16, crisp details, professional product mockup, dark premium UI, controlled highlights, no clutter.

Prompt para icon sheet

Generate a 4x4 icon sheet for a premium global radio app called PluriWave.
Style: custom icon family, rounded geometry, concentric audio waves, globe/orbit motifs, deep violet strokes with electric magenta and warm coral active accents.
Icons: home wave, search orbit, heart signal, player orb, equalizer constellation, settings prism, sleep moon wave, globe radio, station tower, import wave, export wave, timer ring, error pulse, favorite filled, play filled, pause filled.
Each icon must be centered in its own cell, isolated, same visual weight, no text.
Use pure chroma green #00FF00 as the full background, with thick #00FF00 gutters and outer border between every icon.
No icon, shadow, glow, or stroke may touch or cross gutters.
Clean high-resolution sheet, sharp edges, premium app icon design, consistent family.

Negative prompt:

No text, no letters, no logos, no watermark, no overlapping cells, no cropped icons, no icons touching borders, no inconsistent perspective, no messy neon, no excessive glow, no background other than pure #00FF00.

Asset pipeline

Pipeline obligatorio:

generate → detect gutters → crop cells → chroma-to-alpha → trim transparent bounds → center subject → pad to target canvas → export PNG/WebP → generate contact sheet → validate

Validaciones:

• No píxeles #00FF00 residuales.
• Ningún subject toca borde.
• Bounding box razonable: no menor a 45% ni mayor a 82% del canvas.
• Centro visual estable.
• Familia coherente en peso, radio, glow y escala.
• Rechazar sheet malo; no “arreglar a mano” crops rotos.

Hardening técnico

Listener leaks

Mover listeners de UI desde didChangeDependencies a initState cuando no dependan de InheritedWidget dinámico, guardar StreamSubscription, cancelar en dispose.

Estado stale

Para búsqueda/carga async: usar request id incremental o token de última operación, ignorar respuestas viejas, limpiar loading solo si la respuesta corresponde al request vigente, evitar notifyListeners después de dispose.

Favoritos reorder

Persistir orden explícito, reorder optimista con rollback si falla, nunca duplicar uuid, tests para reorder, remove, import/export y estado actual.

Accesibilidad

Labels semánticos en iconos, tap targets mínimos 48x48, contraste suficiente, reducir/parar animaciones si MediaQuery.disableAnimations o reduced motion, no comunicar estado activo solo con color/glow.

Performance

const donde aplique, RepaintBoundary en visualizers/glows animados, blur limitado y tokenizado, precache de assets críticos, evitar rebuilds globales innecesarios del player/nav.