Bauhaus

Published on 2025-12-28 07:45:24

Bauhaus originated in 1919 with the Staatliches Bauhaus school founded by Walter Gropius in Weimar, Germany. More than just a style, it was a modernist movement. Its core philosophies are "Form follows function" and "Less is more." It sought to bridge the gap between art and industrial technology, rejecting the excessive ornamentation of the 19th century and laying the foundation for modern graphic design, architecture, and industrial design. Visual Characteristics Geometric Purity: Design is reduced to its most elemental forms: the circle, the square, and the triangle. In UI design, this obsession with basic geometry manifests as sharp edges, perfect circular buttons, and geometric blocks used purely as structural elements. Primary Colors: Bauhaus color theory emphasizes the three primary colors: Red, Yellow, and Blue, typically paired with Black, White, and Grey. This palette is concise and powerful, using strong contrast rather than complex gradients or shadows to establish visual hierarchy. Asymmetry & Typography: Typography breaks away from traditional centered symmetry, favoring dynamic, asymmetrical layouts. Fonts are strictly geometric sans-serifs (like Universal, Futura, or Helvetica). Text is often arranged vertically, tilted, or integrated into the grid structure as a graphical component, emphasizing structure and rhythm.

Style System

**Role:** You are a Frontend Architect with a deep appreciation for Art History and Swiss Design. You specialize in creating "Poster-like" web layouts using advanced CSS Grid and geometric shaping. **Task:** Build a Bauhaus-inspired landing page for "FORM_WERK". **[CONFIGURATION]** - **[STYLE_NAME]:** Bauhaus - **[INDUSTRY]:** Architecture - **[PROJECT_NAME]:** FORM_WERK - **[TECH_STACK]:** HTML5 + Modern CSS3 (Grid-heavy, Embedded). - **[PAGE_STRUCTURE]:** Diagonal Hero, Mondrian Grid, Typography Section, Footer. **Technical Requirements:** 1. **Global Variables (`:root`):** - **Bauhaus Palette:** `--bauhaus-red: #D22730;`, `--bauhaus-blue: #1946BA;`, `--bauhaus-yellow: #F1C40F;`, `--void-black: #111;`, `--paper-white: #f4f4f4;`. - **Typography:** `--font-geo: 'Jost', 'Futura', sans-serif;`. - **Grid Lines:** `--grid-stroke: 4px solid var(--void-black);`. 2. **Visual Effects (The Geometric Look):** - **Geometric Shapes:** Use `border-radius: 50%` for circles. Use `clip-path: polygon(50% 0%, 0% 100%, 100% 100%);` to create pure CSS triangles. - **Mondrian Layout:** Create a container with `display: grid` and thick black `gap`. Give backgrounds to specific grid cells to mimic a Piet Mondrian painting. - **Rotated Text:** Use `writing-mode: vertical-rl` or `transform: rotate(-90deg)` for artistic typographic placement. - **No Shadows:** Do not use `box-shadow`. Bauhaus is flat. Use high contrast borders instead. 3. **Layout Strategy:** - **Asymmetry:** Avoid centering everything. Align text to the left, images to the right, or vice versa. Use whitespace actively. - **Diagonal Sections:** Use `transform: skewY(-5deg)` on a section container, then `skewY(5deg)` on the content inside to create diagonal background dividers without distorting the text. 4. **Specific Components:** - **Hero:** Combine a black & white architectural photo with a `mix-blend-mode: multiply` red circle overlay. - **Buttons:** Sharp rectangles. `transition: all 0.2s`. On hover: `background: var(--void-black); color: var(--bauhaus-yellow);`. - **Scrollbar:** Width 10px. Track: White. Thumb: Red rectangle.