Pride Intelligence

Recent

    Humphrey UI Overhaul Research

    source4 min readUpdated 12 Apr 2026

    4 min read

    Updated 16d ago

    Humphrey UI Overhaul Research

    Perplexity research report evaluating tools and strategies for overhauling the Humphrey live intelligence dashboard from a generic AI-generated aesthetic to a premium, intentionally designed product. Commissioned April 2026.

    Source Details

    Type: External research report (Perplexity AI) Date: April 2026 Scope: Design tools, component libraries, animation frameworks, premium dashboard patterns, and aesthetic direction for the Humphrey dashboard Authority: Secondary source — aggregates multiple primary sources (tool documentation, design blogs, research papers)

    Key Facts Extracted

    Tool Landscape Assessment

    The report evaluates 12+ tools against Humphrey’s constraints (Next.js 16 + Tailwind v4 + React 19, ~50 pages, dark mode, data-dense):

    • Google Antigravity is an AI IDE (VS Code fork, Gemini 3-powered), not a design tool. Competes with Cursor/Windsurf. Free public preview available.
    • Google Stitch is the actual AI design tool (acquired Galileo AI, launched I/O 2025). Generates UI from prompts but outputs HTML/CSS only — not React. Produces generic output; limited to simple screens. Not suitable for Humphrey’s 50-page production app.
    • shadcn/ui + Radix UI rated highest for Humphrey’s use case: copy-paste component system, fully editable, CSS variable theming by default, incremental adoption, full Tailwind v4 + React 19 support (Feb 2025 update).
    • v0.dev (Vercel) useful for prototyping individual components but produces a recognisable “v0/shadcn default” look. 6M+ developers, 80K+ active teams as of early 2026.
    • Motion (Framer Motion) is the standard React animation library in 2026. Declarative spring physics, layout animations, gesture handling. Critical for bridging the gap between “generated” and “designed.”
    • Figma MCP Server enables design-to-code pipeline via AI coding assistants (Cursor, Windsurf, Claude Code). Highest fidelity approach but requires dedicated design time.
    • Material Design 3, Aceternity UI, Magic UI all carry recognisable template aesthetics. Cherry-pick patterns only; do not adopt wholesale.

    Premium Dashboard Design Patterns

    Analysis of Linear, Stripe, Vercel, Arc, and Raycast identifies five key differentiators from AI-generated UI:

    1. Typography as primary design tool — hierarchy through weight and line-height, not colour. tabular-nums and lining-nums for financial data. clamp() for fluid scaling.
    2. Deliberate spacing systems — rhythmic variation (not uniform). Semantic spacing scale: --space-within, --space-between, --space-section.
    3. Purposeful motion — communicates state changes, not decoration. Three timing presets (fast 100-150ms, normal 200-300ms, slow 400-600ms). Spring physics for interactive elements.
    4. Progressive disclosure — curated summaries with drill-down paths, not walls of charts.
    5. Personality in edge cases — empty states, loading states, error messages with brand voice. The single area AI cannot generate.

    AI-Generated UI Red Flags

    Research identifies consistent tells: overly perfect gradients, identical border-radius everywhere, zero micro-interactions, uniform information density, generic sans-serif typography with no hierarchy beyond size, no page transitions.

    Aesthetic Direction: “Theatrical Dark”

    The report recommends evolving Humphrey’s synthwave/neon glow aesthetic to “theatrical dark” — retaining the dark-first approach and brand colours (Hot Pink FF86B7, Periwinkle 7B8AD4, Coral FFAC74) but replacing glow effects with subtle border accents, reducing saturation for backgrounds, and introducing 4-5 dark surface levels for depth (#0C0A2F → #141232 → 1C1A3D → #252349 → 2D2B55).

    Ranked Approaches

    1. Design System Evolution (Recommended): shadcn/ui + Radix foundation, custom token system, Motion + View Transitions. 8-12 weeks part-time. Highest distinctiveness.
    2. Premium Template + Heavy Customisation: Purchase Next.js dashboard template, strip and retheme. 6-10 weeks. Medium distinctiveness, risk of “template smell.”
    3. Design-First (Figma + AI Code Pipeline): Full Figma design first, then MCP Server to code. 12-16 weeks. Highest ceiling but requires Figma expertise.
    4. AI-Accelerated Redesign: Stitch ideation → v0 prototyping → Antigravity/Cursor implementation. 6-8 weeks. Low-medium distinctiveness, high “AI look” risk.

    Technical Integration Notes

    • shadcn/ui Tailwind v4 uses @theme inline — compatible with Humphrey’s existing tokens.css and [data-theme="dark"] selector
    • Next.js 16.2+ supports native View Transitions API via React <ViewTransition> component — use for route-level animation alongside Motion for component-level
    • Recharts v3 accepts CSS custom properties via style prop — integrates with token system

    Contradictions with Existing Wiki

    Framework version discrepancy: Humphrey Intelligence App and Tech Stack pages list “Next.js 15” as the framework. This research assumes “Next.js 16 + Tailwind v4 + React 19” — indicating the stack has been upgraded during Sprint 1-3 development. Pages updated to reflect current state.

    Backlinks

    Relationships

    Sources

    • research/humphrey-ui-overhaul-research.md

    Graph View