First Commit

docs/07_ui_ux.md

@@ -0,0 +1,273 @@
+# UI/UX Design System — Cloudsy ☁️🎧
+
+---
+
+# 🧠 Filosofia de Design
+
+Cloudsy inspira-se em:
+- leveza (cloud)
+- fluidez (música)
+- simplicidade moderna
+
+A interface deve transmitir:
+- suavidade
+- conforto visual
+- elegância tecnológica
+
+---
+
+# ☁️ Identidade Visual (Cloud Design)
+
+## Conceito
+A UI deve refletir uma “nuvem digital”:
+
+- Formas arredondadas
+- Elementos suaves
+- Espaçamento confortável
+- Sem arestas agressivas
+
+---
+
+## 🔵 Cor Principal
+
+Primary Color:
+- Azul (Cloud Blue)
+- Exemplo: #3B82F6
+
+Uso:
+- Botões principais
+- Elementos interativos
+- Destaques
+
+---
+
+## 🌗 Sistema de Tema
+
+### Default
+- ThemeMode.system
+
+### Comportamento
+- Segue automaticamente o tema do dispositivo
+- Atualização em tempo real
+
+---
+
+## 🎨 Paleta
+
+### Light Mode
+- Background: branco suave (#F9FAFB)
+- Cards: branco
+- Texto: preto suave
+
+### Dark Mode
+- Background: preto profundo (#0F172A)
+- Cards: cinza escuro (#1E293B)
+- Texto: branco suave
+
+---
+
+# 🔘 Componentes Base
+
+---
+
+## ☁️ Botões (Cloud Buttons)
+
+### Estilo
+- BorderRadius: MUITO alto (ex: 20–30)
+- Forma: pill / oval
+- Aparência: “nuvem”
+
+### Tipos
+
+#### Primary Button
+- Fundo azul
+- Texto branco
+- Elevation leve
+
+#### Secondary Button
+- Outline azul
+- Fundo transparente
+
+#### Icon Button
+- Circular
+- Fundo suave
+
+---
+
+## 🎵 Music Card
+
+### Layout
+- Rounded corners
+- Capa à esquerda
+- Info à direita
+
+### Conteúdo
+- Título
+- Artista
+- Mood tag (IA)
+
+---
+
+## 💬 Chat Bubble
+
+### Estilo
+- Bordas arredondadas
+- Cores diferentes:
+  - User: azul
+  - Clou: cinza
+
+---
+
+## 🎵 Song Message Card
+
+- Pequeno player embutido
+- Capa + título
+- Botão play
+
+---
+
+# 📱 Layout Geral
+
+## Estrutura
+
+- Safe area
+- Padding consistente (16px–24px)
+- Espaçamento vertical suave
+
+---
+
+## 📊 Hierarquia Visual
+
+1. Música (principal)
+2. Ações (botões)
+3. Informação secundária
+
+---
+
+# 🔄 Navegação
+
+## Bottom Navigation
+
+Tabs:
+- Home
+- Playlists
+- Chat
+- Settings
+
+### Estilo:
+- Rounded container
+- Floating effect
+- Azul ativo
+
+---
+
+# ✨ Animações
+
+## Princípios
+- Suaves
+- Rápidas
+- Naturais
+
+## Exemplos
+- Fade transitions
+- Scale em botões
+- Progress animations
+
+---
+
+# ⚡ Estados da UI
+
+## Loading
+- Skeleton UI
+- Shimmer effect (opcional)
+
+---
+
+## Empty
+Mensagens amigáveis:
+- “Ainda não tens músicas ☁️”
+- “Cria a tua primeira playlist”
+
+---
+
+## Error
+- Mensagens claras
+- Botão retry
+
+---
+
+# 🧠 UX Guidelines
+
+## Simplicidade
+- Evitar clutter
+- Interface limpa
+
+## Consistência
+- Mesmos padrões em toda a app
+
+## Feedback
+- Sempre mostrar resposta a ações
+
+---
+
+# 🌍 Localização
+
+- Todo texto via keys
+- Layout adaptável a idiomas
+
+---
+
+# ⚙️ Settings UX
+
+## Secções
+
+### Perfil
+- Nome
+- Email
+
+---
+
+### Tema
+- System (default)
+- Light
+- Dark
+
+---
+
+### Cor
+- Azul default
+- Custom
+
+---
+
+### Idioma
+- Português
+- English
+
+---
+
+### Conta
+- Logout
+
+---
+
+# ☁️ Assinatura Visual Cloudsy
+
+## Elementos únicos
+
+- Bordas muito arredondadas
+- Layout “leve”
+- Espaçamento respirável
+- Azul suave como base
+
+---
+
+# 🚀 Conclusão
+
+A UI de Cloudsy deve parecer:
+- moderna
+- suave
+- fluida
+- inteligente
+
+Como se a música estivesse “na nuvem”.