hps-bauhausA visual-design fundamentals course for new brand designers — grid, type, color, and the exercises that build the eye. Built as a decision-grade professional training deck for junior designers, new hires.
Independent GitHub snapshot · Automated classification · Original documentation governs
name: hps-bauhaus en_name: "Teach Design Fundamentals like a World-Class Studio Mentor" zh_name: "像世界级工作室导师一样教设计基础" description: | A visual-design fundamentals course for new brand designers — grid, type, color, and the exercises that build the eye. Built as a decision-grade professional training deck for junior designers, new hires. en_description: | A visual-design fundamentals course for new brand designers — grid, type, color, and the exercises that build the eye. Built as a decision-grade professional training deck for junior designers, new hires. zh_description: | 像世界级工作室导师一样教设计基础——一份可商业交付的培训交付 Deck，围绕真实主题、证据链与决策目标组织。 tags:
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.
:root, do not deviate):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:
--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.2px solid #111 borders on cards, pills, chart bars,
checkboxes; 3px strokes inside SVG.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%)..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..lede, card copy, lists): Space Grotesk, weights 300–700.JetBrains Mono.editorial-serif, peoples-platform), not this one.@import is the only allowed remote resource..section-num rendered stroke-only via
-webkit-text-stroke:3px var(--text-1) with transparent fill..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 and .divider-accent are ink-bordered strips of
the hard three-band gradient..check li::before is a yellow ink-bordered square
with an ink check stroke..geo-square / .geo-triangle / .geo-circle repeat the
square/triangle/circle motif as a footer ornament.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.
<style> + inline <script>, zero
build, zero external JS/CSS (Google Fonts @import excepted).<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..deck-header (deck name + theme chip), .deck-footer
(attribution + N / total counter), .progress-bar (ink-topped red fill).← → 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.<div class="notes">…</div> per slide, 1–3
sentences.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.example.html; keep all <style> blocks and the <script>
verbatim.N / total counter automatically.#/5 deep-links, no slide overflows
vertically, every stroke is #111, every radius is 0.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.