--- name: hps-bauhaus description: Bauhaus Primary — design-history geometric deck style from the lewislulu/html-ppt-skill bauhaus theme. Aged canvas #f4efe3, red/yellow/blue primaries, hard three-band gradient, zero radius, 2px ink strokes, hard offset shadows, Archivo Black + Space Grotesk. Use when the user wants a presentation with a Bauhaus, geometric-modernist, primary-color, or design-history poster look. triggers: - "bauhaus" - "包豪斯" - "三原色" - "primary colors" - "geometric deck" - "design history" - "modernist slides" - "几何主义" od: mode: deck surface: web scenario: product upstream: "https://github.com/lewislulu/html-ppt-skill" preview: type: html entry: example.html design_system: requires: false speaker_notes: true animations: true example_prompt: "Use Bauhaus Primary to turn my content into a single-file HTML deck. Confirm topic, audience and page count first, then start from the seed example.html — keep its token sheet, slide scaffold and keyboard runtime exactly as-is, replace slide content only, and stay strictly inside the red/yellow/blue + ink + aged-canvas palette." example_prompt_i18n: zh-CN: "用「包豪斯三原色」把我的内容做成单文件 HTML 幻灯片。先确认主题、观众和页数，然后从种子 example.html 出发——完整保留 token 表、slide 骨架和键盘运行时，只替换幻灯片内容，严格停留在红黄蓝三原色 + 墨色 + 做旧画布的色域内。" --- # Bauhaus Primary (hps-bauhaus) Single-theme deck plugin ported from the `bauhaus` theme of the upstream MIT-licensed [`lewislulu/html-ppt-skill`](https://github.com/lewislulu/html-ppt-skill) (36 themes × 31 layouts × 27 animations). This plugin locks one skin: design-history geometric modernism — the 1919–1933 Dessau language of square/triangle/circle, the three primaries on an aged paper ground, and typography that behaves like a poster. **Start from `example.html`. Replace content only. Never rewrite the design system or the runtime script. Never introduce a color or font outside the token sheet below.** ## Locked token sheet (`:root`, do not deviate) ```css :root{ --bg:#f4efe3; /* aged canvas ground */ --bg-soft:#e8e2d1; /* darker canvas */ --surface:#ffffff; /* card paper */ --surface-2:#f4efe3; --border:#111111; /* ink — every stroke is this */ --border-strong:#111111; --text-1:#111111; --text-2:#333333; --text-3:#666666; --accent:#e03c27; /* Rot — red */ --accent-2:#f4c430; /* Gelb — yellow */ --accent-3:#1d4eaf; /* Blau — blue */ --good:#1b8c3c; --warn:#f4c430; --bad:#e03c27; --grad:linear-gradient(135deg,#e03c27 0 33%,#f4c430 33% 66%,#1d4eaf 66% 100%); --grad-soft:linear-gradient(135deg,#f4efe3,#e8e2d1); --radius:0; --radius-sm:0; --radius-lg:0; /* zero radius, always */ --shadow:4px 4px 0 #111; --shadow-lg:8px 8px 0 #111; /* hard offset, never blurred */ --font-sans:'Space Grotesk','Inter','Noto Sans SC',sans-serif; --font-mono:'JetBrains Mono',SFMono-Regular,Menlo,monospace; --font-display:'Archivo Black','Space Grotesk','Noto Sans SC',sans-serif; --letter-tight:-.03em; --letter-normal:-.01em; --ease:cubic-bezier(.4,0,.2,1); } ``` Hard rules derived from the sheet: - The three-band gradient (`--grad`) has **hard stops** — it is a flag, not a blend. Use it only on `.gradient-text` hero words, `.tri-band`, and `.divider-accent`. Never use soft multi-stop gradients. - All chrome is ink: `2px solid #111` borders on cards, pills, chart bars, checkboxes; `3px` strokes inside SVG. - Shadows are hard offsets (`4px 4px 0 #111`, `8px 8px 0 #111`). Blurred `rgba` drop shadows are forbidden. - `border-radius` is `0` on every element except the geometric circle device (`border-radius:50%`). ## Typography - **Display** (`.h1 .h2 .stat-big .quote .section-num .kpi .num`): `Archivo Black`, weight 400 (the face is already black — never fake-bold), uppercase, letter-spacing `-.03em`. - **Body** (`.lede`, card copy, lists): `Space Grotesk`, weights 300–700. - **Mono** (step counters, theme chip, code): `JetBrains Mono`. - No serif, no slab, no handwriting, no brush — those belong to sibling themes (`editorial-serif`, `peoples-platform`), not this one. - Google Fonts via `@import` is the only allowed remote resource. ## Signature devices (keep these; they are the style) - **Kandinsky mark**: inline SVG of red square + yellow triangle + blue circle, 3px ink strokes — on the cover and the closer. - **Outlined section numerals**: `.section-num` rendered stroke-only via `-webkit-text-stroke:3px var(--text-1)` with transparent fill. - **Primary top rules**: `.card-accent / .card-accent-2 / .card-accent-3` give cards an 8px red/yellow/blue top border; rotate the three primaries across a grid rather than repeating one. - **Tri-band**: `.tri-band` and `.divider-accent` are ink-bordered strips of the hard three-band gradient. - **Square checkboxes**: `.check li::before` is a yellow ink-bordered square with an ink check stroke. - **Geo strip**: `.geo-square / .geo-triangle / .geo-circle` repeat the square/triangle/circle motif as a footer ornament. ## Layout system (shared upstream catalog, 31 layouts) The slide scaffold and class vocabulary come from the upstream html-ppt system. Master categories (compose `cover → toc → section-divider → content pages → closer`): | group | layouts | |---|---| | Openers & transitions | `cover` `toc` `section-divider` | | Text-centric | `bullets` `two-column` `three-column` `big-quote` | | Numbers & data | `stat-highlight` `kpi-grid` `table` `chart-bar` `chart-line` `chart-pie` `chart-radar` | | Code & terminal | `code` `diff` `terminal` | | Diagrams & flows | `flow-diagram` `arch-diagram` `process-steps` `mindmap` | | Plans & comparisons | `timeline` `roadmap` `gantt` `comparison` `pros-cons` `todo-checklist` | | Visuals | `image-hero` `image-grid` | | Closers | `cta` `thanks` | The seed demonstrates 10 of them: cover, toc, section-divider, two-column, kpi-grid, stat-highlight, chart-bar, process-steps, big-quote, thanks. Charts are always pure CSS blocks or inline SVG with primary fills and ink strokes — never Chart.js or any external library. "Images" are geometric SVG compositions; no photos, no external image hosts. ## Page structure & runtime contract - One self-contained HTML file: inline `