Design Atlas
한국어
❖ Design styles

Bauhaus

바우하우스

Composed from basic shapes — circle, triangle, square — and the three primaries red, yellow and blue. A 20th-century movement built on "form follows function."

Also known as: Bauhaus style
···
html
<div class="canvas" id="canvas">
  <div class="shape circle"></div>
  <div class="shape triangle"></div>
  <div class="shape square"></div>
  <div class="line"></div>
</div>
css
body{background:#f2ede3}
.canvas{position:relative;width:min(80%,260px);aspect-ratio:1}
.shape{position:absolute}
.circle{width:44%;height:44%;left:6%;top:8%;border-radius:50%;background:#e6402c;
  animation:spin 12s linear infinite}
.triangle{left:44%;top:6%;width:0;height:0;border-left:23% solid transparent;border-right:23% solid transparent;
  border-bottom:40% solid #2255c7;animation:spin 12s linear infinite reverse}
.square{left:38%;top:46%;width:38%;height:38%;background:#f4c515;
  animation:spin 16s linear infinite}
.line{position:absolute;left:4%;bottom:10%;width:60%;height:6px;background:#111}
@keyframes spin{to{transform:rotate(360deg)}}

It began at the Bauhaus, an art-and-design school founded in Weimar, Germany in 1919. Rejecting decoration for its own sake, it held that geometric primitives and primary colors alone could produce clear, functional form — famously formalized in Johannes Itten's color theory pairing circle with blue, triangle with yellow, square with red.

Typographically it favored sans-serif type (radical for its time) and asymmetric grids, with experiments in all-caps or all-lowercase setting. Many of today's geometric sans-serifs — Futura, Helvetica — descend from this lineage.

From architecture and furniture (the Wassily Chair) to brand logos and today's minimal sans-serif UIs, it's one of the taproots of modern design, and still the reference point whenever a composition needs an "organized geometry" mood built from a few shapes and primary colors.