UX Anti-Patterns — Enforcement Reference

Source: Adapted from neo-user-journey (MIT License) Adapted: 2026-04-03 Owner: Mirror (Visual QA), Showcase (Portal Build)

Mirror and Showcase reference this during visual QA, portal builds, and interactive audits. Every pattern here is something we've either shipped or could ship if we're not paying attention.

Visual Anti-Patterns

The "AI Gradient" Problem

Pattern: Purple-to-blue gradients, excessive blur effects, floating orbs Why it's bad: Signals "AI made this" instantly. No brand differentiation. Fix: Use brand colors (Value-First: navy #1a1a2e, gold #c8a951, warm gray). Restraint over decoration.

Rounded Corner Overload

Pattern: border-radius: 24px on everything Why it's bad: Loses visual hierarchy. Everything feels the same weight. Fix: Vary corner radius intentionally. Sharp corners = importance/action. Soft corners = secondary.

Generic Hero Sections

Pattern: "Welcome to [Product]" + gradient background + generic illustration Why it's bad: Zero differentiation. Users have seen this 10,000 times. Fix: Lead with value proposition. Show the product. Be specific about what makes this different.

Stock Illustration Syndrome

Pattern: Flat vector illustrations of "diverse people collaborating" Why it's bad: Generic, forgettable, doesn't build brand. Fix: Custom imagery, product screenshots, or no imagery at all. Our shows, episodes, and team photos are real — use them.

Copy Anti-Patterns

Verbose Onboarding

Pattern: "Let's get you started! First, we'll need to collect some information..." Why it's bad: People want to do, not read. Every word is friction. Fix: Reduce copy by 50%, then 50% again. Show, don't tell.

Exclamation Point Abuse

Pattern: "Welcome! You're all set! Here's what's next!" Why it's bad: Forced enthusiasm feels fake. Tiring to read. Fix: Reserve exclamation points for genuine moments of delight.

Corporate Jargon

Pattern: "Leverage our robust solution to optimize your workflow" Why it's bad: Meaningless. People tune it out. Fix: Speak like a human. Direct, warm, confident — same as V's voice. (Also see skills/global/value-first-language.md for forbidden terms.)

Hedging Language

Pattern: "This might help you..." "You may want to consider..." Why it's bad: Lacks confidence. People want guidance, not suggestions. Fix: Be direct. "Do this" not "You might want to do this."

Feature Lists Over Benefits

Pattern: "Our platform has: Real-time sync, Cloud storage, Collaboration tools" Why it's bad: Features don't explain why anyone should care. Fix: Lead with outcomes. This is Core Belief #1 — Value over Volume.

Interaction Anti-Patterns

Modal Hell

Pattern: Modals for everything — welcome, tooltips, confirmation, upsells Why it's bad: Interrupts flow. People click through without reading. Fix: Inline guidance. Modals only for critical decisions. Portal sections should use inline panels, not stacked modals.

Hover-Dependent UI

Pattern: Important actions only visible on hover Why it's bad: Invisible = nonexistent for most people. Fails on mobile entirely. Fix: Always-visible primary actions. Hover for secondary only.

Mystery Meat Navigation

Pattern: Icon-only navigation without labels Why it's bad: People guess meanings. Increases cognitive load. Fix: Labels on all navigation items. Icons supplement, don't replace. Portal sidebar already does this — keep it that way.

Infinite Scroll Without Orientation

Pattern: Endless content with no sense of progress or location Why it's bad: People feel lost. Can't return to specific items. Fix: Pagination, section markers, or "jump to" controls. Content-heavy pages (episodes, articles) need clear wayfinding.

Form Field Bloat

Pattern: Asking for 15 fields when 3 would suffice Why it's bad: Each field is friction. Drop-off increases linearly. Fix: Ask only what's immediately necessary. Progressive disclosure for the rest. Assessment and Collective application forms — audit these.

Architecture Anti-Patterns

Everything-on-Dashboard

Pattern: Dashboard showing every possible metric and action Why it's bad: Overwhelming. Nothing stands out when everything does. Fix: Curate ruthlessly. What does the person need NOW? Hide the rest. Portal Dashboard and Command Center are both at risk of this.

Settings Sprawl

Pattern: Settings page with 50+ options in a flat list Why it's bad: People can't find what they need. Feels complex. Fix: Group logically. Progressive disclosure. Smart defaults.

Feature Dumping

Pattern: Every feature accessible from every screen Why it's bad: Increases cognitive load. Dilutes focus. Fix: Context-aware features. Show what's relevant to current task. Portal navigation already uses portal_navigation config to scope sections per client — this is the right pattern.

Notification Overload

Pattern: Notifications for every possible event Why it's bad: People disable all notifications. Signal becomes noise. Fix: Default to minimal. Let people opt into more. Same principle as Value over Volume.

Onboarding That Teaches Everything

Pattern: 10-step onboarding tour covering all features Why it's bad: People retain nothing. Delays the "aha" moment. Fix: Get people to value immediately. Teach features when relevant. This is Empowerment over Dependence.

Data Integrity Anti-Patterns

Fallback Rendering as "Working"

Pattern: Page shows letter-initial avatars, "No data available" messages, empty sections, or default placeholder text — and QA passes it as functional. Why it's bad: Fallbacks mask silent failures. A letter-initial avatar that "looks intentional" on a dark theme hides the fact that the image URL was never resolved. The page appears to work, but the real data never loaded. This is the opposite of honest operations. Fix: Every visible fallback on a published page is a defect to investigate, not a design choice to accept. If a component is rendering its fallback state, trace upstream to find what broke — missing urlFor() call, null data, failed query, wrong property name. The fallback exists for error resilience, but its presence on a live page means something upstream failed.

Cross-Page Data Inconsistency

Pattern: The same entity (agent, client, document) renders differently on different pages — avatar on one, letter-initial on another; full name on one, slug on another. Why it's bad: Signals that data resolution is fragmented. Each page is wiring its own data path instead of using a shared projection. Users notice inconsistency even when they can't articulate it. Fix: When the same data appears on multiple pages, verify it renders identically. During QA, identify shared entities and compare their presentation across every page they appear on.

Graceful Degradation as Default

Pattern: Empty state messages like "No agents found" or "Pipeline data not available" on pages where data is expected to exist. Why it's bad: Graceful degradation is a safety net, not an operating state. If the database has 51 agents and the page shows "No agents found," the page is broken — even though it handled the error gracefully. Fix: Distinguish between "data doesn't exist yet" (acceptable during build) and "data exists but isn't loading" (defect). On published pages with known data, an empty state is always a bug.

The Test

Before shipping any page, section, or component, ask:

Would a human designer at a top studio do this?
Does this decision serve the person or fill space?
If I removed this element, would anyone notice?
Does this look like every other AI-generated site?

If the answer to #3 is "no" or #4 is "yes" — reconsider.

How Mirror and Showcase Use This

Mirror (Visual QA): During visual review and interactive audit, check each page against these patterns. Flag violations in the issue report with the specific anti-pattern name.

Showcase (Portal Build): Before deploying any portal section or walkthrough app, run a mental check against the Architecture section. Dashboard and navigation patterns are the highest risk areas.

Anyone building UI: If you catch yourself reaching for a gradient, a modal, or a "Welcome!" header — stop and check this list first.