# Padrão visual da Portal

A identidade aprovada foi preservada: amarelo Portal para ações principais, azul para links/marca, azul escuro para títulos e ações secundárias, fundo branco e cinza suave. A pesquisa UI/UX Pro Max confirmou direção de legibilidade, consistência e controles acessíveis; sua paleta genérica de sugestão não substituiu a identidade existente.

## Fonte de verdade

- `app/design-tokens.css`: cores semânticas, raios, espaçamentos, altura de controles e duração de feedback.
- `app/design-system.css`: aparência e estados dos controles públicos compartilhados.
- `app/legacy.css`: leitura de artigos, índices e páginas reconstruídas.

## Controles

| Uso | Classe | Forma |
|---|---|---|
| Ação principal / cotação | `button button--primary` | Fundo amarelo, texto escuro |
| Ação secundária | `button button--dark` | Fundo azul escuro, texto branco |
| Ação auxiliar | `button button--outline` | Borda visível, fundo transparente |
| CTA de maior destaque | adicionar `button--large` | Altura mínima 56 px |
| Navegação compacta | adicionar `button--compact` | Altura mínima 44 px |

Controles regulares têm altura mínima de 48 px, raio de 6 px e espaçamento interno comum. Ícones dos botões: 20 px. Cartões: raio de 12 px. Botões de catálogo e lista seguem a mesma família. Foco de teclado visível, estado desabilitado, contraste de texto e adaptação para movimento reduzido fazem parte do padrão.

Páginas novas devem consumir esses tokens e variantes, evitando cores e versões próprias do mesmo botão. Estilos legados por seção permanecem para layout, mas as ações de conversão usam o componente visual compartilhado.