3.1 KiB
3.1 KiB
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
- Música (principal)
- Ações (botões)
- 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
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”.