Tendência visual

Neobrutalismo

Neobrutalism

Blocos de cor e contornos enfáticos produzem uma interface gráfica com poucas ambiguidades visuais.

IDEIAS EM AÇÃOFeito para
se destacar.BORA CRIAR →

Exemplo didático · Representação visual do padrão

Quando usar

Dar uma personalidade gráfica marcante a projetos com conteúdo direto.

Cuidados e acessibilidade

Garanta hierarquia e leitura; contornos fortes não substituem estados de foco.

Como reconhecer

Bordas espessas, sombras sem desfoque, cores chapadas e tipografia expressiva.

Não confunda

Brutalismo da web pode priorizar HTML cru; neobrutalismo costuma ser uma composição deliberadamente gráfica.

Exemplo de código

.cartao {
  background: #dcfa85;
  border: 2px solid #171717;
  box-shadow: 5px 5px 0 #171717;
}

Trecho didático. Integre e teste no contexto do seu projeto.

Peça assim para uma IA

Crie uma interface no estilo Neobrutalismo (Neobrutalism) em português do Brasil. Blocos de cor e contornos enfáticos produzem uma interface gráfica com poucas ambiguidades visuais. Contexto de uso: Dar uma personalidade gráfica marcante a projetos com conteúdo direto. Estrutura: Bordas espessas, sombras sem desfoque, cores chapadas e tipografia expressiva. Características visuais: border + box-shadow. Requisito: Garanta hierarquia e leitura; contornos fortes não substituem estados de foco. Considere também: Brutalismo da web pode priorizar HTML cru; neobrutalismo costuma ser uma composição deliberadamente gráfica. Adapte cores e tipografia ao projeto. Cubra estados inicial, foco, ativo, indisponível, carregamento, vazio e erro quando aplicáveis. Garanta contraste legível, comportamento responsivo, movimento reduzido e acesso por teclado. Use textos em PT-BR, valores em reais e datas no formato brasileiro quando houver. Explique quais partes exigem integração real e não simule sucesso sem concluir a operação.

Aprofundar a referência ↗Copiar link deste termo ↗