NaMesa_site/docs/04_DESIGN_SYSTEM.md

🎨 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)

: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)

[data-theme="light"] {
  --bg-primary: #FAF7F2;
  --bg-secondary: #FFFFFF;
  --bg-tertiary: #F0EDE6;
  --text-primary: #1A1814;
  --text-secondary: #5C5548;
  --border: #E5DDD0;
}

---

Tipografia

Fontes

/* 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

--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

// 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