UI/UX: Design System, Pages & Wireframes
Depends on: #48 (MVP: Devil's Dictionary Phoenix Rebuild)
Design Direction
Template Decision: Custom Build with Oatmeal Foundation
After evaluating Tailwind Plus templates:
| Template |
Fit |
Verdict |
| Oatmeal |
Calm, literary tone perfect for a dictionary |
✅ Primary base |
| Radiant |
Too corporate/SaaS |
❌ |
| Salient |
Single landing, too limited |
❌ |
Decision: Build custom Phoenix/LiveView components on Oatmeal's foundation, extending with tier-specific design systems for Aristocracy, Middle Class, and Plebs.
Why Oatmeal works:
- Literary, calm aesthetic matches dictionary gravitas
- Typography-forward design perfect for definitions
- Warm neutrals complement our tier system colors
- Clean enough to let tier styling shine
Design Principles
"The Hierarchy Is Visible"
This is not a neutral dictionary. We make the stratification explicit:
- ✅ Aristocratic content gets gilded frames and aged paper texture
- ✅ Middle class content gets clean, professional treatment
- ✅ Plebeian content gets raw, social-media aesthetic
- ✅ The visual hierarchy IS the commentary
- ✅ Dead authors visually outrank living ones
Design Values
- Hierarchy - Position and styling indicate authority tier
- Reverence - Dead intellectuals treated with visual gravitas
- Contrast - The gap between tiers should be jarring
- Readability - Definitions must be scannable and memorable
- Completeness - Show what's missing as invitation to grow
Color Palette
Tier-Specific Color Systems
┌─────────────────────────────────────────────────────────────────┐
│ 👑 ARISTOCRACY - Gilded Authority │
├─────────────────────────────────────────────────────────────────┤
│ Primary: #b8860b (Dark Goldenrod) - Frames, accents │
│ Secondary: #8b7355 (Antique Brass) - Text highlights │
│ Background: #faf8f5 → #f5f0e0 - Aged paper gradient │
│ Border: #d4a574 (Tan) - Double borders │
│ Text: #3d3d3d (Charcoal) - Serif, weighty │
└─────────────────────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────────────────────┐
│ 📚 MIDDLE CLASS - Clean Aspiration │
├─────────────────────────────────────────────────────────────────┤
│ Primary: #64748b (Slate) - Headers, accents │
│ Secondary: #94a3b8 (Slate 400) - Borders │
│ Background: #ffffff - Clean white │
│ Border: #e2e8f0 (Slate 200) - Subtle single border │
│ Text: #334155 (Slate 700) - Sans-serif, modern │
└─────────────────────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────────────────────┐
│ 📱 THE PLEBS - Raw Democracy │
├─────────────────────────────────────────────────────────────────┤
│ Primary: #6366f1 (Indigo) - Links, interactions │
│ Secondary: #a855f7 (Purple) - Highlights │
│ Background: #f8fafc (Slate 50) - Social feed gray │
│ Border: none - Borderless cards │
│ Text: #475569 (Slate 600) - Sans-serif, casual │
│ Accents: Emoji-heavy, upvote/downvote colors │
└─────────────────────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────────────────────┐
│ 🌐 GLOBAL - Oatmeal Base │
├─────────────────────────────────────────────────────────────────┤
│ Page BG: #fafaf9 (Stone 50) - Warm neutral │
│ Header: #1c1917 (Stone 900) - Deep, authoritative │
│ Links: #a16207 (Amber 700) - Warm, literary │
│ Success: #059669 (Emerald 600) - Confirmations │
│ Muted: #78716c (Stone 500) - Secondary text │
└─────────────────────────────────────────────────────────────────┘
Tailwind Config
// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
aristocracy: {
gold: '#b8860b',
brass: '#8b7355',
paper: '#faf8f5',
aged: '#f5f0e0',
border: '#d4a574',
},
middle: {
// Use default slate scale
},
plebs: {
feed: '#f8fafc',
// Use default indigo/purple scales
}
},
fontFamily: {
aristocracy: ['Playfair Display', 'Georgia', 'serif'],
body: ['Inter', 'system-ui', 'sans-serif'],
mono: ['JetBrains Mono', 'monospace'],
},
backgroundImage: {
'aged-paper': 'linear-gradient(to bottom, #faf8f5, #f5f0e0)',
}
}
}
}
Typography
👑 ARISTOCRACY (The Dead Speak)
═══════════════════════════════════════════════════════════════
Font: Playfair Display (600-700) or Georgia
Scale: lg → 2xl for definitions
Style: Italic for attribution, small-caps for names
Spacing: Generous, breathable
Treatment: "Quoted definitions," — AUTHOR NAME, Year
📚 MIDDLE CLASS (The Institutional)
───────────────────────────────────────────────────────────────
Font: Inter (400-500)
Scale: base → lg
Style: Clean, professional, Wikipedia-esque
Treatment: Standard definition. — Source
📱 THE PLEBS (The Mob Speaks)
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Font: Inter or system sans (400)
Scale: sm → base
Style: Casual, emoji-friendly, social card aesthetic
Treatment: definition text lmaooo 👍 2.3k 👎 234
Page Hierarchy & Phases
Phase 1: MVP Launch
┌─────────────────────────────────────────────┐
│ 1. TOPIC DETAIL PAGE │ ← Critical path
│ /topics/:slug │
│ • Tiered definitions display │
│ • The hierarchy made visible │
├─────────────────────────────────────────────┤
│ 2. BROWSE A-Z │ ← Discovery
│ /browse or /browse/:letter │
│ • Classic dictionary navigation │
│ • Completeness indicators │
├─────────────────────────────────────────────┤
│ 3. SEARCH │ ← Access
│ /search?q=... │
│ • Real-time LiveView results │
│ • Type-ahead suggestions │
└─────────────────────────────────────────────┘
Phase 2: Content Depth
┌─────────────────────────────────────────────┐
│ 4. LANDING/HOME PAGE │
│ / │
│ • Featured definitions │
│ • Hierarchy explanation │
├─────────────────────────────────────────────┤
│ 5. PERSON/AUTHOR PAGE │
│ /people/:slug │
│ • Author bio and portrait │
│ • All their definitions │
├─────────────────────────────────────────────┤
│ 6. ABOUT PAGE │
│ /about │
│ • Philosophy explanation │
│ • Source hierarchy rationale │
└─────────────────────────────────────────────┘
Phase 3: Expansion
┌─────────────────────────────────────────────┐
│ 7. BROWSE BY TYPE │
│ /concepts, /people, /things, etc. │
│ • Filtered topic lists │
├─────────────────────────────────────────────┤
│ 8. EXPRESSIONS PAGE │
│ /topics/:slug/quotes │
│ • Quotes, lyrics, poems about topic │
├─────────────────────────────────────────────┤
│ 9. ADMIN DASHBOARD │
│ /admin │
│ • Seed and manage content │
│ • View completeness metrics │
└─────────────────────────────────────────────┘
Wireframes
1. Topic Detail Page (Desktop)
┌──────────────────────────────────────────────────────────────────────────┐
│ [Logo: Devil's Dictionary] [Search 🔍] [Browse A-Z] │
├──────────────────────────────────────────────────────────────────────────┤
│ │
│ ┌────────────────────────────────────────────────────────────────────┐ │
│ │ TRUTH noun │ │
│ │ /truːθ/ │ │
│ │ ────────────────────────────────────────────────────────────────│ │
│ │ Related: honesty • reality • fact • sincerity • verity │ │
│ └────────────────────────────────────────────────────────────────────┘ │
│ │
│ Topic Completeness: ██████░░░░ 3 of 5 layers │
│ │
├──────────────────────────────────────────────────────────────────────────┤
│ │
│ ┌────────────────────────────────────────────────────────────────────┐ │
│ │ ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ │
│ │ │ │
│ │ 👑 THE ARISTOCRACY │ │
│ │ ═══════════════════ │ │
│ │ │ │
│ │ ╔════════════════════════════════════════════════════════════╗ │ │
│ │ ║ ║ │ │
│ │ ║ "An ingenious compound of desirability and appearance." ║ │ │
│ │ ║ ║ │ │
│ │ ║ — AMBROSE BIERCE ║ │ │
│ │ ║ The Devil's Dictionary, 1911 ║ │ │
│ │ ║ ║ │ │
│ │ ╚════════════════════════════════════════════════════════════╝ │ │
│ │ │ │
│ │ ┌────────────────────────────────────────────────────────────┐ │ │
│ │ │ │ │ │
│ │ │ "Conformity of notion to reality; that which is in │ │ │
│ │ │ accord with fact or agreement." │ │ │
│ │ │ │ │ │
│ │ │ — SAMUEL JOHNSON │ │ │
│ │ │ A Dictionary of the English Language, 1755 │ │ │
│ │ │ │ │ │
│ │ └────────────────────────────────────────────────────────────┘ │ │
│ │ │ │
│ │ ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ │
│ └────────────────────────────────────────────────────────────────────┘ │
│ │
├──────────────────────────────────────────────────────────────────────────┤
│ │
│ ┌────────────────────────────────────────────────────────────────────┐ │
│ │ │ │
│ │ 📚 THE SCHOLARLY │ │
│ │ ───────────────── │ │
│ │ │ │
│ │ The quality or state of being true. Most often used to mean │ │
│ │ being in accord with fact or reality, or fidelity to an │ │
│ │ original or standard. │ │
│ │ │ │
│ │ — Wikipedia [Read more →]│ │
│ │ │ │
│ └────────────────────────────────────────────────────────────────────┘ │
│ │
├──────────────────────────────────────────────────────────────────────────┤
│ │
│ ┌────────────────────────────────────────────────────────────────────┐ │
│ │ │ │
│ │ 📱 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" │ │ │
│ │ └──────────────────────────────────────────────────────────────┘ │ │
│ │ │ │
│ │ ┌──────────────────────────────────────────────────────────────┐ │ │
│ │ │ Urban Dictionary 👍 892 👎 45 │ │ │
│ │ │ │ │ │
│ │ │ truth: something that doesnt exist on the internet │ │ │
│ │ └──────────────────────────────────────────────────────────────┘ │ │
│ │ │ │
│ └────────────────────────────────────────────────────────────────────┘ │
│ │
├──────────────────────────────────────────────────────────────────────────┤
│ │
│ 💬 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 │
│ │
│ "Beauty is truth, truth beauty,—that is all │
│ Ye know on earth, and all ye need to know." │
│ — John Keats │
│ │
│ [+ 47 more quotes →] │
│ │
├──────────────────────────────────────────────────────────────────────────┤
│ │
│ ← Previous: TRUMP Next: TRUTHFUL → │
│ │
├──────────────────────────────────────────────────────────────────────────┤
│ [Logo] About | Browse | Authors | Philosophy │
│ © 2026 Devil's Dictionary. The dead know better. │
└──────────────────────────────────────────────────────────────────────────┘
1b. Topic Detail Page (Mobile)
┌────────────────────────────┐
│ [≡] [Devil's D...] [🔍] │
├────────────────────────────┤
│ │
│ TRUTH noun │
│ /truːθ/ │
│ │
│ Related: honesty • │
│ reality • fact │
│ │
│ ████████░░ 3/5 layers │
│ │
├────────────────────────────┤
│ │
│ 👑 THE ARISTOCRACY │
│ ═══════════════════ │
│ │
│ ╔════════════════════════╗ │
│ ║ ║ │
│ ║ "An ingenious compound ║ │
│ ║ of desirability and ║ │
│ ║ appearance." ║ │
│ ║ ║ │
│ ║ — AMBROSE BIERCE ║ │
│ ║ 1911 ║ │
│ ║ ║ │
│ ╚════════════════════════╝ │
│ │
│ ┌────────────────────────┐ │
│ │ "Conformity of notion │ │
│ │ to reality..." │ │
│ │ │ │
│ │ — SAMUEL JOHNSON │ │
│ │ 1755 │ │
│ └────────────────────────┘ │
│ │
├────────────────────────────┤
│ │
│ 📚 THE SCHOLARLY │
│ ───────────────── │
│ │
│ The quality or state of │
│ being true... │
│ │
│ — Wikipedia [Read more →]│
│ │
├────────────────────────────┤
│ │
│ 📱 THE PLEBS SPEAK │
│ ────────────────── │
│ │
│ ┌────────────────────────┐ │
│ │ Urban Dict. 👍2.3k 👎234│ │
│ │ │ │
│ │ truth: when ur girl │ │
│ │ asks where u were and │ │
│ │ u actually tell her │ │
│ │ lmaooo │ │
│ └────────────────────────┘ │
│ │
├────────────────────────────┤
│ │
│ 💬 WHAT THEY SAID │
│ │
│ "The truth will set you │
│ free, but first it will │
│ piss you off." │
│ — Gloria Steinem │
│ │
│ [+ 47 more quotes →] │
│ │
├────────────────────────────┤
│ ← TRUMP TRUTHFUL → │
├────────────────────────────┤
│ About | Browse | Authors │
│ © 2026 Devil's Dictionary │
└────────────────────────────┘
2. Browse A-Z Page
┌──────────────────────────────────────────────────────────────────────────┐
│ [Logo: Devil's Dictionary] [Search 🔍] [Browse A-Z] │
├──────────────────────────────────────────────────────────────────────────┤
│ │
│ BROWSE THE DICTIONARY │
│ │
│ ┌────────────────────────────────────────────────────────────────────┐ │
│ │ A B C D E F G H I J K L M │ │
│ │ N O P Q R S [T] U V W X Y Z │ │
│ └────────────────────────────────────────────────────────────────────┘ │
│ │
│ T — 127 TOPICS │
│ ═══════════════════════════════════════════════════════════════════════│
│ │
│ ┌────────────────────────────────────────────────────────────────────┐ │
│ │ TACT, n. ██████████ 5/5 │ │
│ │ "The ability to describe others as they see themselves." │ │
│ │ — Ambrose Bierce │ │
│ └────────────────────────────────────────────────────────────────────┘ │
│ │
│ ┌────────────────────────────────────────────────────────────────────┐ │
│ │ TALK, v.i. ████████░░ 4/5 │ │
│ │ "To commit an indiscretion without temptation, from an impulse │ │
│ │ without purpose." │ │
│ │ — Ambrose Bierce │ │
│ └────────────────────────────────────────────────────────────────────┘ │
│ │
│ ┌────────────────────────────────────────────────────────────────────┐ │
│ │ TECHNOLOGY, n. ██░░░░░░░░ 1/5 │ │
│ │ [No aristocratic definition — only plebeian content] │ │
│ │ [View anyway →] │ │
│ └────────────────────────────────────────────────────────────────────┘ │
│ │
│ ┌────────────────────────────────────────────────────────────────────┐ │
│ │ TRUTH, n. ██████░░░░ 3/5 │ │
│ │ "An ingenious compound of desirability and appearance." │ │
│ │ — Ambrose Bierce │ │
│ └────────────────────────────────────────────────────────────────────┘ │
│ │
│ [Showing 4 of 127] [Load more ↓] │
│ │
├──────────────────────────────────────────────────────────────────────────┤
│ Footer │
└──────────────────────────────────────────────────────────────────────────┘
3. Search Results (LiveView)
┌──────────────────────────────────────────────────────────────────────────┐
│ [Logo: Devil's Dictionary] [Search 🔍] [Browse A-Z] │
├──────────────────────────────────────────────────────────────────────────┤
│ │
│ ┌────────────────────────────────────────────────────────────────────┐ │
│ │ 🔍 tru [×] │ │
│ └────────────────────────────────────────────────────────────────────┘ │
│ │
│ RESULTS FOR "TRU" │
│ ───────────────── │
│ │
│ ┌────────────────────────────────────────────────────────────────────┐ │
│ │ 👑 TRUTH, n. ██████░░░░ 3/5 │ │
│ │ "An ingenious compound of desirability and appearance." │ │
│ └────────────────────────────────────────────────────────────────────┘ │
│ │
│ ┌────────────────────────────────────────────────────────────────────┐ │
│ │ 👑 TRUST, n. ████████░░ 4/5 │ │
│ │ "In American politics, a large corporation..." │ │
│ └────────────────────────────────────────────────────────────────────┘ │
│ │
│ ┌────────────────────────────────────────────────────────────────────┐ │
│ │ 👑 TRUTHFUL, adj. ██████████ 5/5 │ │
│ │ "Dumb and illiterate." │ │
│ └────────────────────────────────────────────────────────────────────┘ │
│ │
│ ┌────────────────────────────────────────────────────────────────────┐ │
│ │ TRUMPET, n. ████░░░░░░ 2/5 │ │
│ │ [Wikipedia] An instrument commonly in bands... │ │
│ └────────────────────────────────────────────────────────────────────┘ │
│ │
│ 3 aristocratic results • 1 scholarly result │
│ │
├──────────────────────────────────────────────────────────────────────────┤
│ Footer │
└──────────────────────────────────────────────────────────────────────────┘
4. Person/Author Page
┌──────────────────────────────────────────────────────────────────────────┐
│ [Logo: Devil's Dictionary] [Search 🔍] [Browse A-Z] │
├──────────────────────────────────────────────────────────────────────────┤
│ │
│ ┌─────────────────────────────────────────────────────────────────────┐ │
│ │ │ │
│ │ ┌───────────────┐ │ │
│ │ │ │ AMBROSE BIERCE │ │
│ │ │ [Photo] │ 1842 — 1914 (disappeared) │ │
│ │ │ │ │ │
│ │ │ │ 👑 Aristocracy Tier │ │
│ │ └───────────────┘ American journalist, short story writer, │ │
│ │ and satirist. Best known for his sardonic │ │
│ │ wit and "The Devil's Dictionary." │ │
│ │ │ │
│ └─────────────────────────────────────────────────────────────────────┘ │
│ │
├──────────────────────────────────────────────────────────────────────────┤
│ │
│ DEFINITIONS BY AMBROSE BIERCE │
│ ══════════════════════════════════════════════════════════════════════│
│ │
│ Showing 998 of 998 definitions [Sort: A-Z ▼] │
│ │
│ ╔════════════════════════════════════════════════════════════════════╗ │
│ ║ ABSTAINER, n. ║ │
│ ║ "A weak person who yields to the temptation of denying himself ║ │
│ ║ a pleasure." ║ │
│ ║ — The Devil's Dictionary ║ │
│ ╚════════════════════════════════════════════════════════════════════╝ │
│ │
│ ╔════════════════════════════════════════════════════════════════════╗ │
│ ║ ACCOUNTABILITY, n. ║ │
│ ║ "The mother of caution." ║ │
│ ║ — The Devil's Dictionary ║ │
│ ╚════════════════════════════════════════════════════════════════════╝ │
│ │
│ ╔════════════════════════════════════════════════════════════════════╗ │
│ ║ ADMIRATION, n. ║ │
│ ║ "Our polite recognition of another's resemblance to ourselves." ║ │
│ ║ — The Devil's Dictionary ║ │
│ ╚════════════════════════════════════════════════════════════════════╝ │
│ │
│ [Load more ↓] │
│ │
├──────────────────────────────────────────────────────────────────────────┤
│ Footer │
└──────────────────────────────────────────────────────────────────────────┘
5. Landing/Home Page (Phase 2)
┌──────────────────────────────────────────────────────────────────────────┐
│ [Logo: Devil's Dictionary] [Search 🔍] [Browse A-Z] │
├──────────────────────────────────────────────────────────────────────────┤
│ │
│ │
│ THE DEVIL'S DICTIONARY │
│ │
│ "The dead know better. │
│ The living just have opinions." │
│ │
│ ┌─────────────────────────────────────────────────────┐ │
│ │ 🔍 Search for a word... │ │
│ └─────────────────────────────────────────────────────┘ │
│ │
│ [Browse A-Z →] │
│ │
├──────────────────────────────────────────────────────────────────────────┤
│ │
│ FEATURED DEFINITIONS │
│ │
│ ╔════════════════════════════════════════════════════════════════════╗ │
│ ║ ║ │
│ ║ POLITICS, n. ║ │
│ ║ "A strife of interests masquerading as a contest of principles. ║ │
│ ║ The conduct of public affairs for private advantage." ║ │
│ ║ ║ │
│ ║ — AMBROSE BIERCE, 1911 ║ │
│ ║ ║ │
│ ╚════════════════════════════════════════════════════════════════════╝ │
│ │
│ ┌────────────┐ ┌────────────┐ ┌────────────┐ ┌────────────┐ │
│ │ LOVE │ │ MONEY │ │ FREEDOM │ │ HAPPINESS │ │
│ │ "A temp... │ │ "A bless...│ │ "A politi..│ │ "An agree..│ │
│ └────────────┘ └────────────┘ └────────────┘ └────────────┘ │
│ │
├──────────────────────────────────────────────────────────────────────────┤
│ │
│ THE HIERARCHY OF TRUTH │
│ ─────────────────────── │
│ │
│ ┌─────────────────────────────────────────────────────────────────────┐ │
│ │ │ │
│ │ 👑 ARISTOCRACY │ │
│ │ Dead intellectuals: Bierce, Johnson, the classical philosophers │ │
│ │ Their words carry the weight of centuries. │ │
│ │ │ │
│ │ 📚 MIDDLE CLASS │ │
│ │ Wikipedia, encyclopedias, institutional knowledge │ │
│ │ Trying hard. Aspirational aristocracy. │ │
│ │ │ │
│ │ 📱 THE PLEBS │ │
│ │ Urban Dictionary, social media, memes │ │
│ │ Everyone has an opinion. Graffiti on cathedral walls. │ │
│ │ │ │
│ └─────────────────────────────────────────────────────────────────────┘ │
│ │
│ [Learn more about our philosophy →] │
│ │
├──────────────────────────────────────────────────────────────────────────┤
│ Footer │
└──────────────────────────────────────────────────────────────────────────┘
6. Empty State: Topic Without Aristocracy
┌──────────────────────────────────────────────────────────────────────────┐
│ │
│ ┌────────────────────────────────────────────────────────────────────┐ │
│ │ CRYPTOCURRENCY noun │ │
│ │ /ˌkrɪptəʊˈkʌrənsi/ │ │
│ │ ────────────────────────────────────────────────────────────────│ │
│ │ Related: bitcoin • blockchain • NFT • finance │ │
│ └────────────────────────────────────────────────────────────────────┘ │
│ │
│ Topic Completeness: ██░░░░░░░░ 1 of 5 layers │
│ │
├──────────────────────────────────────────────────────────────────────────┤
│ │
│ ┌────────────────────────────────────────────────────────────────────┐ │
│ │ ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ │
│ │ │ │
│ │ 👑 THE ARISTOCRACY │ │
│ │ ═══════════════════ │ │
│ │ │ │
│ │ ┌──────────────────────────────────────────────────────────────┐ │ │
│ │ │ │ │ │
│ │ │ The dead have not spoken. │ │ │
│ │ │ │ │ │
│ │ │ Ambrose Bierce died in 1914. Samuel Johnson in 1784. │ │ │
│ │ │ They never had the chance to define "cryptocurrency." │ │ │
│ │ │ │ │ │
│ │ │ This emptiness is the commentary. │ │ │
│ │ │ │ │ │
│ │ └──────────────────────────────────────────────────────────────┘ │ │
│ │ │ │
│ │ ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│ │
│ └────────────────────────────────────────────────────────────────────┘ │
│ │
├──────────────────────────────────────────────────────────────────────────┤
│ │
│ ┌────────────────────────────────────────────────────────────────────┐ │
│ │ │ │
│ │ 📱 THE PLEBS SPEAK │ │
│ │ ────────────────── │ │
│ │ │ │
│ │ ┌──────────────────────────────────────────────────────────────┐ │ │
│ │ │ Urban Dictionary 👍 12.4k 👎 2.1k │ │ │
│ │ │ │ │ │
│ │ │ cryptocurrency: A way for tech bros to lose money while │ │ │
│ │ │ pretending they're smarter than everyone else │ │ │
│ │ │ │ │ │
│ │ │ "I put my savings in crypto and now I'm living in my mom's │ │ │
│ │ │ basement. At least I was early." │ │ │
│ │ └──────────────────────────────────────────────────────────────┘ │ │
│ │ │ │
│ └────────────────────────────────────────────────────────────────────┘ │
│ │
├──────────────────────────────────────────────────────────────────────────┤
│ Footer │
└──────────────────────────────────────────────────────────────────────────┘
Component Library
LiveView Components to Build
| Component |
Type |
Description |
TopicHeader |
Static |
Title, pronunciation, part of speech, related words |
CompletenessBar |
Static |
Visual indicator of tier coverage (1-5 scale) |
AristocraticSection |
Static |
Gilded container with aged paper background |
AristocraticCard |
Static |
Double-border gilded frame, serif text |
MiddleSection |
Static |
Clean container with subtle border |
MiddleCard |
Static |
Professional, Wikipedia-style |
PlebsSection |
Static |
Feed-style container, gray background |
PlebCard |
Static |
Social media card aesthetic, vote counts |
QuoteList |
Static |
Attributed quotes with author links |
LetterNav |
Static |
A-Z navigation bar |
SearchInput |
LiveView |
Real-time search with debounce |
SearchResults |
LiveView |
Streaming results as user types |
TopicListItem |
Static |
Compact topic preview for lists |
PersonCard |
Static |
Author photo, bio, tier badge |
EmptyAristocracy |
Static |
Poetic empty state for missing tiers |
Tier-Specific CSS Classes
/* ═══════════════════════════════════════════════════════════════
👑 ARISTOCRACY TIER
═══════════════════════════════════════════════════════════════ */
.tier-aristocracy {
@apply bg-gradient-to-b from-[#faf8f5] to-[#f5f0e0];
@apply border-2 border-[#d4a574];
@apply shadow-lg;
}
.aristocracy-card {
@apply border-4 border-double border-[#b8860b];
@apply p-8;
@apply font-aristocracy;
background: linear-gradient(to bottom, #fffef5, #f5f0e0);
}
.aristocracy-card .definition-text {
@apply text-xl leading-relaxed text-gray-800;
@apply italic;
}
.aristocracy-card .attribution {
@apply text-right mt-4;
@apply text-[#8b7355] font-semibold;
@apply tracking-wide;
}
.aristocracy-card .attribution .author-name {
@apply uppercase text-sm;
}
/* ═══════════════════════════════════════════════════════════════
📚 MIDDLE CLASS TIER
═══════════════════════════════════════════════════════════════ */
.tier-middle {
@apply bg-white;
@apply border border-slate-200;
@apply shadow-sm;
}
.middle-card {
@apply p-6;
@apply font-body;
}
.middle-card .definition-text {
@apply text-base leading-relaxed text-slate-700;
}
.middle-card .source {
@apply text-sm text-slate-500 mt-2;
}
/* ═══════════════════════════════════════════════════════════════
📱 PLEBS TIER
═══════════════════════════════════════════════════════════════ */
.tier-plebs {
@apply bg-slate-50;
@apply p-4;
}
.plebs-card {
@apply bg-white rounded-lg p-4 mb-3;
@apply shadow-sm;
@apply font-body;
}
.plebs-card .source-header {
@apply flex justify-between items-center mb-2;
@apply text-sm text-slate-500;
}
.plebs-card .votes {
@apply flex gap-3 text-sm;
}
.plebs-card .votes .upvote {
@apply text-green-600;
}
.plebs-card .votes .downvote {
@apply text-red-500;
}
.plebs-card .definition-text {
@apply text-slate-600;
}
.plebs-card .example {
@apply mt-2 text-sm text-slate-500 italic;
@apply border-l-2 border-slate-200 pl-3;
}
Implementation Checklist
Phase 1: MVP
Phase 2: Content Depth
Phase 3: Expansion
Open Questions
-
Fonts: Custom or System?
- Recommendation: Playfair Display (Google Fonts) for aristocracy, Inter for body
-
Dark mode?
- Recommendation: Phase 3, aristocracy tier might need gold-on-dark treatment
-
Animations?
- Recommendation: Subtle fade-ins for tier sections, no heavy motion
-
How prominent should empty tiers be?
- Recommendation: Show empty aristocracy as poetic commentary (see wireframe 6)
References
"The layout itself is the argument."
UI/UX: Design System, Pages & Wireframes
Depends on: #48 (MVP: Devil's Dictionary Phoenix Rebuild)
Design Direction
Template Decision: Custom Build with Oatmeal Foundation
After evaluating Tailwind Plus templates:
Decision: Build custom Phoenix/LiveView components on Oatmeal's foundation, extending with tier-specific design systems for Aristocracy, Middle Class, and Plebs.
Why Oatmeal works:
Design Principles
"The Hierarchy Is Visible"
This is not a neutral dictionary. We make the stratification explicit:
Design Values
Color Palette
Tier-Specific Color Systems
Tailwind Config
Typography
Page Hierarchy & Phases
Phase 1: MVP Launch
Phase 2: Content Depth
Phase 3: Expansion
Wireframes
1. Topic Detail Page (Desktop)
1b. Topic Detail Page (Mobile)
2. Browse A-Z Page
3. Search Results (LiveView)
4. Person/Author Page
5. Landing/Home Page (Phase 2)
6. Empty State: Topic Without Aristocracy
Component Library
LiveView Components to Build
TopicHeaderCompletenessBarAristocraticSectionAristocraticCardMiddleSectionMiddleCardPlebsSectionPlebCardQuoteListLetterNavSearchInputSearchResultsTopicListItemPersonCardEmptyAristocracyTier-Specific CSS Classes
Implementation Checklist
Phase 1: MVP
TopicHeadercomponentCompletenessBarcomponentAristocraticSection+AristocraticCardcomponentsMiddleSection+MiddleCardcomponentsPlebsSection+PlebCardcomponentsEmptyAristocracycomponentLetterNavcomponentSearchInputLiveView componentSearchResultsLiveView componentTopicListItemcomponentPhase 2: Content Depth
PersonCardcomponentQuoteListcomponentPhase 3: Expansion
Open Questions
Fonts: Custom or System?
Dark mode?
Animations?
How prominent should empty tiers be?
References
"The layout itself is the argument."