# Design Bauhaus: formas, cores primárias e ideias que duram

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

Uma escola que existiu por apenas catorze anos ainda molda a aparência de cartazes, móveis, apps e logos. Veja o que a Bauhaus realmente ensinava e como se inspirar nela sem cair no pastiche.

## The short version

- A Bauhaus foi uma escola alemã de arte, artesanato e design fundada por Walter Gropius em Weimar em 1919 e fechada em Berlim em 1933 sob pressão do governo nazista.
- O design Bauhaus prefere formas geométricas simples, cores primárias, tipografia sem serifa, layouts assimétricos e a ideia de que a forma segue a função.
- Em 1923, Wassily Kandinsky pediu às pessoas da escola que associassem um triângulo, um quadrado e um círculo ao amarelo, ao vermelho e ao azul; ele propôs triângulo amarelo, quadrado vermelho e círculo azul.
- Herbert Bayer desenhou em 1925 uma fonte só de minúsculas chamada universal, um dos primeiros exemplos da busca da escola por uma tipografia mais simples e racional.
- Para usar o estilo Bauhaus hoje, adote seus princípios de estrutura clara e cor limitada em vez de copiar as formas ao pé da letra.

**Design Bauhaus** é o estilo que saiu da Bauhaus, uma escola alemã de arte, artesanato e design que funcionou de 1919 a 1933. Ele é conhecido por formas geométricas simples, cores primárias, letras sem serifa, layouts assimétricos e pela convicção de que um bom design deve ser útil, bem-feito e adequado à produção industrial. Suas ideias ainda estão por baixo da maior parte do design gráfico moderno, do grid de um cartaz aos ícones do seu celular.

## Uma breve história da Bauhaus

| Ano | O que aconteceu |
| --- | --- |
| 1919 | Walter Gropius funda a Staatliches Bauhaus em Weimar, unindo o ensino de belas-artes e de artesanato. |
| 1923 | Uma grande exposição apresenta o trabalho da escola; Kandinsky aplica seu questionário de formas e cores. |
| 1925 | A escola se muda para Dessau. Herbert Bayer desenha sua fonte universal, só de minúsculas. |
| 1926 | Inaugura o prédio de Dessau projetado por Gropius, com suas paredes de vidro. |
| 1928 a 1930 | Hannes Meyer dirige a escola e a leva para a arquitetura e a função social. |
| 1930 a 1933 | Ludwig Mies van der Rohe assume a direção; a escola se muda para Berlim em 1932 e fecha em 1933. |
| Depois de 1933 | Os professores emigram. Gropius e Marcel Breuer dão aula em Harvard, Mies em Chicago, Josef Albers no Black Mountain College e depois em Yale. |

Catorze anos, três cidades, três diretores. A emigração depois de 1933 explica boa parte de por que as ideias se espalharam tanto.

Os professores eram notáveis: Johannes Itten, Paul Klee, Wassily Kandinsky, László Moholy-Nagy e Josef Albers, entre outros. Albers escreveu depois *A interação da cor*, ainda um dos melhores livros sobre como as cores se transformam umas às outras, o que se liga diretamente à [teoria das cores](https://gradiently.design/pt-br/guide/color-theory-basics) moderna.

## Cores e formas da Bauhaus, com CSS

O visual que a maioria das pessoas imagina é vermelho, amarelo e azul com preto, sobre um fundo quase branco, construído com círculos, quadrados e triângulos. O questionário de Kandinsky de 1923, que propôs o triângulo amarelo, o quadrado vermelho e o círculo azul, virou o resumo da escola inteira, embora os trabalhos da Bauhaus usassem muito mais cores que essas.

- Vermelho Bauhaus: #be1e2d
- Amarelo Bauhaus: #f2c12e
- Azul Bauhaus: #21409a
- Preto: #111111
- Papel: #f1ece1

Uma paleta inspirada na Bauhaus. As primárias estão levemente aquecidas e aprofundadas, mais perto da tinta impressa do que do RGB da tela.

- Círculo azul: `radial-gradient(circle at 50% 50%, #21409a 0 38%, #f1ece1 38.5%)`
- Quarto de círculo vermelho: `radial-gradient(circle at 0% 100%, #be1e2d 0 60%, #f2c12e 60.5%)`
- Triângulo amarelo: `linear-gradient(135deg, #f2c12e 0 50%, #111111 50%)`
- Semicírculo preto: `radial-gradient(circle at 50% 100%, #111111 0 45%, #21409a 45.5%)`
- Quatro quartos: `conic-gradient(from 0deg, #be1e2d 0 25%, #f2c12e 0 50%, #21409a 0 75%, #111111 0)`
- Listras vermelhas: `repeating-linear-gradient(90deg, #be1e2d 0 24px, #f1ece1 24px 48px)`

Formas da Bauhaus feitas só com CSS, com paradas de cor duras. Cada uma é um único gradiente que você pode copiar.

As paradas duras, em que uma cor termina exatamente onde a próxima começa, são o segredo. Elas transformam um gradiente numa forma nítida. [Formas com gradiente](https://gradiently.design/pt-br/guide/gradient-shapes) mostra mais delas, e o código abaixo combina quatro num só bloco.

```css
.bauhaus-tile {
  aspect-ratio: 1 / 1;
  background-color: #f1ece1;
  background-image:
    radial-gradient(circle at 100% 100%, #be1e2d 70%, transparent 70.5%),
    linear-gradient(135deg, #f2c12e 50%, transparent 50%),
    radial-gradient(circle, #21409a 45%, transparent 45.5%),
    linear-gradient(#111111, #111111);
  background-size: 50% 50%;
  background-position: 0 0, 100% 0, 0 100%, 100% 100%;
  background-repeat: no-repeat;
}
```

Um bloco Bauhaus em quatro partes: um quarto de círculo vermelho, um triângulo amarelo, um círculo azul e um quadrado preto, cada um no seu quadrante.

## Tipografia da Bauhaus

Os designers da Bauhaus queriam uma tipografia clara, racional e moderna. Herbert Bayer defendia que as maiúsculas eram desnecessárias e desenhou a universal, um alfabeto geométrico sem nenhuma maiúscula; muitos impressos da própria escola abandonaram as maiúsculas por um tempo. Os cartazes usavam letras sem serifa em blocos fortes, muitas vezes giradas, com fios e barras grossas para organizar a página.

- **Sem serifas geométricas:** o redondo, hastes retas, traços uniformes. A Futura, lançada em 1927, não é uma fonte da Bauhaus, mas tem o mesmo espírito; a Jost, no Google Fonts, é uma opção gratuita na mesma linha.
- **Títulos em minúsculas:** uma homenagem discreta à universal de Bayer.
- **Texto girado:** letras subindo pela lateral do cartaz dão a sensação assimétrica e dinâmica.
- **Barras e fios:** linhas pretas grossas que dividem e direcionam, em vez de caixas.

## Como usar o design Bauhaus hoje

Copiar exatamente as formas e as primárias produz algo com cara de loja de museu. O valor duradouro da Bauhaus está nos princípios, que funcionam com qualquer paleta.

1. **Comece pela função** Decida o que o design precisa fazer, como anunciar uma data ou vender um produto, e deixe isso definir o layout.
2. **Construa sobre um grid e quebre-o uma vez** Coloque tudo num grid claro e depois deixe uma forma ou linha cortá-lo. Essa tensão é muito Bauhaus. O [design suíço](https://gradiently.design/pt-br/guide/swiss-design) levou o grid adiante.
3. **Limite as cores** Três cores mais preto e um fundo de papel. Troque as primárias pelas cores da sua marca e a estrutura continua parecendo Bauhaus.
4. **Use formas como estrutura** Um círculo pode emoldurar uma foto, uma barra pode segurar um título, um triângulo pode apontar para a chamada para ação.
5. **Mantenha a tipografia simples** Uma sem serifa geométrica, dois pesos, em tamanho grande e alinhada à esquerda.

Um post de evento em retrato com o texto a forma segue a função em minúsculas, um sobretítulo pequeno e uma linha de detalhes

Um título em minúsculas, um sobretítulo pequeno e detalhes simples: a contenção da Bauhaus num post de evento moderno.

Uma capa horizontal com o texto Forma, cor, linha e o número da edição acima

Os mesmos princípios numa capa de 1600×1200, com um fundo vivo no lugar das primárias chapadas.

Esse segundo exemplo mostra o toque moderno. O layout Bauhaus continua rigoroso, mas o fundo é um Mark do Gradiently em vez de vermelho ou azul chapado: ainda uma paleta limitada, ainda estrutural, mas com luz e granulado próprios, e depois de reservado ele é só seu. A tipografia rígida fica sobre a área mais calma dele, e o grid continua nítido.

Se você gosta da Bauhaus, compare-a com o glamour decorativo do [design Art Déco](https://gradiently.design/pt-br/guide/art-deco-design), a honestidade crua do [design brutalista](https://gradiently.design/pt-br/guide/brutalist-design) e a rebeldia brincalhona dos anos 1980 no [design Memphis](https://gradiently.design/pt-br/guide/memphis-design).

## FAQ

### O que é design Bauhaus?

O estilo da escola Bauhaus, na Alemanha, de 1919 a 1933: formas geométricas, cores primárias, tipografia sem serifa, layouts assimétricos e foco na função.

### Quais são as cores da Bauhaus?

Vermelho, amarelo e azul com preto e branco são as cores mais associadas a ela, em parte por causa do questionário de formas e cores de Kandinsky, de 1923.

### Que fonte é usada no design Bauhaus?

Sem serifas geométricas. Herbert Bayer desenhou em 1925 uma fonte só de minúsculas chamada universal; hoje a Futura ou a gratuita Jost dão uma sensação parecida.

### Por que a Bauhaus fechou?

A escola fechou em 1933, em Berlim, sob pressão do governo nazista, que via seu modernismo como politicamente suspeito.

### Como fazer um cartaz no estilo Bauhaus?

Use um grid claro, algumas formas geométricas fortes, três cores mais preto sobre um fundo de papel e tipografia sem serifa simples, alinhada à esquerda ou girada.