Design: Definition page — three-tier definitions + community evidence wall (wireframes, UI, UX)

[holden]

Summary

Design the core definition page for the reimagined Devil's Dictionary — Ambrose Bierce's 1906 book of cynical definitions dragged into the age of TikTok, situationships, and the performative male. This issue covers UX, UI direction, and wireframes, plus a request for 3–4 distinct visual mockups of a single word's page.

The current direction nails the three-tier "hierarchy of knowledge" but has no treatment for the new layer: community-suggested evidence from the culture (song lyrics, YouTube videos, IG posts, TikToks) hanging off each definition. That gap is the focus here.

Full design brief lives in the repo at docs/design/mockup-brief.md — this issue is the actionable version.

---

Goal

A definition page that:

1. Makes the reader feel the descent through the classes as they scroll (gilded dead intellectuals → bloodless institutions → the shouting crowd).
2. Treats community evidence as a first-class feature — the culture talking back to the dictionary.
3. Looks like something you'd screenshot and send to the group chat.
4. Ports cleanly to Phoenix LiveView + Tailwind v4 (utility classes, no daisyUI, no JS framework).

---

Concept: a hierarchy of knowledge

Every word is defined three times, by three "classes," and the styling of each tier is the joke. The visual treatment is the argument about who gets to define our language.

Tier	Who	Sources	Aesthetic direction (open)
👑 Aristocracy of the Dead	Dead intellectuals	Bierce, Wilde, Twain, Mencken	Gilded, serif, aged paper, engraved, museum-plaque reverence. The "real" definition.
📚 Middle Class	Living institutions	Merriam-Webster, Oxford, Britannica	Clean, corporate, sans-serif, professional, bloodless. The "official" definition.
📱 The Plebs	The crowd	Urban Dictionary, Reddit, X, TikTok	Chaotic, casual, emoji, screenshot energy, upvotes. The "real real" definition.

(These tiers already exist in the schema: Definition.tier ∈ [:aristocracy, :middle, :plebs].)

---

New layer: community "evidence" wall

Like an encyclopedia "in popular culture" section, but crowdsourced and rankable — citations from the culture that prove the word is alive. Supported types:

• 🎵 Song lyric — excerpt + artist/song
• 📺 YouTube — video essay / sketch / clip (thumbnail + title + channel)
• 📸 Instagram — post / Reel / screenshot
• 🎬 TikTok — clip / sound / trend
• 🐦 Tweet / X — a one-liner that nails it
• (room for: news headline, movie scene, meme image)

Each item needs: thumbnail/preview, who submitted it, an agree/vote count ("does this really capture the word?"), and "add your own." The tension to design around: dead aristocrats in gilded frames up top, the living internet shouting underneath.

---

Page anatomy (checklist, not a layout)

1. Headword block — word, pronunciation, part of speech. The marquee. situationship · /ˌsɪtʃ.u.ˈeɪ.ʃɪp/ · noun
2. Three tiers of definitions — styled per the table above.
3. Community evidence wall — media + submitter + votes + "add yours."
4. Related words — synonyms / word forms / see-also cross-links.
5. Contribute affordances — "suggest a definition," "add evidence." Present, never spammy.

---

Wireframes (low-fidelity, for orientation only)

A — Vertical descent (single column, scroll the class ladder)

┌──────────────────────────────────────────────┐
│  SITUATIONSHIP                                 │
│  /ˌsɪtʃ.u.ˈeɪ.ʃɪp/   noun        [＋ suggest] │
├──────────────────────────────────────────────┤
│ 👑 ARISTOCRACY OF THE DEAD                     │
│  ╔══════════════════════════════════════════╗ │
│  ║ "A compact between two persons, each      ║ │
│  ║  privately convinced the other is the     ║ │
│  ║  more deeply ensnared..."                 ║ │
│  ║              — Ambrose Bierce, 1906        ║ │
│  ╚══════════════════════════════════════════╝ │
├──────────────────────────────────────────────┤
│ 📚 MIDDLE CLASS                                │
│  ┌──────────────────────────────────────────┐ │
│  │ A romantic or sexual relationship not     │ │
│  │ considered formal or established.         │ │
│  │                       — Merriam-Webster   │ │
│  └──────────────────────────────────────────┘ │
├──────────────────────────────────────────────┤
│ 📱 THE PLEBS                                   │
│  ▲ 4.2k  "when ur basically dating but he'd   │
│          combust before calling u his gf 💀"  │
├──────────────────────────────────────────────┤
│ 🔥 EVIDENCE FROM THE CULTURE      [＋ add]     │
│  ┌────────┐ ┌────────┐ ┌────────┐ ┌────────┐  │
│  │🎬 TikTok│ │📺YouTube│ │🎵 SZA  │ │🐦 tweet │  │
│  │ 1.1M ❤ │ │ 480k 👁 │ │"I Hate │ │ 22k ❤  │  │
│  │@nothght│ │ The Take│ │ U"     │ │        │  │
│  │ ▲ 312  │ │ ▲ 88   │ │ ▲ 312  │ │ ▲ 140  │  │
│  └────────┘ └────────┘ └────────┘ └────────┘  │
├──────────────────────────────────────────────┤
│ SEE ALSO  talking stage · breadcrumbing ·     │
│           soft launch · delulu · ghosting     │
└──────────────────────────────────────────────┘

B — Tier tabs / toggle (definitions swap in place, evidence persists)

┌──────────────────────────────────────────────┐
│  PERFORMATIVE   adj   /pərˈfɔːr.mə.tɪv/        │
│  [ 👑 Aristocracy ] [ 📚 Middle ] [ 📱 Plebs ] │
│  ──────────────                                │
│  "Of virtue worn as a garment — conspicuous,  │
│   removable, and chosen chiefly for the        │
│   admiration of strangers."   — Bierce         │
├──────────────────────────────────────────────┤
│ 🔥 EVIDENCE WALL                  [＋ add]     │
│  masonry grid of cards, mixed media heights    │
└──────────────────────────────────────────────┘

C — Split: definitions left, living evidence feed right (desktop)

┌─────────────────────────┬────────────────────┐
│  PERFORMATIVE  adj       │ 🔥 THE CULTURE     │
│                          │ ┌────────────────┐ │
│ 👑 "Of virtue worn as a  │ │🎬 Performative  │ │
│    garment..."  —Bierce  │ │  Male Contest   │ │
│                          │ │  3.4M ❤  ▲ 540  │ │
│ 📚 "expresses or performs│ ├────────────────┤ │
│    an identity..." —OED  │ │🎵 Clairo "Bags" │ │
│                          │ │  ▲ 201          │ │
│ 📱 ▲8.7k "tote bag,      │ ├────────────────┤ │
│    matcha + Labubu 🧋"   │ │🐦 "reads theory │ │
│                          │ │  to text back   │ │
│ SEE ALSO: performative   │ │  slower" 15k ❤  │ │
│ male · virtue signaling  │ │       [＋ add]  │ │
└─────────────────────────┴────────────────────┘

Mockups should explore at least these three structural ideas (and may invent more). Mobile layout matters — the evidence wall should feel native on a phone.

---

UX flows

Read → land on word, scan tiers top-to-bottom, browse evidence, jump to a related word.

Vote on evidence → tap ▲ "this captures it" (optimistic UI; one vote per user). Reordering by agreement is a stretch goal — show the affordance.

Add evidence → ＋ add → pick type (🎵/📺/📸/🎬/🐦) → paste URL → preview unfurls → submit. Design the empty state ("be the first to prove this word exists in the wild") and a populated state.

Suggest a definition → ＋ suggest → choose tier → write it → cite source. Show how a brand-new word with no aristocracy entry looks (sparse state) vs. a fully-populated word.

---

Example content for the mockups

Build at least one full mockup for situationship and one for performative. Bierce-voice lines may be polished; evidence items may be invented.

situationship · noun · /ˌsɪtʃ.u.ˈeɪ.ʃɪp/

• 👑 SITUATIONSHIP, n. A compact between two persons, each privately convinced the other is the more deeply ensnared; possessing all the obligations of courtship and all the security of the weather.
• 📚 A romantic or sexual relationship that is not considered to be formal or established.
• 📱 ▲4.2k — "when ur basically dating but he'd combust before calling u his gf 💀 no title, no peace"
• Evidence: 🎵 SZA "I Hate U" (312 agree) · 🎬 TikTok "POV: he's 'not ready for a label'" (1.1M ❤) · 📺 YouTube "The Rise of the Situationship" — The Take (480k) · 🐦 "a situationship is just a relationship with commitment issues and a cooler name" (22k ❤) · 📸 IG "delulu is the solulu"
• Related: talking stage · breadcrumbing · soft launch · delulu · ghosting

performative · adj · /pərˈfɔːr.mə.tɪv/

• 👑 PERFORMATIVE, adj. Of virtue worn as a garment — conspicuous, removable, and chosen chiefly for the admiration of strangers.
• 📚 Relating to an action that expresses or performs an identity, esp. one undertaken for social approval rather than sincere conviction.
• 📱 ▲8.7k — "carrying a tote bag, a matcha, and a Labubu to seem like a feminist. performative male behavior fr 🧋"
• Evidence: 🎬 TikTok "Performative Male Contest (matcha, tote bag, Clairo vinyl)" (3.4M ❤) · 📺 YouTube "How to spot a performative male" (920k) · 🎵 Clairo "Bags" (201 agree) · 📸 IG "wired headphones + Sally Rooney paperback" · 🐦 "he reads feminist theory to text back slower" (15k ❤)
• Related: performative male · virtue signaling · pick-me · aesthetic · authenticity

---

Deliverables

• 3–4 distinct HTML mockups (not recolors), named by concept — e.g. 01-vertical-descent.html, 02-tier-tabs.html, 03-split-feed.html. Place under docs/design/mockups/.
• At least one full situationship page and one full performative page across the set.
• Each tier visually distinct enough that you'd know the class with the text removed.
• Evidence wall designed for mobile + desktop, with empty and populated states.
• Sparse-word state (word missing an aristocracy definition).
• One-sentence concept note per mockup + which treatment you're proudest of.

Acceptance criteria

• All three tiers present and unmistakably differentiated.
• Evidence wall supports 🎵/📺/📸/🎬/🐦 with submitter + vote + "add yours."
• Headword block reads like a marquee (word, pronunciation, POS).
• Related-words cross-links present.
• Contribute affordances present but not spammy.
• Portable to HEEX + Tailwind v4 — utility classes only, no daisyUI, no JS framework, no external <script src>/<link href>.
• Tone: cynical, literary, premium-editorial — "Bierce with a phone," not a meme-dump.

Out of scope / follow-ups

• Backend for evidence submission/unfurling (schema, Oban jobs, oEmbed).
• Auth-gated voting + rate limiting.
• Search / browse / homepage redesign.
• Disambiguation & redirect page types.

Open questions

• Do the three tiers stack, tab/toggle, or split-screen? (mockups should help us decide)
• Is evidence per-definition or per-word? (brief assumes per-word)
• Does evidence reorder by votes, or stay chronological with vote counts shown?
• How loud should the satire be on the institutional/middle tier without alienating casual readers?