Design for AI

Stil Bauhaus: UI-Design-Prompt

Palette, Schriftregeln und ein einfügbarer Prompt für bauhaus. Auch bekannt als Bauhaus-Design, Bauhaus-Web, geometrische Moderne, Primärfarben-Design. 1919-1933 (Weimar, Dessau, Berlin); Web-Revival zyklisch, stark im Jubiläumsjahr 2019.

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
: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.
Für design.md, .cursorrules oder AGENTS.md
## Designrichtung
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.

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

Hover- und focus-visible-Zustände auf jedem interaktiven Element beibehalten. Kein CSS-Framework hinzufügen.