# Design brutalista: layouts crus e como usá-los

[Canonical HTML page](https://gradiently.design/pt-br/guide/brutalist-design)

O brutalismo começou como prédios de concreto e virou um jeito de criar sites e cartazes que recusa o acabamento polido. Usado com intenção, é um dos visuais mais reconhecíveis que você pode escolher.

## The short version

- O design brutalista tem o nome da arquitetura brutalista, palavra normalmente ligada ao francês béton brut, que significa concreto bruto.
- No design gráfico e na web, brutalismo significa estrutura exposta: grids visíveis, fontes padrão ou monoespaçadas, bordas duras e pouca decoração.
- O neobrutalismo é uma vertente mais simpática e polida usada em apps e sites, com cores vivas chapadas, contornos pretos grossos e sombras deslocadas duras.
- Layouts brutalistas podem parecer desleixados e ainda assim ser fáceis de usar, desde que o contraste do texto, o estilo dos links e a navegação continuem claros.
- O brutalismo funciona melhor para marcas que querem parecer honestas, independentes ou técnicas, e menos para marcas que vendem calma ou luxo.

O **design brutalista** é um estilo que mostra a estrutura em vez de escondê-la: grids visíveis, fontes padrão ou monoespaçadas, bordas pretas duras, cor chapada e quase nenhum ornamento. O nome vem da arquitetura brutalista, normalmente ligada ao francês *béton brut*, concreto bruto. Num site ou cartaz, o brutalismo parece propositalmente sem acabamento, o que faz com que ele se destaque num mundo de cards arredondados e degradês suaves. Usado com cuidado, continua perfeitamente fácil de ler e navegar.

## De onde vem o brutalismo: uma breve história

A ideia começou na arquitetura depois da Segunda Guerra Mundial. Os arquitetos deixavam o concreto à mostra, revelavam como o prédio era feito e priorizavam a função em vez do acabamento. Designers gráficos e de web adotaram a atitude décadas depois, não o concreto.

| Quando | O que aconteceu |
| --- | --- |
| Fim dos anos 1940 a 1952 | Le Corbusier constrói a Unité d’Habitation em Marselha em *béton brut* aparente, o prédio mais citado como o início do estilo. |
| Início dos anos 1950 | Alison e Peter Smithson usam a expressão Novo Brutalismo para a própria arquitetura despojada. |
| 1955 | O crítico Reyner Banham publica o ensaio *The New Brutalism*, que dá ao movimento a sua teoria. |
| Anos 2010 | Web designers adotam a palavra para sites crus, com cara de código feito à mão, que ignoram templates polidos. |
| Anos 2020 | O neobrutalismo se espalha por apps e startups: cores vivas chapadas, contornos grossos e sombras deslocadas duras. |

Do concreto ao código. A ideia comum a tudo isso é a honestidade sobre como uma coisa é feita.

## Como é o design gráfico e web brutalista

- **Fontes padrão ou do sistema:** Times, Arial, Courier e fontes monoespaçadas, muitas vezes num só tamanho, com o peso fazendo a hierarquia.
- **Estrutura visível:** bordas em volta de cada bloco, linhas do grid à mostra, tabelas com cara de tabela.
- **Bordas duras:** sem cantos arredondados, sem sombras suaves, sem desfoque.
- **Cor chapada:** branco, preto, cinza e uma ou duas cores de sinalização fortes.
- **Links crus:** links azuis sublinhados, botões simples com borda.
- **Layouts densos ou irregulares:** conteúdo empilhado de ponta a ponta, ou um elemento enorme quebrando o grid.

- Concreto: #e5e4e0
- Agregado: #9a9894
- Piche: #111111
- Branco: #ffffff
- Laranja sinal: #ff4800
- Azul de link: #0000ee

Uma paleta brutalista clássica: cinzas de concreto, preto, branco e uma cor de sinalização. `#0000ee` é o azul de link não visitado que muitos navegadores usam há tempos como padrão.

É na tipografia que o brutalismo aparece com mais clareza. Uma fonte monoespaçada diz “feito à mão, em código”; uma serifa simples no tamanho padrão diz “não nos preocupamos com fontes”, e essa é justamente a ideia. [Fontes monoespaçadas](https://gradiently.design/pt-br/guide/monospace-fonts) lista boas opções se você quer o visual sem depender do que o sistema do leitor tiver.

## Brutalismo e neobrutalismo comparados

Quase tudo o que hoje é chamado de brutalista em sites de produto é neobrutalismo, às vezes escrito neo brutalismo. Ele mantém os contornos duros e a cor chapada, mas acrescenta simpatia: cores vivas pastel ou de bala, tipografia robusta e uma sombra sólida deslocada que faz os cards parecerem apoiados na página.

### Brutalismo

- Cinzas, preto, branco, uma cor de sinalização
- Fontes padrão ou do sistema
- Propositalmente desajeitado, às vezes hostil
- Parece um documento ou um fanzine
- Comum em portfólios e sites de arte e cultura

### Neobrutalismo

- Cores vivas chapadas, como limão, lilás e menta
- Grotescas robustas com personalidade
- Divertido e acessível
- Parece adesivos numa página
- Comum em startups, apps e newsletters

```css
.card {
  background: #fff36b;
  border: 3px solid #111111;
  border-radius: 0;
  box-shadow: 6px 6px 0 #111111; /* hard offset, no blur */
  padding: 24px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
}

.card a {
  color: #111111;
  text-decoration: underline;
  text-decoration-thickness: 2px;
}

.button {
  background: #c4b5fd;
  border: 3px solid #111111;
  box-shadow: 4px 4px 0 #111111;
  padding: 12px 20px;
  font-weight: 700;
  cursor: pointer;
}

.button:active {
  transform: translate(4px, 4px);
  box-shadow: none; /* the button sinks into its shadow */
}
```

Um card e um botão neobrutalistas. A sombra não tem desfoque, então parece uma placa sólida; ao pressionar, o botão desliza para o lugar dela.

## Como usar o design brutalista sem prejudicar a usabilidade

O brutalismo pode parecer bruto. Não pode ser confuso. Os sites brutalistas mais fortes são diretos sobre onde as coisas estão: navegação grande e simples, links evidentes, títulos honestos. Feiura por escolha é um estilo; texto ilegível é só um bug.

1. **Escolha uma regra para quebrar** Talvez seja a fonte padrão, talvez uma cor que destoa, talvez um grid irregular. Quebrar todas as convenções de uma vez parece quebrado, não brutalista.
2. **Mantenha o contraste alto** Preto no branco ou branco no preto é muito brutalista e muito legível. Cinza sobre cinza não é nenhum dos dois. Confira o texto pensando em [contraste de cores e acessibilidade](https://gradiently.design/pt-br/guide/color-contrast-accessibility).
3. **Deixe os links inconfundíveis** Sublinhado e uma cor própria. O brutalismo é um dos poucos estilos em que os padrões antigos do navegador são uma vantagem.
4. **Use a estrutura como decoração** Bordas, fios, seções numeradas e grids visíveis dão o visual da página, então você não precisa de imagens para que ela pareça projetada.
5. **Deixe um elemento ser enorme** Um título ou número gigante quebrando o grid dá tensão a um layout brutalista. Veja [design gráfico ousado](https://gradiently.design/pt-br/guide/bold-design-ideas) para trabalhar a escala.

Um post vertical em estilo de caderno de campo com a frase Índice de trabalhos, 2019 até hoje, sobre um fundo texturizado

Sensibilidade brutalista num post: tipografia simples, palavras documentais e um fundo todo textura e nenhum polimento.

## Para quem o design brutalista combina

O brutalismo diz às pessoas que você se importa mais com o conteúdo do que com a embalagem. Isso combina com editoras independentes, gravadoras, galerias, arquitetos, ferramentas para desenvolvedores e portfólios de designers. Combina bem menos com um spa, uma joalheria ou uma marca infantil, porque esses clientes estão comprando segurança e tranquilidade. Se você gosta da clareza mas não da aspereza, o [design suíço](https://gradiently.design/pt-br/guide/swiss-design) compartilha o amor do brutalismo pelo grid com muito mais acabamento.

Você também pode usar o brutalismo em parte. Um sistema tipográfico cru e monoespaçado sobre um fundo rico, por exemplo, mantém a honestidade e acrescenta atmosfera. Um Mark do Gradiently funciona bem atrás desse tipo de tipografia simples, porque mantém uma área calma embaixo das palavras e escolhe tinta clara ou escura por linha. Combine com os layouts de [design de landing page](https://gradiently.design/pt-br/guide/landing-page-design) para um site que pareça cru e acabado ao mesmo tempo.

## FAQ

### O que é design brutalista?

Um estilo que expõe a estrutura e evita o polimento, usando fontes padrão ou monoespaçadas, bordas duras, cor chapada e grids visíveis. Tem o nome da arquitetura brutalista.

### De onde vem o nome brutalismo?

Normalmente é ligado ao francês *béton brut*, que significa concreto bruto, o material mais associado ao estilo arquitetônico do pós-guerra.

### Qual a diferença entre brutalismo e neobrutalismo?

O brutalismo é cru e muitas vezes austero, em cinzas e com fontes padrão. O neobrutalismo mantém os contornos grossos, mas acrescenta cores vivas chapadas, tipografia robusta e sombras deslocadas duras.

### O web design brutalista é ruim para a usabilidade?

Não precisa ser. Mantenha o contraste do texto alto, os links evidentes e a navegação simples, e um site brutalista pode ser mais fácil de usar do que um polido.

### Quais fontes são usadas no design brutalista?

Fontes monoespaçadas, fontes do sistema como Arial e Times, e grotescas pesadas. A escolha normalmente sinaliza que o conteúdo importa mais que o estilo.