Bauhaus Design

Form follows function. Geometric purity and primary colors.

Interactive Preview

Launch Fullscreen

The Concept

The Bauhaus school revolutionized design by uniting art and industrial craftsmanship. Its visual language relies on fundamental geometric shapes (circle, square, triangle), thick structural lines, asymmetric balance, and a strictly limited palette of primary colors—red, blue, and yellow.

The Experiment

We created a digital catalog for a fictional geometric furniture exhibition. The layout uses CSS Grid to compose overlapping shapes and photography in a way that feels structural and architectural, rejecting decorative flourishes in favor of raw geometric interaction.

Design Specs & Assets

Use these core parameters to recreate the Bauhaus aesthetic in your own projects.

Color Palette

#EFECE3 (Canvas)

#E03526 (Primary Red)

#1C4D9F (Primary Blue)

#F6A316 (Primary Yellow)

Typography

font-family: 'Futura', sans-serif; font-weight: 700; /* Heavy headers */

Key CSS Snippet: Geometric Masking

.bauhaus-circle {
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background-color: #E03526;
    mix-blend-mode: multiply;
}

.bauhaus-triangle {
    width: 0;
    height: 0;
    border-left: 150px solid transparent;
    border-right: 150px solid transparent;
    border-bottom: 300px solid #F6A316;
}

Design Decisions

Asymmetric Harmony

Using CSS Grid to break rigid alignments and place elements freely, balancing heavy shapes with open canvas space.

Multiply Blending

Using mix-blend-mode: multiply on shapes to mimic physical overlapping ink, a nod to traditional printmaking techniques.

Utilitarian Typography

Stripping away serifs and decorative text in favor of heavy, legible geometric sans-serifs.

Accessibility (a11y) Analysis

The Art vs. Access Tradeoff

The Conflict: Bauhaus relies on overlapping geometric shapes and mix-blend-mode: multiply. This fundamentally destroys predictable contrast ratios. Text placed over these intersecting color blocks often fails WCAG AA standards.

The Compromise: To make this production-ready, we would need to dynamically calculate the contrast of the blended background behind the text and inverse the text color, or abandon the multiply blend mode where critical typography is housed.