saveinmed/frontend/DESIGN_SYSTEM.md

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