# Bauhaus

Also called: Bauhaus design, Bauhaus web, geometric modernism, primary colour design  
Era: 1919-1933 (Weimar, Dessau, Berlin); web revival cyclical, strong in 2019 centenary  
Page: https://designforai.dev/style/bauhaus

## 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

```css
: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.