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
The same page, ready to useEnter the workshop, choose a red circle, blue square or yellow triangle and place up to 12 shapes on the canvas, then clear and restart. Form, Color and Workshop have matching content.
Full-page preview · interact directly
What to look for
- 01Use BAUHAUS’s original navigation and primary CTAs; inspect content and return paths, not just click notices.
- 02Complete the BAUHAUS task, then change inputs or undo and inspect the matching result/state.
- 03Check reflow, focus and validation with keyboard and 390px / 320px viewports; distinguish toolbar reload from in-page clearing and inspect reset-on-reload boundaries.
✓ 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.
Build a complete BAUHAUS page in this style, extending the original hero into content, concrete operations and return paths rather than isolated controls or a partial demo. Preserve brand, hero copy, assets, composition, tokens and all variants. The current YAML preview is authoritative for the brand, original navigation and CTAs; never substitute a generic marketing template. Keep BAUHAUS’s cream hero, red primary action and red/blue/yellow cards. Use the original StyleSignatureArt SVG: a large red circle, blue rectangle, yellow triangle, black axis and fine measurement frame touch and overlap without floating icons or shadows. Tighten the uppercase headline. Continue the workshop with a quarter-grid canvas, an empty-state cross, a clear selected outline and the 0 / 12 counter. Reuse current preview.tokens: background #F4EFE6; foreground #141414; accent #E23B2E / #000; card #FFFFFF; border #141414; radius 0px; font 'Helvetica Neue', 'PingFang SC', 'Noto Sans CJK SC', sans-serif; card shadow none. Reuse existing workspace tokens for dark and variants. Share StyleSignatureArt and style-signatures.css between cover and page, preserving the paper, geometric or radio materials. Reflow content on narrow screens. Full-page operations: Enter the workshop, choose a red circle, blue square or yellow triangle and place up to 12 shapes on the canvas, then clear and restart. Form, Color and Workshop have matching content. Share one renderer between static covers, the detail experience and /style-scenes/bauhaus/ (English /en/style-scenes/bauhaus/). Static covers contain no nested live buttons; the detail experience enables the same page’s semantic controls and brand continuation in an independent document. Original navigation and CTAs reach actual content or workflows, not placeholder links, color-only changes or one-line toasts. Interaction state lives only in this page’s memory. Reload, toolbar reset and mode changes restore initial state; do not use localStorage or sessionStorage. In-page clear/reset undoes this visit’s operations without implying cross-page or persistent saves. Provide return, cancel or clear/reset paths and disclose the page-memory state boundary; never fake real payments, email, login, AI or cloud sync. Reflow desktop, 390px and 320px layouts with readable text and usable targets rather than shrinking the desktop page. Give controls accessible names, keyboard access and visible focus; overlays close and return focus, validation/results are announced; respect prefers-reduced-motion. Add no dependencies. Check both languages, original navigation/CTAs, concrete results, return/reset and narrow reflow; report checks actually run and pending items, never requirements as passed results. 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