Bauhaus design: shapes, primaries and lasting ideas

Bauhaus design is the style that came out of the Bauhaus, a German school of art, craft and design that ran from 1919 to 1933. It is known for simple geometric shapes, primary colours, sans serif lettering, asymmetric layouts and a belief that good design should be useful, well made and suited to industrial production. Its ideas still sit underneath most modern graphic design, from the grid in a poster to the icons on your phone.

A short history of the Bauhaus

The teachers were remarkable: Johannes Itten, Paul Klee, Wassily Kandinsky, László Moholy-Nagy and Josef Albers among them. Albers later wrote Interaction of Color, still one of the best books on how colours change each other, which connects directly to modern colour theory.

Bauhaus colours and shapes, with CSS

The look most people picture is red, yellow and blue with black, on an off white ground, built from circles, squares and triangles. Kandinsky’s 1923 questionnaire, which proposed the yellow triangle, red square and blue circle, became the shorthand for the whole school, even though Bauhaus work used many more colours than that.

Hard stops, where one colour ends exactly where the next begins, are the key. They turn a gradient into a crisp shape. Gradient shapes covers more of these, and the code below combines four into one tile.

.bauhaus-tile {
  aspect-ratio: 1 / 1;
  background-color: #f1ece1;
  background-image:
    radial-gradient(circle at 100% 100%, #be1e2d 70%, transparent 70.5%),
    linear-gradient(135deg, #f2c12e 50%, transparent 50%),
    radial-gradient(circle, #21409a 45%, transparent 45.5%),
    linear-gradient(#111111, #111111);
  background-size: 50% 50%;
  background-position: 0 0, 100% 0, 0 100%, 100% 100%;
  background-repeat: no-repeat;
}

Bauhaus typography

Bauhaus designers wanted type that was clear, rational and modern. Herbert Bayer argued that capital letters were unnecessary and drew universal, a geometric alphabet with no capitals at all; many of the school’s own printed materials dropped capitals for a while. Posters set sans serif type in bold blocks, often rotated, with thick rules and bars to organise the page.

• Geometric sans serifs: round o, straight stems, even strokes. Futura, released in 1927, is not a Bauhaus typeface but shares the spirit; Jost on Google Fonts is a free face in the same vein.
• Lowercase headlines: a quiet nod to Bayer’s universal.
• Rotated text: type running up the side of a poster gives the asymmetric, dynamic feel.
• Bars and rules: thick black lines that divide and direct, instead of boxes.

How to use Bauhaus design today

Copying the shapes and primaries exactly produces something that looks like a museum gift shop. The lasting value of the Bauhaus is in its principles, which work with any palette.

1. 1

   Start from function

   Decide what the design must do, such as announce a date or sell a product, and let that decide the layout.

2. 2

   Build on a grid, then break it once

   Lay everything on a clear grid, then let one shape or line cut across it. That tension is very Bauhaus. Swiss design developed the grid further.

3. 3

   Limit colour

   Three colours plus black and a paper ground. Swap the primaries for your brand colours and the structure still reads as Bauhaus.

4. 4

   Use shapes as structure

   A circle can frame a photo, a bar can hold a headline, a triangle can point to the call to action.

5. 5

   Keep type plain

   One geometric sans serif, two weights, set large and flush left.

That second example shows the modern twist. The Bauhaus layout stays strict, but the background is a Gradiently Mark instead of flat red or blue: still a limited palette, still structural, but with its own light and grain, and once claimed it is yours alone. The rigid type sits on its calmest area, so the grid stays crisp.

If you like the Bauhaus, compare it with the decorative glamour of Art Deco design, the raw honesty of brutalist design, and its playful 1980s rebellion in Memphis design.