# UX — diretrizes de produto e conteúdo

Como a Lux Carbon se comporta em produto digital: escrita, estados, formulários,
acessibilidade, movimento e responsivo. Complementa `ui-componentes.md` (o "como
parece") com o "como funciona e como fala". Tom de voz completo em `marca.md`.

## 1. Princípios de UX da marca

1. **Prova na interface.** A marca é "confiança não se declara, se certifica" — a UI
   materializa isso: todo número relevante tem fonte, data ou metodologia visível;
   IDs de certificado são copiáveis; status têm carimbo de data/hora; documentos têm
   hash/versão quando aplicável. Se um dado não tem origem, questione se deve aparecer.
2. **Sobriedade funcional.** Nada de celebração exagerada, contadores animados ou
   urgência artificial ("só hoje!"). A densidade de informação pode ser alta desde
   que a hierarquia seja clara.
3. **Uma ação principal por tela/seção.** O olho encontra o próximo passo sem procurar.
4. **Rastreabilidade também no fluxo.** O usuário sempre sabe onde está (breadcrumb,
   passo N de M) e o que acontece depois ("Enviaremos a análise em até 10 dias úteis").

## 2. UX writing (microcopy)

- **Idioma:** pt-BR. Você (informal-respeitoso); em social pode "a gente"; em
  institucional, "nós"/impessoal. Inglês só em termo consagrado do mercado (REDD+,
  offset) — na primeira ocorrência, explique.
- **Botões:** verbo no infinitivo + objeto. "Ver metodologia", "Baixar relatório",
  "Falar com o time". Nunca "Clique aqui", "Sim/Não" como par de ações, ou "Enviar"
  genérico quando dá para ser específico ("Solicitar análise").
- **Títulos de tela:** substantivo ou frase curta ("Projetos", "Linha do tempo,
  ciclo 2025"). Perguntas só em onboarding/vazios.
- **Números e unidades (pt-BR):** milhar com ponto, decimal com vírgula
  (`312.480,5 tCO₂e`); unidade uma vez (no header/eixo); moeda "US$ 548M";
  datas `12 ago 2026` ou `ago/26`; sempre `tabular-nums` em coluna.
- **Terminologia fixa do domínio** (não sinonimize à toa): crédito de carbono,
  certificado, safra, metodologia, verificação independente, medição em campo,
  registro, rastreabilidade, aposentadoria de crédito (retirement), mercado
  voluntário, linha de base, cooperativa/produtor.
- **Datas relativas** ("há 2 dias") sempre com absoluta acessível (tooltip/título).

## 3. Estados — toda tela tem cinco

| Estado | Regra Lux Carbon |
|---|---|
| **Vazio** | Explica o que existirá + 1 ação. "Nenhum projeto ainda. Cadastre o primeiro para iniciar a análise." Nunca só "Sem dados". |
| **Carregando** | Skeleton na estrutura real (não spinner de página inteira). Acima de ~8s, mostre progresso ou estimativa. |
| **Erro** | O que houve + como resolver + saída ("Tentar de novo", "Falar com suporte"). Sem culpar o usuário, sem código de erro sozinho — código vai discreto no fim. |
| **Sucesso** | Confirmação objetiva + próximo passo ("Solicitação enviada. Você recebe a análise em até 10 dias úteis."). Toast para ações leves; tela para marcos. |
| **Parcial** | Dados incompletos são sinalizados, nunca silenciosamente omitidos ("3 de 5 fontes atualizadas — última sincronização 14:02"). |

## 4. Formulários e fluxos

- Labels sempre visíveis; placeholder é exemplo ("ex.: Cooperativa Vale Verde"),
  não instrução.
- Validação: no blur do campo + na submissão; mensagem específica ao lado do campo
  ("CNPJ deve ter 14 dígitos"), não alerta genérico no topo.
- Fluxos longos: quebre por assunto (passos nomeados), salve rascunho, permita voltar
  sem perder dados. Revisão final antes de submeter (a marca é auditável — o usuário
  confere antes de assinar).
- Ação destrutiva: confirmação com consequência explícita ("Isso remove o projeto e
  o histórico de medições. Digite o nome para confirmar." — só para destruição real).
- Nunca peça dado que não será usado; explique o porquê dos sensíveis ("Usamos o CAR
  para cruzar com a base do SICAR").

## 5. Acessibilidade (mínimo AA — inegociável)

- Contraste: pares aprovados de `cores.md`; foco visível sky em TODO interativo.
- Navegável por teclado (ordem lógica, sem trap); skip-link na web.
- `alt` descritivo em imagem informativa; decorativa = `alt=""`.
- Cor nunca é o único canal: status = cor + rótulo/ícone.
- Formulário: `label for`, `aria-describedby` para ajuda/erro, `aria-invalid`.
- Tabela: `th` com `scope`; gráfico: dados em tabela alternativa ou `aria-label` rico.
- `prefers-reduced-motion`: desliga animações não essenciais.
- Texto redimensionável a 200% sem quebra; alvos ≥ 44px.

## 6. Motion

Movimento funcional, curto e discreto — a marca não "pula".

- Micro (hover, foco, toggle): 150ms `ease-out`.
- Entrada de elemento (toast, modal, dropdown): 200–250ms, fade + deslocamento ≤ 8px.
- Transição de página/seção: fade 250ms; nada de slide teatral.
- Proibido: bounce, elastic, parallax pesado, autoplay com som, loop infinito
  decorativo (exceto skeleton).
- Carrossel (social/web): indicador de progresso visível (barra fina), swipe + setas.

## 7. Responsivo

- Mobile-first; breakpoints `640/768/1024/1280`.
- Tipografia desce um degrau no mobile (`h1` 49→39px); mínimo de corpo: 16px
  (nunca menos em input — evita zoom do iOS).
- Tabela → cards empilhados (label: valor) ou scroll horizontal com colunas fixas
  de identificação; nunca fonte 10px para caber.
- Header vira hambúrguer ≤ 768px; CTA principal permanece visível.
- Imagens de fundo: recorte central seguro; texto sobre foto ganha véu mais forte
  no mobile (área menor = menos contraste disponível).
- Dashboards: KPIs primeiro (grid 2×2), gráficos depois, tabela por último.

## 8. Superfícies escuras — quando usar

- **`#02172E` (navy):** footer, tooltip, toast, modo escuro de dashboard, véu de foto.
- **`#0B3D2E` (verde):** seção institucional/CTA de landing, capa de deck, destaque
  editorial. É a cor "assinatura" — use quando quer dizer "isto é Lux Carbon".
- **`#003C63` (azul):** divisória/seção secundária, nunca logo em cima dele com a
  versão colorida clara (use `_Escuro`, arte branca).
- Em superfície escura: links sky, acento lime, corpo `#EBECEE` (não branco puro em
  blocos longos), bordas `rgba(255,255,255,.12)`.

## 9. Checklist de entrega de tela/fluxo

1. Uma ação principal clara? Estados vazio/carregando/erro definidos?
2. Microcopy específica (nada de "Ocorreu um erro")?
3. Números formatados pt-BR com unidade e fonte?
4. Teclado + foco + contraste conferidos?
5. Mobile: tabela e tipografia adaptadas?
6. Dado sensível/auditável com carimbo de data e origem?
