# Bauhaus

Auch bekannt als: Bauhaus-Design, Bauhaus-Web, geometrische Moderne, Primärfarben-Design  
Ära: 1919-1933 (Weimar, Dessau, Berlin); Web-Revival zyklisch, stark im Jubiläumsjahr 2019  
Seite: https://designforai.dev/de/style/bauhaus

## Merkmale

- nur Primärfarben (Rot, Gelb, Blau) plus Schwarz und Off-White
- Kreis, Quadrat, Dreieck als gesamtes visuelles Vokabular
- geometrische Sans in Kleinbuchstaben, oft mit kreisrunden Buchstabenformen
- asymmetrisch, aber rigoros ausgerichtet; starke horizontale und vertikale Linien
- starker Kontrast zwischen riesigen Formen und kleinem Text
- Diagonalen und überlappende Formen erzeugen Bewegung ohne Motion
- Funktion zuerst: jedes Element hat einen Zweck, Dekoration ist Struktur

Palette: #f2efe6 Off-White, #111111 Schwarz, #d62828 Rot, #f7b801 Gelb, #1d4e89 Blau

Schrift: Schriften der Bauhaus-Linie sind kommerziell; frei: Josefin Sans, Jost, Spartan, Kanit oder Poppins; Überschriften 700 in Kleinbuchstaben bei 48-96px, Fließtext 400 bei 16-18px; gelegentlich eine Stencil-Display-Schrift für ein einzelnes Wort

## Do

- beschränke Formen auf Kreis, Quadrat und Dreieck in den drei Primärfarben; kombiniere sie zu Logos und Abschnittstrennern
- nutze dicke schwarze Linien (4-8px) als Rasterskelett, sichtbar auf der Seite
- setze Überschriften in Kleinbuchstaben; Versalien lesen sich als Art Deco, nicht Bauhaus

## Don't

- füge keine Sekundärfarben, Verläufe oder Fotografie hinzu
- runde keine Kartenecken; Formen sind geometrische Primitive, keine UI-Karten
- zentriere keinen Fließtext

Bekannt dafür: Bauhaus-Archiv Berlin, Stiftung Bauhaus Dessau, Poster von Kandinsky und Moholy-Nagy, Wallpaper*-Magazin (teilweise)

## CSS-Seed

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

## Prompt

Baue die Seite im Bauhaus-Stil. Hintergrund #f2efe6, Text #111111, genau drei Akzente: Rot #d62828, Gelb #f7b801, Blau #1d4e89. Schrift Jost: Überschriften 700 in Kleinbuchstaben bei 88/48/28px mit -0.01em Tracking und line-height 1.0, Fließtext 400 bei 18px, line-height 1.5, linksbündig. Layout auf einem 12-Spalten-Raster mit sichtbarer Struktur: 6px solid #111 horizontale Linien zwischen Abschnitten und eine vertikale Linie, die links an der Inhaltsspalte herunterläuft. Hero: ein großer roter Kreis (40vw), der ein blaues Quadrat und ein gelbes Dreieck überlappt (CSS-Formen oder Inline-SVG), die Headline sitzt quer darüber. Buttons sind Rechtecke, border-radius 0, solides #111 mit #f2efe6 Text, Hover wechselt auf #d62828. Abschnittstrenner nutzen eine Reihe abwechselnder Quadrate in Primärfarben. Keine Schatten, keine Verläufe, keine Fotos, keine Icons; nutze die drei Formen als Piktogramme. Motion: ein einzelnes 800ms Hineingleiten der Hero-Formen beim Laden, sonst nichts.