Germany 1919. Primary colors. Geometric form. Functional beauty. Zero ornament. Every element earns its place.
Red, yellow, blue plus black and white. No gradients. No pastels. No mixing. Pure pigment — the Bauhaus palette.
The Three Pure Forms — Geometric Composition
Every component stripped of ornament. Heavy borders. Primary colors. Short mechanical transitions. No decoration without function.
Primary — Color Block Slide Reveal (Geometric Reveal Rule)
Outline — Hard Border Invert
Size Variants — Bauhaus Grid Proportions
Five named interaction patterns from the Bauhaus aiRules specification. Click, hover, and interact with each demo to experience the rule in action.
Animation shows "structure" — hard displacement and large solid color blocks sliding to cover each other
Click each discipline block to shift the active structural section:
/* Structural Shifts — hard displacement */
/* Active block: "Architecture" */
transform: translateX(-100%) → translateX(0);
transition: transform 0.2s ease-out;
/* Large solid color block covers previous — no fade */Transitions are short, sharp, powerful — duration-150 or duration-200, always ease-out, never ease-in-out
Click each button — feel the snap difference between allowed and forbidden timing:
Progress Bar — Mechanical step controls (duration-200 ease-out):
/* Mechanical Precision Rule */
transition-duration: 150ms | 200ms ← ALLOWED
transition-duration: 300ms | 500ms ← BANNED
transition-timing: ease-out ← REQUIRED
transition-timing: ease-in-out ← BANNEDOn interaction, colors hard-switch between Red, Yellow, Blue, Black, White — zero transparency fade, zero gradient
Click the main block or the color selectors to cycle — hard cut, no gradient:
/* Primary Color Swap */
bg: #000000
color: #ffffff
transition: 150ms ease-out
/* NO opacity fade */
/* NO gradient blend */
/* HARD switch only */Red → Yellow → Blue → Black → White. No intermediate states. No rgba(). Pure color identity switching.
Pseudo-element color blocks slide in like rail mechanisms — translateX(-100%) to translateX(0), covering the original
Hover each card to watch the color block slide in from the left like a rail:
/* Geometric Reveal — Rail Mechanism */
.slide-reveal { position: relative; overflow: hidden; }
/* Color overlay */
.overlay { position: absolute; inset: 0; }
.overlay { transform: translateX(-100%); }
.overlay { transition: transform 0.2s ease-out; } /* REQUIRED */
.parent:hover .overlay { transform: translateX(0); }Geometric decorators scale-125 or rotate-45 on hover — mechanical rotation and growth, machine-age precision
Hover each shape to see mechanical animation — scale-125 or rotate-45:
Both decorators animate together
/* Geometric Animation Rule */
/* Circle: */ group-hover:scale-125
/* Square: */ group-hover:rotate-45
/* Both: */ transition-transform duration-200 ease-out
/* Card: */ hover:-translate-y-2 (lift)
/* Color: */ group-hover:text-red-600 duration-150A design school project management interface — showing the complete Bauhaus design system applied to a functional UI context.
The Bauhaus was strict about what belonged in design and what did not. Form follows function. These rules are non-negotiable.
Design serves purpose
Every element must justify its existence through function. Remove anything serving only decoration. Shape arises from purpose.
Pure form language
Circle, square, triangle — the three primary forms from which all design emerges. No organic curves. Only structure.
Art meets industry
Bauhaus unified fine arts with industrial craft. Machine production is not the enemy of beauty — it is its modern medium.
Red, yellow, blue — the three pigments of all color theory. Plus black and white. Nothing else permitted.
Adolf Loos: Ornament is crime. Every element earns its place through function. Beauty is structural clarity.
The invisible 12-column grid governs all composition. Nothing floats. Everything aligns.
Interactions snap like precision instruments. duration-150, ease-out. Machine age UI form.
Letters are architecture. Sans-serif, bold, uppercase. Typography communicates form before meaning.
Bauhaus unified the workshop with the studio. Design is both handcraft and machine production.