Polimento

O que Polimento faz?

Visão Geral

Após tokens, estrutura e anti-slop, aplique o micro-artesanato para que a UI pareça correta na superfície renderizada. As receitas numéricas aqui são heurísticas, a menos que um padrão ou token do projeto as possua.

Quando usar

• Finalizando construções /ui (após anti-slop-design)
• /polish / "precisa de polimento" / "algo parece estranho"
• Microinterações de hover, clique, entrada/saída, troca de ícone

Quando pular

• Grade estrutural/espaçamento/hierarquia → design-foundations
• Comparar direções renderizadas / estressar todos os estados → prototype
• Linguagem de cantos aninhados/elevação → design-surfaces
• Papéis tipográficos, quebra de linha, truncamento → design-typography
• Conformidade (contraste, nomes, teclado) → accessibility
• Sistemas de movimento / famílias nomeadas → motion
• Apenas cópia / "texto de IA" / redação de estado vazio → content-design
• "Rapikan kode" / implementação gerada → anti-slop-code
• Edições exclusivas de backend sem alteração visível na UI

OBRIGATÓRIO

Regra	Detalhe
Prova renderizada	Julgue quebra, alinhamento, clique e cantos a partir da UI renderizada, não apenas do código-fonte
Tokens primeiro	Use tokens --radius, de espaçamento e tipo; não invente valores isolados quando um token existir
Classifique receitas	Rotule 0.96, ms de stagger e números similares como heurísticas
Correção válida mais barata	Remova decoração → CSS nativo → reutilize tokens do projeto → depois adicione abstração
Artesanato mobile	CTA primário em largura total <768; safe-area em chrome fixo; ações alcançáveis com o polegar
Sem transition: all	Nomeie propriedades; pule transition puro do Tailwind
Prova de geometria de controle	Renderize a matriz completa de controles, incluindo pendente/carregando e LTR/RTL aplicáveis, antes de aceitar alinhamento óptico

Artesanato (pontos de partida)

Preocupação	Ponto de partida	Classe	Entrega
Cantos aninhados	Externo ≈ interno + recuo quando as curvas compartilham centro	Heurística	design-surfaces
Ícone no controle	Ajuste óptico sobre o centro geométrico	Recomendação	—
Profundidade de seção	Linguagem de borda/elevação do projeto	Padrão do projeto	design-surfaces
Hover/toggle	Transições CSS interruptíveis	Recomendação	motion se coreografado
Clique	scale(0.96) se feedback de clique for desejado	Heurística	—
Números dinâmicos	tabular-nums	Recomendação	design-typography
Títulos curtos	text-wrap: balance	Recomendação	design-typography
Área de toque	44×44 toque / ≥40 desktop denso	Recomendação	accessibility para WCAG 2.5.8 (24px)

Exceções: pílulas/círculos, barras de ferramentas densas (desabilitar scale de clique), movimento reduzido, linguagem de marca não concêntrica, imagens que não precisam de contornos.

Geometria de controle

• Matriz de variantes ópticas renderizadas: apenas texto, ícone principal, ícone final, apenas ícone e pendente/carregando.

Centralização geométrica (inline-flex / items-center / justify-center) é necessária mas não é prova. Não há deslocamento de pixel universal: compare a matriz renderizada primeiro, depois aplique a menor compensação dentro do slot de ícone fixo ou glifo.

Julgue se o grupo de conteúdo ícone-rótulo combinado e sua massa visual percebida estão equilibrados e centralizados em todas as variantes e estados. Avalie a relação linha de base/altura de maiúscula do rótulo com o ícone separadamente; o rótulo não precisa ocupar o centro do controle em uma variante de ícone+texto. Verifique peso visual do ícone, token gap, padding simétrico de token, foco, área de toque, desabilitado e pendente/carregando juntos, sem deslocamento não intencional do grupo de conteúdo ou largura do controle. Inclua LTR e RTL quando o produto os suportar.

Geometria pendente estável é o padrão. Para uma exceção explícita de morph medido (references/component-patterns.md), inspecione ambos os pontos finais e a reprodução alvo, confirme que ações vizinhas permanecem estáveis e relate a exceção com evidência. Um morph deliberado não desculpa mudanças acidentais de spinner ou nomes acessíveis ausentes.

Fluxo de trabalho

1. Escopo — nomeie a superfície; pule trabalho estrutural ou de sistema de tokens.
2. Escaneie — renderizado 1x/2x, claro/escuro, hover/clique/foco, largura mobile.
3. Matriz de controle — compare apenas texto, ícone principal/final, apenas ícone, pendente/carregando e LTR/RTL aplicáveis no tamanho renderizado.
4. Corrija — mudança válida mais barata; mapeie valores para tokens; mantenha compensação óptica dentro do slot de ícone.
5. Relate — tabelas Antes/Depois agrupadas por princípio; marque estados não inspecionados como Não verificado.

Limites

• Pode decidir: ajustes ópticos, transições nomeadas, tabular-nums, helpers de quebra, feedback de clique quando o projeto não tiver nenhum.
• Não deve: tratar 0.96, bounce 0 ou raio concêntrico como lei universal; polir sobre layout quebrado; substituir fontes da marca.

Checklist

• Raios aninhados verificados opticamente (ou entregues a design-surfaces)
• Ícones centralizados opticamente onde pareciam desalinhados
• Matriz completa de controles renderizados verificada: apenas texto, ícone principal/final, apenas ícone, pendente/carregando e LTR/RTL quando aplicável
• Grupo ícone-rótulo/massa visual percebida centralizado; relação linha de base/altura de maiúscula do rótulo, peso visual do ícone e token gap/padding verificados
• Foco, área de toque, desabilitado e carregamento preservam geometria sem deslocamento de rótulo ou largura
• Sem transition: all; hover/clique interruptíveis
• Números dinâmicos usam tabular-nums onde tremeriam
• Cabeçalhos text-balance; cópia curta text-pretty onde útil
• Áreas de toque atendem à orientação 44/40 sem sobreposição
• Artesanato mobile: primário em largura total <768, safe-area, zona do polegar
• Heurísticas rotuladas; estados não testados marcados como Não verificado

Aprofundamento

Exemplos completos: references/polish.md. Relacionados: design-surfaces, design-foundations, design-typography, motion, accessibility, references/evidence-policy.md.