Brutalismo 1950s Brutalist Architecture to 2010s Web Brutalism

Brutalism

Estilo Brutalismo com paleta monocromática ousada, layouts ríspidos e tipografia não refinada. Ideal para streetwear, marcas experimentais e layouts editoriais desafiadores.

Brutalismrawstarkmonochromaticboldunrefined typographyanti-designvisible gridlarge blocksintentionally crude

Uso: Streetwear, Marcas experimentais, Layouts editoriais, Portfólios de design

Brutalism

Contexto Histórico

O Brutalismo web (2010s) herda da arquitetura brutalista dos anos 50, rejeitando o polimento convencional. Celebra a crueza, tipografia oversized e layouts intencionalmente 'quebrados'.

Quando Usar

Deploy brutalism when your audience values intellectual honesty over comfort. Art galleries, architecture firms, experimental publications, and counter-culture brands benefit from the implicit message: we respect you enough not to hand-hold. It works when content is strong enough to stand without decorative support. Avoid it for products requiring high task-completion rates or accessibility-first contexts — brutalism trades usability conventions for expressive power, and that trade-off must be deliberate, not lazy.

Princípios de Design

  • Expose structure — let the grid, the markup, and the system defaults remain visible as design elements rather than hiding them behind polish
  • Reject decorative comfort — no gratuitous border-radius, no soft shadows, no gradient safety blankets; if an element exists, it earns its place through function
  • Maximize typographic contrast — pair extreme scale differences, use system or monospace fonts at confrontational sizes, let whitespace do the heavy lifting
  • Honor raw materials — default scrollbars, unstyled links, visible borders, and browser chrome are features not bugs; the medium is part of the message
  • Prioritize intentional friction — every moment of discomfort should be a deliberate editorial choice that communicates something, never accidental neglect

Especificações Técnicas

Cores

Primárias

#000000
#FFFFFF
#00FF00
#FF00FF

Secundárias

#0000FF
#FF0000
#FFFF00
#808080

Efeitos

No smooth transitions (instant state changes), sharp corners (0px radius), bold oversized typography (900 weight), visible thick borders (3-5px), intentionally broken/overlapping layouts, monospace system fonts, raw unpolished aesthetic

Light/Dark

✓ Full / ✓ Full

DESIGN.md

Prompt para AI

Relacionados

Última sincronização: 01/04/2026