saveinmed/frontend/DESIGN_SYSTEM.md

28 lines
1,004 B
Markdown

# SaveInMed - Design System
Diretrizes visuais para o frontend do SaveInMed.
## 🎨 Paleta de Cores
- **Primária**: `blue-600` (#2563EB) - Botões principais, links ativos.
- **Sucesso**: `green-600` (#16A34A) - Confirmações, status "Entregue".
- **Aviso**: `yellow-500` (#EAB308) - Alertas, status "Pendente".
- **Erro**: `red-600` (#DC2626) - Botões de deletar, mensagens de erro.
- **Fundo**: `gray-50` (#F9FAFB) - Background das páginas.
## 🔡 Tipografia
- **Títulos**: Inter ou Sans-serif, font-bold, text-gray-900.
- **Corpo**: Inter, text-gray-600.
## 🧩 Componentes Padrão
- **Botões**:
- `bg-blue-600 hover:bg-blue-700 text-white rounded-lg px-4 py-2 transition-colors`
- **Inputs**:
- `border border-gray-300 focus:ring-2 focus:ring-blue-500 rounded-lg`
- **Cards**:
- `bg-white shadow-sm border border-gray-100 rounded-xl p-6`
## 📦 Ícones
- **Biblioteca**: `Heroicons 24/outline`
- **Home**: `HomeIcon`
- **Carrinho**: `ShoppingCartIcon`
- **Usuário**: `UserIcon`