Design System

Bauhaus

Form follows function.
Art and technology,
a new unity.

01

Color

The primary colors - red, yellow, blue - form the foundation. Combined with black and white, they create maximum visual impact.

Red #E53935
Yellow #FDD835
Blue #1E88E5
Black #000000
White #FFFFFF

Color and Shape Association

In Bauhaus theory, each primary color corresponds to a geometric form: red with the square (stability), yellow with the triangle (dynamism), and blue with the circle (infinity).

Square

Stability, weight

Triangle

Energy, direction

Circle

Infinity, flow

02

Typography

Geometric sans-serif typefaces embody Bauhaus principles. No serifs, no decoration - pure functional form.

Display 112px / 800 / -3%
Aa
Heading 1 56px / 800 / -3%
Heading One
Heading 2 44px / 800 / -2%
Heading Two
Heading 3 24px / 700 / -1%
Heading Three
Body 16px / 400 / 0%
The fundamental idea behind the Bauhaus was unity of art, craft, and technology. Design should be functional, accessible, and beautiful.
Small 14px / 500 / 0%
Secondary information and captions use this smaller, slightly weighted style.
Caption 12px / 700 / 15%
Labels, tags, and system text
03

Spacing

A mathematical 4px base unit creates rhythm and harmony. Every measurement derives from this fundamental unit.

4px
1
8px
2
12px
3
16px
4
24px
5
32px
6
48px
7
64px
8
96px
9
04

Buttons

Functional, geometric, bold. Buttons communicate action through form and color without unnecessary embellishment.

Primary Actions

Sizes

Geometric Buttons

05

Forms

Input elements are reduced to essentials. Bold borders define space, focus states use color to indicate interaction.

Checkboxes

Radio Buttons

06

Cards

Content containers use bold borders and geometric accents. Hover states create depth through offset shadows.

Architecture

Functional buildings that unite form and purpose through geometric clarity.

Typography

Sans-serif letterforms stripped of historical ornament and tradition.

Furniture

Industrial materials shaped into functional, mass-producible designs.

Composition Card

A Kandinsky-inspired geometric composition demonstrating the interplay of primary colors and basic shapes.

07

Data Table

Information presented with clarity and structure. Bold headers, clean rows, and status indicators provide quick comprehension.

Master Workshop Period Status Works
Walter Gropius Architecture 1919-1928 Founder 156
Wassily Kandinsky Wall Painting 1922-1933 Active 89
Paul Klee Bookbinding 1921-1931 Active 124
Josef Albers Glass 1923-1933 Teaching 67
Ludwig Mies van der Rohe Architecture 1930-1933 Director 43
08

Badges

Compact labels for status, categories, and metadata. Geometric variants reflect Bauhaus shape language.

Outlined

Default Red Blue Yellow

Filled

Default Red Blue Yellow

Geometric

Shape indicators for visual categorization
09

Design Principles

The foundational ideas that guided the Bauhaus movement and continue to influence modern design.

Form Follows Function

Every element must serve a purpose. Ornament for its own sake is eliminated. The form of an object should be determined by its function, not by arbitrary aesthetic preferences.

Unity of Art and Craft

There should be no distinction between fine artists and craftspeople. All creative work shares the same foundation, and practical skills are as valuable as artistic vision.

Truth to Materials

Materials should be used honestly, expressing their inherent qualities rather than imitating other substances. Steel should look like steel, wood like wood.

Geometric Purity

Basic geometric forms - the circle, square, and triangle - are the building blocks of all design. Complex forms arise from simple geometric combinations.

Mass Production

Good design should be accessible to everyone, not just the wealthy. Objects should be designed for industrial production, making quality affordable.

Total Work of Art

The Gesamtkunstwerk ideal: architecture, furniture, textiles, and all decorative elements should work together as a unified artistic vision.