# 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”.