# Conexa Modern Design System v1

## Direção aprovada

A Conexa passa a usar uma linguagem de **command center operacional**: azul profundo, superfícies translúcidas, grade técnica, luz ambiental e movimento discreto. O sistema deve parecer uma plataforma própria de gestão e tecnologia sem sacrificar a leitura necessária à rotina de agência.

O modo oficial é o **equilibrado**. Os modos essencial e imersivo são variações controladas dos mesmos tokens, não temas independentes.

## Princípio central

Os efeitos constroem atmosfera e hierarquia. Dados, tarefas e decisões continuam sendo protagonistas. Vidro, brilho e animação nunca podem reduzir contraste, esconder estado, atrasar interação ou competir com conteúdo operacional.

## Uso dos três modos

### Equilibrado — padrão

Aplicar no dashboard, clientes, CRM, projetos, tarefas e relatórios. Usa blur de 22 px, brilho moderado, grid visível e raio de 20 px nos painéis principais.

### Essencial — trabalho denso

Aplicar em tabelas longas, formulários, conciliação financeira, configurações, cadastros e telas usadas continuamente por várias horas. Reduz blur, brilho, sombras e raios, preservando shell, cores e tipografia.

### Imersivo — impacto controlado

Aplicar em dashboard executivo, login, monitoramento em tela grande e apresentações. Não usar em tabelas extensas, formulários ou telas com mais de uma ação principal.

## Identidade

- Azul profundo `#07101F` e `#0A1628`: canvas e profundidade.
- Azul Conexa `#1E3771`: seleção, navegação e estrutura.
- Azul claro `#9FAFCA`: luz, apoio e marca.
- Dourado `#E8B04B`: prioridade, dinheiro e decisão.
- Branco azulado `#F7F9FD`: texto principal.

O dourado não representa sucesso, alerta ou erro. Esses papéis usam tokens semânticos próprios. O logotipo não recebe brilho, sombra, gradiente ou dourado.

## Efeitos

### Grid

O grid aparece somente no canvas e desaparece gradualmente. Não deve atravessar superfícies sólidas ou prejudicar texto. Em mobile, pode ter opacidade menor.

### Aurora

Uma luz ambiental difusa pode ocupar o fundo. Deve ficar fora das áreas de leitura e usar apenas azul, azul claro e um traço de dourado. A animação é lenta, não reage a cada movimento do ponteiro e respeita `prefers-reduced-motion`.

### Vidro

Usar `backdrop-filter` em shell, painéis executivos e diálogos importantes. Tabelas e formulários densos recebem uma superfície mais sólida. Sempre manter borda translúcida para separar a superfície do canvas.

### Brilho

Brilho azul indica profundidade ou atividade do sistema. Brilho dourado destaca uma oportunidade, decisão ou valor importante. Limite: um destaque dourado principal por região visual.

### Movimento

- Hover e foco: 160 ms.
- Troca de página: 260 ms.
- Aurora: 13 s ou mais.
- Nenhuma animação em loop em botões, tabelas, badges ou alertas.
- Carregamento usa skeleton ou indicador de progresso real.

## Tipografia

Inter ou a pilha de sistema definida nos tokens. Títulos usam peso 700–750, texto 400–500 e ações 650–700. Valores financeiros usam algarismos tabulares.

- Página: 32–42 px.
- Seção: 24 px.
- Painel: 15–18 px.
- Texto: 15 px.
- Tabela: 13 px.
- Metadado: 11 px.
- Nunca usar menos de 9 px; 9–10 px apenas em rótulos curtos e não essenciais.

## Componentes

### Shell

Sidebar de 224 px, topbar de 64 px e conteúdo máximo de 1440 px. O shell permanece escuro em todos os módulos. O item atual usa `aria-current="page"`.

### Ações

- Primária dourada: uma por grupo, reservada ao movimento principal.
- Secundária translúcida: filtros, edição e ações auxiliares.
- Ghost: voltar, cancelar, fechar e ações de baixa ênfase.
- Danger: destruição ou bloqueio, sempre acompanhado de confirmação quando aplicável.

### Cartões e KPIs

KPIs mostram rótulo, valor e contexto. O contexto inclui período, variação ou causa. Ausência usa “Sem dado”; zero é um valor legítimo. Somente um KPI por grupo pode receber destaque dourado.

### Tabelas

Superfície sólida ou vidro essencial. Cabeçalho discreto, números à direita, linha de ação no fim. Em telas estreitas, a tabela rola dentro de uma região rotulada.

### CRM

Kanban escuro com colunas discretas. Cartões de oportunidade mostram conta, valor e próximo passo. Apenas oportunidades prioritárias recebem borda dourada.

### Saúde do cliente

Cor sempre acompanha texto e causa. “Atenção” e “Em risco” precisam mostrar o fator que gerou o estado.

### Financeiro

Usar modo essencial nos detalhes. Efeitos ficam nos KPIs e no shell. Moeda, competência, regime e filtros permanecem legíveis e estáveis.

## Acessibilidade e desempenho

- Contraste mínimo de 4,5:1 para texto normal.
- Foco visível em todos os controles.
- Funcionar sem `backdrop-filter`; a cor de fundo deve sustentar o componente sozinha.
- Respeitar `prefers-reduced-motion`.
- Não depender de hover para informação essencial.
- Evitar blur em grandes áreas quando o dispositivo sinalizar baixo desempenho.
- Testar em 360, 768, 1024 e 1440 px.

## Regras de implementação

1. Carregar `tokens.css`, `effects.css`, `components.css` e `shell.css`, nessa ordem.
2. Aplicar `cx-modern` no contêiner raiz.
3. Usar `cx-effects-essential` ou `cx-effects-immersive` apenas no contêiner da página ou módulo que precisa da variação.
4. Não escrever novos hexadecimais em componentes. Gráficos categóricos são a única exceção e precisam de legenda documentada.
5. Preservar rotas, permissões, autenticação, formulários e contratos de API.
6. Migrar um módulo por vez, com comparação visual e teste do fluxo principal.

## Critério de aceite

- Shell e componentes compartilhados, sem CSS duplicado no servidor do módulo.
- Sem perda de contraste nos três modos.
- Funciona por teclado e com movimento reduzido.
- Estados de vazio, carregamento, erro, sucesso e permissão implementados.
- Fluxo principal do módulo testado.
- Nenhuma mudança de regra de negócio misturada à migração visual.