# Memphis Postmodern 원색과 파스텔이 충돌하고 지그재그·물방울·반원이 흩뿌려지는 포스트모던 키치 웹 — 색의 과잉이 곧 정체성. - taxonomy: memphis · memphis-milano, postmodern, kitsch, playful-maximalism, geometric, terrazzo · complexity=high - page types: landing, portfolio, marketing - best for: 개성을 앞세운 크리에이티브 랜딩, 이벤트·페스티벌 페이지, 장난기 있는 브랜드 매니페스토 - avoid for: 데이터 밀도 높은 대시보드, 금융·의료 등 신뢰가 핵심인 서비스, 장문 독서용 콘텐츠 사이트 - provenance: authored (design-diversity 팩 'web-memphis-postmodern' (MIT) 각색) — confidence: colors=manual, typography=manual, spacing=manual, motion=manual, layout=manual ## Design rules # Memphis Postmodern ## Overview An 1980s Memphis Milano (Ettore Sottsass) sensibility rebuilt for the web. Primary colors and pastels clash on purpose, and geometric shapes — zigzags, teardrops, triangles, half-circles — drift across the background with no relation to the content. Terrazzo speckle, thin black grid lines, deliberate kitsch. You know it on sight: decorative shapes float behind the layout, and color combinations collide cheerfully as if "wrongly" chosen. Restraint is the enemy; overload is the identity. ## Colors & Roles Cream `background` (#fbf6e9), near-black `foreground` and `border` (#1c1c1c). Five accents used freely on shapes, CTAs, and emphasis: cherry (`primary`/`destructive`), cobalt (`accent`/`ring`), baby-pink (`secondary`), plus yellow and mint carried in `chart-2`/`chart-4`, hot-pink in `chart-5`. Sections alternate with baby-pink and powder-blue panels; footers flip to a cobalt panel with cream text. No area limit on accents — but keep any one section to 3–4 of the 5, not all five at once. Light is the canonical mode. ## Typography Rules Two families create the hierarchy (`mixed`). Poppins carries display and body — display at weight 800, `clamp(2.2rem, 6vw, 4.5rem)`, line-height 1.05, tracking −0.01em; body at 1.05rem/400, line-height 1.6, measure 60–70ch. Space Mono weight 700 uppercase handles labels, captions, and numbers at 0.8rem. Headlines earn rhythm by coloring individual words with different accents or tilting them `rotate(-3deg)`. ## Layout Principles Max content width 1180px; padding 20px mobile / 48px desktop; breakpoints 640px and 1024px. Compose asymmetrically on a 12-column grid — one block spans columns 1–7, the next spans 6–12, offset on purpose. Never center a hero. Vertical rhythm is dense: 80px between sections, with decorative shapes overlapping section boundaries. The page background carries a 40px black 1px grid or scattered terrazzo dots. ## Depth & Elevation Flat color, hard edges. The only elevation is a blur-zero hard offset shadow `5px 5px 0` in near-black; on hover it grows to `8px 8px 0`. No soft shadows, no blur, no gradients. Depth reads as bold outline + offset block, comic-book style. ## Shapes Content cards use a near-square 4px radius with a 2px solid black border. Decorative shapes are free-form: hollow circles, filled triangles, half-circles, zigzag lines, small dot clusters. Place 6–10 per screen with `position:absolute`, each a different accent, at random `rotate` between −20° and 20°. Terrazzo = five-color dots scattered at low density (20–40px spacing) via radial-gradients. ## Component Stylings - **Button**: radius 4px, 2px solid black border, solid accent fill, `5px 5px 0` hard shadow, uppercase label. Hover swaps the fill to a different accent (e.g., yellow → hot-pink), translates `(-3px,-3px)`, and grows the shadow to `8px 8px 0`. Focus = 2px offset cobalt outline. - **Card**: 2px black border + `5px 5px 0` shadow; background is an accent or cream. A small triangle or half-circle pokes out past a corner. Hover lifts `-3px,-3px`. - **Shape layer**: absolutely-positioned CSS/SVG geometry behind content — never aligned to the content hierarchy. - **Footer**: cobalt panel, cream text, terrazzo dots, Space Mono uppercase menu, a large half-circle half-clipped at the lower-left corner. ## Motion Playful overshoot: `220ms cubic-bezier(0.34, 1.56, 0.64, 1)`. Cards lift and grow their shadow on hover; shapes add ~15° of rotation. On scroll-in, shapes pop from `scale(0)` with rotation and stagger 80ms. Button hover swaps accent colors instantly. ## Do's and Don'ts **Do:** clash cream + cherry/yellow/cobalt/mint/hot-pink (3–4 per section); scatter 6–10 rotated shapes; wrap cards/buttons in 2px black borders with a blur-zero 5px 5px shadow; break the 12-column grid asymmetrically; color or rotate individual headline words. **Don't:** use purple/indigo gradients (color stays flat solid); use soft/blur shadows; center the hero; align shapes to the content hierarchy; retreat to a muted neutral palette; replace shapes with emoji; use fewer than 3 shapes. ## Responsive Behavior The asymmetric 12-column blocks stack to a single column below 640px; display type scales via `clamp()`. Reduce the shape count on small screens (keep 3+) so the scatter reads without crowding the text. Panel color-flips and the 40px grid pattern persist across breakpoints. ## Agent Prompt Guide > Build this in the 'Memphis Postmodern' style: cream background with clashing flat-solid accents (cherry, yellow, cobalt, mint, hot-pink), scatter 6–10 absolutely-positioned geometric shapes (zigzags, hollow circles, triangles, half-circles, terrazzo dots via radial-gradients) at random rotations behind the content, wrap cards and buttons in 2px solid black borders with a blur-zero 5px 5px hard offset shadow, compose asymmetrically on a 12-column grid with no centered hero, color individual headline words differently or rotate them, and animate with overshoot bounce — never gradients, soft shadows, or muted neutrals. ## Known Gaps / Confidence Adapted from the MIT-licensed design-diversity pack `web-memphis-postmodern` (an authored design spec, not measured from a live site), so every token is `manual` confidence. All chromatic values trace to the pack's hex, converted to OKLCH with culori; card/popover whites and the muted neutrals are derived tonal steps. The pack ships no dark mode — the dark palette here is a faithful adaptation (near-black ground, same accents, border inverted to a light cream line to preserve the hard-outline identity). Poppins and Space Mono are Google Fonts, used as the reproduction defaults. ## Tokens (theme.css — use these values verbatim, do not re-derive) ```css /* Memphis Postmodern — theme.css (generated, do not edit) */ :root { --radius: 4px; --radius-selector: 4px; --radius-field: 4px; --font-sans: 'Poppins', system-ui, -apple-system, sans-serif; --font-mono: 'Space Mono', ui-monospace, monospace; --font-display: 'Poppins', system-ui, sans-serif; --spacing: 8px; --shadow: 5px 5px 0px 0px color-mix(in oklab, oklch(0.226 0.000 0.0) 100%, transparent); --ks-display-weight: 800; --ks-display-tracking: -0.01em; --background: oklch(0.973 0.018 89.4); --foreground: oklch(0.226 0.000 0.0); --card: oklch(1.000 0.000 0.0); --card-foreground: oklch(0.226 0.000 0.0); --popover: oklch(1.000 0.000 0.0); --popover-foreground: oklch(0.226 0.000 0.0); --primary: oklch(0.620 0.207 30.7); --primary-foreground: oklch(0.985 0.010 89.4); --secondary: oklch(0.893 0.046 350.2); --secondary-foreground: oklch(0.226 0.000 0.0); --muted: oklch(0.940 0.014 89.4); --muted-foreground: oklch(0.450 0.010 89.4); --accent: oklch(0.496 0.174 263.6); --accent-foreground: oklch(0.985 0.010 89.4); --destructive: oklch(0.620 0.207 30.7); --destructive-foreground: oklch(0.985 0.010 89.4); --border: oklch(0.226 0.000 0.0); --input: oklch(0.226 0.000 0.0); --ring: oklch(0.496 0.174 263.6); --chart-1: oklch(0.620 0.207 30.7); --chart-2: oklch(0.842 0.168 90.4); --chart-3: oklch(0.496 0.174 263.6); --chart-4: oklch(0.725 0.124 169.8); --chart-5: oklch(0.670 0.187 354.5); } .dark { --background: oklch(0.205 0.005 89.4); --foreground: oklch(0.955 0.015 89.4); --card: oklch(0.250 0.008 89.4); --card-foreground: oklch(0.955 0.015 89.4); --popover: oklch(0.250 0.008 89.4); --popover-foreground: oklch(0.955 0.015 89.4); --primary: oklch(0.665 0.202 30.7); --primary-foreground: oklch(0.180 0.010 30.7); --secondary: oklch(0.470 0.075 350.2); --secondary-foreground: oklch(0.955 0.015 89.4); --muted: oklch(0.290 0.010 89.4); --muted-foreground: oklch(0.700 0.012 89.4); --accent: oklch(0.585 0.170 263.6); --accent-foreground: oklch(0.975 0.010 89.4); --destructive: oklch(0.665 0.202 30.7); --destructive-foreground: oklch(0.180 0.010 30.7); --border: oklch(0.900 0.012 89.4); --input: oklch(0.900 0.012 89.4); --ring: oklch(0.585 0.170 263.6); --chart-1: oklch(0.665 0.202 30.7); --chart-2: oklch(0.842 0.168 90.4); --chart-3: oklch(0.585 0.170 263.6); --chart-4: oklch(0.725 0.124 169.8); --chart-5: oklch(0.670 0.187 354.5); } ``` ## Golden example (exemplar.html — match this structure and token usage) ```html

Issue 01 — Milano

Loud on purpose.

Primary and pastel clash on a cream grid; the shapes never line up with the words, and that is the point.

Get loud Archive

Shape

Scatter, don't align

Six to ten shapes, each a different accent, tilted at random.

Color

Clash on cream

Flat solids only — no gradients, no soft shadows, no muting.

``` ## Apply - shadcn project: `npx shadcn@latest add https://web.ggum.uk/styles/r/memphis-postmodern.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 `