# 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.