hps-memphis-popA pop-culture retrospective on how 1980s design language shaped today's apps — the scenes, the turning point, and the takeaway. Built as a decision-grade story deck for talk audience, design community.
Independent GitHub snapshot · Automated classification · Original documentation governs
name: hps-memphis-pop en_name: "Turn a Pop-Culture Retrospective into a Talk like an Editorial Curator" zh_name: "像内容策展人一样做流行文化回顾演讲" description: | A pop-culture retrospective on how 1980s design language shaped today's apps — the scenes, the turning point, and the takeaway. Built as a decision-grade story deck for talk audience, design community. en_description: | A pop-culture retrospective on how 1980s design language shaped today's apps — the scenes, the turning point, and the takeaway. Built as a decision-grade story deck for talk audience, design community. zh_description: | 像内容策展人一样做流行文化回顾演讲——一份可商业交付的生活故事 Deck，围绕真实主题、证据链与决策目标组织。 tags:
A locked single-theme deck plugin: the memphis-pop skin from the upstream
MIT-licensed lewislulu/html-ppt-skill
(36 themes × 31 layouts), shipped as one self-contained seed — example.html —
that carries the full token sheet, the Memphis decor devices, the slide
scaffold, and the keyboard runtime.
Start from example.html. Replace content only. Never rewrite the design
system or the runtime script. Never introduce colors or fonts outside this
spec.
Positioning vs. sibling Memphis-adjacent plugins: this is the full-bleed
scattered confetti-dot pattern Memphis. daisy-days is hand-drawn daisy
childlike (flower illustration devices), block-frame is big-color-block
neobrutalist (no pattern). The three decor systems are mutually exclusive —
do not mix.
Every variable below is defined in the seed's :root. Slides reference
tokens only — never hard-code a color in slide markup.
:root{
--bg:#fef6e8; /* warm cream canvas */
--bg-soft:#fdebc7;
--surface:#ffffff; /* card face */
--surface-2:#fff1d1;
--border:#111111; /* everything outlines in near-black */
--border-strong:#111111;
--text-1:#111111; --text-2:#333333; --text-3:#666666;
--accent:#ff3d8b; /* hot pink — the lead */
--accent-2:#37c2d7; /* teal */
--accent-3:#ffcc00; /* yellow */
--good:#6ac04c; --warn:#ffcc00; --bad:#ff3d8b;
--grad:linear-gradient(135deg,#ff3d8b,#ffcc00 50%,#37c2d7);
--grad-soft:linear-gradient(135deg,#fdebc7,#fff1d1);
--radius:10px; --radius-sm:6px; --radius-lg:18px;
--shadow:5px 5px 0 #111; /* hard offset, never blurred */
--shadow-lg:9px 9px 0 #111;
--font-sans:'Space Grotesk','Inter','Noto Sans SC',sans-serif;
--font-serif:'Space Grotesk','Noto Sans SC',sans-serif;
--font-mono:'JetBrains Mono',SFMono-Regular,Menlo,monospace;
--font-display:'Archivo Black','Space Grotesk',sans-serif;
--letter-tight:-.01em; --letter-normal:0;
--ease:cubic-bezier(.4,0,.2,1);
}
Fonts come from Google Fonts @import only (Archivo Black, Space Grotesk,
Noto Sans SC, JetBrains Mono). No other external resource of any kind.
body background tiles three offset
radial-gradient layers of 3px dots (pink / teal / yellow at
200 / 220 / 260px tile sizes) over --bg. It is full-bleed on every
slide; slides stay transparent so the pattern always shows through.
Never paint an opaque slide background..card is 2.5px solid #111 with
--shadow (hard offset, zero blur). Hero cards may use --shadow-lg.#111 and
filled with one accent, scattered absolutely behind/around content
(.memphis-shape). 2–4 per slide maximum..pill carries a 2px black border, an accent
fill and a slight rotate(±2deg); used as tags and badges..divider-accent is a hot-pink bar with
a black outline; section dividers pair it with a giant outlined numeral..gradient-text (the tri-color
--grad) is reserved for big numbers and 1–2 highlight words.The upstream catalog is shared across the html-ppt family; compose pages from these master categories:
| 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/line/pie/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 |
Default sequence: cover → toc → (section-divider → 2–4 content pages) × N → thanks. Charts are always pure CSS or inline SVG — never Chart.js or any
external library. The seed demonstrates: cover, toc, section-divider,
two-column, kpi-grid, stat-highlight, chart-bar, process-steps, big-quote,
thanks.
<section class="slide" data-title="..."> inside
<div class="deck" id="deck"> — a horizontal scroll-snap strip, each
slide exactly 100vw × 100vh (one screen, no internal scrolling),
16:9 / 1280×720 baseline with clamp() type scales, padding 72px 96px..deck-header (deck title + theme chip), .deck-footer
(attribution + N / total counter), .progress-bar.← → Space PageUp PageDown Home End navigate.#/N (1-based) deep-links a slide; navigation syncs the
hash via history.replaceState wrapped in try/catch (srcdoc-safe).<body> so keys work without a click —
these solve real iframe-host bugs; do not "simplify" them away.<div class="notes">…</div> per slide.example.html; keep all <style> blocks and the <script>
verbatim.#111 outlines, white card faces — nothing else..notes.#/5 deep-links, no slide overflows
vertically, every shadow is a hard offset (no blur anywhere).Visual system, token vocabulary, theme palette, and layout taxonomy come
from the upstream MIT-licensed
lewislulu/html-ppt-skill
(© lewis <sudolewis@gmail.com>), theme memphis-pop. The LICENSE
file ships alongside this skill — keep it in place when redistributing.