# Bauhaus-design: former, primärfärger och bestående idéer

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

En skola som bara fanns i fjorton år formar fortfarande hur affischer, möbler, appar och logotyper ser ut. Här är vad Bauhaus faktiskt lärde ut, och hur du lånar det utan att göra en pastisch.

## The short version

- Bauhaus var en tysk skola för konst, hantverk och design som grundades av Walter Gropius i Weimar 1919 och stängdes i Berlin 1933 under tryck från den nazistiska regeringen.
- Bauhaus-design föredrar enkla geometriska former, primärfärger, sans serif-typografi, asymmetriska layouter och idén att formen ska följa funktionen.
- År 1923 bad Wassily Kandinsky folk på skolan att para ihop en triangel, en kvadrat och en cirkel med gult, rött och blått; han föreslog en gul triangel, en röd kvadrat och en blå cirkel.
- Herbert Bayer ritade 1925 ett typsnitt helt utan versaler, kallat universal, ett tidigt exempel på skolans strävan efter enklare, mer rationell typografi.
- För att använda Bauhaus-stilen i dag lånar du dess principer om tydlig struktur och begränsad färg i stället för att kopiera formerna bokstavligt.

**Bauhaus-design** är den stil som växte fram ur Bauhaus, en tysk skola för konst, hantverk och design som verkade från 1919 till 1933. Den är känd för enkla geometriska former, primärfärger, sans serif-bokstäver, asymmetriska layouter och en övertygelse om att bra design ska vara användbar, välgjord och lämpad för industriell produktion. Dess idéer ligger fortfarande under det mesta av modern grafisk design, från rutnätet i en affisch till ikonerna i din mobil.

## Bauhaus historia i korthet

| År | Vad som hände |
| --- | --- |
| 1919 | Walter Gropius grundar Staatliches Bauhaus i Weimar och förenar undervisning i konst och hantverk. |
| 1923 | En stor utställning presenterar skolans arbete; Kandinsky genomför sin enkät om form och färg. |
| 1925 | Skolan flyttar till Dessau. Herbert Bayer ritar sitt typsnitt universal utan versaler. |
| 1926 | Byggnaden i Dessau, ritad av Gropius, invigs, glasväggar och allt. |
| 1928 till 1930 | Hannes Meyer leder skolan och driver den mot arkitektur och socialt syfte. |
| 1930 till 1933 | Ludwig Mies van der Rohe leder; skolan flyttar till Berlin 1932 och stänger 1933. |
| Efter 1933 | Lärarna emigrerar. Gropius och Marcel Breuer undervisar vid Harvard, Mies i Chicago, Josef Albers vid Black Mountain College och senare Yale. |

Fjorton år, tre städer, tre rektorer. Emigrationen efter 1933 är en stor del av förklaringen till att idéerna spreds så brett.

Lärarna var enastående: Johannes Itten, Paul Klee, Wassily Kandinsky, László Moholy-Nagy och Josef Albers var bland dem. Albers skrev senare *Interaction of Color*, fortfarande en av de bästa böckerna om hur färger påverkar varandra, vilket knyter direkt an till modern [färgteori](https://gradiently.design/sv/guide/color-theory-basics).

## Bauhaus-färger och former, med CSS

Den look de flesta föreställer sig är rött, gult och blått med svart, på en gråvit botten, byggd av cirklar, kvadrater och trianglar. Kandinskys enkät från 1923, som föreslog den gula triangeln, den röda kvadraten och den blå cirkeln, blev förkortningen för hela skolan, även om Bauhaus arbete använde många fler färger än så.

- Bauhausrött: #be1e2d
- Bauhausgult: #f2c12e
- Bauhausblått: #21409a
- Svart: #111111
- Papper: #f1ece1

En Bauhaus-inspirerad palett. Primärfärgerna är något värmda och fördjupade, närmare tryckfärg än skärmens RGB.

- Blå cirkel: `radial-gradient(circle at 50% 50%, #21409a 0 38%, #f1ece1 38.5%)`
- Röd kvartscirkel: `radial-gradient(circle at 0% 100%, #be1e2d 0 60%, #f2c12e 60.5%)`
- Gul triangel: `linear-gradient(135deg, #f2c12e 0 50%, #111111 50%)`
- Svart halvcirkel: `radial-gradient(circle at 50% 100%, #111111 0 45%, #21409a 45.5%)`
- Fyra kvadranter: `conic-gradient(from 0deg, #be1e2d 0 25%, #f2c12e 0 50%, #21409a 0 75%, #111111 0)`
- Röda ränder: `repeating-linear-gradient(90deg, #be1e2d 0 24px, #f1ece1 24px 48px)`

Bauhaus-former gjorda helt i CSS med hårda färgstopp. Var och en är en enda gradient som du kan kopiera.

Hårda stopp, där en färg slutar exakt där nästa börjar, är nyckeln. De gör en gradient till en skarp form. [Gradientformer](https://gradiently.design/sv/guide/gradient-shapes) tar upp fler av dessa, och koden nedan kombinerar fyra till en kakel.

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

En Bauhaus-kakel i fyra delar: en röd kvartscirkel, en gul triangel, en blå cirkel och en svart kvadrat, var och en i sin egen kvadrant.

## Bauhaus-typografi

Bauhaus-designerna ville ha typografi som var tydlig, rationell och modern. Herbert Bayer hävdade att versaler var onödiga och ritade universal, ett geometriskt alfabet helt utan versaler; många av skolans egna trycksaker avstod från versaler en tid. Affischer satte sans serif-text i feta block, ofta roterade, med tjocka linjer och staplar för att organisera sidan.

- **Geometriska sans serif-typsnitt:** runt o, raka stammar, jämna streck. Futura, som kom 1927, är inte ett Bauhaus-typsnitt men delar andan; Jost på Google Fonts är ett gratistypsnitt i samma anda.
- **Rubriker med gemener:** en stillsam nick åt Bayers universal.
- **Roterad text:** text som löper längs sidan av en affisch ger den asymmetriska, dynamiska känslan.
- **Staplar och linjer:** tjocka svarta linjer som delar och leder, i stället för rutor.

## Så använder du Bauhaus-design i dag

Att kopiera formerna och primärfärgerna exakt ger något som ser ut som en museibutik. Bauhaus bestående värde ligger i dess principer, som fungerar med vilken palett som helst.

1. **Utgå från funktionen** Bestäm vad designen måste göra, som att meddela ett datum eller sälja en produkt, och låt det avgöra layouten.
2. **Bygg på ett rutnät, bryt det sedan en gång** Lägg allt på ett tydligt rutnät och låt sedan en form eller linje skära tvärs över det. Den spänningen är mycket Bauhaus. [Schweizisk design](https://gradiently.design/sv/guide/swiss-design) utvecklade rutnätet vidare.
3. **Begränsa färgen** Tre färger plus svart och en pappersbotten. Byt primärfärgerna mot dina varumärkesfärger så läses strukturen ändå som Bauhaus.
4. **Använd former som struktur** En cirkel kan ramma in ett foto, en stapel kan hålla en rubrik, en triangel kan peka mot uppmaningen.
5. **Håll typografin enkel** Ett geometriskt sans serif, två vikter, satt stort och vänsterjusterat.

Ett stående eventinlägg med texten formen följer funktionen i gemener, med en liten överrubrik och en detaljrad

En rubrik med gemener, en liten överrubrik och enkla detaljer: Bauhaus återhållsamhet i ett modernt eventinlägg.

Ett liggande omslag med texten Form, färg, linje och ett nummer ovanför

Samma principer på ett omslag i 1600×1200, med en levande bakgrund i stället för platta primärfärger.

Det andra exemplet visar den moderna vridningen. Bauhaus-layouten förblir sträng, men bakgrunden är en Gradiently-Mark i stället för platt rött eller blått: fortfarande en begränsad palett, fortfarande strukturell, men med eget ljus och korn, och när den är säkrad är den bara din. Den stela typografin ligger på dess lugnaste område, så att rutnätet förblir skarpt.

Om du gillar Bauhaus, jämför den med den dekorativa glamouren i [art déco-design](https://gradiently.design/sv/guide/art-deco-design), den råa ärligheten i [brutalistisk design](https://gradiently.design/sv/guide/brutalist-design) och dess lekfulla uppror på 1980-talet i [Memphis-design](https://gradiently.design/sv/guide/memphis-design).

## FAQ

### Vad är Bauhaus-design?

Stilen från Bauhaus-skolan i Tyskland, 1919 till 1933: geometriska former, primärfärger, sans serif-typografi, asymmetriska layouter och fokus på funktion.

### Vilka är Bauhaus-färgerna?

Rött, gult och blått med svart och vitt är de färger som mest förknippas med stilen, delvis på grund av Kandinskys enkät om form och färg från 1923.

### Vilket typsnitt används i Bauhaus-design?

Geometriska sans serif-typsnitt. Herbert Bayer ritade 1925 ett typsnitt med gemener som kallades universal; i dag ger Futura eller gratistypsnittet Jost en liknande känsla.

### Varför stängde Bauhaus?

Skolan stängde 1933 i Berlin under tryck från den nazistiska regeringen, som såg dess modernism som politiskt misstänkt.

### Hur gör jag en affisch i Bauhaus-stil?

Använd ett tydligt rutnät, några få fetstilta geometriska former, tre färger plus svart på en pappersbotten och enkel sans serif-text, vänsterjusterad eller roterad.