# Bauhaus Deck
원·삼각형·사각형과 빨강·노랑·파랑 3원색만으로 짜는 16:9 기하 추상 슬라이드 — 도형이 겹치고 대각으로 가로지르며 비대칭 균형을 이룬다.
- taxonomy: bauhaus · bauhaus, geometric-abstraction, primary-colors, slide-deck, functionalist, asymmetric-balance, flat · complexity=medium
- page types: presentation
- best for: 디자인·타이포·조형 교육 강의 덱, 워크숍·세미나 발표(체계적 기하 구성으로 개념 전달), 전시·페스티벌·이벤트 소개 덱, 브랜드 매니페스토형 발표
- avoid for: 보수적 신뢰감이 필요한 금융·법률·의료 경영진 보고 덱, 사진·스크린샷이 주인공인 제품 데모 덱, 데이터 밀도가 극도로 높은 재무 실사 보고서, 차분한 중간색 무드를 원하는 기업 IR
- provenance: authored (design-diversity 팩 'ppt-bauhaus-geometric' (MIT) 각색) — confidence: colors=manual, typography=manual, spacing=manual, motion=manual, layout=manual
## Design rules
# Bauhaus Deck
## Overview
1920s Bauhaus formal principles carried onto a 16:9 slide canvas. Pure geometric primitives — perfect circle, equilateral triangle, square — in the red/yellow/blue primary triad on warm paper off-white, with ink black and white as the only neutrals. *Form follows function*: shapes overlap, cross the frame on a diagonal, and settle into asymmetric balance. Read at a glance as "systematic geometric abstraction" — the ordered opposite of Memphis kitsch. Every slide is a composition, not a text container.
## Colors & Roles
Canonical mode is **light**: `background` is warm paper off-white (#F0EDE4) on every slide; `card` is pure white for shapes that are the ground themselves. The whole system is exactly five colors traced from the source pack — off-white, ink black (`foreground`/`border`, #1A1A1A), and the three primaries. `primary` is Bauhaus blue (#1D4ED8 → oklch 0.488 0.217 264.4) for structural blocks; `secondary` is Bauhaus yellow (#F4C20D); `accent`/`destructive` is Bauhaus red (#D62828 → oklch 0.568 0.208 27.1), the fixed emphasis. `chart-1..3` are the primary triad (red, yellow, blue), `chart-4` ink black, `chart-5` a neutral paper step; `muted`/`muted-foreground` are lightness steps of the paper/ink neutrals. One shape = one flat solid color — no in-between tones, pastels, or gradients, ever. The dark map is an authored "black-canvas" adaptation absent from the source pack (off-white text on near-black; blue lifted to L 0.58 and red to 0.62 for legibility, yellow unchanged).
## Typography Rules
Two families: a heavy geometric sans for display (Archivo → Futura lineage; the commercial Futura is never redistributed, Archivo is the Google-Fonts default) and Inter for body/labels (Pretendard for Korean, Noto Sans KR fallback). Deck type steps, in pt on a 13.33in × 7.5in canvas: cover title 50pt / 800 / tracking 0; heading 36pt / 800; body 24pt / 400 / 1.4 line-height, at most 6 lines per slide; caption 15pt / medium / +0.1em / uppercase — the shared voice for chart value labels, direct data labels, and axis ticks; KPI hero 50pt / 800; number badge 18pt / 800 white. Titles run horizontal or rotated exactly 90° vertical — never an arbitrary tilt (the Memphis dividing line).
## Layout Principles
16:9 canvas, margins 0.7in left/right and 0.6in top/bottom. The grid is a **geometric composition grid** — the canvas is partitioned by shapes rather than columns. One large shape block occupies a third to half of the slide and is balanced asymmetrically against a cluster of smaller shapes on the opposite side; every slide carries a single diagonal axis (a shape alignment or a slanted split). Leave room: the composition breathes, text never fills the frame.
## Depth & Elevation
Completely flat. No shadows (hard or soft), gradients, glass, noise, or blur — ever. Depth exists only as overlap order: a circle riding over a square block, the overlapped region becoming a new face in a different primary. Containment is done with flat color faces butting together or a 2pt solid black outline.
## Shapes
Radius is binary — 0 for rectangles, a full circle for round forms; no intermediate rounding. The primitive vocabulary is circle, equilateral triangle, square/rectangle, half-circle, quarter-circle only — no free curves or blobs. Rotation is 0/45/90° only. Some shapes carry a 2pt solid black outline; the rest are borderless flat fills. Images, if used at all, are clipped to a circle/triangle/square mask.
## Component Stylings
- **Cover slide**: off-white canvas, a large blue square filling one half, an overlapped red circle and yellow triangle on it, a 50pt black title on the opposite side; one diagonal axis (e.g. lower-left to upper-right).
- **Content slide**: small primary square accent top-left beside a 36pt heading, ≤6 lines of 24pt body, and a half-circle + circle cluster in the opposite corner for asymmetric weight balance. Captions 15pt uppercase +0.1em.
- **Charts**: geometric abstraction, rendered precisely in SVG. Right-angle bars, bar:gap = 3:2, radius 0, baseline pinned to 0 (never truncated). No gridlines, no legend box — direct 15pt uppercase tabular labels above bars and item captions below. Primary triad cycled with exactly one red emphasis bar (or black bars + one primary highlight). Proportion via a donut of ≤3 primary slices with the key figure in the center circle, or circle area sized to the value.
- **Diagrams**: one language — circle/square/triangle nodes (1.4in), flat primary fills, joined by 2pt straight black connectors (0/45/90° only) with equilateral-triangle arrowheads; 0.4in circular number badges (black fill, white numeral); exactly one red emphasis node. Process flow, timeline, 2x2 matrix, hierarchy/funnel, KPI cards all derive from it. No div-block bars or nodes.
- **KPI card**: 2.6in square, light-primary or white fill + 2pt black outline; small circle/triangle accent top-left, 50pt black numeral, 15pt uppercase label; triangle delta (up = blue, down = red).
## Motion
Static by default — slide transitions are none or hard cut. Shape build-ins may use a directional 0.3s wipe only; no fade, no bounce. Animation never disturbs the composition.
## Do's and Don'ts
**Do:** hold to exactly five colors, one flat primary per shape; use only pure primitives aligned to the grid at 0/45/90°; give every slide a diagonal axis and asymmetric balance; make depth from overlap order; render charts/diagrams in precise SVG; label data directly.
**Don't:** introduce any color outside the triad + black + white, or any gradient/midtone/pastel; tilt shapes to arbitrary angles; round card corners or add shadows; use emoji, stock icons, or illustrations; give charts 3D bars, gridlines, legend boxes, rounded bars, or a truncated y-axis; fill a slide with text.
## Slide Anatomy
- **Title / cover slide**: large primary color block with an overlapped circle + triangle, oversized 50pt heavy-sans title on the opposite side, single diagonal axis; no imagery.
- **Content slide**: the workhorse — small shape accent + 36pt heading top-left, ≤6 body lines, balancing shape cluster in the opposite corner.
- **Exhibit / chart slide**: one SVG chart fills the composition — right-angle bars or a donut, primary triad with one red emphasis, x-axis 2pt only, baseline 0, direct 15pt labels.
- **Diagram slide**: process/timeline/2x2 built from circle/square/triangle nodes + 2pt straight connectors + circular number badges, one red emphasis node.
- **Divider slide**: a big color block split on the diagonal with a single overlapped primitive and a 90°-rotated or horizontal section title; otherwise empty paper.
## Agent Prompt Guide
> Build this deck in the 'Bauhaus Deck' style: 16:9 warm off-white slides using exactly five colors — off-white, ink black, red/yellow/blue primaries, no midtones or gradients, one flat primary per shape. Compose with pure primitives only (circle, equilateral triangle, square, half/quarter circle) aligned to the grid at 0/45/90°; one large shape block occupies a third to half the slide, balanced asymmetrically against a smaller-shape cluster, with a single diagonal axis per slide. Depth is overlap order only — zero shadows, radius 0 for rectangles and full circles for round forms. Heavy geometric sans headlines (Archivo/Futura 800, cover 50pt / heading 36pt), body 24pt max 6 lines, 15pt uppercase +0.1em captions as direct labels. Render charts and diagrams precisely in SVG: right-angle bars (bar:gap 3:2, no gridlines/legend, x-axis 2pt, baseline 0) with one red emphasis; donuts of ≤3 primary slices; circle/square/triangle nodes with 2pt straight connectors, triangular arrowheads, and circular number badges. Transitions none or hard cut, shape build-ins a 0.3s directional wipe only.
## Known Gaps / Confidence
Adapted from the MIT-licensed design-diversity pack `ppt-bauhaus-geometric` — an authored spec, not an extraction from a live deck, so all confidence fields are `manual`. A ppt-track entry: the shadcn token mapping is a web-rendering convenience (pt-based type steps, 16:9 frames), and the dark color map is an authored black-canvas adaptation absent from the source pack. Provenance care: no original Bauhaus poster or artwork is reproduced — only the public formal principles (primitives, primary triad, grid); the commercial Futura is replaced by the Archivo Google-Fonts fallback for reproduction. This is the deck-native variant of the web `bauhaus-geometric` entry — same family, but composed for slides.
## Tokens (theme.css — use these values verbatim, do not re-derive)
```css
/* Bauhaus Deck — theme.css (generated, do not edit) */
:root {
--radius: 0px;
--radius-selector: 0px;
--radius-field: 0px;
--font-sans: 'Inter', 'Pretendard', 'Noto Sans KR', Arial, sans-serif;
--font-display: 'Archivo', 'Futura', 'Pretendard', sans-serif;
--spacing: 8px;
--shadow: 0px 1px 2px 0px color-mix(in oklab, oklch(0 0 0) 0%, transparent);
--background: oklch(0.946 0.012 91.5);
--foreground: oklch(0.218 0 0);
--card: oklch(1 0 0);
--card-foreground: oklch(0.218 0 0);
--popover: oklch(1 0 0);
--popover-foreground: oklch(0.218 0 0);
--primary: oklch(0.488 0.217 264.4);
--primary-foreground: oklch(1 0 0);
--secondary: oklch(0.835 0.169 89.6);
--secondary-foreground: oklch(0.218 0 0);
--muted: oklch(0.905 0.012 91.5);
--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.218 0 0);
--input: oklch(0.218 0 0);
--ring: oklch(0.488 0.217 264.4);
--chart-1: oklch(0.568 0.208 27.1);
--chart-2: oklch(0.835 0.169 89.6);
--chart-3: oklch(0.488 0.217 264.4);
--chart-4: oklch(0.218 0 0);
--chart-5: oklch(0.62 0.008 91.5);
}
.dark {
--background: oklch(0.205 0 0);
--foreground: oklch(0.946 0.012 91.5);
--card: oklch(0.24 0 0);
--card-foreground: oklch(0.946 0.012 91.5);
--popover: oklch(0.24 0 0);
--popover-foreground: oklch(0.946 0.012 91.5);
--primary: oklch(0.58 0.19 264.4);
--primary-foreground: oklch(1 0 0);
--secondary: oklch(0.835 0.169 89.6);
--secondary-foreground: oklch(0.218 0 0);
--muted: oklch(0.24 0 0);
--muted-foreground: oklch(0.72 0.008 91.5);
--accent: oklch(0.62 0.2 27.1);
--accent-foreground: oklch(1 0 0);
--destructive: oklch(0.62 0.2 27.1);
--destructive-foreground: oklch(1 0 0);
--border: oklch(0.946 0.012 91.5);
--input: oklch(0.946 0.012 91.5);
--ring: oklch(0.58 0.19 264.4);
--chart-1: oklch(0.62 0.2 27.1);
--chart-2: oklch(0.835 0.169 89.6);
--chart-3: oklch(0.58 0.19 264.4);
--chart-4: oklch(0.946 0.012 91.5);
--chart-5: oklch(0.62 0.008 91.5);
}
```
## Golden example (exemplar.html — match this structure and token usage)
```html
Form — Follows Function
Shapes carry the meaning
- Exactly three primaries, flat fills
- Circle, triangle, square only
- Aligned to grid, rotated 0/45/90°
Section 02
Primary Systems
Bauhaus Deck — 02
```
## Apply
- shadcn project: `npx shadcn@latest add https://web.ggum.uk/styles/r/ppt-bauhaus.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 `