Design for AI

Bauhaus: UI design prompt

Palette, type rules and a pasteable prompt for bauhaus. Also called Bauhaus design, Bauhaus web, geometric modernism, primary colour design. 1919-1933 (Weimar, Dessau, Berlin); web revival cyclical, strong in 2019 centenary.

Traits

  • primary colours only (red, yellow, blue) plus black and off-white
  • circle, square, triangle as the entire visual vocabulary
  • geometric sans in lowercase, often with circular letterforms
  • asymmetric but rigorously aligned; strong horizontal and vertical rules
  • heavy contrast between huge shapes and small text
  • diagonals and overlapping shapes give movement without motion
  • function first: every element has a purpose, decoration is structure

Palette

#f2efe6 off-white, #111111 black, #d62828 red, #f7b801 yellow, #1d4e89 blue

Type

Bauhaus-lineage fonts are commercial; free: Josefin Sans, Jost, Spartan, Kanit or Poppins; headings 700 lowercase at 48-96px, body 400 at 16-18px; occasionally a stencil display font for one word

Do

  • restrict shapes to circle, square and triangle in the three primaries; combine them into logos and section dividers
  • use thick black rules (4-8px) as the grid skeleton, visible on the page
  • set headings lowercase; uppercase reads as Art Deco, not Bauhaus

Don't

  • do not add secondary colours, gradients or photography
  • do not round card corners; shapes are geometric primitives, not UI cards
  • do not centre body text

Known for it: Bauhaus-Archiv Berlin, Bauhaus Dessau Foundation, Kandinsky and Moholy-Nagy posters, Wallpaper* magazine (partial)

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

Build the site in Bauhaus style. Background #f2efe6, text #111111, exactly three accents: red #d62828, yellow #f7b801, blue #1d4e89. Font Jost: headings 700 lowercase at 88/48/28px with -0.01em tracking and line-height 1.0, body 400 at 18px, line-height 1.5, flush left. Layout on a 12-column grid with visible structure: 6px solid #111 horizontal rules between sections and one vertical rule running down the left of the content column. Hero: a large red circle (40vw) overlapping a blue square and a yellow triangle (CSS shapes or inline SVG), headline sitting across them. Buttons are rectangles, border-radius 0, solid #111 with #f2efe6 text, hover swaps to #d62828. Section dividers use a row of alternating primary-coloured squares. No shadows, no gradients, no photos, no icons; use the three shapes as pictograms. Motion: a single 800ms slide-in of the hero shapes on load, nothing else.
For design.md, .cursorrules or AGENTS.md
## Design direction
Build the site in Bauhaus style. Background #f2efe6, text #111111, exactly three accents: red #d62828, yellow #f7b801, blue #1d4e89. Font Jost: headings 700 lowercase at 88/48/28px with -0.01em tracking and line-height 1.0, body 400 at 18px, line-height 1.5, flush left. Layout on a 12-column grid with visible structure: 6px solid #111 horizontal rules between sections and one vertical rule running down the left of the content column. Hero: a large red circle (40vw) overlapping a blue square and a yellow triangle (CSS shapes or inline SVG), headline sitting across them. Buttons are rectangles, border-radius 0, solid #111 with #f2efe6 text, hover swaps to #d62828. Section dividers use a row of alternating primary-coloured squares. No shadows, no gradients, no photos, no icons; use the three shapes as pictograms. Motion: a single 800ms slide-in of the hero shapes on load, nothing else.

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

Keep hover and focus-visible states on every interactive element. Do not add a CSS framework.