# Bauhaus design: shapes, primaries and lasting ideas

[Canonical HTML page](https://gradiently.design/guide/bauhaus-design)

A school that existed for only fourteen years still shapes how posters, furniture, apps and logos look. Here is what the Bauhaus actually taught, and how to borrow it without making a pastiche.

## The short version

- The Bauhaus was a German school of art, craft and design founded by Walter Gropius in Weimar in 1919 and closed in Berlin in 1933 under pressure from the Nazi government.
- Bauhaus design favours simple geometric shapes, primary colours, sans serif type, asymmetric layouts and the idea that form should follow function.
- In 1923 Wassily Kandinsky asked people at the school to match a triangle, square and circle to yellow, red and blue; he proposed a yellow triangle, red square and blue circle.
- Herbert Bayer designed a lowercase only typeface called universal in 1925, an early example of the school’s push for simpler, more rational type.
- To use the Bauhaus style today, borrow its principles of clear structure and limited colour rather than copying its shapes literally.

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

| Year | What happened |
| --- | --- |
| 1919 | Walter Gropius founds the Staatliches Bauhaus in Weimar, uniting fine art and craft teaching. |
| 1923 | A major exhibition presents the school’s work; Kandinsky runs his shape and colour questionnaire. |
| 1925 | The school moves to Dessau. Herbert Bayer designs his lowercase universal typeface. |
| 1926 | The Dessau building designed by Gropius opens, glass walls and all. |
| 1928 to 1930 | Hannes Meyer directs the school and pushes it towards architecture and social purpose. |
| 1930 to 1933 | Ludwig Mies van der Rohe directs; the school moves to Berlin in 1932 and closes in 1933. |
| After 1933 | Teachers emigrate. Gropius and Marcel Breuer teach at Harvard, Mies in Chicago, Josef Albers at Black Mountain College and later Yale. |

Fourteen years, three cities, three directors. The emigration after 1933 is a large part of why the ideas spread so widely.

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](https://gradiently.design/guide/color-theory-basics).

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

- Bauhaus red: #be1e2d
- Bauhaus yellow: #f2c12e
- Bauhaus blue: #21409a
- Black: #111111
- Paper: #f1ece1

A Bauhaus inspired palette. The primaries are slightly warmed and deepened, closer to printed ink than to screen RGB.

- Blue circle: `radial-gradient(circle at 50% 50%, #21409a 0 38%, #f1ece1 38.5%)`
- Red quarter circle: `radial-gradient(circle at 0% 100%, #be1e2d 0 60%, #f2c12e 60.5%)`
- Yellow triangle: `linear-gradient(135deg, #f2c12e 0 50%, #111111 50%)`
- Black half circle: `radial-gradient(circle at 50% 100%, #111111 0 45%, #21409a 45.5%)`
- Four quarters: `conic-gradient(from 0deg, #be1e2d 0 25%, #f2c12e 0 50%, #21409a 0 75%, #111111 0)`
- Red stripes: `repeating-linear-gradient(90deg, #be1e2d 0 24px, #f1ece1 24px 48px)`

Bauhaus shapes made purely in CSS with hard colour stops. Each one is a single gradient you can copy.

Hard stops, where one colour ends exactly where the next begins, are the key. They turn a gradient into a crisp shape. [Gradient shapes](https://gradiently.design/guide/gradient-shapes) covers more of these, and the code below combines four into one tile.

```css
.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;
}
```

A four part Bauhaus tile: a red quarter circle, a yellow triangle, a blue circle and a black square, each in its own quadrant.

## 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. **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. **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](https://gradiently.design/guide/swiss-design) developed the grid further.
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. **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. **Keep type plain** One geometric sans serif, two weights, set large and flush left.

A portrait event post reading form follows function in lowercase type with a small eyebrow and detail line

A lowercase headline, a small eyebrow and plain detail: Bauhaus restraint on a modern event post.

A landscape cover reading Shape, colour, line with an issue number above

The same principles on a 1600×1200 cover, with a living background standing in for flat primaries.

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](https://gradiently.design/guide/art-deco-design), the raw honesty of [brutalist design](https://gradiently.design/guide/brutalist-design), and its playful 1980s rebellion in [Memphis design](https://gradiently.design/guide/memphis-design).

## FAQ

### What is Bauhaus design?

The style of the Bauhaus school in Germany, from 1919 to 1933: geometric shapes, primary colours, sans serif type, asymmetric layouts and a focus on function.

### What are the Bauhaus colours?

Red, yellow and blue with black and white are the colours most associated with it, partly because of Kandinsky’s 1923 shape and colour questionnaire.

### What font is used in Bauhaus design?

Geometric sans serifs. Herbert Bayer drew a lowercase typeface called universal in 1925; today Futura or the free Jost give a similar feel.

### Why did the Bauhaus close?

The school closed in 1933 in Berlin under pressure from the Nazi government, which saw its modernism as politically suspect.

### How can I make a Bauhaus style poster?

Use a clear grid, a few bold geometric shapes, three colours plus black on a paper ground, and plain sans serif type set flush left or rotated.