[JoyceYasminSilva5]

O que é

Aplica a identidade v4 (aprovada no #85) aos tokens de cor do painel, nos dois temas, e registra as medidas de contraste em design-system/identidade-visual/contraste.md. Depende do #95 (DS-07), que depende do #87 (DS-06). Por isso a base é a feature/ds-07-escalas.

O que mudou

• tokens.css: cores v4 claro e escuro; token novo --separator (linhas decorativas, separado da borda funcional --line); --warn (Atenção, ainda sem uso); cores de seleção de texto.
• App.css: cartões e linhas de tabela usam --separator; o "color: white" fixo do botão da aba ativa e a seleção de texto passam a usar tokens.
• contraste.md (novo): mapa de tokens, medidas por par e o que não foi medido.
  Não mexe em textos, hooks, api.js, mock nem index.css. Não há regra de transição de cor.

Medido

• Painel renderizado (Chrome sem interface, perfil gestor, claro e escuro, 1440 px, cenários normal, erro e falha-trilha, todas as áreas): textos com botão habilitado, no mínimo 6,90:1 no escuro e 5,59:1 no claro. Borda de campo, no mínimo 3,34:1.
• lint, test (19 passed) e build passaram no meu computador.

Para o Vinny decidir

A prancha v4 não define: o fundo do aviso de erro, o fundo dos campos e o separador escuro. Os valores aplicados são propostas desta tarefa.

Limite conhecido

O botão desabilitado fica com 2,6:1 a 2,8:1, porque o estilo atual só esmaece (opacity .65). O WCAG não exige mínimo para componente desabilitado, mas o plano quer que ele não dependa só disso. Fica para a DS-09 e não foi alterado aqui.

Não verificado

Vista de celular (390 px) e Opera GX; hover dos botões das abas e do secundário; foco no campo de texto (o estilo existe, mas uma captura não o mostrou); perfis suporte e analista; cenários vazio e lento; axe (fica para o Vinny e o Iohan, em marcos).
A conferência automatizada foi feita com ajuda de IA e não substitui a conferência humana.

Refs #31

[Vinny1313]

Revisão de design (10/11/2026), feita com agente de design do Claude e conferida pelo Vinícius. Só leitura; não substitui a revisão humana.

Veredito: integrar com ajuste (depois do #87 e do #95). Nenhum achado bloqueia.

Passou:

• Foco por teclado (Tab real, gestor, 2 temas, 5 abas): contorno de 3 px sempre visível, de 7,64:1 a 11,96:1.
• Hover (claro): botão principal 8,73:1; secundário 8,73:1; aba inativa 16,26:1.
• Perfis suporte, analista e gestor: mesma estilização; muda só quais abas aparecem.
• Cenários erro, falha-trilha e vazio: mensagens claras, a falha em texto e não só em cor.
• Texto: nenhum abaixo de 4,5:1.

Ajustes, Joyce:

1. Botão desabilitado: o contraste.md diz 2,6 a 2,8:1, mas a conferência mediu 3,9:1 no claro e 4,4:1 no escuro (com opacity: .65 sobre o cartão). O "Rejeitar" que você cita (3,91 e 4,03) bate. Corrija os números do botão principal.
2. Tabelas: em 768 px a tabela de Saúde tem 810 px dentro de 671 px e esconde a 6ª coluna; no celular corta a 3ª. Não há dica de rolagem. Já era assim antes (não é regressão). Veja se cabe uma sombra na borda ou cartões no celular.
3. Os botões "Tema" e "Sair" têm o mesmo índigo cheio das ações principais. Na DS-09, use a variante secundária.
4. A borda do cartão (--separator, 1,6:1) ficou fraca nos dois temas. É decorativa e não reprova, mas enfraquece o cartão em relação ao feat(frontend): aplicar escalas de espaço e texto (DS-07) #95. Reforce ou justifique.

Direção do visual: o #96 usa índigo (#3730a3 e #a5b4fc) e o protótipo usa azul (#1D4ED8 e #60A5FA). Combinado com o Vinícius: o protótipo é referência, e a evolução sobre o design atual do painel é esperada. Essa diferença não é problema.

Não conferido: leitor de tela, zoom de 200%, hover real no escuro (só calculado) e Tab nos perfis suporte e analista.