Interface Craft e Acessibilidade
Visão Geral
O padrão é acessível, minimalista e bonito — por construção, não por ajuste final. Bom gosto não é acionável como regra, então é convertido em restrições, precedentes e escalonamento. O agente não é solicitado a inventar gosto, apenas a honrar restrições e escalonar o restante.
Acessibilidade — um Requisito, Não um Acabamento
Regras verificáveis:
- Todo elemento interativo é alcançável por teclado com um estado de foco visível.
- Todo controle possui um nome acessível; todo campo de formulário tem um rótulo associado e mensagens de erro claras.
- HTML semântico e landmarks em vez de
divem abundância. - Contraste de cores atende WCAG AA; significado nunca é transmitido apenas por cor.
- Honre preferências de redução de movimento.
Bonito e Minimalista — como Restrições, Não Sensações
- Consistência através de restrição. Use os tokens do sistema de design — espaçamento, escala tipográfica, escala de cores. Sem números mágicos isolados. Coerência é a estética.
- Telas existentes são o guia de estilo. Siga a linguagem visual estabelecida antes de inventar.
- Moderação (UI-YAGNI). Cada elemento conquista seu lugar; remova até que remover quebre algo. Hierarquia e espaços em branco sobre densidade e decoração.
- Prefira os padrões da biblioteca de componentes antes de construir UI personalizada.
- Dois elementos de UI semelhantes → um componente parametrizado. Diferenças são props/variantes, nunca copiar e colar. Uma terceira cópia é um defeito. (DRY aplicado à interface.)
A Regra de Escalonamento
Decisões de gosto escalonam; nunca são decididas autonomamente. Quando uma escolha é genuinamente estética e indeterminada por tokens ou precedentes, não adivinhe silenciosamente:
- Siga o precedente existente mais próximo, ou
- Apresente opções (protótipos, comparações lado a lado) para uma decisão humana de gosto.
Referência Rápida
| Situação | Faça |
|---|---|
| Novo componente se assemelha a um existente | Parametrize o existente; não copie |
| Um valor de espaçamento/cor não está nos tokens | Use o token mais próximo; não invente um número mágico |
| Decisão visual genuinamente nova | Escalone com opções; não decida autonomamente |
| Adicionar um elemento interativo | Teclado + foco + nome acessível, desde o início |
Fiscalização: linting/testes de a11y em CI (ex.: eslint-plugin-jsx-a11y, axe) para as regras verificáveis; moderação estética é critério do revisor através da regra de escalonamento.
Fundamentação completa: Artigo VII da constituição, anexado em engineering-constitution/references/engineering-constitution.md.