# Memphis Pop — Construction Instructions & AI Prompting Guide
> Version 1.0 · Complete decision framework for building with the Memphis Pop system

---

## Table of Contents

1. [Design Philosophy & Core Rules](#1-design-philosophy--core-rules)
2. [The Two-Font Law](#2-the-two-font-law)
3. [Color Application Rules](#3-color-application-rules)
4. [Border Radius Decision Framework](#4-border-radius-decision-framework)
5. [Background & Surface Rules](#5-background--surface-rules)
6. [Shadow & Elevation Rules](#6-shadow--elevation-rules)
7. [The Primary Triad — When and How](#7-the-primary-triad--when-and-how)
8. [Typography Application Rules](#8-typography-application-rules)
9. [Spacing Construction Rules](#9-spacing-construction-rules)
10. [Component Construction Guides](#10-component-construction-guides)
11. [Interactive States — Full Decision Guide](#11-interactive-states--full-decision-guide)
12. [Layout Construction Rules](#12-layout-construction-rules)
13. [Animation Rules](#13-animation-rules)
14. [What Never to Do — Anti-Pattern List](#14-what-never-to-do--anti-pattern-list)
15. [AI Prompting Instructions](#15-ai-prompting-instructions)
16. [New Project Checklist](#16-new-project-checklist)
17. [Component Pattern Library](#17-component-pattern-library)
18. [Responsive Construction Rules](#18-responsive-construction-rules)
19. [Accessibility Guidelines](#19-accessibility-guidelines)
20. [Common Scenarios — Decision Trees](#20-common-scenarios--decision-trees)

---

## 1. Design Philosophy & Core Rules

### The Fundamental Premise

Memphis Pop is built on one loud idea: **every element is a hand-cut sticker with a thick black outline and a hard offset shadow, and it physically presses flat when you click it.** This is a revival of 1980s Memphis Group postmodernism filtered through pop-art comic-book construction — confident colors, thick borders, zero blur, zero subtlety.

Where most systems in this collection strive for internal consistency of radius or shadow softness, Memphis Pop's defining trait is **intentional inconsistency of radius** (pills next to soft squares) paired with **absolute consistency of outline weight and shadow hardness**. Get the outline and shadow rules right, and the radius variety will read as playful rather than sloppy.

---

### The 10 Commandments of This System

**1. Every surface has a thick black outline.**
`border: 3px solid #111` (cards, dropdowns), `2.5px` (inputs, checkboxes), or `2px` (badges, table cells) — never fewer than 2px, and never any other border color than `#111`.

**2. Shadows are hard, offset, and pure black — never blurred.**
`box-shadow: 7px 7px 0 #111` for cards, `4px 4px 0 #111` for buttons. A `blur-radius` greater than `0` is a mistake in this system, full stop.

**3. Buttons physically press flat on click.**
`transform: translate(4px, 4px)` matched exactly to the shadow's offset distance, with the shadow simultaneously collapsing to `0 0 0 #111`. The button visually "meets" its own shadow.

**4. Radius is deliberately non-uniform by design.**
Primary/outline/dashed buttons are full pills (`9999px`); secondary/destructive/filled-dashed buttons are soft squares (`8px`); cards are `18px`; badges are pills. This variety is a feature — do not "fix" it into a single uniform radius.

**5. The palette is exactly three colors plus black/white.**
Coral red `#e63946`, electric blue `#3a86ff`, sunshine yellow `#ffd60a`. No purple, no neon, no pastel, no fourth hue except within muted semantic states (success green, warning amber — see §7).

**6. The page background is warm cream, never pure white.**
`#fdf6e3` — this warmth is what keeps the loud primary colors from feeling cold or clinical.

**7. Section titles are stickers, not labels.**
Every section title renders as a small yellow pill with a black outline (`.section-title`), not plain colored text. This is Memphis Pop's most distinctive, non-negotiable signature.

**8. Poppins ExtraBold for volume, Space Mono for calm.**
The display font is always heavy (700–800 weight); the body font is always a quiet, restrained monospace. Never soften the display weight below 700 or the contrast is lost.

**9. Dashed button variants drop their shadow.**
`.btn-dashed` and its siblings intentionally omit `box-shadow` — dashed borders signal "lighter weight" and should look visually quieter than solid filled buttons.

**10. Tables are fully gridded, not row-ruled.**
Every table cell (`th` and `td`) gets its own `2px solid #111` border on all sides — not just a bottom rule. This matches the "everything is outlined" philosophy down to the smallest unit.

---

## 2. The Two-Font Law

### Category 1: Display — Poppins (ExtraBold)
**Assignment question: Does this need to shout — a heading, subheading, button label, badge, or section-title chip?**

If yes → Poppins, weight 700–800.

- Page hero title (h1): YES → Poppins 800 (optionally with `-webkit-text-stroke` outline on colored backgrounds)
- Section heading (h2): YES → Poppins 700, colored red
- Subheading: YES → Poppins 700, colored blue
- Button label: YES → Poppins 700
- Section-title chip: YES → Poppins 800, uppercase
- Badge label: YES → Poppins 800
- Body paragraph: NO → Space Mono
- Table cell: NO → Space Mono

### Category 2: Body — Space Mono
**Assignment question: Is this a calm, functional piece of reading content?**

If yes → Space Mono.

- Body paragraph: YES → Space Mono 400
- Input / textarea text: YES → Space Mono 400
- Field label: YES → Space Mono 700 (uppercase — bold weight, but still the quiet font)
- Table cell content: YES → Space Mono 400
- Font-name caption: YES → Space Mono 700, colored red

### Font Decision Flowchart

```
Does this need to visually shout (heading, button, badge, chip)? ──YES──► Poppins, 700–800
        │ NO
        ▼
Default to Space Mono
```

---

## 3. Color Application Rules

### 3.1 Surface Colors

| Surface | Color | Notes |
|---------|-------|-------|
| Page | `#fdf6e3` | Always warm cream |
| Card (default) | `#ffffff` | Plain white with black outline |
| Card (hero/header) | `#3a86ff` | The one card allowed a colored fill — used once per page for maximum impact |
| Input | `#ffffff` | White, black outline |
| Table header | `#ffd60a` | Yellow fill, always |

### 3.2 Primary Triad Usage Rules

Use the three primary colors in exactly these dedicated roles — do not swap them between roles arbitrarily:

1. **Red (`#e63946`)** — primary button fill, section-heading text, error semantic state
2. **Blue (`#3a86ff`)** — secondary button fill, hero card background, subheading text, info semantic state
3. **Yellow (`#ffd60a`)** — section-title chip fill, table header fill, filled-dashed button fill, destructive button text (on black), switch thumb

**Never:**
- Introduce a fourth saturated hue for a new "brand" purpose
- Use yellow as a large card/page background (it's a chip/accent/table color only)
- Mix warm and cool accents in ways that don't map to the fixed role list above

---

### 3.3 Text Color Assignment

| Priority | Color | Examples |
|----------|-------|----------|
| Primary | `#111111` | Headings, body, most UI text |
| Secondary | `#6b6b6b` | Captions, muted supporting text |
| On red/blue fills | `#ffffff` | Button/badge text on colored fills |
| On yellow fills | `#111111` | Black reads better on yellow than white |
| On black fills | `#ffd60a` | Destructive button text |

### 3.4 Semantic Color Rules

Semantic states use their own muted-but-clear hues (`#2a9d5c` success, `#f4a300` warning, `#e63946` error — shared with the primary red, `#3a86ff` info — shared with the primary blue) on light tinted backgrounds, always with the constant `2px solid #111` outline. Success and warning introduce the *only* two additional hues in the entire system, and only ever as badge text/background — never as buttons, cards, or headings.

---

## 4. Border Radius Decision Framework

Unlike every other system in this collection, there is no single dominant radius value. Instead, follow this **per-element lookup**, and preserve the pill/square alternation deliberately.

### Is this a primary, outline, or dashed button?
→ `border-radius: 9999px` (pill)

### Is this a secondary, destructive, or filled-dashed button?
→ `border-radius: 8px` (soft square)

### Is this a card?
→ `border-radius: 18px`

### Is this an input, checkbox, or dropdown item?
→ `border-radius: 8px` (checkbox uses `6px`, close but distinct)

### Is this a badge, section-title chip, or radio?
→ `border-radius: 9999px`

### Quick Reference Table

| Element | Radius |
|---------|--------|
| Card | 18px |
| Button — primary/outline/dashed | 9999px |
| Button — secondary/destructive/filled-dashed | 8px |
| Input / textarea | 8px |
| Dropdown panel | 14px |
| Dropdown item | 8px |
| Badge / section-title chip / radio | 9999px |
| Checkbox | 6px |

**When adding a new button variant not listed above, alternate its radius from its nearest sibling** — this keeps the mixed-radius language intact as the system grows.

---

## 5. Background & Surface Rules

### 5.1 The Warm Cream Rule

```css
body { background: #fdf6e3; }
```

Never substitute pure white (`#ffffff`) for the page background — that color is reserved exclusively for cards and inputs, and using it for the page too would erase the contrast that makes cards "pop" visually.

### 5.2 The One Colored Card

Exactly one card per page — the header/hero — is allowed a solid color fill (`#3a86ff` in the reference build). All other cards stay white. This restraint is what makes the hero card's color feel intentional rather than arbitrary.

### 5.3 Outline Is Universal, Never Optional

Every surface — card, button, input, badge, table cell, dropdown — gets a black outline. There is no "borderless" or "ghost" surface variant anywhere in Memphis Pop (even dashed buttons still have a border, just a dashed one).

---

## 6. Shadow & Elevation Rules

### 6.1 The Hard Offset Rule

```css
box-shadow: [x]px [y]px 0 #111;
```

`x` and `y` are always equal (diagonal offset), and the blur value is always `0`. This is checked easily: if your shadow declaration has three length values instead of two (offset-x, offset-y, blur), you've made an error — Memphis Pop shadows never have a blur term.

### 6.2 Elevation and Shadow Pairing

| What You're Building | Shadow |
|---------------------|--------|
| Card | `7px 7px 0 #111` |
| Button (default) | `4px 4px 0 #111` |
| Button (dashed variants) | none |
| Input (focus only) | `3px 3px 0 #111` |
| Dropdown panel | `6px 6px 0 #111` |

### 6.3 The Press Must Match the Shadow Offset Exactly

If a button's shadow is `4px 4px 0 #111`, its `:active` transform must be exactly `translate(4px, 4px)` — any mismatch breaks the "meets its own shadow" illusion.

---

## 7. The Primary Triad — When and How

### When to Use Each Color

| Color | Use It For | Don't Use It For |
|-------|-----------|-------------------|
| Red | Primary button, section headings, error state | Card backgrounds, body text |
| Blue | Secondary button, hero card bg, subheadings, info state | Badges other than info |
| Yellow | Section-title chip, table header, filled-dashed button, switch thumb | Large card/page backgrounds, body text |

### How NOT to Use the Triad

- Never introduce a fourth saturated color for a "new" purpose — reuse one of the three roles
- Never use yellow text on a white background without sufficient weight/size (contrast risk — see §19)
- Never remove the black outline from any triad-colored surface

---

## 8. Typography Application Rules

### 8.1 The Sticker Section-Title Pattern

```
[TYPOGRAPHY]                        ← Poppins 800, 12px, uppercase, #111 on #ffd60a chip, 2px black border, pill radius, padding 4px 12px
                                     ← 18px gap before content
[Section content begins]
```

This is rendered as an actual pill-shaped chip element, not styled text with a border-bottom — treat it as a small badge component that happens to label a section.

### 8.2 The Header Eyebrow Pattern

```
[THEME 12 · POSTMODERN]              ← eyebrow, Poppins 800, small pill chip, white bg on blue hero card
MEMPHIS POP!                         ← title, Poppins 800, clamp(28px,4vw,46px), white with black text-stroke, on blue hero card
[Poppins ExtraBold + Space Mono...]  ← subtitle, Space Mono 14px, white pill chip
```

### 8.3 Weight as Hierarchy

| Hierarchy Level | Font | Weight | Color |
|-----------------|------|--------|-------|
| Display | Poppins | 800 | `#111111` (or white w/ stroke on colored bg) |
| Section heading | Poppins | 700 | `#e63946` |
| Subheading | Poppins | 700 | `#3a86ff` |
| Body | Space Mono | 400 | `#111111` |
| Label | Space Mono | 700 | `#111111` |
| Secondary/caption | Space Mono | 400 | `#6b6b6b` |

---

## 9. Spacing Construction Rules

### 9.1 The Padding Budget for Components

| Component | Padding |
|-----------|---------|
| Badge | 4px vertical, 12px horizontal |
| Section-title chip | 4px vertical, 12px horizontal |
| Input | 11px vertical, 14px horizontal |
| Button | 10px vertical, 22px horizontal |
| Card | 26px vertical, 30px horizontal |
| Table cell | 10px vertical, 14px horizontal |
| Dropdown item | 9px vertical, 12px horizontal |

### 9.2 Vertical Rhythm in Forms

```
[Field Label — Space Mono 11px bold, uppercase]
         ↕ 7px
[Input — 2.5px black border, 8px radius]
         ↕ 14–18px (between field groups)
[Next Field Label]
```

### 9.3 Card Gap Rhythm

Cards need `22px`+ gaps in grid layouts so each card's `7px 7px 0` hard shadow has visual room to render without overlapping the neighboring card's border.

---

## 10. Component Construction Guides

### 10.1 How to Build a Card — Step by Step

**Step 1: Container** — `#fff` background (or `#3a86ff` for the one hero card), `3px solid #111` border, `border-radius: 18px`, `box-shadow: 7px 7px 0 #111`, `padding: 26px 30px`

**Step 2: Section title** — build it as a chip: `#ffd60a` background, `2px solid #111` border, `border-radius: 9999px`, `padding: 4px 12px`, Poppins 800 12px uppercase

**Step 3: Content** — body text Space Mono 400, `#111`. Emphasis in `#e63946` or `#3a86ff`.

### 10.2 How to Build a Button — Step by Step

**Step 1: Shell** — `3px solid #111` border, `padding: 10px 22px`, Poppins 700 13.5px label, `box-shadow: 4px 4px 0 #111`

**Step 2: Pick fill + radius per variant** — primary: red/pill; secondary: blue/8px; outline: white/pill; destructive: black+yellow-text/8px; dashed: white+dashed border/pill/no-shadow; filled-dashed: yellow+dashed border/8px

**Step 3: Press interaction** — `transition: transform 100ms`; on `:active`, `transform: translate(4px,4px)` + `box-shadow: 0 0 0 #111`

### 10.3 How to Build a Badge — Step by Step

**Step 1: Shell** — `border-radius: 9999px`, `padding: 4px 12px`, `border: 2px solid #111`, Poppins 800 11px

**Step 2: Pick the semantic fill/text pair** — success `#d4f4de`/`#2a9d5c`; warning `#ffedcc`/`#f4a300`; error `#fde0e2`/`#e63946`; info `#dbe9ff`/`#3a86ff`

### 10.4 How to Build a Table — Step by Step

**Step 1: Header** — `#ffd60a` background, `2px solid #111` border on every `th`, Poppins 800 11px uppercase

**Step 2: Body cells** — `2px solid #111` border on every `td` (full grid, not row-rules only), Space Mono 400 13px

---

## 11. Interactive States — Full Decision Guide

### 11.1 Button States

**All variants:**
- Default: `box-shadow: 4px 4px 0 #111` (except dashed: none)
- Hover: unchanged shadow (no hover-specific shadow change in this system)
- Active/Pressed: `transform: translate(4px,4px)`, `box-shadow: 0 0 0 #111`
- Disabled: `opacity: 0.5`, shadow/transform unchanged

### 11.2 Input Focus

```css
.input:focus { box-shadow: 3px 3px 0 #111; }
```

The shadow appears only on focus — inputs have no shadow by default, so the hard-shadow appearance itself is the focus signal (rather than a border-color or ring change).

### 11.3 Dropdown Item Hover

```css
.dropdown-item:hover, .dropdown-item.picked { background: #ffd60a; }
```

---

## 12. Layout Construction Rules

### 12.1 Page Layout Model

```css
.page-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 24px 100px;
}
```

### 12.2 Dashboard Grid Pattern

```css
.layout-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.layout-3col { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 22px; }
```

---

## 13. Animation Rules

### 13.1 What Can Animate

| Element | Property | Duration | Easing |
|---------|----------|----------|--------|
| Button press | `transform`, `box-shadow` | 100ms | linear |
| Switch thumb | `transform` | 150ms | ease-out |
| Dropdown/modal entry | `opacity` | 150ms | ease-standard |

### 13.2 What Should Not Animate

- Border-radius (never animated — the mixed-radius system is static per element)
- Card shadows at rest (only interactive presses animate)
- Any bounce/spring easing beyond the deliberate "snap" of the press — motion should feel mechanical, not soft

---

## 14. What Never to Do — Anti-Pattern List

### Typography Anti-Patterns

| ❌ Never | ✅ Instead |
|---------|----------|
| Use Space Mono for headings/buttons | Poppins ExtraBold governs anything loud |
| Render section titles as plain text | Section titles are yellow pill chips |
| Use a font weight below 700 for display text | Display type is always 700–800 |

### Color Anti-Patterns

| ❌ Never | ✅ Instead |
|---------|----------|
| Introduce a fourth saturated accent hue | Red/blue/yellow only, plus muted success/warning |
| Use yellow as a large background fill | Yellow is chip/accent/table-header only |
| Use pure white as the page background | Page is always `#fdf6e3` cream |

### Border Radius Anti-Patterns

| ❌ Never | ✅ Instead |
|---------|----------|
| Force every button to the same radius | Preserve the deliberate pill/square alternation |
| Use 0px sharp corners anywhere | Minimum radius is 6px (checkbox) |

### Structural Anti-Patterns

| ❌ Never | ✅ Instead |
|---------|----------|
| Add a blurred `box-shadow` | Shadows are always hard offset, 0 blur |
| Remove the black outline from any surface | Every surface keeps its outline, even dashed variants |
| Mismatch a button's press-transform to its shadow offset | They must be numerically equal |
| Style a table with row-only rules | Every cell gets its own full border |

---

## 15. AI Prompting Instructions

**System prompt to include:**

> Build this UI using the Memphis Pop design system.
>
> Core rules:
> — Page background is warm cream `#fdf6e3`, never pure white. Cards and inputs are white (`#ffffff`) with a `3px solid #111` (cards) or `2.5px solid #111` (inputs) black outline.
> — Every shadow is a hard, zero-blur, pure-black offset: `7px 7px 0 #111` for cards, `4px 4px 0 #111` for buttons. Never use a blurred shadow.
> — Buttons physically press on click: `transform: translate(4px,4px)` + shadow collapses to `0 0 0 #111` on `:active`, matching the shadow offset exactly.
> — Border-radius is deliberately mixed: primary/outline/dashed buttons and badges are full pills (`9999px`); secondary/destructive/filled-dashed buttons and inputs are soft squares (`8px`); cards are `18px`. Preserve this variety — don't make everything the same radius.
> — Color palette is exactly three colors plus black/white: coral red `#e63946`, electric blue `#3a86ff`, sunshine yellow `#ffd60a`. No purple, no neon, no pastel.
> — Section titles render as yellow pill "chips" with a black outline and Poppins 800 uppercase text — not plain labels.
> — Fonts: Poppins ExtraBold (700–800) for anything loud (headings, buttons, badges, chips). Space Mono (400/700) for body copy, inputs, and tables.
> — Tables get a full grid of `2px solid #111` borders on every cell, not just row-bottom rules.
> — Only one card per page (the hero/header) gets a colored fill; all other cards are white.

---

## 16. New Project Checklist

**Fonts:**
- [ ] Poppins imported (weights 700, 800)
- [ ] Space Mono imported (weights 400, 700)

**Colors:**
- [ ] Page background is `#fdf6e3`
- [ ] Only red/blue/yellow used as the primary triad

**Radius:**
- [ ] Buttons alternate pill (9999px) and soft-square (8px) per variant
- [ ] Cards at 18px, checkbox at 6px

**Shadows:**
- [ ] All shadows are hard offset, zero blur
- [ ] Button press transform matches shadow offset exactly

**Structure:**
- [ ] Every surface has a black outline, including dashed variants
- [ ] Section titles are yellow pill chips
- [ ] Table cells have full borders, not just row rules

---

## 17. Component Pattern Library

### Pattern: Sticker Stat Card

```html
<div class="mp-card" style="padding:24px;">
  <div class="section-title">Usage</div>
  <div style="font-family:'Poppins';font-size:32px;font-weight:800;color:#111;">84%</div>
</div>
```

### Pattern: Hero Header Card

```html
<div class="mp-card" style="margin-bottom:36px;background:#3a86ff;">
  <div style="font-size:11px;font-weight:800;text-transform:uppercase;color:#111;background:#fff;display:inline-block;padding:3px 10px;border:2px solid #111;border-radius:9999px;">Theme 12 · Postmodern</div>
  <h1 style="font-size:clamp(28px,4vw,46px);margin:8px 0 0;color:#fff;-webkit-text-stroke:1.5px #111;">MEMPHIS POP!</h1>
</div>
```

### Pattern: Badge Row

```html
<span class="badge badge-success">Success</span>
<span class="badge badge-warning">Warning</span>
<span class="badge badge-error">Error</span>
```

---

## 18. Responsive Construction Rules

**Below 480px:**
- Grids collapse to single column
- Card padding reduces from 26–30px to 18px
- Shadow offsets reduce slightly (e.g., card shadow to `5px 5px 0 #111`) to avoid excessive visual weight on small screens

**480px–1023px:**
- Two/three-column layouts remain where space allows

**1024px+:**
- Full system at designed specifications

---

## 19. Accessibility Guidelines

### 19.1 Color Contrast Requirements

| Pairing | Notes |
|---------|-------|
| `#111111` on `#fdf6e3` | High contrast, AAA-safe |
| `#ffffff` on `#e63946` / `#3a86ff` | AA-safe for large text; verify for small labels |
| `#111111` on `#ffd60a` | High contrast — this is why yellow always pairs with black text, never white |

**Rules:**
- Never place white text on yellow — contrast fails badly. Yellow surfaces always pair with `#111` text.
- The thick black outline on every element provides an accessibility bonus: shape/boundary is legible even without relying on color alone.

### 19.2 Focus Management

- All interactive elements need `outline: 3px solid #111; outline-offset: 2px;` for `:focus-visible` — reusing the system's signature outline weight for focus rings keeps it visually consistent with the rest of the system
- The hard shadow appearing on input focus is a helpful additional signal but should not replace a proper `:focus-visible` outline

---

## 20. Common Scenarios — Decision Trees

### Scenario: "What radius should this button be?"

```
Is it primary, outline, or dashed? ──YES──► 9999px (pill)
        │ NO
        ▼
Is it secondary, destructive, or filled-dashed? ──YES──► 8px (soft square)
```

### Scenario: "What shadow do I use?"

```
Is it a dashed button variant? ──YES──► No shadow
        │ NO
        ▼
Is it a button? ──YES──► 4px 4px 0 #111
        │ NO
        ▼
Is it a dropdown panel? ──YES──► 6px 6px 0 #111
        │ NO
        ▼
Default: 7px 7px 0 #111 (card)
```

### Scenario: "Which of the three colors do I use?"

```
Is it the primary action / error state / section heading? ──YES──► Red #e63946
        │ NO
        ▼
Is it the secondary action / info state / hero bg / subheading? ──YES──► Blue #3a86ff
        │ NO
        ▼
Is it a chip, table header, or highlight accent? ──YES──► Yellow #ffd60a
```

---

*End of Instructions — Memphis Pop v1.0*
*Design System Document: memphis-design-system.md*
*Instructions Document: memphis-instructions.md*