204 lines
5.3 KiB
Markdown
204 lines
5.3 KiB
Markdown
# 🎨 Design System — ReservaMesa
|
|
|
|
## Identidade Visual
|
|
|
|
### Conceito
|
|
**"Elegância Operacional"** — Um dashboard que parece profissional e de alta confiança, como um sistema de gestão de um restaurante Michelin. Cores quentes (não o típico azul SaaS), tipografia editorial, e uma sensação de ambiente noturno de restaurante premium.
|
|
|
|
### Tom e Personalidade
|
|
- Profissional, mas com calor humano
|
|
- Moderno sem ser frio
|
|
- Eficiente mas confortável para uso prolongado
|
|
- Inspirado na estética de restaurantes de autor europeus
|
|
|
|
---
|
|
|
|
## Paleta de Cores
|
|
|
|
### Tema Escuro (Padrão)
|
|
```css
|
|
:root {
|
|
/* Backgrounds */
|
|
--bg-primary: #0F0E0C; /* Quase preto, tom quente */
|
|
--bg-secondary: #1A1814; /* Cards e panels */
|
|
--bg-tertiary: #252219; /* Input fields */
|
|
--bg-hover: #2E2A22; /* Hover states */
|
|
|
|
/* Brand */
|
|
--brand-primary: #D4891A; /* Âmbar — cor principal */
|
|
--brand-secondary: #E8A832; /* Âmbar claro — accents */
|
|
--brand-muted: #3D2E0F; /* Âmbar muito escuro — bg de badges */
|
|
|
|
/* Status */
|
|
--status-pending: #F59E0B; /* Amarelo — pendente */
|
|
--status-confirmed: #10B981; /* Verde — confirmado */
|
|
--status-seated: #3B82F6; /* Azul — sentado */
|
|
--status-completed: #6B7280; /* Cinza — concluído */
|
|
--status-cancelled: #EF4444; /* Vermelho — cancelado */
|
|
--status-noshow: #8B5CF6; /* Roxo — no-show */
|
|
|
|
/* Text */
|
|
--text-primary: #F5F0E8; /* Branco quente */
|
|
--text-secondary: #A09880; /* Cinza quente */
|
|
--text-muted: #6B6355; /* Muted */
|
|
--text-accent: #D4891A; /* Links e destaques */
|
|
|
|
/* Borders */
|
|
--border: #2A261E;
|
|
--border-strong: #3D3828;
|
|
}
|
|
```
|
|
|
|
### Tema Claro (Opcional)
|
|
```css
|
|
[data-theme="light"] {
|
|
--bg-primary: #FAF7F2;
|
|
--bg-secondary: #FFFFFF;
|
|
--bg-tertiary: #F0EDE6;
|
|
--text-primary: #1A1814;
|
|
--text-secondary: #5C5548;
|
|
--border: #E5DDD0;
|
|
}
|
|
```
|
|
|
|
---
|
|
|
|
## Tipografia
|
|
|
|
### Fontes
|
|
```css
|
|
/* Display — títulos e métricas grandes */
|
|
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700&display=swap');
|
|
|
|
/* Body — texto de interface */
|
|
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600&display=swap');
|
|
|
|
/* Monospace — números, timestamps */
|
|
@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&display=swap');
|
|
```
|
|
|
|
### Escala Tipográfica
|
|
```css
|
|
--font-display: 'Playfair Display', serif;
|
|
--font-body: 'DM Sans', sans-serif;
|
|
--font-mono: 'DM Mono', monospace;
|
|
|
|
--text-xs: 0.75rem; /* 12px — labels, metadata */
|
|
--text-sm: 0.875rem; /* 14px — body secundário */
|
|
--text-base: 1rem; /* 16px — body principal */
|
|
--text-lg: 1.125rem; /* 18px — subtítulos */
|
|
--text-xl: 1.25rem; /* 20px — títulos de section */
|
|
--text-2xl: 1.5rem; /* 24px — títulos de página */
|
|
--text-3xl: 1.875rem; /* 30px — métricas grandes */
|
|
--text-4xl: 2.25rem; /* 36px — hero numbers */
|
|
```
|
|
|
|
---
|
|
|
|
## Componentes de Design
|
|
|
|
### Status Badges
|
|
```
|
|
● Pendente → âmbar/amarelo
|
|
● Confirmado → verde
|
|
● Sentado → azul
|
|
● Concluído → cinza
|
|
● Cancelado → vermelho
|
|
● No-Show → roxo
|
|
```
|
|
|
|
### Cards de Métricas (Dashboard)
|
|
- Fundo: `--bg-secondary`
|
|
- Número grande em `Playfair Display`
|
|
- Label em `DM Sans` muted
|
|
- Ícone à esquerda com cor da brand
|
|
- Trend indicator (↑↓) com cor verde/vermelho
|
|
|
|
### Tabelas
|
|
- Header: `--bg-tertiary` com texto `--text-secondary`
|
|
- Rows alternadas: transparente e `--bg-hover` em 30% opacity
|
|
- Hover: `--bg-hover`
|
|
- Border: `--border` a 1px
|
|
|
|
### Sidebar
|
|
- Largura: 240px (collapsed: 64px)
|
|
- Fundo: `--bg-secondary`
|
|
- Border right: `--border`
|
|
- Active item: fundo `--brand-muted`, texto `--brand-secondary`
|
|
- Logo no topo com tipografia editorial
|
|
|
|
---
|
|
|
|
## Layout Grid
|
|
|
|
### Desktop
|
|
- Sidebar: 240px fixo à esquerda
|
|
- Content area: `calc(100vw - 240px)`
|
|
- Max content width: 1400px
|
|
- Padding interno: 24px
|
|
|
|
### Mobile (< 768px)
|
|
- Sidebar: bottom navigation bar
|
|
- Content: full width com padding 16px
|
|
- Gestão de reservas adaptada para toque
|
|
|
|
---
|
|
|
|
## Iconografia
|
|
|
|
**Biblioteca**: Lucide React
|
|
- Estilo: outline, 1.5px stroke
|
|
- Tamanho padrão: 20px
|
|
- Cor: herda do contexto
|
|
|
|
### Ícones-chave por secção
|
|
| Secção | Ícone |
|
|
|---|---|
|
|
| Dashboard | `LayoutDashboard` |
|
|
| Reservas | `CalendarCheck` |
|
|
| Mesas | `Grid3x3` |
|
|
| Calendário | `Calendar` |
|
|
| Analytics | `TrendingUp` |
|
|
| Configurações | `Settings` |
|
|
| Notificações | `Bell` |
|
|
| Staff | `Users` |
|
|
|
|
---
|
|
|
|
## Motion & Animações
|
|
|
|
### Princípios
|
|
- Subtil — nunca distrai do trabalho
|
|
- Rápido — max 300ms para feedback, 500ms para transições de página
|
|
- Funcional — animações comunicam estado
|
|
|
|
### Padrões
|
|
```javascript
|
|
// Entrada de página
|
|
{ opacity: 0, y: 8 } → { opacity: 1, y: 0 }, duration: 0.3
|
|
|
|
// Cards em stagger
|
|
children com delay: i * 0.05s
|
|
|
|
// Status change (reserva confirmada, etc.)
|
|
Scale: 1 → 1.05 → 1, duration: 0.2
|
|
|
|
// Toast notifications
|
|
{ x: 100, opacity: 0 } → { x: 0, opacity: 1 }
|
|
```
|
|
|
|
---
|
|
|
|
## Responsividade
|
|
|
|
| Breakpoint | Largura | Comportamento |
|
|
|---|---|---|
|
|
| Mobile | < 640px | Navegação inferior, lista simplificada |
|
|
| Tablet | 640-1024px | Sidebar colapsada (ícones apenas) |
|
|
| Desktop | > 1024px | Layout completo |
|
|
| Wide | > 1440px | Conteúdo centrado com max-width |
|
|
|
|
---
|
|
|
|
*Versão: 1.0.0 | Maio 2026*
|