Do circulo amigavel ao retangulo serio: como border-radius, grid e peso visual constroem hierarquia fora do cinema.
No artigo Divertida Mente: teoria das formas, exploramos como circulos, quadrados e triangulos comunicam personalidade em personagem. Aqui, traduzimos essa linguagem para componentes reais: botoes, cards, campos, modais e barras de navegacao. A cor importa, mas a forma responde antes mesmo do usuario ler o rotulo.
O cerebro agrupa elementos proximos, semelhantes e fechados em contorno. Por isso, uma fileira de botoes com o mesmo raio de borda e altura parece "uma familia", enquanto um unico botao com raio totalmente diferente salta como excecao. Use excecao de forma intencional: acao primaria com formato destacado, acoes secundarias alinhadas entre si.
Cor reforca o grupo, mas forma estabelece o grupo quando a cor e neutra (modo escuro com muito cinza). Combine este artigo com a teoria das cores e com o simulador de componentes para ver cor e forma juntas.
Cantos bem retos (raio zero ou quase) sugerem precisao, editorial, ferramenta tecnica ou marca institutional. Cantos muito arredondados ou botoes em formato de pilula transmitem acessibilidade emocional, consumo, apps sociais ou infantil. Valores intermediarios (4px a 12px) costumam ser o terreno de produtos "profissionais calorosos": SaaS, e-mail, dashboards humanizados.
Em CSS, border-radius em rem ou px deve conversar com a escala tipografica: um raio gigante em titulo pequeno parece caricato; um raio minimo em card enorme pode parecer datado. Documente tokens (--radius-sm, --radius-md) como documenta cores.
Forma tambem e proporcao. Um card largo e baixo lembra listagem; um card quadrado lembra midia; um retangulo vertical lembra feed. A hierarquia nasce da repeticao: se todo modulo principal usa 16px de raio, um modulo com 24px levemente maior sugere destaque sem mudar cor.
Em layouts responsivos, a mesma forma pode mudar de papel: no mobile, um painel que era lateral vira bloco empilhado; mantenha o mesmo token de raio para nao quebrar a identidade. Grid e flex nao substituem decisao de forma, apenas distribuem o que voce ja definiu no design system.
Forma nao e so contorno externo: padding interno e espessura de borda alteram a silhueta percebida. Um botao com padding generoso parece mais tocavel; um input compacto parece ferramenta. Quando voce aperta demais o espacamento, ate cantos arredondados parecem "apertados"; quando solta demais, a interface parece infantil ou vazia.
Combine com cor: fundos saturados pedem mais respiro; interfaces quase monocromaticas aguentam modulos mais cheios. O gerador de tema ajuda a ver se a mesma geometria funciona em claro e escuro antes de fixar componentes.
Icones redondos em moldura circular reforcam o mesmo discurso do botao pilula: app, chat, perfil. Icones em quadrado com canto minimo lembram grade de aplicativos ou teclado. Misturar estilos de icone (tracejado fino com preenchido pesado) piora a leitura mais que misturar dois raios de borda levemente diferentes.
A forma deve sobreviver ao estado. Se o foco so aparece como outline retangular em um botao extremamente arredondado, o usuario percebe descompasso entre "objeto" e "sistema". Prefira outline-offset coerente ou anel de foco que respeite a curvatura. Estados desabilitados costumam achatar contraste; nao mude o raio so no disabled, ou o componente deixa de parecer da mesma familia.
Forma circular em icone pequeno reduz area clicavel se o padding nao compensar. Diretrizes comuns citam cerca de 44x44 CSS pixels como referencia minima confortavel no toque. Um botao visualmente redondo precisa de hit area invisivel ou padding suficiente. A checklist de acessibilidade do site lembra contraste; combine com auditoria de tamanho de alvo no seu sistema de design.
Cada familia de design (Material Design, Human Interface Guidelines, Fluent) fixa tokens de canto e elevacao. Misturar livremente sem adaptacao gera sensacao de "colagem". Se voce inspira-se em um filme ou em personagens geometricos, extraia regra (por exemplo, "so elementos interativos sao pilula") e aplique em 100% dos estados, inclusive hover e disabled.
O simulador de componentes mostra nav, card, botao e campo com as cores que voce escolher: ideal para validar se a forma "lida" bem com a paleta. O gerador de tema ajuda a manter consistencia claro e escuro. Para contraste entre texto e fundo dentro desses blocos, use o teste de contraste.
Para explorar harmonias antes de aplicar em UI, use a roda de cores e as paletas sugeridas. Para comparar combinacoes, o comparador de paletas ajuda a decidir. O simulador de componentes exporta CSS, JSON e outros formatos a partir das cores escolhidas. O indice Ferramentas reune tudo em um so lugar.