chatc2/DESIGN.md

name, description, colors, typography, rounded, spacing, components

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