# Bauhaus Geometric ## Overview The 1920s Bauhaus formal vocabulary translated to the web: circle, triangle, square as first-class layout elements; red, yellow, and blue primaries on warm paper off-white with near-black ink; a functionalist block grid with diagonal counterpoints. You know it's this style when the screen is built from clean geometric primitives, the palette is exactly five colors, and every shape sits on the grid — nothing is scattered, nothing is random. It is geometric abstraction with discipline, not Memphis kitsch. ## Colors & Roles Exactly five colors, no exceptions: `background` warm paper (oklch 0.943/0.015/90 — never pure white as canvas), `foreground` near-black ink, and the three primaries — blue as `primary` (large blocks, headline surfaces), red as `accent`/`destructive` (energy, triangles, alerts), yellow as `secondary` (circles, highlights). White (`card`) is the fifth color for surface cells. No intermediate tones, no pastels, no gradients — one shape gets one solid color. `border`/`input` are the black ink (3px when used). Dark mode is an adaptation of the pack's black footer treatment expanded to the full canvas: black ground, paper text, same primaries with only blue lifted for legibility. Light mode is canonical. ## Typography Rules One geometric sans family: Archivo (Google Fonts), standing in for the Futura lineage of Bauhaus typefaces. Display is ultra-heavy — weight 800–900, `clamp(2.4rem, 5.5vw, 4.4rem)`, letter-spacing −0.02em, line-height 1.05, uppercase welcome. Labels/nav: 0.78rem, weight 700, uppercase, letter-spacing 0.14em. Body: 1.05rem, weight 400, line-height 1.6, measure 60–70 characters. Signature move: wrap a headline word in a shape (circle, square) or set it directly on a primary color block — type and geometry are one system. ## Layout Principles Max content width 1200px; side padding 20px mobile / 48px desktop; breakpoints 640px and 1024px. The core structure is a 6×N module block grid: each cell is a color block, a shape, or text. Gutters are 0 (blocks butt together) or 4px at most. Diagonal composition: split some blocks with `clip-path: polygon()` or place shapes at 45°. Balance asymmetrically — a heavy color block on one side, whitespace and small shapes on the other. Sections breathe with `clamp(64px, 8vw, 112px)` vertical gaps even though blocks inside them touch. ## Depth & Elevation Shadows are banned outright. Depth exists only as ordered shape overlap — a circle partially riding over a square block via `z-index` layering. Overlaps are aligned to the grid, never scattered. Flat effects across the board: no blur, no noise, no gradients. ## Shapes The entire shape vocabulary is five primitives: perfect circle (`border-radius: 50%`), square/rectangle (radius 0), triangle (equilateral or right, via `clip-path`), half-circle, quarter-circle. Rectangular blocks have zero border-radius, always. Rotation is restricted to 0° or 45° — no arbitrary angles. Blocks carry no border by default (color planes abutting is the separation); a 3px solid black border is the only emphasis stroke. ## Component Stylings - **Button**: radius 0; either a solid primary-color fill or 3px black border with transparent fill; uppercase label type; padding ~14px 32px. Hover swaps to another primary instantly or inverts fill/text. - **Card**: color-block mosaic — each card is one solid primary plane or a white plane plus a geometric shape icon. Cards butt together with no borders. Hover rotates the inner shape to 45°. - **Hero**: 6-module grid — a large blue square block carrying a white headline, a yellow perfect circle top-right, a red right triangle bottom-right; one shape straddles a block boundary at 45°. - **Nav**: uppercase Archivo labels (0.78rem/700/0.14em); small circle/square bullets allowed as markers. - **Footer**: solid black block with paper-colored text; a left-aligned row of primary-color shapes (circle, triangle, square); uppercase menu. ## Motion Mechanical and snappy: 160ms `cubic-bezier(0.2, 0, 0, 1)`. Hover: shapes rotate 0→45° or scale 1→1.08 with instant transitions; color blocks swap to another primary immediately. Scroll entrance: shapes scale 0→1 or slide in from one edge, staggered 100ms, each shape from a different direction. No soft fades, no bounce, no springs — precision over charm. ## Do's and Don'ts **Do:** use exactly the five colors; keep the shape set to five primitives; align every shape to the grid at 0°/45°; make depth from z-index overlap; balance heavy blocks against whitespace and small shapes. **Don't:** introduce purple/green/orange or any pastel or gradient; round rectangle corners; use any box-shadow; rotate or scatter shapes randomly (this is not Memphis); expand the shape vocabulary; use emoji, illustration, or organic blobs; animate with soft fades or bounces. ## Responsive Behavior The 6-module grid stacks into fewer columns below 1024px and a mostly single-column block stack below 640px; blocks stay gutterless when stacked. Display type scales via `clamp()`. Shapes shrink with their grid cells but keep their proportions and grid alignment — never drop them entirely; the geometry is the identity. ## Agent Prompt Guide > Build this in the 'Bauhaus Geometric' style: exactly five colors — warm paper off-white background, near-black ink, and red/yellow/blue primaries with no in-between tones or gradients; compose the page as a 6-module block grid with zero gutters where solid color blocks, geometric shapes, and text cells butt against each other; use only five shape primitives (perfect circle, square, clip-path triangle, half-circle, quarter-circle) aligned to the grid at 0 or 45 degrees; set headlines in Archivo weight 900 with clamp() sizing and tight tracking, labels uppercase with 0.14em spacing; ban all border-radius on rectangles and all box-shadows — create depth only by overlapping shapes with z-index; keep motion mechanical and snappy at 160ms with instant primary-color swaps on hover. ## Known Gaps / Confidence Adapted from the MIT-licensed design-diversity pack `web-bauhaus-geometric` — an authored spec distilled from the movement's public formal principles (shapes, primaries, grid), not measured from a live site; all token confidence is `manual`. Light mode is canonical (converted from the pack's hex palette); dark mode is an authored adaptation of the pack's black-footer treatment, with blue lightened for contrast. The pack itself notes its primary sources lean on adjacent Swiss Style literature (sources_confidence: medium). Archivo is the pack's chosen Google Font; historical Bauhaus faces (Futura et al.) are commercial and listed only as CSS fallbacks.