Bauhaus
包豪斯
Aliases:包豪斯包豪斯风格几何构成主义红黄蓝几何风原色几何设计圆三角方构成Bauhaus DesignGeometric Abstraction
What is it
A visual language of playing composition with geometry: circle, triangle and square in primary red, yellow and blue plus black, asymmetric yet balanced. Decoration obeys function — every plane and line carries structure, and a poster reads as a study in geometric relations.
Design spec
Typography
Bauhaus geometric sans, uppercase
Color
Cream base; red #E23B2E, blue #21409A, yellow #F2B705
Border
Zero radius with thin black rules
Shadow
No shadows
Spacing
Compositional whitespace around geometry
Motion
Primary-colour swaps within 100ms, no eased movement
States
Hover swaps to another primary; focus shows a visible 2px black frame; active inverts the block; disabled drops to greyscale; error uses red #E23B2E
Style in action
See the full page, then try the interactive sceneFull-page preview
FORM &
FUNCTION
Geometry and primary colors in harmony.
Circle · Triangle · Square
Enter the workshop →A shared starting point
A foundation for function
A direction for energy
Interactive scene
Loading demo…
✓ When to use
- Brands, posters and campaign pages that want bold graphic identity
- Education and creative tools — composing and making
- Hero visuals with few elements and high impact needs
✕ When not to use
- Data-dense UIs where geometric play hurts readability
- Long reading sessions — the visual noise accumulates
- Locked brand palettes that cannot yield to primaries
Variants
Weimar
魏玛时期
Expressionist warmth under Itten's color theory
Dessau
德绍时期
The classic phase — rational geometry and primaries
Contemporary Bauhaus
当代包豪斯
Web-era constructivism with bolder whitespace and motion
Implementation
background: #D93025clip-pathborder-radius: 50%gridmix-blend-modeGive the primaries fixed roles: red as the hero plane, yellow the warm accent, blue the cool one, black for type and structural lines. Balance asymmetrically — one large form plus one or two structural lines and a small solid; shapes should touch or overlap, never float. Use border-radius: 50% and clip-path triangles instead of image assets. Whitespace is a compositional material too.
Agent prompts
Four prompt layers run from “what it is” all the way to a ready-to-run task. On the Agent task layer you can stack a visual style and extra requirements, then copy it to your coding agent in one click.
Implement a Bauhaus geometric hero section in the current project. Inspect the existing design tokens first; keep primaries as isolated variables that do not pollute brand colors. Requirements: - Circle, triangle, square in red/yellow/blue/black forming an asymmetrically balanced composition - Shapes in pure CSS (border-radius/clip-path) — no image assets - Type interlocking with geometry; balanced center of gravity - No gradients, shadows or textures - Dark mode support - No new dependencies Run existing project checks when done and list the modified files. Additional requirements: - Dark mode support - Respect prefers-reduced-motion - No new dependencies - Run existing checks and list modified files
Hand to your coding agent — stack a style and extra requirements on top
Related concepts
A visual language of objective grids and typography: strict mathematical grids, sans-serif faces, flush-left setting, black and white plus one accent (classically red). Order comes from whitespace and type scale. Decoration is noise; the goal is information read along the shortest path.
StylesSimilarThe postmodern anti-functionalist language: squiggles, dots, zigzags and confetti spots in saturated clashing colors with bold black outlines, deliberately breaking grids and order. It embraces the cheap and the festive — happily ugly against modernist good taste.
StylesSimilarA visual language that strips out all simulation: solid color blocks, simple geometry, no gradients, shadows or textures. Hierarchy comes from color, shape and typography alone. The opposite of skeuomorphism — the interface admits it is a glowing plane and trades decoration for clarity.
StylesSimilarA clickable block that triggers one clear action — the most basic interactive element of any interface. Fill, outline and ghost styles rank primary against secondary actions; presses give instant sink-in feedback, and a busy state disables further clicks to prevent double submission.
ComponentsAffectsA self-contained rectangular container outlined by rounded borders or a surface colour, aggregating related content: cover, title, excerpt and actions. The universal display unit of content feeds, dashboards and commerce lists.
ComponentsAffects