chatc2/DESIGN.md

---
name: Chatc2
description: Plataforma de atendimento omnichannel — ágil, moderna, centrada no operador.
colors:
  indigo-funcional: "#667eea"
  indigo-profundo: "#5a67d8"
  violeta-apoio: "#764ba2"
  meia-noite-inicio: "#1e1b4b"
  meia-noite-fim: "#312e81"
  papel-limpo: "#ffffff"
  papel-suave: "#f9fafb"
  papel-frio: "#f3f4f6"
  grafite: "#111827"
  grafite-medio: "#374151"
  grafite-suave: "#6b7280"
  cinza-nevoa: "#9ca3af"
  borda-padrao: "#e5e7eb"
  verde-confirma: "#059669"
  verde-confirma-bg: "#d1fae5"
  verde-confirma-texto: "#065f46"
  vermelho-alerta: "#ef4444"
  vermelho-alerta-bg: "#fef2f2"
  vermelho-alerta-texto: "#991b1b"
  ambar-aviso: "#f59e0b"
  ambar-aviso-bg: "#fef3c7"
  ambar-aviso-texto: "#92400e"
  verde-whatsapp: "#25d366"
  verde-whatsapp-hover: "#22c55e"
  bolha-agente: "#dcf8c6"
  bolha-privada-bg: "#fef9c3"
  bolha-privada-borda: "#fde047"
  bolha-privada-texto: "#854d0e"
  chat-wallpaper: "#e5ddd5"
  violeta-tab: "#a78bfa"
  violeta-suave-bg: "#ede9fe"
  violeta-suave-texto: "#5b21b6"
  vermelho-hover: "#dc2626"
  cinza-borda-hover: "#d1d5db"
typography:
  body:
    fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif"
    fontSize: "14px"
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: "normal"
  display:
    fontFamily: "inherit"
    fontSize: "24px"
    fontWeight: 800
    lineHeight: 1.2
    letterSpacing: "-0.5px"
  title:
    fontFamily: "inherit"
    fontSize: "17px"
    fontWeight: 700
    lineHeight: 1.3
    letterSpacing: "-0.2px"
  label:
    fontFamily: "inherit"
    fontSize: "11px"
    fontWeight: 600
    lineHeight: 1.4
    letterSpacing: "0.06em"
rounded:
  xs: "4px"
  sm: "6px"
  md: "8px"
  lg: "12px"
  xl: "16px"
  pill: "9999px"
spacing:
  xs: "4px"
  sm: "8px"
  md: "12px"
  lg: "16px"
  xl: "24px"
components:
  button-primary:
    backgroundColor: "{colors.indigo-funcional}"
    textColor: "{colors.papel-limpo}"
    rounded: "{rounded.md}"
    padding: "9px 18px"
  button-primary-hover:
    backgroundColor: "{colors.indigo-profundo}"
    textColor: "{colors.papel-limpo}"
    rounded: "{rounded.md}"
  button-secondary:
    backgroundColor: "{colors.papel-limpo}"
    textColor: "{colors.grafite-medio}"
    rounded: "{rounded.md}"
    padding: "9px 18px"
  card:
    backgroundColor: "{colors.papel-limpo}"
    rounded: "{rounded.lg}"
    padding: "24px"
  input-text:
    backgroundColor: "{colors.papel-suave}"
    textColor: "{colors.grafite}"
    rounded: "{rounded.md}"
    padding: "10px 14px"
---

# Design System: Chatc2

## 1. Overview

**Creative North Star: "O Terminal Humanizado"**

O Chatc2 é um terminal funcional — preciso, confiável, sem firulas — mas que não esquece que do outro lado da tela há uma pessoa. A interface respira. Curvas suaves (`6px`–`16px`) substituem cantos duros de terminal. O espaço entre elementos é generoso o suficiente para não cansar, mas econômico o bastante para manter densidade de informação. Toques de índigo funcional guiam o olhar sem gritar. O sidebar noturno (`#1e1b4b` → `#312e81`) ancora a experiência com profundidade, como um painel de comando que nunca apaga.

O sistema rejeita explicitamente a poluição visual e a ambiguidade. Cada estado tem feedback imediato. Cada cor tem um porquê. Cada pixel de sombra existe para hierarquia, não por decoração.

**Key Characteristics:**
- Paleta enxuta: um acento índigo + violeta de apoio + neutros limpos. Sem cores decorativas.
- Dark mode como cidadão de primeira classe, não adaptação tardia.
- Sombras leves — o suficiente para destacar superfícies, nunca para pesar.
- Tipografia de sistema: rápida, nativa, zero latência de carregamento.
- Componentes táteis que respondem ao toque e ao hover com confiança.

## 2. Colors

A paleta do Chatc2 é funcional e direta. Um índigo funcional (`#667eea`) carrega a identidade — aparece em botões primários, links, foco de inputs e ações principais. Um violeta de apoio (`#764ba2`) complementa em gradientes e momentos de destaque visual. Tudo o mais são neutros limpos e semânticos de estado.

### Primary
- **Índigo funcional** (`#667eea`): Ação primária. Botões principais, links, borda de foco em inputs, elementos de navegação ativos. O acento que diz "aqui se faz".
- **Índigo profundo** (`#5a67d8`): Estado hover/ativo do primário. Nunca usado sozinho; sempre como resposta ao toque.

### Secondary
- **Violeta de apoio** (`#764ba2`): Gradientes decorativos (login, sidebar em mobile), complemento do primário. Uso estritamente em contextos de identidade visual, nunca em elementos interativos isolados.
- **Meia-noite início** (`#1e1b4b`) / **Meia-noite fim** (`#312e81`): Degradê do sidebar esquerdo. Âncora visual escura que contrasta com o canvas claro. Não usar essas cores fora do sidebar.

### Neutral
- **Papel limpo** (`#ffffff`): Fundo de cards e superfícies elevadas.
- **Papel suave** (`#f9fafb`): Fundo de inputs e áreas secundárias.
- **Papel frio** (`#f3f4f6`): Fundo do corpo da página. O canvas base.
- **Borda padrão** (`#e5e7eb`): Bordas de inputs, separadores de tabela, delimitação de cards.
- **Grafite** (`#111827`): Texto primário. Máximo contraste para leitura.
- **Grafite médio** (`#374151`): Texto secundário e rótulos.
- **Grafite suave** (`#6b7280`): Texto terciário, placeholders, metadados.
- **Cinza névoa** (`#9ca3af`): Texto desabilitado, ícones inativos, estados vazios.

### Semantic
- **Verde confirma** (`#059669`): Sucesso, status online, ações concluídas. Fundo `verde-confirma-bg` (`#d1fae5`), texto `verde-confirma-texto` (`#065f46`).
- **Vermelho alerta** (`#ef4444`): Erro, perigo, exclusão. Fundo `vermelho-alerta-bg` (`#fef2f2`), texto `vermelho-alerta-texto` (`#991b1b`). Hover `vermelho-hover` (`#dc2626`).
- **Âmbar aviso** (`#f59e0b`): Atenção, pendência. Fundo `ambar-aviso-bg` (`#fef3c7`), texto `ambar-aviso-texto` (`#92400e`).

### Chat
- **Verde WhatsApp** (`#25d366`): Botão de envio do chat. Referência direta ao mensageiro. Hover `verde-whatsapp-hover` (`#22c55e`).
- **Bolha agente** (`#dcf8c6`): Fundo da bolha de mensagem do atendente. Contraste com o branco do cliente para identificação instantânea.
- **Bolha privada fundo** (`#fef9c3`) / **borda** (`#fde047`) / **texto** (`#854d0e`): Trio semântico para mensagens privadas entre atendentes.
- **Chat wallpaper** (`#e5ddd5`): Fundo texturizado da área de mensagens. Padrão sutil que evoca familiaridade sem poluir.
- **Violeta tab** (`#a78bfa`): Indicador de tab ativa na sidebar esquerda. Única cor saturada no painel noturno.
- **Violeta suave bg** (`#ede9fe`) / **texto** (`#5b21b6`): Tags de empresa e badges de categoria.
- **Cinza borda hover** (`#d1d5db`): Escurecimento sutil de bordas ao hover em botões secundários.

### Named Rules
**The One Voice Rule.** O índigo funcional ocupa ≤10% de qualquer tela. Sua raridade é o ponto. Se tudo é índigo, nada é importante.

**The Semantic Triplet Rule.** Estados (sucesso, erro, aviso) sempre usam o trio completo: cor de destaque + fundo claro + texto escuro. Nunca usar a cor de destaque como fundo de texto corrido.

## 3. Typography

**Font:** Sistema nativo (`-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif`). Mono: `'SF Mono', 'Cascadia Code', Monaco, monospace` (tokens, código, dados técnicos).

**Character:** Limpa, nativa, invisível. A tipografia não compete com o conteúdo. O sistema entrega o que o OS oferece de melhor, sem dependências externas, com renderização instantânea e zero FOIT.

### Hierarchy
- **Display** (800, `24px`, 1.2): Título da página de login. Único momento de grandeza tipográfica. Nunca em telas internas.
- **Title** (700, `17px`, 1.3, `-0.2px`): Título da topbar. Cabeçalho de seção principal.
- **Body** (400, `14px`, 1.5): Texto corrido, labels de formulário, conteúdo de mensagens, células de tabela. Largura máxima de linha: ~75 caracteres quando aplicável.
- **Label** (600, `11px`, 1.4, `0.06em`, uppercase): Rótulos de navegação (`nav-label`), cabeçalhos de tabela (`th`), metadados. Sempre em caixa alta com tracking expandido.

### Named Rules
**The Native-First Rule.** Nunca importar webfonts. O sistema operacional já tem tipografia excelente. Menos uma dependência, menos um ponto de falha, carregamento instantâneo.

**The Weight Discipline Rule.** Apenas três pesos convivem: 400 (corpo), 600 (labels, semibold), 700–800 (títulos). Nunca usar 300, 500 ou 900.

## 4. Elevation

O Chatc2 usa elevação sutil — o suficiente para separar superfícies, nunca para dramatizar. Cards flutuam levemente sobre o fundo; modais se destacam com sobreposição escura e blur. O sidebar noturno é plano (sem sombra) por design: ele é uma âncora fixa, não uma camada flutuante.

### Shadow Vocabulary
- **Ambient** (`0 1px 3px rgba(0,0,0,0.08)`): Cards estáticos, topbar. A sombra padrão. Mal se nota; está lá só para evitar que a superfície se dissolva no fundo.
- **Floating** (`0 4px 16px rgba(0,0,0,0.10)`): Elementos que precisam de destaque moderado (ex: previews, dropdowns).
- **Modal** (`0 20px 60px rgba(0,0,0,0.18)`): Exclusivo para overlays de modal. Sombra pronunciada + `backdrop-filter: blur(4px)` no overlay. A combinação diz "isto está acima de tudo".

### Named Rules
**The Flat-by-Default Rule.** A superfície base (`papel-frio`) é plana. Sombras aparecem apenas quando um elemento precisa de separação hierárquica — nunca por decoração. Se um card não tem motivo para flutuar, ele não flutua.

**The Radius Discipline Rule.** O sistema usa 6 raios: `xs` (4px, cantos internos e badges), `sm` (6px, logos e elementos compactos), `md` (8px, botões, inputs, labels — o raio de trabalho padrão), `lg` (12px, cards, bolhas de chat), `xl` (16px, modais e containers principais), `pill` (9999px, elementos totalmente arredondados como botão enviar e avatares). Nenhum outro valor é permitido sem atualizar o DESIGN.md.

**The Dark Mode Elevation Rule.** No dark mode, sombras são abolidas. A diferenciação entre superfícies é 100% tonal (variação de cor de fundo). `box-shadow` em fundo escuro produz halos fantasma; use `background-color` mais claro em vez disso.

## 5. Components

Cada componente do Chatc2 segue a filosofia tátil-e-confiante: bordas visíveis, feedback imediato ao hover/foco, transições rápidas (`150ms ease`). Nada é estático. Tudo responde.

### Buttons
- **Shape:** Bordas arredondadas (`8px` radius, token `md`). Botão de envio do chat usa `pill` (totalmente redondo, 40px).
- **Primary:** Fundo `índigo-funcional` (`#667eea`), texto branco. Padding `9px 18px`. Fonte 14px, peso 600. `transition: all 0.15s ease`.
- **Primary Hover:** Fundo `índigo-profundo` (`#5a67d8`). A transição de cor é o feedback.
- **Primary Active:** `transform: scale(0.98)`. Resposta tátil imediata.
- **Send (Chat):** Botão circular `pill`, 40×40px, fundo `verde-whatsapp` (`#25d366`). Hover `verde-whatsapp-hover` (`#22c55e`) + `scale(1.06)`. Referência direta ao mensageiro.
- **Secondary:** Fundo `papel-limpo` (`#ffffff`), texto `grafite-médio` (`#374151`), borda `1px solid` `borda-padrão` (`#e5e7eb`). Hover escurece o fundo para `papel-suave` (`#f9fafb`), borda `cinza-borda-hover` (`#d1d5db`).
- **Danger:** Fundo `vermelho-alerta` (`#ef4444`), texto branco. Hover `vermelho-hover` (`#dc2626`). Uso exclusivo em ações destrutivas (excluir, finalizar).
- **Icon (Chat Input):** Botões circulares `pill`, 36×36px, fundo transparente, cor `grafite-suave` (`#6b7280`). Hover: fundo `papel-frio` (`#f3f4f6`), cor `grafite-médio` (`#374151`). Devem ter `aria-label` descritivo e tooltip.
- **Disabled:** Opacidade 0.5–0.6, `cursor: not-allowed`. Nunca usar cores apagadas como substituto.

### Inputs / Fields
- **Style:** Fundo `papel-suave` (`#f9fafb`), borda `2px solid` `borda-padrão` (`#e5e7eb`), radius `md` (`8px`), padding `10px 14px`. Fonte 14px.
- **Focus:** Borda `índigo-funcional` (`#667eea`), fundo `papel-limpo` (`#ffffff`), `box-shadow: 0 0 0 3px rgba(102,126,234,0.12)`. O ring externo de 3px é a assinatura de foco do Chatc2 — visível, mas nunca agressivo.
- **Chat textarea:** Exceção visual — radius `pill` para formato de pílula. Fundo branco. Foco borda `índigo-funcional`. Placeholder `cinza-névoa` (`#9ca3af`).
- **Error:** Borda `vermelho-alerta` (`#ef4444`), fundo `vermelho-alerta-bg` (`#fef2f2`).
- **Placeholder:** Cor `grafite-suave` (`#6b7280`). Nunca usar cor de placeholder como label substituto.

### Cards
- **Style:** Fundo `papel-limpo` (`#ffffff`), radius `lg` (`12px`), padding `24px`. Borda `1px solid` `papel-frio` (`#f3f4f6`). Sombra `ambient`.
- **Card sem borda:** Para layouts internos onde o card já é distinguível por contraste de fundo, a borda pode ser omitida.
- **Card do Dashboard:** Stats cards têm `border-left: 4px solid` com cor semântica (verde para positivos, vermelho para alertas, índigo para neutros). A faixa lateral é o único ornamento permitido em cards.

### Chat Bubbles
- **Cliente:** Alinhado à esquerda, fundo branco, borda `1px solid` `papel-frio`. Radius `lg` (`12px`), canto inferior esquerdo `xs` (`4px`). Sombra `ambient`.
- **Atendente:** Alinhado à direita, fundo `bolha-agente` (`#dcf8c6`). Mesmo radius assimétrico. Sombra `ambient`.
- **Sistema:** Centralizado, fundo `rgba(255,255,255,0.75)`, texto `grafite-suave` (`#6b7280`), radius `md` (`8px`), itálico.
- **Privada:** Fundo `bolha-privada-bg` (`#fef9c3`), texto `bolha-privada-texto` (`#854d0e`), borda `1px solid` `bolha-privada-borda` (`#fde047`).
- **Erro (envio falhou):** Fundo `vermelho-alerta-bg` (`#fef2f2`), borda `1px solid` `vermelho-alerta` (`#ef4444`), ícone ⚠️ + botão "Reenviar". Nunca deixar mensagem desaparecer silenciosamente.
- **Enviando:** Opacidade 0.6 + spinner pequeno no canto da bolha. Transição para opacidade 1 quando confirmada.

## 6. Do's and Don'ts

### Do:
- **Do** usar o índigo funcional (`#667eea`) em ≤10% da superfície visível. Ele é um acento, não uma cor de fundo.
- **Do** garantir que todo estado interativo tenha feedback em ≤150ms (`transition: all 0.15s ease`).
- **Do** comunicar estado com ícone + cor. Nunca apenas cor. (Ex: badge de status com ícone E cor verde/vermelha.)
- **Do** usar o trio semântico completo (cor + fundo-claro + texto-escuro) para qualquer indicador de estado.
- **Do** manter o dark mode com diferenciação tonal (variação de `background-color`), nunca com sombras.
- **Do** usar `border-left: 4px solid` com cor semântica para destacar stat cards no dashboard. É o único ornamento estrutural permitido.
- **Do** usar padding mínimo de `24px` em cards, `14px 24px` na topbar. Espaço é funcional — reduz fadiga visual.
- **Do** preservar a barra lateral noturna (`#1e1b4b` → `#312e81`) em todas as páginas. É a âncora de navegação consistente.

### Don't:
- **Don't** criar interfaces abarrotadas onde o atendente precise adivinhar onde as coisas estão. Toda ação frequente deve estar a ≤2 cliques de distância.
- **Don't** usar mais de 3 pesos tipográficos na mesma tela. A disciplina de peso (`400`, `600`, `700–800`) é lei.
- **Don't** importar webfonts externas. A regra é nativa. Sempre.
- **Don't** usar sombras em dark mode. Elas viram ruído fantasma em fundos escuros.
- **Don't** usar cores semânticas como cor de fundo para texto corrido. Vermelho e verde existem para badges e bordas, nunca para pintar parágrafos.
- **Don't** criar modais sem overlay escuro + blur. O backdrop-filter é parte da hierarquia visual.
- **Don't** usar border-radius fora da escala documentada (`xs`, `sm`, `md`, `lg`, `xl`, `pill`). Se um novo raio é necessário, ele deve ser adicionado ao DESIGN.md primeiro.
- **Don't** omitir o ring de foco de 3px em inputs. É a assinatura de acessibilidade do Chatc2. Se o input está em foco, o ring aparece.
- **Don't** deixar mensagem de chat falhar silenciosamente. Toda bolha que não foi entregue deve mostrar estado de erro com opção "Reenviar".
- **Don't** usar ícones sem `aria-label` ou texto visível. Botões de ação no chat (📎, 🎤, 🔓) precisam de nomes acessíveis.
- **Don't** colocar mais de 3 ações visíveis na barra de input do chat. Agrupe ações secundárias atrás de um menu "+".