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

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

O brutalismo começou em edifícios de betão e tornou-se uma forma de desenhar sites e cartazes que recusa o polimento. Usado com intenção, é um dos looks mais reconhecíveis que pode escolher.

## The short version

- O design brutalista deve o nome à arquitetura brutalista, palavra geralmente associada ao francês béton brut, que significa betão cru.
- No design gráfico e web, brutalismo significa estrutura à vista: grelhas visíveis, tipografia por defeito ou monoespaçada, contornos duros e pouca decoração.
- O neobrutalismo é um derivado mais simpático e polido, usado em apps e sites, com cores vivas planas, contornos pretos grossos e sombras duras deslocadas.
- Os layouts brutalistas podem parecer descuidados e continuar fáceis de usar, desde que o contraste do texto, o estilo das ligações e a navegação se mantenham claros.
- O brutalismo funciona melhor em marcas que querem parecer honestas, independentes ou técnicas, e pior em marcas que vendem calma ou luxo.

O **design brutalista** é um estilo que mostra a sua estrutura em vez de a esconder: grelhas visíveis, tipografia por defeito ou monoespaçada, contornos pretos duros, cor plana e quase nenhum ornamento. O nome vem da arquitetura brutalista, geralmente associada ao francês *béton brut*, betão cru. Num site ou cartaz, o brutalismo parece deliberadamente por polir, o que o faz destacar-se num mundo de cartões arredondados e gradientes suaves. Usado com cuidado, continua a ser perfeitamente fácil de ler e navegar.

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

A ideia nasceu na arquitetura depois da Segunda Guerra Mundial. Os arquitetos deixaram o betão à vista, mostraram como um edifício era feito e preferiram a função ao acabamento. Os designers gráficos e web retomaram a atitude décadas depois, não o betão.

| Quando | O que aconteceu |
| --- | --- |
| Fim dos anos 1940 a 1952 | Le Corbusier constrói a Unité d’Habitation, em Marselha, em *béton brut* à vista, o edifício 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 sua própria arquitetura despojada. |
| 1955 | O crítico Reyner Banham publica o ensaio *The New Brutalism*, dando teoria ao movimento. |
| Anos 2010 | Os web designers adotam o termo para sites crus, de aspeto escrito à mão em código, que ignoram os modelos polidos. |
| Anos 2020 | O neobrutalismo espalha-se por apps e startups: cores vivas planas, contornos grossos e sombras duras deslocadas. |

Do betão ao código. A ideia comum a tudo isto é a honestidade sobre a forma como as coisas são feitas.

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

- **Tipografia por defeito ou do sistema:** Times, Arial, Courier e fontes monoespaçadas, muitas vezes num só tamanho, com o peso a fazer a hierarquia.
- **Estrutura à vista:** contornos à volta de cada bloco, linhas de grelha visíveis, tabelas que parecem tabelas.
- **Arestas duras:** sem cantos arredondados, sem sombras suaves, sem desfocagem.
- **Cor plana:** branco, preto, cinzento e uma ou duas cores de sinal berrantes.
- **Ligações cruas:** ligações azuis sublinhadas, botões simples com contorno.
- **Layouts densos ou irregulares:** conteúdo empilhado de ponta a ponta, ou um elemento enorme a quebrar a grelha.

- Betão: #e5e4e0
- Agregado: #9a9894
- Alcatrão: #111111
- Branco: #ffffff
- Laranja de sinal: #ff4800
- Azul de ligação: #0000ee

Uma paleta brutalista clássica: cinzentos de betão, preto, branco e uma cor de sinal. `#0000ee` é o azul de ligação não visitada que muitos navegadores usam há muito como predefinição.

É na tipografia que o brutalismo mais se nota. Uma fonte monoespaçada diz “feito à mão, em código”; um serif simples no tamanho por defeito diz “não nos incomodámos com fontes”, e é esse o ponto. [Fontes monoespaçadas](https://gradiently.design/pt-pt/guide/monospace-fonts) lista boas escolhas se quiser o look sem depender do que o sistema do leitor tiver.

## Brutalismo e neobrutalismo comparados

A maior parte do que hoje se chama brutalista em sites de produtos é neobrutalismo, por vezes escrito neo brutalismo. Mantém os contornos duros e a cor plana, mas acrescenta simpatia: cores vivas pastel ou de rebuçado, tipografia robusta e uma sombra sólida deslocada que faz os cartões parecerem pousados na página.

### Brutalismo

- Cinzentos, preto, branco, uma cor de sinal
- Fontes por defeito ou do sistema
- Deliberadamente desajeitado, por vezes hostil
- Parece um documento ou uma fanzine
- Comum em portefólios, sites de arte e cultura

### Neobrutalismo

- Cores vivas planas, como limão, lilás e menta
- Grotescas robustas com personalidade
- Divertido e acessível
- Parece autocolantes 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 cartão e um botão neobrutalistas. A sombra não tem desfocagem, por isso parece uma laje sólida; ao carregar, o botão desliza para o lugar.

## Como usar o design brutalista sem prejudicar a usabilidade

O brutalismo pode parecer áspero. Não pode ser confuso. Os melhores sites brutalistas são diretos sobre onde estão as coisas: navegação grande e simples, ligações óbvias, títulos honestos. A fealdade por escolha é um estilo; o texto ilegível é só um erro.

1. **Escolha uma regra para quebrar** Pode ser a tipografia por defeito, uma cor que choca, uma grelha irregular. Quebrar todas as convenções de uma vez parece avariado, não brutal.
2. **Mantenha o contraste alto** Preto sobre branco ou branco sobre preto é muito brutalista e muito legível. Cinzento sobre cinzento não é nem uma coisa nem outra. Confira o texto com [contraste de cor e acessibilidade](https://gradiently.design/pt-pt/guide/color-contrast-accessibility) em mente.
3. **Torne as ligações inconfundíveis** Sublinhados e uma cor distinta. O brutalismo é um estilo em que as antigas predefinições do navegador são uma mais-valia.
4. **Use a estrutura como decoração** Contornos, linhas, secções numeradas e grelhas visíveis dão à página o seu aspeto, por isso não precisa de imagens para parecer desenhada.
5. **Deixe um elemento ser enorme** Um título ou número gigante a quebrar a grelha dá tensão a um layout brutalista. Veja [design gráfico ousado](https://gradiently.design/pt-pt/guide/bold-design-ideas) para a escala.

Uma publicação vertical com estilo de notas de campo, a dizer Índice de obras, 2019 até hoje, sobre um fundo texturado

Sensibilidade brutalista numa publicação: tipografia simples, palavras documentais e um fundo que é só textura e nenhum polimento.

## A quem convém o design brutalista

O brutalismo diz às pessoas que se importa mais com o conteúdo do que com a embalagem. Isso assenta a editoras independentes, editoras discográficas, galerias, arquitetos, ferramentas para programadores e portefólios de designers. Assenta muito menos a um spa, a uma joalharia ou a uma marca infantil, porque esses clientes compram tranquilidade e calma. Se gosta da clareza mas não da aspereza, o [design suíço](https://gradiently.design/pt-pt/guide/swiss-design) partilha o amor do brutalismo pela grelha com muito mais polimento.

Também pode pedir emprestado só um pouco de brutalismo. 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 por trás desse tipo de texto simples, porque mantém uma zona calma sob as palavras e escolhe tinta clara ou escura linha a linha. Junte-o aos layouts de [design de landing pages](https://gradiently.design/pt-pt/guide/landing-page-design) para um site que parece ao mesmo tempo cru e acabado.

## FAQ

### O que é o design brutalista?

Um estilo que expõe a estrutura e evita o polimento, com tipografia por defeito ou monoespaçada, contornos duros, cor plana e grelhas visíveis. O nome vem da arquitetura brutalista.

### De onde vem o nome brutalismo?

Geralmente associa-se ao francês *béton brut*, que significa betão cru, o material mais ligado ao estilo de arquitetura do pós-guerra.

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

O brutalismo é cru e muitas vezes austero, em cinzentos e com fontes por defeito. O neobrutalismo mantém os contornos grossos mas acrescenta cores vivas planas, tipografia robusta e sombras duras deslocadas.

### O web design brutalista prejudica a usabilidade?

Não tem de prejudicar. Mantenha o contraste do texto alto, as ligações óbvias e a navegação simples, e um site brutalista pode ser mais fácil de usar do que um polido.

### Que fontes se usam no design brutalista?

Fontes monoespaçadas, fontes do sistema como Arial e Times, e grotescas pesadas. A escolha costuma indicar que o conteúdo conta mais do que o estilo.