# Memphis Pop — Complete Design System
> Version 1.0 · Derived from the Memphis Pop Theme (Theme 12)

---

## Table of Contents

1. [System Overview](#1-system-overview)
2. [CSS Custom Properties — Master Token Sheet](#2-css-custom-properties--master-token-sheet)
3. [Color Palette](#3-color-palette)
4. [Typography System](#4-typography-system)
5. [Spacing System](#5-spacing-system)
6. [Border Radius System](#6-border-radius-system)
7. [Shadow & Elevation System](#7-shadow--elevation-system)
8. [Component Specifications](#8-component-specifications)
9. [Layout & Grid System](#9-layout--grid-system)
10. [Animation & Transition Tokens](#10-animation--transition-tokens)
11. [Z-Index System](#11-z-index-system)
12. [Breakpoints](#12-breakpoints)
13. [Icon System](#13-icon-system)
14. [State Definitions](#14-state-definitions)

---

## 1. System Overview

**Design Language:** Memphis Pop
**Aesthetic Family:** Postmodern Memphis Design revival — thick black outlines, hard offset shadows, primary-plus-yellow palette, mixed radii per element
**Personality:** Loud, playful, confident, maximalist — communicates energy and personality without any restraint
**Best Suited For:** Youth-brand marketing sites, event/festival apps, creative-agency portfolios, kids' education products, bold consumer apps that want to stand out rather than blend in

**Core Principles:**
- Every surface has a thick `3px solid #111` black outline — this is non-negotiable and appears on cards, buttons, inputs, badges, and tables alike. Nothing floats without a hard black line defining it.
- Elevation comes from a **hard, non-blurred offset shadow** in pure black (`7px 7px 0 #111` for cards, `4px 4px 0 #111` for buttons) — never a soft blurred shadow. This is the system's signature "pop-art sticker" look.
- Radius is deliberately **inconsistent per element** — some buttons are full pills, others are `8px` soft squares, badges are pills, cards are `18px`. This intentional variety is core to the postmodern Memphis aesthetic, which rejected uniform systems.
- The palette is a bold primary triad — coral red (`#e63946`), electric blue (`#3a86ff`), sunshine yellow (`#ffd60a`) — plus black and white. No purple, no neon, no pastel; everything is a saturated, confident primary/secondary hue.
- Buttons physically "press" on click: `transform: translate(4px,4px)` combined with the shadow collapsing to `0 0 0 #111`, so the button visually sinks to meet its own shadow.
- Typography pairs a heavyweight rounded display font (Poppins ExtraBold, sometimes with a text-stroke outline effect) against a quiet monospace body font (Space Mono) — maximalist headlines, calm supporting text.

---

## 2. CSS Custom Properties — Master Token Sheet

Paste this block into the `:root` of every project using this system.

```css
:root {

  /* ─── COLOR: BASE ────────────────────────────────────────────── */
  --color-bg-page:        #fdf6e3;   /* Page background — warm cream, never white */
  --color-bg-surface:     #ffffff;   /* Card / input background */
  --color-ink:            #111111;   /* The universal outline + text-shadow color */

  /* ─── COLOR: PRIMARY TRIAD ───────────────────────────────────── */
  --color-red:             #e63946;   /* Primary accent — buttons, section headings */
  --color-blue:            #3a86ff;   /* Secondary accent — secondary buttons, header card bg */
  --color-yellow:          #ffd60a;   /* Tertiary accent — section-title chip, table header, highlights */

  /* ─── COLOR: TEXT ────────────────────────────────────────────── */
  --color-text-primary:    #111111;   /* Headings, body-strong */
  --color-text-secondary:  #6b6b6b;   /* Secondary text */
  --color-text-on-red:     #ffffff;
  --color-text-on-blue:    #ffffff;
  --color-text-on-yellow:  #111111;
  --color-text-on-ink:     #ffd60a;   /* Text on solid black (destructive button) */

  /* ─── COLOR: SEMANTIC ────────────────────────────────────────── */
  --color-success:         #2a9d5c;
  --color-success-bg:      #d4f4de;
  --color-warning:         #f4a300;
  --color-warning-bg:      #ffedcc;
  --color-error:           #e63946;
  --color-error-bg:        #fde0e2;
  --color-info:            #3a86ff;
  --color-info-bg:         #dbe9ff;

  /* ─── TYPOGRAPHY: FONT FAMILIES ─────────────────────────────── */
  --font-display:  'Poppins', 'Segoe UI', system-ui, sans-serif;
  --font-body:     'Space Mono', 'Consolas', monospace;

  /* ─── TYPOGRAPHY: SCALE ──────────────────────────────────────── */
  --text-2xs:   0.6875rem;  /* 11px */
  --text-xs:    0.71875rem; /* 11.5px */
  --text-sm:    0.75rem;    /* 12px */
  --text-base:  0.8125rem;  /* 13px */
  --text-md:    0.84375rem; /* 13.5px */
  --text-lg:    0.875rem;   /* 14px */
  --text-xl:    1rem;       /* 16px */
  --text-2xl:   1.5rem;     /* 24px */
  --text-3xl:   2.5rem;     /* 40px */
  --text-4xl:   2.875rem;   /* 46px, clamp ceiling */

  /* ─── TYPOGRAPHY: WEIGHTS ────────────────────────────────────── */
  --weight-regular:  400;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-extrabold: 800;

  /* ─── TYPOGRAPHY: LINE HEIGHTS ───────────────────────────────── */
  --leading-tight:   1.1;
  --leading-base:    1.5;
  --leading-relaxed: 1.7;

  /* ─── TYPOGRAPHY: LETTER SPACING ─────────────────────────────── */
  --tracking-normal: 0.02em;
  --tracking-wide:   0.04em;
  --tracking-wider:  0.06em;

  /* ─── SPACING SCALE ──────────────────────────────────────────── */
  --space-1:   4px;
  --space-2:   6px;
  --space-3:   7px;
  --space-4:   8px;
  --space-5:   9px;
  --space-6:   10px;
  --space-7:   11px;
  --space-8:   12px;
  --space-9:   14px;
  --space-10:  18px;
  --space-11:  22px;
  --space-12:  24px;
  --space-14:  26px;
  --space-16:  30px;
  --space-18:  36px;

  /* ─── BORDER RADIUS (deliberately mixed, not uniform) ────────── */
  --radius-badge:       9999px;  /* Badges */
  --radius-btn-pill:    9999px;  /* Primary / outline / dashed buttons */
  --radius-btn-square:  8px;     /* Secondary / destructive / filled-dashed buttons */
  --radius-input:       8px;     /* Inputs */
  --radius-card:        18px;    /* Cards */
  --radius-dropdown:    14px;    /* Dropdown panel */
  --radius-dropdown-item: 8px;   /* Dropdown items */
  --radius-section-chip: 9999px; /* Section-title chip */

  /* ─── SHADOWS: THE HARD OFFSET SYSTEM ───────────────────────── */
  --shadow-card:         7px 7px 0 #111;
  --shadow-btn:          4px 4px 0 #111;
  --shadow-btn-pressed:  0 0 0 #111;
  --shadow-input-focus:  3px 3px 0 #111;
  --shadow-dropdown:     6px 6px 0 #111;

  /* ─── BORDERS ────────────────────────────────────────────────── */
  --border-thick:   3px solid #111;
  --border-medium:  2.5px solid #111;
  --border-thin:    2px solid #111;

  /* ─── ANIMATION ──────────────────────────────────────────────── */
  --ease-standard:  cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast:    100ms;
  --duration-base:    150ms;

  /* ─── LAYOUT ─────────────────────────────────────────────────── */
  --container-sm:    480px;
  --container-md:    640px;
  --container-lg:    800px;
  --container-xl:   1040px;
  --container-2xl:  1200px;

  /* ─── Z-INDEX STACK ──────────────────────────────────────────── */
  --z-base:      0;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-modal:    1000;
  --z-toast:    1100;

}
```

---

## 3. Color Palette

### 3.1 Base Colors

| Token | Hex | Use |
|-------|-----|-----|
| `--color-bg-page` | `#fdf6e3` | Page background — warm cream, never pure white |
| `--color-bg-surface` | `#ffffff` | Card, input background |
| `--color-ink` | `#111111` | The universal outline color and primary text |

### 3.2 Primary Triad

| Token | Hex | Use |
|-------|-----|-----|
| `--color-red` | `#e63946` | Primary button, section-heading text |
| `--color-blue` | `#3a86ff` | Secondary button, header card background, subheading text |
| `--color-yellow` | `#ffd60a` | Section-title chip, table header, dashed-fill button, badge accents |

Only these three colors, plus black and white, appear structurally in the system. There is no purple, no neon, no pastel, and no fourth accent hue.

### 3.3 Text Colors

| Token | Hex | Use |
|-------|-----|-----|
| `--color-text-primary` | `#111111` | Headings, primary body |
| `--color-text-secondary` | `#6b6b6b` | Secondary/caption text |
| `--color-text-on-red` / `on-blue` | `#ffffff` | Text on filled red/blue surfaces |
| `--color-text-on-yellow` | `#111111` | Text on filled yellow surfaces (black reads better on yellow) |
| `--color-text-on-ink` | `#ffd60a` | Text on solid black (destructive button) |

### 3.4 Semantic Colors

| State | Text | Background |
|-------|------|------------|
| Success | `#2a9d5c` | `#d4f4de` |
| Warning | `#f4a300` | `#ffedcc` |
| Error | `#e63946` | `#fde0e2` |
| Info | `#3a86ff` | `#dbe9ff` |

All semantic badges keep the universal `2px solid #111` outline regardless of their fill color — the outline is a constant; only the fill and text hue change.

---

## 4. Typography System

### 4.1 Font Families

**Display — `'Poppins'` (ExtraBold)**
- Google Fonts import: `@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@600;700;800&display=swap')`
- Weights used: 700, 800
- Character: Heavy, rounded, confident geometric sans
- Usage: h1, section headings, subheadings, section-title chips, badge text — anything that needs to shout

**Body — `'Space Mono'`**
- Google Fonts import: `@import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap')`
- Weights used: 400, 700
- Character: Quiet, grounded monospace — a deliberate contrast note against the loud display type
- Usage: Body copy, input text, table cells, captions, font-name label

The Poppins/Space Mono pairing is intentionally a study in contrast: the loudest possible display type paired with the quietest possible body type, so the eye always knows which is which.

---

### 4.2 Type Scale — Full Specification

#### Display (Poppins ExtraBold)

| Role | Size (px) | Weight | Color |
|------|-----------|--------|-------|
| Display Heading | 40px (clamp 28–46px) | 800 | `#111111` |
| Section Heading | 24px | 700 | `#e63946` |
| Subheading | 16px | 700 | `#3a86ff` |
| Button label | 13.5px | 700 | context-dependent |
| Section-title chip | 12px | 800 (tracking 0.04em, uppercase) | `#111111` on `#ffd60a` |
| Badge | 11px | 800 | context-dependent |

#### Body (Space Mono)

| Role | Size (px) | Weight | Color |
|------|-----------|--------|-------|
| Primary text | 14px | 400 | `#111111` |
| Secondary text | 12.5px | 400 | `#6b6b6b` |
| Font-name label | 11px | 700 | `#e63946` |
| Input text | 13.5px | 400 | `#111111` |
| Field label | 11px | 700 (uppercase) | `#111111` |
| Table cell | 13px | 400 | `#111111` |
| Table header | 11px | 800 (uppercase) | `#111111` on `#ffd60a` |

---

### 4.3 Google Fonts Import Block

```css
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@600;700;800&family=Space+Mono:wght@400;700&display=swap');
```

---

### 4.4 Heading System (HTML Mapping)

```css
h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(28px, 4vw, 46px);
  color: var(--color-ink);
}
/* The reference build applies -webkit-text-stroke:1.5px #111 to white hero headings
   sitting on a colored card, for a bold "sticker" outline effect */

h2 {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  color: var(--color-red);
}

.subheading {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  color: var(--color-blue);
}

.section-title {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-ink);
  background: var(--color-yellow);
  display: inline-block;
  padding: 4px 12px;
  border: 2px solid var(--color-ink);
  border-radius: 9999px;
  margin-bottom: 18px;
}

p {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: var(--leading-relaxed);
  color: var(--color-ink);
}

label {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  color: var(--color-ink);
  text-transform: uppercase;
  margin-bottom: 7px;
  display: block;
}
```

**Signature detail:** the section title is not plain text — it's rendered as its own small yellow pill "sticker" with a black outline, functioning as a mini badge rather than a typographic label. This is unique to Memphis Pop among all systems in the collection.

---

## 5. Spacing System

### 5.1 Base Scale Table

| Token | Value | Common Use |
|-------|-------|------------|
| `--space-2` | 6px | Section-title chip padding-v |
| `--space-4` | 8px | Icon-to-text gap |
| `--space-6` | 10px | Table cell padding-v |
| `--space-8` | 12px | Section-title chip padding-h, table cell padding-h |
| `--space-9` | 14px | Table cell padding-v (body) |
| `--space-10` | 18px | Field group gap |
| `--space-11` | 22px | Button padding-h |
| `--space-14` | 26px | Card padding-v |
| `--space-16` | 30px | Card padding-h |
| `--space-18` | 36px | Header card margin-bottom |

### 5.2 Component Spacing Specifications

#### Card
```
Padding: 26px 30px
Border: 3px solid #111
Border-radius: 18px
Shadow: 7px 7px 0 #111
```

#### Button
```
Padding: 10px 22px
Border: 3px solid #111
Shadow: 4px 4px 0 #111
Pressed: translate(4px,4px), shadow → 0 0 0 #111
```

#### Input
```
Padding: 11px 14px
Border: 2.5px solid #111
Border-radius: 8px
Focus: shadow 3px 3px 0 #111 (no color change, no radius change)
```

#### Badge
```
Padding: 4px 12px
Font size: 11px
Border: 2px solid #111
Border-radius: 9999px
```

---

## 6. Border Radius System

Memphis Pop's defining structural quirk: **radius is intentionally non-uniform across elements**, unlike every other system in this collection which commits to one or two values. This variety is itself the design statement — it echoes the postmodern Memphis Group's rejection of rigid, uniform grids in favor of playful inconsistency.

### 6.1 Radius Scale (Per-Element, Not a Single Scale)

| Token | Value | Use |
|-------|-------|-----|
| `--radius-badge` | 9999px | Badges |
| `--radius-btn-pill` | 9999px | Primary, outline, dashed buttons |
| `--radius-btn-square` | 8px | Secondary, destructive, filled-dashed buttons |
| `--radius-input` | 8px | Inputs |
| `--radius-card` | 18px | Cards |
| `--radius-dropdown` | 14px | Dropdown panel |
| `--radius-dropdown-item` | 8px | Dropdown items |
| `--radius-section-chip` | 9999px | Section-title chip |

### 6.2 Quick Reference Table

| Element | Radius |
|---------|--------|
| Card | 18px |
| Button — primary / outline / dashed | 9999px (pill) |
| Button — secondary / destructive / filled-dashed | 8px |
| Text input / textarea | 8px |
| Dropdown panel | 14px |
| Dropdown item | 8px |
| Badge | 9999px |
| Section-title chip | 9999px |
| Checkbox | 6px |
| Radio | 9999px |

**Rule:** when adding a new button variant, alternate deliberately between pill and soft-square radius rather than defaulting every new button to the same shape — this alternation is what keeps the system feeling "Memphis," not just "rounded."

---

## 7. Shadow & Elevation System

### 7.1 The Hard Offset Shadow Rule

Every shadow in this system is **pure black, zero blur, offset only** — the classic pop-art "sticker" shadow:

```css
box-shadow: 7px 7px 0 #111;  /* card */
box-shadow: 4px 4px 0 #111;  /* button */
```

There is never a `blur-radius` value greater than `0` anywhere in this system. A soft, blurred shadow immediately breaks the flat pop-art illusion.

### 7.2 Elevation Scale

| Element | Shadow |
|---------|--------|
| Card | `7px 7px 0 #111` |
| Button (default) | `4px 4px 0 #111` |
| Button (pressed) | `0 0 0 #111` (i.e., no visible shadow — button has "sunk" to meet it) |
| Input (focus) | `3px 3px 0 #111` (appears only on focus, absent by default) |
| Dropdown panel | `6px 6px 0 #111` |

### 7.3 The Press Interaction — Button Physically Sinks

```css
.btn { transition: transform 0.1s; }
.btn:active { transform: translate(4px, 4px); box-shadow: 0 0 0 #111; }
```

The button moves exactly the same distance as its own shadow offset, so visually it appears to "meet" its shadow and become flush with the surface — mimicking a physical sticker or button being pressed flat.

---

## 8. Component Specifications

### 8.1 Buttons

#### Shared Base
```css
.btn {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13.5px;
  border: 3px solid #111;
  padding: 10px 22px;
  cursor: pointer;
  box-shadow: 4px 4px 0 #111;
  transition: transform 0.1s;
}
.btn:active { transform: translate(4px, 4px); box-shadow: 0 0 0 #111; }
```

#### Variants
```css
.btn-primary     { background: #e63946; color: #fff; border-radius: 9999px; }
.btn-secondary   { background: #3a86ff; color: #fff; border-radius: 8px; }
.btn-outline     { background: #fff;    color: #111; border-radius: 9999px; }
.btn-destructive { background: #111;    color: #ffd60a; border-radius: 8px; }
.btn-dashed      { background: #fff; color: #111; border-style: dashed; border-radius: 9999px; box-shadow: none; }
.btn-filled-dashed { background: #ffd60a; color: #111; border-style: dashed; border-radius: 8px; }
```

Note that `.btn-dashed` drops its shadow entirely (`box-shadow: none`) — dashed variants read as "lighter weight" and forgo the sticker-shadow treatment that solid variants use.

---

### 8.2 Form Inputs

```css
.input {
  font-family: var(--font-body);
  font-size: 13.5px;
  background: #fff;
  border: 2.5px solid #111;
  border-radius: 8px;
  padding: 11px 14px;
  width: 100%;
  outline: none;
  color: #111;
}
.input:focus { box-shadow: 3px 3px 0 #111; }
```

The focus state adds the signature hard shadow rather than changing border color — this is Memphis Pop's distinctive focus signal, consistent with its "everything gets a sticker shadow when active" philosophy.

---

### 8.3 Labels

```css
.field-label {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  color: #111;
  text-transform: uppercase;
  margin-bottom: 7px;
  display: block;
}
```

---

### 8.4 Card / Surface

```css
.mp-card {
  background: #fff;
  border: 3px solid #111;
  border-radius: 18px;
  box-shadow: 7px 7px 0 #111;
  padding: 26px 30px;
}
```

The header/hero card variant swaps its background to solid blue (`#3a86ff`) with white/outlined content inside — the only card in the system that isn't plain white, used to open the page with maximum visual impact.

---

### 8.5 Badge / Status Chip

```css
.badge {
  border-radius: 9999px;
  padding: 4px 12px;
  font-size: 11px;
  font-weight: 800;
  border: 2px solid #111;
  font-family: var(--font-display);
}
.badge-success { background: #d4f4de; color: #2a9d5c; }
.badge-warning { background: #ffedcc; color: #f4a300; }
.badge-error   { background: #fde0e2; color: #e63946; }
.badge-info    { background: #dbe9ff; color: #3a86ff; }
```

Every badge keeps the constant `2px solid #111` outline — only fill and text color vary per semantic state.

---

### 8.6 Checkbox, Radio & Switch

```css
.check-box {
  width: 22px; height: 22px;
  border: 2.5px solid #111;
  border-radius: 6px;
  background: #fff;
}
.custom-check:checked + .check-box { background: #ffd60a; }

.radio-box {
  width: 22px; height: 22px;
  border: 2.5px solid #111;
  border-radius: 50%;
  background: #fff;
}
.custom-radio:checked + .radio-box { background: #3a86ff; }

.switch-track {
  width: 46px; height: 26px;
  border: 2.5px solid #111;
  border-radius: 9999px;
  background: #fff;
  position: relative;
}
.switch-track.on { background: #e63946; }
.switch-thumb {
  width: 18px; height: 18px;
  background: #ffd60a;
  border: 2px solid #111;
  border-radius: 50%;
  position: absolute; top: 2px; left: 2px;
  transition: transform 150ms;
}
.switch-track.on .switch-thumb { transform: translateX(20px); }
```

---

### 8.7 Table

```css
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th {
  text-align: left;
  padding: 10px 14px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  color: #111;
  background: #ffd60a;
  border: 2px solid #111;
}
td { padding: 10px 14px; border: 2px solid #111; color: #111; }
```

Unlike most systems, Memphis Pop tables use a **full grid of borders** on every cell (not just row-bottom rules) — this matches the "everything is outlined" philosophy at the smallest scale.

---

### 8.8 Dropdown Panel

```css
.dropdown-menu {
  background: #fff;
  border: 3px solid #111;
  border-radius: 14px;
  box-shadow: 6px 6px 0 #111;
  margin-top: 10px;
  padding: 8px;
}
.dropdown-item {
  padding: 9px 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.dropdown-item:hover, .dropdown-item.picked { background: #ffd60a; }
```

---

## 9. Layout & Grid System

### 9.1 Container Widths

| Token | Value |
|-------|-------|
| `--container-sm` | 480px |
| `--container-md` | 640px |
| `--container-lg` | 800px |
| `--container-xl` | 1040px |
| `--container-2xl` | 1200px |

### 9.2 Standard Layouts

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

Card gaps need to be generous (`22px`+) so that each card's hard offset shadow has room to render without visually colliding with the next card's border.

---

## 10. Animation & Transition Tokens

### 10.1 Easing Curves

| Token | Value | When to Use |
|-------|-------|-------------|
| `--ease-standard` | `cubic-bezier(0.16,1,0.3,1)` | Dropdown/modal entry |

Button press itself uses a **linear, instant** transition (`transition: transform 0.1s`) with no easing curve at all — the sticker-press effect should feel snappy and mechanical, not smoothed.

### 10.2 Duration Scale

| Token | Value | Use |
|-------|-------|-----|
| `--duration-fast` | 100ms | Button press transform |
| `--duration-base` | 150ms | Switch thumb slide |

### 10.3 Signature Motion: The Sticker Press

```css
.btn { transition: transform 100ms; }
.btn:active { transform: translate(4px, 4px); box-shadow: 0 0 0 #111; }
```

This is the system's single most important interaction and must be applied to every clickable element with a hard shadow (buttons, and optionally cards used as clickable tiles).

---

## 11. Z-Index System

| Token | Value | Layer |
|-------|-------|-------|
| `--z-base` | 0 | Normal flow |
| `--z-raised` | 10 | Cards |
| `--z-dropdown` | 100 | Dropdown menus |
| `--z-modal` | 1000 | Modal overlay |
| `--z-toast` | 1100 | Toast notifications |

---

## 12. Breakpoints

```css
--bp-sm:  480px;
--bp-md:  768px;
--bp-lg:  1024px;
```

### Responsive Padding Scale

| Breakpoint | Page horizontal padding |
|------------|-------------------------|
| < 480px | 16px |
| 480px–1023px | 24px |
| 1024px+ | 24px |

---

## 13. Icon System

- **Size scale:** 14px, 16px, 18px
- **Default size:** 16px
- **Stroke weight:** 2px, stroke-based, bold and geometric to match the thick outlines elsewhere
- **Color:** `#111` by default; can sit on colored chip backgrounds
- **Library recommendation:** Phosphor Icons (Bold weight) or Heroicons (solid) — anything with enough visual weight to stand next to `3px` borders without looking thin

```css
.icon { width: 16px; height: 16px; stroke: #111; stroke-width: 2; fill: none; }
```

---

## 14. State Definitions

### 14.1 Input States

| State | Border | Shadow |
|-------|--------|--------|
| Default | `2.5px solid #111` | none |
| Focus | `2.5px solid #111` | `3px 3px 0 #111` |
| Disabled | `2.5px solid #111` at opacity 0.5 | none |

### 14.2 Button States

| State | Shadow | Transform |
|-------|--------|-----------|
| Default | `4px 4px 0 #111` | none |
| Hover | `4px 4px 0 #111` (unchanged) | none |
| Active/Pressed | `0 0 0 #111` | `translate(4px,4px)` |
| Disabled | `4px 4px 0 #111` at opacity 0.5 | none |

### 14.3 Switch States

```css
.switch-track { background: #fff; }
.switch-track.on { background: #e63946; }
```
Thumb is always yellow (`#ffd60a`) regardless of on/off state — only the track color changes.

---

*End of Design System — Memphis Pop v1.0*