saveinmed/frontend/DESIGN_SYSTEM.md

SaveInMed - Design System & Component Library

🎨 Identidade Visual (Extended)

• Primary: #2563EB (Blue 600) - Ações de "Comprar".
• Secondary: #059669 (Emerald 600) - Áreas de Inventário e Saúde.
• Surface: #FFFFFF com bordas #F1F5F9 (Slate 100).
• Glassmorphism: Usado em modais e cards de destaque (bg-white/80 backdrop-blur-md).

🧱 Componentes de Interface

• Tabelas: Devem ser responsivas com overflow-x-auto. Use shadcn/ui DataTable pattern.
• Status Badges:
  • Pendente: Yellow (Pill)
  • Pago: Green (Pill)
  • Cancelado: Red (Pill)
• Inputs Numéricos: Sempre tratar centavos no frontend (mask de moeda BRL).

📱 Mobile-First Rules

• Botões de ação em listas devem ter área de toque mínima de 44px.
• Filtros em telas pequenas devem estar dentro de um Sheet (Drawer).

🚀 Micro-interações

• Use framer-motion para transições de página (opacity e y offset).
• Skeleton screens durante o fetch de produtos.