# Memphis Retro Deck

채도 100% 원색 블록이 충돌하고 지그재그·도트·테라조 패턴 조각과 비정형 기하 도형이 비대칭으로 부유하는, 80~90년대 멤피스 포스트모던 키치 슬라이드 스타일.

- taxonomy: memphis · memphis-retro, postmodern-kitsch, clashing-primaries, geometric-scatter, hard-shadow, 80s-90s · complexity=high
- page types: presentation
- best for: 창의·아이디어 발표와 워크숍 덱, 이벤트·페스티벌·런칭 파티 안내 덱, 브랜드 무드·캠페인 킥오프 발표
- avoid for: 보수적 경영진(C-level) 보고·재무 실사 덱, 규제·법무 등 신뢰·절제가 요구되는 발표, 텍스트 밀도가 높은 장문 리포트형 슬라이드
- provenance: authored (design-diversity 팩 'ppt-memphis-retro-90s' (MIT) 각색) — confidence: colors=manual, typography=manual, spacing=manual, motion=manual, layout=manual

## Design rules

# Memphis Retro Deck

## Overview
The postmodern kitsch of the 1980s–90s Memphis Group, moved onto 16:9 slides. A cream off-white canvas where five near-100%-saturation primaries collide — at least three per slide — as flat, gradient-free fills. Key shapes carry a 3pt solid black outline and a hard offset shadow (6pt 6pt, blur 0, 100% black), so every element reads like a sticker floating off the page. Heavy display headlines tilt 1–3 degrees; half-circles, triangles, waves, and stair-bars scatter into the margins and bleed. The whole identity is "cheerful disorder" — alignment is deliberately refused.

## Colors & Roles
Canonical mode is **light**: `background` is cream #F4ECD8 (oklch 0.944 0.028 88.8) on every slide, or an ink-black #1A1A1A block on ~1/3 of a slide. Text is ink black; on dark blocks it flips to cream. The chromatic engine is five clashing primaries traced from the source pack — hot pink #FF3B7F, cyan #00B5C9, yellow #FFC400, violet #7C4DFF, orange #FF5722 — mapped to `chart-1..5`, `primary` (pink), `secondary` (cyan), `accent` (yellow), and `destructive` (orange). These are collision assignments, not a hierarchy: a slide fires at least three at once. The single fixed rule is emphasis — exactly one hot-pink (`chart-1`) bar or node per chart to catch the eye. `border`/`input` are ink black — the outline on every key shape. `muted`/`muted-foreground` (cream lightness steps) and the entire dark map are derived/authored: the dark map is an "ink-black stage with primaries" adaptation absent from the pack, where the outline inverts to cream. No gradients — all fills are solid flat.

## Typography Rules
Two families: Archivo Black for display (fallback Pretendard ExtraBold), Poppins for body/caption (fallback Pretendard); Korean is Pretendard, Google Fonts fallback Noto Sans KR. Deck type steps, in pt on a 13.33in × 7.5in canvas: cover 54pt / 900 / −0.01em; slide title 40pt / 900; KPI hero 64pt / 900 (2° tilt); body 26pt / 600 / 1.3 line-height, max 6 lines, kept horizontal; node/diagram labels 18pt / 600; caption 16pt / 500 uppercase / +0.08em. Headlines are colored in one primary and tilted 1–3 degrees; body stays level and terse.

## Slide Anatomy
- **Title / cover slide**: cream canvas, a hot-pink 54pt title (2° tilt) in one corner, and the diagonally opposite corner holds a cyan half-circle + yellow triangle + black zigzag band; uppercase 16pt label at the bottom.
- **Content slide**: a primary color block (~1/3 of the slide, black outline) with the title over it on one side; the other side holds 4–6 body lines plus 1–2 floating circles/triangles. Minimum three colors present.
- **Chart / exhibit slide**: SVG vertical bars (bar:gap = 3:2), primaries cycling as flat fills with black outlines and hard shadows, one hot-pink emphasis bar; x-baseline only, values labeled directly above bars; a zigzag or dot chip floats in the margin (never over the data).
- **Process / diagram slide**: horizontal 4–5 node flow, primary-fill squares with number badges and black chevron connectors, baselines zigzagged ±0.15in, one active node in hot pink.
- **Divider slide**: an ink-black or full-bleed primary block with a large tilted cream title, a primary circle section badge, and a few scattered shapes.

## Layout Principles
16:9 canvas, reference 6-column grid used only to break — content blocks offset ±0.3in from cell edges. Margins 0.7in left/right, 0.6in top/bottom, but decorative shapes may invade the margins and bleed. The title alternates between top-left and top-right slide to slide; 3–5 geometric shapes float in the corners/margins, and no layout or shape arrangement repeats across two slides. Body stays under 6 lines — the cream field itself is the canvas for scattered pattern chips.

## Depth & Elevation
Hard offset shadow only — 6pt 6pt, blur 0, 100% black. Never a soft/diffuse/blurred shadow. The shadow is not depth; it is a sticker lift that pops the shape off the cream. No glass, noise, blur, or gradient anywhere.

## Shapes
Zero border-radius or a full circle/half-circle only — mid-radius is banned. Decorative vocabulary: circles, half-circles, triangles, wave bands, stair-bars. Key shapes combine a flat primary fill with a black 3pt outline. Images (when used) get a black 3pt border and a circle/triangle clip mask — never a raw rectangular photo.

## Component Stylings
- **Cover**: cream ground, corner-set tilted hot-pink 54pt title, opposite-corner geometry cluster (half-circle + triangle + zigzag), uppercase footer label.
- **Content block**: 1/3 primary color block + black outline with title on top; opposite side body + floating shapes.
- **Chart**: precise SVG — bar:gap 3:2, primaries cycling flat fill + black 3pt outline + 6pt hard shadow, one hot-pink emphasis bar; no gridlines, no y-axis, no legend box; single black 2.5pt x-baseline at 0; values above bars 20pt (1–2° tilt), item names below in 16pt uppercase. Share = donut (≤3 slices, 40pt center number); trend = stair-bars or a thick black polyline with primary dot vertices.
- **Diagram kit**: radius-0 squares or full/half-circles, primary flat fill + black 3pt outline + 6pt hard shadow; nodes tilted 1–3°; 4pt black chevron/elbow connectors; 0.5in circle number badges (primary fill, black outline, 24pt Archivo Black); one hot-pink emphasis node. Process, timeline, 2×2 matrix, comparison, and stair-bar funnel all share this one language.
- **KPI card**: 2.6×2.0in square, primary flat fill + black 3pt outline + 6pt hard shadow; 64pt Archivo Black number (2° tilt) + 16pt uppercase label + black ▲▼ delta; baselines staggered.
- **Decoration**: geometry and patterns only — black dot-grid, black zigzag lines, terrazzo color splatter chips floated 1–2 per slide in the margins. No emoji bullets, stock icons, or clipart.

## Motion
Playful pop. Slide transitions are Push or Wipe at 0.3s — never Fade or Morph, so shapes snap in cheerfully. Shape entrances may Zoom/Bounce (overshoot easing). On the web, treat as `pop-in` scale from 0.8.

## Do's and Don'ts
**Do:** collide at least three primaries per slide; outline key shapes in black 3pt with a 6pt hard offset shadow; tilt headlines 1–3° and offset content ±0.3in off-grid; scatter 3–5 geometric shapes plus zigzag/dot/terrazzo pattern chips; render charts/diagrams as precise SVG with exactly one hot-pink emphasis mark.
**Don't:** use gradients, soft shadows, or mid-radius cards; align everything neatly to the grid; mute colors with gray or lower saturation with pastels; repeat a layout or shape arrangement across slides; use emoji bullets, stock icons, clipart, or raw rectangular photos; add 3D, gridlines, legend boxes, truncated y-axes, or div-block bars to charts.

## Agent Prompt Guide
> Build this presentation in the 'Memphis Retro Deck' style: 16:9 cream (#F4ECD8) slides of 80s–90s Memphis postmodern kitsch. Clash at least three of five saturated primaries (hot pink, cyan, yellow, violet, orange) as flat, gradient-free fills. Key shapes get a 3pt black outline plus a hard 6pt 6pt offset shadow (blur 0) — sticker-like, never soft. Heavy display headlines (Archivo Black; cover 54pt, title 40pt) tilt 1–3° in one primary; Poppins SemiBold 26pt body, max 6 lines, horizontal. Asymmetric off-grid layout: alternate the title top-left/top-right, scatter 3–5 half-circles/triangles/waves/stair-bars plus zigzag/dot/terrazzo chips into the margins, never repeat a layout. Zero radius or full circles only. Charts/diagrams are precise SVG: flat primary fills, black outlines, hard shadows, no gridlines/legends/y-axis, baseline 0, direct value labels, one hot-pink emphasis mark. Push/Wipe 0.3s transitions with Zoom/Bounce entrances. Fonts: Archivo Black + Poppins (Latin), Pretendard/Noto Sans KR (Korean).

## Known Gaps / Confidence
Adapted from the MIT-licensed design-diversity pack `ppt-memphis-retro-90s` — an authored spec, not an extraction from a live deck, so all confidence fields are `manual`. This is a ppt-track entry: the shadcn token mapping is a web-rendering convenience (pt-based type steps, 16:9 frames), the clashing primaries trace directly to the pack (hex never invented), and the dark color map is an authored "ink-black stage" adaptation absent from the source. The primaries are mapped to shadcn semantic roles for collision, not hierarchy — semantic-role expectations (e.g. `destructive` = danger) do not apply here.


## Tokens (theme.css — use these values verbatim, do not re-derive)

```css
/* Memphis Retro Deck — theme.css (generated, do not edit) */
:root {
  --radius: 0px;
  --radius-selector: 0px;
  --radius-field: 0px;
  --font-sans: 'Poppins', 'Pretendard', 'Noto Sans KR', Arial, sans-serif;
  --font-display: 'Archivo Black', 'Poppins', 'Pretendard', sans-serif;
  --spacing: 8px;
  --shadow: 6pt 6pt 0px 0px color-mix(in oklab, oklch(0.218 0 0) 100%, transparent);
  --background: oklch(0.944 0.028 88.8);
  --foreground: oklch(0.218 0 0);
  --card: oklch(0.944 0.028 88.8);
  --card-foreground: oklch(0.218 0 0);
  --popover: oklch(0.944 0.028 88.8);
  --popover-foreground: oklch(0.218 0 0);
  --primary: oklch(0.668 0.232 5.9);
  --primary-foreground: oklch(0.944 0.028 88.8);
  --secondary: oklch(0.708 0.122 208.7);
  --secondary-foreground: oklch(0.218 0 0);
  --muted: oklch(0.918 0.032 87.3);
  --muted-foreground: oklch(0.40 0.01 88);
  --accent: oklch(0.850 0.174 86.6);
  --accent-foreground: oklch(0.218 0 0);
  --destructive: oklch(0.679 0.213 36.5);
  --destructive-foreground: oklch(0.944 0.028 88.8);
  --border: oklch(0.218 0 0);
  --input: oklch(0.218 0 0);
  --ring: oklch(0.668 0.232 5.9);
  --chart-1: oklch(0.668 0.232 5.9);
  --chart-2: oklch(0.708 0.122 208.7);
  --chart-3: oklch(0.850 0.174 86.6);
  --chart-4: oklch(0.579 0.247 288.2);
  --chart-5: oklch(0.679 0.213 36.5);
}

.dark {
  --background: oklch(0.218 0 0);
  --foreground: oklch(0.944 0.028 88.8);
  --card: oklch(0.262 0.004 60);
  --card-foreground: oklch(0.944 0.028 88.8);
  --popover: oklch(0.262 0.004 60);
  --popover-foreground: oklch(0.944 0.028 88.8);
  --primary: oklch(0.700 0.230 5.9);
  --primary-foreground: oklch(0.218 0 0);
  --secondary: oklch(0.740 0.120 208.7);
  --secondary-foreground: oklch(0.218 0 0);
  --muted: oklch(0.300 0.006 60);
  --muted-foreground: oklch(0.72 0.02 88);
  --accent: oklch(0.860 0.172 86.6);
  --accent-foreground: oklch(0.218 0 0);
  --destructive: oklch(0.700 0.210 36.5);
  --destructive-foreground: oklch(0.218 0 0);
  --border: oklch(0.944 0.028 88.8);
  --input: oklch(0.944 0.028 88.8);
  --ring: oklch(0.700 0.230 5.9);
  --chart-1: oklch(0.700 0.230 5.9);
  --chart-2: oklch(0.740 0.120 208.7);
  --chart-3: oklch(0.860 0.172 86.6);
  --chart-4: oklch(0.620 0.245 288.2);
  --chart-5: oklch(0.700 0.210 36.5);
}
```

## Golden example (exemplar.html — match this structure and token usage)

```html
<!-- Golden snippet for "Memphis Retro Deck". Fragment — assumes the style's CSS variables
     (--background, --foreground, --primary, --secondary, --accent, --chart-1..5, --border,
     --font-display, --font-sans, ...) are in scope. Tokens only; no literal colors or images.
     Two 16:9 slide frames: a scattered memphis content slide and a title/divider slide.
     Patterns (zigzag/dots/terrazzo) are built from token-colored gradients. -->
<div style="display:flex; flex-direction:column; gap:2rem; font-family:var(--font-sans); max-width:960px; margin:0 auto;">

  <!-- Slide 1: memphis content slide — clashing blocks, scattered geometry, heavy tilted headline -->
  <section style="position:relative; aspect-ratio:16/9; overflow:hidden; background:var(--background); color:var(--foreground); box-sizing:border-box; padding:6% 6.5%;">
    <!-- dot-grid pattern chip (top-right, floating into bleed) -->
    <div style="position:absolute; top:6%; right:5%; width:15%; height:22%; background-image:radial-gradient(var(--foreground) 22%, transparent 24%); background-size:14px 14px; transform:rotate(-4deg);"></div>
    <!-- cyan half-circle bleeding off bottom-left -->
    <div style="position:absolute; bottom:-9%; left:8%; width:16%; aspect-ratio:2/1; background:var(--secondary); border:3px solid var(--border); border-bottom:none; border-radius:100% 100% 0 0;"></div>
    <!-- yellow triangle scatter -->
    <div style="position:absolute; bottom:14%; right:22%; width:0; height:0; border-left:34px solid transparent; border-right:34px solid transparent; border-bottom:60px solid var(--accent); transform:rotate(9deg);"></div>
    <!-- zigzag band -->
    <div style="position:absolute; top:40%; right:4%; width:20%; height:16px; background:linear-gradient(135deg, var(--border) 25%, transparent 25%) -8px 0/16px 16px, linear-gradient(225deg, var(--border) 25%, transparent 25%) -8px 0/16px 16px; transform:rotate(-8deg);"></div>

    <!-- yellow color block (1/3) with tilted headline -->
    <div style="position:absolute; top:0; left:0; width:38%; height:100%; background:var(--accent); border-right:3px solid var(--border);"></div>
    <h2 style="position:relative; width:34%; margin:0; font-family:var(--font-display); font-weight:900; font-size:2.5rem; line-height:1; letter-spacing:-0.01em; color:var(--foreground); transform:rotate(-2deg); text-transform:uppercase;">Loud<br>on<br>purpose</h2>

    <!-- body + floating violet circle on the right -->
    <div style="position:absolute; top:20%; right:7%; width:44%;">
      <p style="margin:0 0 1em; font-weight:600; font-size:1rem; line-height:1.3; color:var(--foreground);">Three clashing primaries, flat fills, black outlines and a hard 6pt offset shadow — cheerful disorder is the identity.</p>
      <span style="display:inline-block; background:var(--primary); color:var(--primary-foreground); border:3px solid var(--border); box-shadow:6px 6px 0 var(--border); font-family:var(--font-display); font-size:1.1rem; padding:.35em .9em; transform:rotate(2deg);">MEMPHIS 90s</span>
    </div>

    <!-- violet floating circle -->
    <div style="position:absolute; bottom:20%; right:40%; width:9%; aspect-ratio:1; border-radius:50%; background:var(--chart-4); border:3px solid var(--border); box-shadow:6px 6px 0 var(--border);"></div>
    <span style="position:absolute; bottom:6%; left:6.5%; font-size:.6rem; letter-spacing:.08em; text-transform:uppercase; color:var(--foreground);">Fig. 01 — Composition</span>
  </section>

  <!-- Slide 2: title / divider slide on an ink color block -->
  <section style="position:relative; aspect-ratio:16/9; overflow:hidden; background:var(--foreground); color:var(--background); box-sizing:border-box; padding:7% 7%; display:flex; flex-direction:column; justify-content:center;">
    <!-- terrazzo splatter (scattered primary chips) -->
    <div style="position:absolute; inset:0; background-image:
      radial-gradient(circle at 84% 20%, var(--secondary) 0 9px, transparent 10px),
      radial-gradient(circle at 90% 62%, var(--accent) 0 7px, transparent 8px),
      radial-gradient(circle at 78% 78%, var(--chart-4) 0 6px, transparent 7px),
      radial-gradient(circle at 12% 84%, var(--destructive) 0 8px, transparent 9px);"></div>
    <!-- section number badge -->
    <div style="position:absolute; top:10%; left:7%; width:64px; height:64px; border-radius:50%; background:var(--primary); color:var(--primary-foreground); border:3px solid var(--background); box-shadow:6px 6px 0 var(--secondary); display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-size:1.6rem; transform:rotate(-3deg);">02</div>

    <p style="position:relative; margin:0 0 .5em; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--accent);">Section 02 — The Deck</p>
    <h1 style="position:relative; margin:0; font-family:var(--font-display); font-weight:900; font-size:3.4rem; line-height:.95; letter-spacing:-0.01em; text-transform:uppercase; transform:rotate(2deg);">Play<span style="color:var(--accent);">.</span><br>Then<span style="color:var(--secondary);"> present.</span></h1>

    <!-- yellow triangle pointer + stair-bar decor -->
    <div style="position:absolute; bottom:12%; left:7%; display:flex; gap:6px; align-items:flex-end;">
      <div style="width:22px; height:26px; background:var(--secondary); border:3px solid var(--background);"></div>
      <div style="width:22px; height:44px; background:var(--accent); border:3px solid var(--background);"></div>
      <div style="width:22px; height:62px; background:var(--primary); border:3px solid var(--background);"></div>
    </div>
  </section>

</div>
```

## Apply

- shadcn project: `npx shadcn@latest add https://web.ggum.uk/styles/r/ppt-memphis-retro.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 `<style>` tag and follow the exemplar's markup pattern.
- dark mode: toggle the `.dark` class (both variants are in the tokens above).
- before finishing: re-check every Don't in the Design rules section above against your output.