Weimar 1919 -- Dessau -- Berlin 1933

Form Follows Function

Geometric primary-color shapes, grid systems, and sans-serif purity. The Bauhaus school fused fine art with industrial craft to create a unified design language built on geometric fundamentals -- circles, triangles, and squares -- combined with primary colors and stripped of ornament.

Art and Technology -- A New Unity Circle -- Triangle -- Square Less But Better Form Follows Function Reduce to Fundamentals Beauty Through Honesty Art and Technology -- A New Unity Circle -- Triangle -- Square Less But Better Form Follows Function Reduce to Fundamentals Beauty Through Honesty
01

Visual Characteristics

The core design traits that define every Bauhaus composition

Primary Geometric Shapes

Circles, triangles, and squares are the foundational building blocks of every composition

Primary Color Palette

Red, yellow, and blue dominate, paired with black and white; secondary colors appear rarely

Bold Sans-Serif Typography

Heavy, geometric letterforms that command attention; type as visual element

Strict Grid Alignment

Every element snaps to an underlying modular grid; mathematical precision governs placement

Asymmetric Balance

Dynamic compositions that feel balanced through weight distribution rather than mirror symmetry

Thick Black Outlines

Heavy strokes define shapes and separate regions with structural authority

Flat, Unmodulated Color

No gradients, no shading; each shape is a solid primary or neutral fill

Functional Minimalism

No ornament, no decoration; every element exists because it serves a purpose

Diagonal Compositions

Dynamic energy created through tilted elements and intersecting lines

Type and Image Integration

Text is treated as a graphic element equal in importance to shapes and color

02

Color Palette

The chromatic language of the Bauhaus, shaped by Itten and Kandinsky

The Bauhaus color theory, largely shaped by Johannes Itten and Wassily Kandinsky, assigns primary colors to primary shapes: yellow to the triangle, red to the square, blue to the circle. Black and white are structural; primary colors are expressive. Never use gradients -- all fills are solid and flat.

Bauhaus Red
#E3000B
Primary accent, squares, call-to-action
Bauhaus Yellow
#FFD700
Secondary accent, triangles, highlights
Bauhaus Blue
#003DA5
Tertiary accent, circles, links
Black
#000000
Text, outlines, rules, structure
White
#FFFFFF
Backgrounds, negative space
Yellow Triangle Sharp, aggressive, dynamic
Red Square Stable, grounded, warm
Blue Circle Serene, infinite, cool
03

Typography

Geometric sans-serif built from circles, straight lines, and consistent stroke widths

Bauhaus
Geometry
Function
Bauhaus typography is geometric sans-serif -- built from circles, straight lines, and consistent stroke widths. Bold and heavy, headings use strong weights that assert graphic dominance. Herbert Bayer's Universal Typeface proposed eliminating uppercase entirely; lowercase is preferred for body text. Type exists to communicate, not to ornament.

Recommended Pairings

Jost 700
Paired with Work Sans 400 for body text. This pairing captures the authentic Bauhaus spirit -- geometric display type with a functional, legible body face.
Heading: Jost · Body: Work Sans · Authentic Bauhaus Spirit
Poppins 700
Paired with DM Sans 400 for clean geometric consistency. Pure geometric sans-serif for headings with a low-contrast geometric body font.
Heading: Poppins · Body: DM Sans · Clean Geometric Consistency
Archivo 700
Paired with Inter 400 for modern legibility. A grotesque with geometric leanings meets a screen-optimized body font for maximum readability.
Heading: Archivo · Body: Inter · Modern, Highly Legible

The Ultimate Aim of All Creative Activity Is the Building

The Bauhaus taught that beauty emerges from functional honesty and geometric clarity. Its legacy permeates modern graphic design, architecture, furniture, and digital interfaces, establishing the principle that every design decision must be rationally justified.

Explore Layout Principles
04

Layout Principles

Grid and structure as the backbone of all composition

01

Modular Grid System

Strict 12-column or 6-column grid with consistent gutters; every element aligns to grid intersections

02

Asymmetric Layouts

Content is deliberately shifted off-center to create visual tension and dynamic movement

03

Thick Black Rules

3-6px solid black lines separate sections and define spatial zones with structural clarity

04

Overlapping Elements

Shapes, type, and color blocks overlap to create depth and compositional energy

05

Max-Width Containers

Content constrained to 1100-1200px for readability with consistent horizontal padding

06

Geometric Sections

Sections may have non-rectangular boundaries defined by diagonal lines or geometric cutouts

Asymmetric Grid
05

CSS Techniques

Live component demonstrations showcasing Bauhaus design patterns

Card Component

Bauhaus Card

A card with a bold geometric red accent. Three-pixel black border, no rounded corners, no shadows -- pure structural honesty.

Button Variants
Navigation Bar
Interactive Shapes

Materials and Methods Should Be Honest

Do not simulate what is not there. Unite art and technology; design should be reproducible and industrially viable. Embrace the grid as the structural backbone of all composition.

06

Design Guidelines

Rules to follow and pitfalls to avoid in Bauhaus design

Do
  • Use only primary colors (red, yellow, blue) plus black and white
  • Build compositions from circles, triangles, and squares
  • Use bold, geometric sans-serif typography in uppercase for headings
  • Employ thick black rules and borders to define spatial structure
  • Create asymmetric layouts with dynamic visual tension
  • Treat type as a graphic element equal to shapes and color
  • Reference the Kandinsky shape-color theory (yellow triangle, red square, blue circle)
  • Maintain strict grid alignment even in asymmetric compositions
Don't
  • Use gradients, shadows, or any depth simulation
  • Apply decorative ornament, flourishes, or serif typefaces
  • Use soft, pastel, or muted color palettes
  • Create perfectly symmetrical layouts -- embrace dynamic asymmetry
  • Use rounded corners (except for circles); geometry should be precise
  • Add photographic imagery without geometric masking or treatment
  • Mix too many secondary or tertiary colors
  • Ignore the grid; randomness contradicts Bauhaus principles