# Bauhaus Geometric
원·삼각형·사각형과 빨강·노랑·파랑 3원색만으로 화면을 짜는 바우하우스 조형 스타일 — 도형은 격자에 정렬되고 회전은 0°/45°뿐이다.
- taxonomy: bauhaus · bauhaus, geometric-abstraction, primary-colors, block-grid, functionalist, flat · complexity=medium
- page types: landing, portfolio, marketing, editorial
- best for: 디자인 스튜디오·포트폴리오 사이트, 전시·이벤트·페스티벌 랜딩, 조형 원리를 전면에 내세우는 브랜드 매니페스토
- avoid for: 데이터 밀도가 높은 대시보드·SaaS 앱, 차분한 신뢰감이 필요한 금융·의료, 사진·일러스트가 주인공인 콘텐츠
- provenance: authored (design-diversity 팩 'web-bauhaus-geometric' (MIT) 각색) — confidence: colors=manual, typography=manual, spacing=manual, motion=manual, layout=manual
## Design rules
# 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.
## Tokens (theme.css — use these values verbatim, do not re-derive)
```css
/* Bauhaus Geometric — theme.css (generated, do not edit) */
:root {
--radius: 0px;
--radius-selector: 0px;
--radius-field: 0px;
--font-sans: 'Archivo', 'Futura', 'Helvetica Neue', sans-serif;
--font-display: 'Archivo', 'Futura', 'Helvetica Neue', sans-serif;
--spacing: 8px;
--shadow: 0px 1px 2px 0px color-mix(in oklab, oklch(0 0 0) 0%, transparent);
--ks-display-weight: 900;
--ks-display-tracking: -0.02em;
--background: oklch(0.943 0.015 90.2);
--foreground: oklch(0.191 0 0);
--card: oklch(1 0 0);
--card-foreground: oklch(0.191 0 0);
--popover: oklch(1 0 0);
--popover-foreground: oklch(0.191 0 0);
--primary: oklch(0.437 0.138 259.6);
--primary-foreground: oklch(1 0 0);
--secondary: oklch(0.811 0.166 85);
--secondary-foreground: oklch(0.191 0 0);
--muted: oklch(0.905 0.015 90.2);
--muted-foreground: oklch(0.42 0 0);
--accent: oklch(0.568 0.208 27.1);
--accent-foreground: oklch(1 0 0);
--destructive: oklch(0.568 0.208 27.1);
--destructive-foreground: oklch(1 0 0);
--border: oklch(0.191 0 0);
--input: oklch(0.191 0 0);
--ring: oklch(0.437 0.138 259.6);
--chart-1: oklch(0.568 0.208 27.1);
--chart-2: oklch(0.811 0.166 85);
--chart-3: oklch(0.437 0.138 259.6);
--chart-4: oklch(0.191 0 0);
--chart-5: oklch(0.62 0.008 90.2);
}
.dark {
--background: oklch(0.191 0 0);
--foreground: oklch(0.943 0.015 90.2);
--card: oklch(0.24 0 0);
--card-foreground: oklch(0.943 0.015 90.2);
--popover: oklch(0.24 0 0);
--popover-foreground: oklch(0.943 0.015 90.2);
--primary: oklch(0.55 0.138 259.6);
--primary-foreground: oklch(1 0 0);
--secondary: oklch(0.811 0.166 85);
--secondary-foreground: oklch(0.191 0 0);
--muted: oklch(0.24 0 0);
--muted-foreground: oklch(0.72 0.01 90.2);
--accent: oklch(0.568 0.208 27.1);
--accent-foreground: oklch(1 0 0);
--destructive: oklch(0.568 0.208 27.1);
--destructive-foreground: oklch(1 0 0);
--border: oklch(0.943 0.015 90.2);
--input: oklch(0.943 0.015 90.2);
--ring: oklch(0.55 0.138 259.6);
--chart-1: oklch(0.568 0.208 27.1);
--chart-2: oklch(0.811 0.166 85);
--chart-3: oklch(0.55 0.138 259.6);
--chart-4: oklch(0.943 0.015 90.2);
--chart-5: oklch(0.62 0.008 90.2);
}
```
## Golden example (exemplar.html — match this structure and token usage)
```html
Five colors, five shapes, one grid. Everything else is ornament — and ornament is banned.
Kreis
Dreieck
Quadrat
```
## Apply
- shadcn project: `npx shadcn@latest add https://web.ggum.uk/styles/r/bauhaus-geometric.json` — installs the tokens above into globals.css, then use semantic classes (bg-background, text-primary, …) only.
- other stack: paste the theme.css block above into your global stylesheet and style everything via `var(--…)` references.
- single HTML/artifact: embed the theme.css block in a `