Bauhaus
Also called: Bauhaus Modernism, Constructivist geometric
Primary red, yellow and blue with black on paper — circles, squares and triangles composed like a 1920s school poster.
Design keywords
Say these words to ask for this style.
Bauhaus UI borrows the Weimar/Dessau poster toolkit: a warm paper ground, solid black rules, and only the three primaries plus black. Every component is built from the three basic shapes — square cards and buttons, circular avatars, step numbers and toggles, triangular accents — and they are colour-coded red / yellow / blue in rotation. Layouts are asymmetric and constructivist: big geometric sans headings, colour bands, and shapes that overlap the grid.
Best for
- Schools, courses and learning platforms
- Museums, galleries and design events
- Architecture and design studios
- Kids and family products that need structure
Avoid for
- Luxury and premium brands that need softness
- Healthcare or finance needing calm neutrality
- Photo-heavy lifestyle sites (the shapes fight the images)
✓ Do
- Limit colour to #D42A20 red, #F2C21B yellow, #1F4E9C blue plus black on paper; status green/amber only for state badges and text, never as shape fills
- Rotate the three primaries in order across cards, steps and charts
- Use 0px corners for rectangles and true 50% circles — never in-between radii
- Let one big geometric shape overlap the hero grid
✕ Don't
- No gradients, blur or soft shadows
- Don’t use pastel or secondary colours like purple or green as brand colours
- Don’t round rectangle corners
- Don’t use humanist or serif headline fonts
Not to be confused with
On mobile
Keep square cards and 2px black rules; the active tab sits in a red circle and list icons rotate circle / square / triangle. One geometric composition per screen (onboarding art, featured card) is enough.
Prompt builder
Paste into Claude, Cursor, v0, Lovable or any coding agent to recreate this style.