Bauhaus Primary (hps-bauhaus)

Single-theme deck plugin ported from the bauhaus theme of the upstream MIT-licensed 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 <style> + inline <script>, zero

build, zero external JS/CSS (Google Fonts @import excepted).

• Every page is <section class="slide" data-title="..."> inside

<div class="deck" id="deck"> — a horizontal scroll-snap strip, each slide exactly 100vw × 100vh (flex:0 0 100vw), 16:9 / 1280×720 baseline with clamp() type scales, padding 72px 96px. One screen per slide; no internal vertical scrolling.

• Fixed chrome: .deck-header (deck name + theme chip), .deck-footer

(attribution + N / total counter), .progress-bar (ink-topped red fill).

• Keyboard: ← → Space PageUp PageDown Home End navigate;

#/N (1-based) hash deep-links via history.replaceState in try/catch (srcdoc-safe). The script dedupes dual window/document capture-phase key listeners by Event identity and auto-focuses <body> — these solve real iframe-host bugs; keep the script verbatim.

• Speaker notes: one hidden <div class="notes">…</div> per slide, 1–3

sentences.

• Animations: restrained upstream subset — anim-rise-in on the hero,

anim-fade-up on quotes, anim-stagger-list on grids. At most one hero animation plus one stagger per slide.

Authoring checklist

1. Copy example.html; keep all <style> blocks and the <script>

verbatim.

1. Replace the 10 demo slides with the planned layout sequence; the script

recomputes the N / total counter automatically.

1. Real content, real numbers — no lorem ipsum, no placeholder images.
2. Rotate the three primaries deliberately (red = emphasis, yellow = warm

support, blue = structure); large areas stay canvas + ink.

1. Verify: arrows + Space navigate, #/5 deep-links, no slide overflows

vertically, every stroke is #111, every radius is 0.

Attribution

Token vocabulary, layout taxonomy, slide scaffold, and the bauhaus palette come from the upstream MIT-licensed lewislulu/html-ppt-skill (© lewis <sudolewis@gmail.com>). The LICENSE file ships alongside this plugin — keep it in place when redistributing.