← Back to Skills / Marketplace / bauhaus
SKL · 10PRO

Bauhaus.

Primary colors, geometric shapes, and a grid so rigorously followed it becomes beautiful. Timeless design conviction for products that make a statement.

UNLOCK WITH PRO →
● Live preview · Bauhaus demo
● This is real CSS, not a screenshot
↗ New tab
01 · The Vibe

The Bauhaus school ran for fourteen years in Germany in the 1920s and 30s and produced a design philosophy that still influences everything — from the chair you're sitting in to the app you opened this morning. The core idea: form follows function, beauty comes from honesty, decoration is waste. Applied to digital UI, Bauhaus design means primary colors used with intention, geometric shapes used without apology, and a grid so rigorously followed that everything on screen feels like it was placed with mathematical precision. The result is striking, timeless, and completely unlike every other app out there.

● Looks Like
Bauhaus archive postersEarly Braun product designFigma's own marketingSerious cultural institutions — museums, foundations, architectural firmsApps made by people with strong opinions and the knowledge to back them up
02 · Best For / Avoid If
＋ Best For
+Portfolios for designers, architects, and creative professionals
+Cultural apps — museums, galleries, publishing
+Design tools and creative software
+Agencies and studios presenting work
+Any product where strong design conviction is part of the brand identity
+Founders and makers who want their product to make a statement
× Avoid If
×Your audience expects warmth, friendliness, or approachability above everything else
×Your product is consumer-facing in a casual context — shopping, entertainment, social
×You have many UI states and interactive components — Bauhaus minimalism becomes sparse at high UI complexity
×You need to onboard users quickly without friction — the aesthetic demands that users appreciate it before they use it
03 · Design Philosophy
01

The primary palette is complete

Red, yellow, and blue are not a starting point to build from — they are the entire palette. Bauhaus design taught that these three colors, combined with black, white, and geometric form, can express everything that needs to be expressed. The constraint is the point. When you can only use three colors, every use of color becomes a decision, and every decision becomes communication.

02

Geometry is the language

Circles, triangles, squares. Horizontal lines, vertical lines, diagonal lines. No organic shapes, no curves that don't derive from a compass or a ruler. The grid underlies everything — not as a suggestion, but as a governing structure that every element answers to. This is why Bauhaus layouts feel instantly coherent even when they're complex.

03

Type is visual, not just legible

Bauhaus typography treats letterforms as geometric objects. The weight, size, and placement of type on a page is as much a compositional decision as the placement of a shape. A large bold headline is also a rectangle. A column of body text is also a vertical band of texture. This dual awareness — type as meaning and type as form — is what makes Bauhaus-influenced layouts feel designed rather than typeset.

04 · Use With Claude / Cursor
Claude
01Open your Claude project
02Click 'Add files' in the Project Knowledge panel
03Drop in SKILL.md and DESIGN.md
04Start a new chat in the project — Claude follows the spec
Cursor
01Place SKILL.md and DESIGN.md in your repo root
02Open .cursor/rules and add @SKILL.md @DESIGN.md
03Restart Cursor for the rules to apply
04Build normally — Cursor references both files per request
★ PRO TIP

Before building with Claude Code, drop SKILL.md and DESIGN.md into Claude Design first. Use it to generate mockups and nail the visual direction — then hand those references to Claude Code. You'll get significantly higher quality output than going straight to code.

05 · Watch Out For
! WARNING
Accidental nostalgia
Bauhaus can easily slip into looking like a retro art history project rather than a modern product. The antidote is contemporary typography — use a modern geometric sans-serif, not something that looks hand-lettered or archival.
! WARNING
Too much white space without enough tension
Bauhaus is minimal, but minimalism without compositional tension looks empty. Make sure there's always a large element, a strong color hit, or a bold geometric shape creating visual interest on each screen.
! WARNING
Decorative geometry that serves no purpose
Every geometric element should feel compositionally necessary — it should balance, separate, or emphasize something. Circles and triangles scattered randomly as decoration breaks the whole principle.
! WARNING
Forgetting that Bauhaus is functional
The philosophy demands that everything is also usable. Beautiful Bauhaus-inspired layouts that are confusing to navigate have missed the point. Function and form must both be present.
● 07 · Download

Two files. That's it.

Drop them into your Claude project or Cursor rules and build normally. No CLI, no package manager, no setup.

UNLOCK WITH PRO →