Design for AI

Estilo Bauhaus: prompt de design de UI

Paleta, regras de tipografia e um prompt pronto para colar de bauhaus. Também chamado de design Bauhaus, web Bauhaus, modernismo geométrico, design de cores primárias. 1919-1933 (Weimar, Dessau, Berlim); revival cíclico na web, forte no centenário de 2019.

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
: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.
Para design.md, .cursorrules ou AGENTS.md
## Direção de design
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.

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

Mantenha estados de hover e focus-visible em todo elemento interativo. Não adicione um framework CSS.