23 lines
1,011 B
Markdown
23 lines
1,011 B
Markdown
# 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.
|