🎨 UI/UX: Layered Content Architecture - Sources, Stacking, and Visual Hierarchy

# Layered Content Architecture

A comprehensive UI/UX design for how sources layer onto topics, the visual hierarchy between aristocratic and plebeian content, and the progression from sparse to rich experiences.

---

## 🏗️ The Layering Philosophy

Content doesn't arrive all at once. We **build up** topics layer by layer, source by source. Each layer adds richness while maintaining the visual hierarchy.

A topic starts sparse (maybe just a Bierce definition) and grows richer as we pull from more sources. The UI must:
1. Look complete and authoritative at ANY stage
2. Show the hierarchy clearly
3. Invite contribution to empty layers
4. Handle graceful degradation

---

## 📚 Source Priority & Seed Order

### Foundation Sources (Seed Immediately)

| Priority | Source | Type | Data | Status |
|----------|--------|------|------|--------|
| 1 | **Ambrose Bierce's Devil's Dictionary** | 👑 Aristocracy | ~1000 satirical definitions | ✅ Have seed |
| 2 | **Samuel Johnson's Dictionary** | 👑 Aristocracy | Historical definitions | ✅ Have service |
| 3 | **The Verge New Devil's Dictionary** | 📚 Middle | Tech satire definitions | ✅ Have seed |

### Quote & Poetry Sources (Phase 2)

| Priority | Source | Type | Data | Status |
|----------|--------|------|------|--------|
| 4 | **WikiQuotes** | 📚 Middle | Famous quotes about topics | ✅ Have service |
| 5 | **PoetryDB** | 📚 Middle | Poems containing words | ✅ Have service |
| 6 | **BrainyQuotes** | 📚 Middle | Additional quotes | ✅ Have service |

### Plebeian Sources (Phase 3)

| Priority | Source | Type | Data | Status |
|----------|--------|------|------|--------|
| 7 | **Urban Dictionary** | 📱 Plebs | Slang definitions | ✅ Have service |

### Media Sources (Phase 4)

| Priority | Source | Type | Data | Status |
|----------|--------|------|------|--------|
| 8 | **Giphy** | 📱 Plebs | GIFs | ✅ Have service |
| 9 | **Unsplash** | 📚 Middle | Photos | ✅ Have service |
| 10 | **TMDB** | 📚 Middle | Movies, TV | ✅ Have service |
| 11 | **Artsy** | 📚 Middle | Artwork | ✅ Have service |

### Enrichment Sources (Background)

| Priority | Source | Type | Data | Status |
|----------|--------|------|------|--------|
| 12 | **ConceptNet** | 🔗 Meta | Semantic relationships | ✅ Have service |
| 13 | **Datamuse** | 🔗 Meta | Word associations | ✅ Have service |
| 14 | **Knowledge Graph** | 🔗 Meta | People enrichment | ✅ Have service |
| 15 | **OpenLibrary** | 🔗 Meta | Books, authors | ✅ Have service |

### Social Sources (Phase 5 - Future)

| Priority | Source | Type | Data | Status |
|----------|--------|------|------|--------|
| 16 | **Twitter/X** | 📱 Plebs | Trending mentions | ❌ Need API |
| 17 | **Reddit** | 📱 Plebs | Discussions | ❌ Need API |
| 18 | **Imgflip/Tenor** | 📱 Plebs | Memes | ❌ Need API |

### AI Sources (Phase 6 - Future)

| Priority | Source | Type | Data | Status |
|----------|--------|------|------|--------|
| 19 | **AI Dead Authors** | 🤖 Synthetic Aristocracy | "What would Bierce say..." | ❌ Need integration |

---

## 🎨 Visual Hierarchy Design

### The Three Tiers

```
┌─────────────────────────────────────────────────────────────────┐
│  👑 ARISTOCRACY                                                 │
│  ═══════════════                                                │
│  • Gilded borders (gold/brass tones)                           │
│  • Serif fonts (Georgia, Playfair Display)                     │
│  • Aged paper texture/background                               │
│  • Heavy drop shadows (elevated)                               │
│  • Maximum visual weight                                        │
│  • Position: TOP of page                                        │
│                                                                 │
│  Sources: Bierce, Johnson, Classical philosophers, AI Authors   │
└─────────────────────────────────────────────────────────────────┘

┌─────────────────────────────────────────────────────────────────┐
│  📚 MIDDLE CLASS                                                │
│  ───────────────                                                │
│  • Clean borders (gray/neutral)                                │
│  • Sans-serif fonts (Inter, System UI)                         │
│  • White/light backgrounds                                     │
│  • Subtle shadows                                              │
│  • Professional, "trying hard"                                 │
│  • Position: MIDDLE of page                                    │
│                                                                 │
│  Sources: Wikipedia, WikiQuotes, The Verge, Unsplash, TMDB     │
└─────────────────────────────────────────────────────────────────┘

┌─────────────────────────────────────────────────────────────────┐
│  📱 THE PLEBS                                                   │
│  ───────────                                                    │
│  • Minimal/no borders                                          │
│  • UI fonts, emoji-heavy                                       │
│  • Social media card aesthetic                                 │
│  • Flat, no shadows                                            │
│  • Chaotic, feed-like layout                                   │
│  • Position: BOTTOM of page                                    │
│                                                                 │
│  Sources: Urban Dictionary, Twitter, Reddit, Memes, Giphy      │
└─────────────────────────────────────────────────────────────────┘
```

---

## 📱 Topic Page Layout

### Full Layout (All Layers Present)

```
┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
┃  TRUTH                                                    noun  ┃
┃  /truːθ/                                                        ┃
┃  ────────────────────────────────────────────────────────────   ┃
┃  Related: honesty • reality • fact • sincerity                  ┃
┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛

┌──────────────────────────────────────────────────────────────────┐
│                                                                  │
│  👑 THE ARISTOCRACY                                              │
│  ═══════════════════                                             │
│                                                                  │
│  ╔══════════════════════════════════════════════════════════╗   │
│  ║                                                          ║   │
│  ║  "An ingenious compound of desirability and appearance." ║   │
│  ║                                                          ║   │
│  ║                          — AMBROSE BIERCE                ║   │
│  ║                    The Devil's Dictionary, 1911          ║   │
│  ║                                                          ║   │
│  ╚══════════════════════════════════════════════════════════╝   │
│                                                                  │
│  ┌────────────────────────────────────────────────────────────┐ │
│  │                                                            │ │
│  │  "Conformity of notion to reality; agreement of the       │ │
│  │   thought with the thing spoken about."                   │ │
│  │                                                            │ │
│  │                          — SAMUEL JOHNSON                  │ │
│  │           A Dictionary of the English Language, 1755      │ │
│  │                                                            │ │
│  └────────────────────────────────────────────────────────────┘ │
│                                                                  │
└──────────────────────────────────────────────────────────────────┘

┌──────────────────────────────────────────────────────────────────┐
│                                                                  │
│  📚 THE SCHOLARLY                                                │
│  ─────────────────                                               │
│                                                                  │
│  ┌─────────────────────────────────────────────────────────────┐│
│  │ Wikipedia                                                   ││
│  │                                                             ││
│  │ Truth is most often used to mean being in accord with      ││
│  │ fact or reality, or fidelity to an original or standard... ││
│  │                                                             ││
│  │ [Read more →]                                               ││
│  └─────────────────────────────────────────────────────────────┘│
│                                                                  │
│  Etymology: Old English trēowþ, from trēowe "faithful"          │
│                                                                  │
└──────────────────────────────────────────────────────────────────┘

┌──────────────────────────────────────────────────────────────────┐
│                                                                  │
│  💬 WHAT THEY SAID                                               │
│  ─────────────────                                               │
│                                                                  │
│  "The truth will set you free, but first it will piss you off."│
│                                              — Gloria Steinem   │
│                                                                  │
│  "There are no facts, only interpretations."                    │
│                                          — Friedrich Nietzsche  │
│                                                                  │
│  "In a time of deceit, telling the truth is a revolutionary    │
│   act."                                                         │
│                                               — George Orwell   │
│                                                                  │
│  ┌──────────────────────────────────────────────────────────┐   │
│  │ 📜 From Poetry                                            │   │
│  │                                                           │   │
│  │ "Beauty is truth, truth beauty,—that is all              │   │
│  │  Ye know on earth, and all ye need to know."             │   │
│  │                                         — John Keats     │   │
│  └──────────────────────────────────────────────────────────┘   │
│                                                                  │
│  [+ 47 more quotes]                                             │
│                                                                  │
└──────────────────────────────────────────────────────────────────┘

┌──────────────────────────────────────────────────────────────────┐
│                                                                  │
│  🎬 HOW CULTURE SEES IT                                         │
│  ───────────────────────                                         │
│                                                                  │
│  ┌────────┐ ┌────────┐ ┌────────┐ ┌────────┐                   │
│  │ 🎬     │ │ 🎬     │ │ 📷     │ │ 🖼️     │                   │
│  │        │ │        │ │        │ │        │                   │
│  │ A Few  │ │ The    │ │ Unspl- │ │ Artsy  │                   │
│  │ Good   │ │ Matrix │ │ ash    │ │ Work   │                   │
│  │ Men    │ │        │ │ Photo  │ │        │                   │
│  └────────┘ └────────┘ └────────┘ └────────┘                   │
│                                                                  │
│  [View all 23 media →]                                          │
│                                                                  │
└──────────────────────────────────────────────────────────────────┘

┌──────────────────────────────────────────────────────────────────┐
│                                                                  │
│  📱 THE PLEBS SPEAK                                              │
│  ──────────────────                                              │
│                                                                  │
│  ┌───────────────────────────────────────────────────────────┐  │
│  │ Urban Dictionary                              👍 2.3k 👎 234│  │
│  │                                                           │  │
│  │ truth: when ur girl asks where u were and u actually     │  │
│  │ tell her lmaooo                                          │  │
│  │                                                           │  │
│  │ "I told her the truth bro, I was at Dave's playing 2K"  │  │
│  └───────────────────────────────────────────────────────────┘  │
│                                                                  │
│  ┌───────────────────────────────────────────────────────────┐  │
│  │ 𝕏 @philosophymemes · 2h                                   │  │
│  │                                                           │  │
│  │ "my truth" mfs when I introduce them to "the truth" 💀   │  │
│  │                                                           │  │
│  │ 💬 234   🔁 1.2k   ❤️ 5.4k                                │  │
│  └───────────────────────────────────────────────────────────┘  │
│                                                                  │
│  [GIF: "You can't handle the truth!"]                           │
│                                                                  │
│  ┌───────────────────────────────────────────────────────────┐  │
│  │ 🔥 r/memes · 15.2k upvotes                                │  │
│  │ [DISTRACTED_BOYFRIEND_MEME.jpg]                          │  │
│  │ "Me / My Truth / The Actual Truth"                       │  │
│  └───────────────────────────────────────────────────────────┘  │
│                                                                  │
└──────────────────────────────────────────────────────────────────┘

┌──────────────────────────────────────────────────────────────────┐
│                                                                  │
│  🤖 THE AI SPEAKS                                                │
│  ────────────────                                                │
│  As dead authors would define it today                          │
│                                                                  │
│  ╔══════════════════════════════════════════════════════════╗   │
│  ║                                                          ║   │
│  ║  "TRUTH in the digital age is whatever gets the most    ║   │
│  ║   retweets before the correction arrives."              ║   │
│  ║                                                          ║   │
│  ║                          — AI as AMBROSE BIERCE          ║   │
│  ║                    [Generated, not historical]           ║   │
│  ║                                                          ║   │
│  ╚══════════════════════════════════════════════════════════╝   │
│                                                                  │
│  [Generate another] [Try as Oscar Wilde] [Try as Mark Twain]    │
│                                                                  │
└──────────────────────────────────────────────────────────────────┘
```

---

## 🌱 Progressive Disclosure States

### State 1: Foundation Only (Just Bierce)

```
┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
┃  TRUTH                                                    noun  ┃
┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛

┌──────────────────────────────────────────────────────────────────┐
│  👑 THE ARISTOCRACY                                              │
│                                                                  │
│  ╔══════════════════════════════════════════════════════════╗   │
│  ║  "An ingenious compound of desirability and appearance." ║   │
│  ║                          — AMBROSE BIERCE, 1911          ║   │
│  ╚══════════════════════════════════════════════════════════╝   │
│                                                                  │
└──────────────────────────────────────────────────────────────────┘

┌──────────────────────────────────────────────────────────────────┐
│  ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░  │
│  📚 THE SCHOLARLY                           [Awaiting enrichment]│
│  ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░  │
└──────────────────────────────────────────────────────────────────┘

┌──────────────────────────────────────────────────────────────────┐
│  ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░  │
│  💬 WHAT THEY SAID                          [Add the first quote]│
│  ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░  │
└──────────────────────────────────────────────────────────────────┘

Topic Completeness: ████░░░░░░ 1 of 6 layers
```

### State 2: Foundation + Quotes

```
┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
┃  TRUTH                                                    noun  ┃
┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛

┌──────────────────────────────────────────────────────────────────┐
│  👑 THE ARISTOCRACY                                              │
│  [Bierce definition]                                             │
│  [Johnson definition]                                            │
└──────────────────────────────────────────────────────────────────┘

┌──────────────────────────────────────────────────────────────────┐
│  💬 WHAT THEY SAID                                               │
│  [3 quotes from WikiQuotes]                                      │
│  [1 poem from PoetryDB]                                          │
└──────────────────────────────────────────────────────────────────┘

┌──────────────────────────────────────────────────────────────────┐
│  ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░  │
│  🎬 HOW CULTURE SEES IT                    [Awaiting enrichment] │
│  ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░  │
└──────────────────────────────────────────────────────────────────┘

Topic Completeness: ██████░░░░ 3 of 6 layers
```

---

## 🔍 Browse & Discovery UI

### Topic Index (Filtered Views)

```
┌─────────────────────────────────────────────────────────────────┐
│  BROWSE THE DICTIONARY                                          │
│  ───────────────────────────────────────────────────────────── │
│                                                                 │
│  Filter by Layer:                                               │
│  [👑 Aristocratic] [📚 Scholarly] [📱 Plebeian] [🤖 AI]        │
│                                                                 │
│  Sort by:                                                       │
│  [A-Z] [Most Layered] [Recently Enriched] [Purest]             │
│                                                                 │
│  ───────────────────────────────────────────────────────────── │
│                                                                 │
│  ┌─────────────────────────────────────────────────────────┐   │
│  │ TRUTH                                                    │   │
│  │ "An ingenious compound of desirability and appearance." │   │
│  │ ████████░░ 5/6 layers • 47 quotes • 23 media            │   │
│  └─────────────────────────────────────────────────────────┘   │
│                                                                 │
│  ┌─────────────────────────────────────────────────────────┐   │
│  │ LOVE                                                     │   │
│  │ "A temporary insanity curable by marriage."             │   │
│  │ ██████████ 6/6 layers • 102 quotes • 45 media           │   │
│  └─────────────────────────────────────────────────────────┘   │
│                                                                 │
│  ┌─────────────────────────────────────────────────────────┐   │
│  │ CRYPTOCURRENCY                                           │   │
│  │ [No aristocratic definition - only plebeian]            │   │
│  │ ░░░░░░░░██ 1/6 layers • 3 quotes • 12 media             │   │
│  └─────────────────────────────────────────────────────────┘   │
│                                                                 │
└─────────────────────────────────────────────────────────────────┘
```

### Enrichment Dashboard (Admin)

```
┌─────────────────────────────────────────────────────────────────┐
│  📊 ENRICHMENT DASHBOARD                                        │
│  ───────────────────────────────────────────────────────────── │
│                                                                 │
│  SOURCES STATUS                                                 │
│                                                                 │
│  ✅ Ambrose Bierce      986 topics    Last run: Jan 3, 2026    │
│  ✅ Samuel Johnson      423 topics    Last run: Jan 3, 2026    │
│  ✅ WikiQuotes          756 topics    Last run: Jan 4, 2026    │
│  ⏳ Urban Dictionary    Running...    324/986 complete         │
│  ⬚ Giphy               Not started   [Run Now]                 │
│  ⬚ Twitter/X           Not configured [Configure]              │
│  ⬚ AI Authors          Not configured [Configure]              │
│                                                                 │
│  ───────────────────────────────────────────────────────────── │
│                                                                 │
│  QUICK ACTIONS                                                  │
│                                                                 │
│  [Enrich All from WikiQuotes]                                   │
│  [Enrich All from Urban Dictionary]                             │
│  [Fetch GIFs for All Topics]                                    │
│  [Generate AI Definitions for Modern Terms]                     │
│                                                                 │
└─────────────────────────────────────────────────────────────────┘
```

---

## 🚀 Implementation Phases

### Phase 1: Foundation (MVP)
**Goal**: Aristocratic core with basic hierarchy

- [ ] Seed Ambrose Bierce definitions from Gutenberg
- [ ] Seed Samuel Johnson definitions
- [ ] Create gilded card component for aristocratic content
- [ ] Create basic topic page with single layer
- [ ] Topic index with A-Z browse

**UI**: Golden definitions on aged paper texture

---

### Phase 2: Add Quotes Layer
**Goal**: "What They Said" section

- [ ] Integrate WikiQuotes service
- [ ] Integrate PoetryDB service
- [ ] Create quote card component
- [ ] Add quotes section to topic page
- [ ] Background job to enrich all topics

**UI**: Quote carousel below aristocracy

---

### Phase 3: Add Plebeian Layer
**Goal**: The contrast becomes visible

- [ ] Integrate Urban Dictionary
- [ ] Create raw/social card component
- [ ] Add "The Plebs Speak" section
- [ ] Visual hierarchy now apparent

**UI**: Chaotic feed at bottom, stark contrast with gilded top

---

### Phase 4: Add Media Layer
**Goal**: Visual definitions

- [ ] Integrate Giphy for GIFs
- [ ] Integrate Unsplash for photos
- [ ] Integrate TMDB for movies
- [ ] Create media gallery component
- [ ] "How Culture Sees It" section

**UI**: Grid of media cards in middle section

---

### Phase 5: Add Social Layer
**Goal**: Live content

- [ ] Twitter/X API integration
- [ ] Reddit API integration
- [ ] Meme API integration (Imgflip/Tenor)
- [ ] Real-time feed component
- [ ] "Trending Now" section

**UI**: Social media feed aesthetic at bottom

---

### Phase 6: Add AI Layer
**Goal**: Synthetic aristocracy

- [ ] OpenAI/Anthropic integration
- [ ] Dead author persona prompts
- [ ] AI definition card component
- [ ] "What Would Bierce Say?" section
- [ ] Clear labeling as AI-generated

**UI**: Gilded frames but with 🤖 indicator

---

## 🎨 Component Library Needed

### Cards
- `AristocraticDefinitionCard` - gilded, serif, elevated
- `ScholarlyCard` - clean, professional
- `QuoteCard` - attributed, with author link
- `MediaCard` - thumbnail with type indicator
- `PlebCard` - social media aesthetic
- `AICard` - aristocratic + robot indicator

### Sections
- `LayerSection` - collapsible, with empty state
- `EmptyLayerPlaceholder` - ghosted invitation to contribute

### Meta
- `CompletenessBar` - visual progress of layers
- `SourceBadge` - indicates where content came from

---

## 💡 Open Questions

1. **Empty States**: How prominent should "awaiting enrichment" placeholders be?

2. **User Contributions**: Can users submit definitions? What tier are they?

3. **Voting**: Does voting affect position within a tier? Or just within source?

4. **Mobile**: How does the hierarchy work on small screens? Accordion? Tabs?

5. **Speed**: Do we show placeholders while loading, or wait for full data?

6. **Caching**: How fresh should social content be? Real-time or hourly?

---

## 🏷️ Labels
`ui-ux` `design` `architecture` `progressive-disclosure` `hierarchy`

Priority	Source	Type	Data	Status
1	Ambrose Bierce's Devil's Dictionary	👑 Aristocracy	~1000 satirical definitions	✅ Have seed
2	Samuel Johnson's Dictionary	👑 Aristocracy	Historical definitions	✅ Have service
3	The Verge New Devil's Dictionary	📚 Middle	Tech satire definitions	✅ Have seed

Priority	Source	Type	Data	Status
4	WikiQuotes	📚 Middle	Famous quotes about topics	✅ Have service
5	PoetryDB	📚 Middle	Poems containing words	✅ Have service
6	BrainyQuotes	📚 Middle	Additional quotes	✅ Have service

Priority	Source	Type	Data	Status
8	Giphy	📱 Plebs	GIFs	✅ Have service
9	Unsplash	📚 Middle	Photos	✅ Have service
10	TMDB	📚 Middle	Movies, TV	✅ Have service
11	Artsy	📚 Middle	Artwork	✅ Have service

Priority	Source	Type	Data	Status
12	ConceptNet	🔗 Meta	Semantic relationships	✅ Have service
13	Datamuse	🔗 Meta	Word associations	✅ Have service
14	Knowledge Graph	🔗 Meta	People enrichment	✅ Have service
15	OpenLibrary	🔗 Meta	Books, authors	✅ Have service

Priority	Source	Type	Data	Status
16	Twitter/X	📱 Plebs	Trending mentions	❌ Need API
17	Reddit	📱 Plebs	Discussions	❌ Need API
18	Imgflip/Tenor	📱 Plebs	Memes	❌ Need API

Uh oh!

🎨 UI/UX: Layered Content Architecture - Sources, Stacking, and Visual Hierarchy #47

Description

Layered Content Architecture

🏗️ The Layering Philosophy

📚 Source Priority & Seed Order

Foundation Sources (Seed Immediately)

Quote & Poetry Sources (Phase 2)

Plebeian Sources (Phase 3)

Media Sources (Phase 4)

Enrichment Sources (Background)

Social Sources (Phase 5 - Future)

AI Sources (Phase 6 - Future)

🎨 Visual Hierarchy Design

The Three Tiers

📱 Topic Page Layout

Full Layout (All Layers Present)

🌱 Progressive Disclosure States

State 1: Foundation Only (Just Bierce)

State 2: Foundation + Quotes

🔍 Browse & Discovery UI

Topic Index (Filtered Views)

Enrichment Dashboard (Admin)

🚀 Implementation Phases

Phase 1: Foundation (MVP)

Phase 2: Add Quotes Layer

Phase 3: Add Plebeian Layer

Phase 4: Add Media Layer

Phase 5: Add Social Layer

Phase 6: Add AI Layer

🎨 Component Library Needed

Cards

Sections

Meta

💡 Open Questions

🏷️ Labels

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions