# Bauhaus

Também chamado de: design Bauhaus, web Bauhaus, modernismo geométrico, design de cores primárias  
Era: 1919-1933 (Weimar, Dessau, Berlim); revival cíclico na web, forte no centenário de 2019  
Página: https://designforai.dev/pt/style/bauhaus

## Traços

- só cores primárias (vermelho, amarelo, azul) mais preto e branco-sujo
- círculo, quadrado e triângulo como vocabulário visual inteiro
- sans geométrica em caixa baixa, muitas vezes com letras circulares
- assimétrico mas rigorosamente alinhado; filetes horizontais e verticais fortes
- contraste pesado entre formas enormes e texto pequeno
- diagonais e formas sobrepostas dão movimento sem animação
- função primeiro: cada elemento tem um propósito, a decoração é estrutura

Paleta: #f2efe6 branco-sujo, #111111 preto, #d62828 vermelho, #f7b801 amarelo, #1d4e89 azul

Tipografia: As fontes da linhagem Bauhaus são comerciais; gratuitas: Josefin Sans, Jost, Spartan, Kanit ou Poppins; títulos 700 em caixa baixa a 48-96px, corpo 400 a 16-18px; ocasionalmente uma fonte display estêncil para uma única palavra

## Faça

- restrinja as formas a círculo, quadrado e triângulo nas três primárias; combine-as em logos e divisores de seção
- use filetes pretos grossos (4-8px) como esqueleto da grade, visíveis na página
- componha os títulos em caixa baixa; caixa alta lê como Art Deco, não Bauhaus

## Evite

- não adicione cores secundárias, gradientes nem fotografia
- não arredonde cantos de cards; as formas são primitivas geométricas, não cards de UI
- não centralize o corpo de texto

Conhecido por: Bauhaus-Archiv Berlim, Fundação Bauhaus Dessau, pôsteres de Kandinsky e Moholy-Nagy, revista Wallpaper* (parcial)

## Semente CSS

```css
:root{--bg:#f2efe6; --fg:#111111; --accent:#d62828; --accent2:#f7b801; --accent3:#1d4e89; --radius:0; --rule:6px solid #111; --font:'Jost',sans-serif}
```

## Prompt

Construa o site em estilo Bauhaus. Fundo #f2efe6, texto #111111, exatamente três acentos: vermelho #d62828, amarelo #f7b801, azul #1d4e89. Fonte Jost: títulos 700 em caixa baixa a 88/48/28px com tracking -0.01em e line-height 1.0, corpo 400 a 18px, line-height 1.5, alinhado à esquerda. Layout numa grade de 12 colunas com estrutura visível: filetes horizontais 6px solid #111 entre seções e um filete vertical descendo pela esquerda da coluna de conteúdo. Hero: um grande círculo vermelho (40vw) sobrepondo um quadrado azul e um triângulo amarelo (formas em CSS ou SVG inline), com a manchete atravessando-os. Botões são retângulos, border-radius 0, #111 sólido com texto #f2efe6, o hover troca para #d62828. Os divisores de seção usam uma fileira de quadrados alternando as cores primárias. Sem sombras, sem gradientes, sem fotos, sem ícones; use as três formas como pictogramas. Movimento: um único slide-in de 800ms das formas do hero no load, nada mais.