# Brief — The Ghost Dashboard (Vibe Design) ## Rationale This capsule tests aesthetic judgment rather than technical correctness. The prompt is deliberately vague on layout, palette, and composition — it only fixes the data points and the domain (fintech). The goal is to see whether a model makes deliberate, coherent design decisions or defaults to generic, unstyled, "bootstrap-y" output. Unlike prior capsules (Ray Marching, Silent Regression), there's no single hidden bug to find. Instead, GT criteria are built around observable, low-ambiguity visual signals that a non-designer can judge from a screenshot: does it look intentional, is it legible, is it coherent. This keeps scoring objective despite the subjective subject matter. ## Expected model spread - Frontier models with strong front-end training data (Claude, GPT, Gemini top tier) should produce a genuinely styled, cohesive dashboard with a real color system and considered spacing. - Mid-tier models likely default to a generic card-grid layout with default chart library colors (Chart.js default rainbow palette) and inconsistent spacing. - Weaker/smaller models risk one of: broken chart rendering (CDN script fails silently, blank canvas), Lorem-ipsum-style placeholder content instead of realistic fintech labels, or literal template-cloning of a well-known dashboard (Stripe, Linear) that isn't actually adapted to "Fenwick." ## Known implementation risks / cheats to watch for - **CDN failure**: Chart.js or similar loaded from a CDN that doesn't resolve in the render sandbox — chart area renders blank. This must be treated as a hard fail on GT6, not a partial, since it's a broken deliverable regardless of surrounding design quality. - **Palette cheat via screenshot bias**: a model could use a single flashy color (e.g., neon gradient hero header) that looks good in isolation but clashes with the rest of the page. Judge palette coherence across the *whole* page, not just the top fold. - **Generic default detection**: watch for unmodified Bootstrap/Tailwind default component styling (default blue buttons, default table borders) sitting next to custom-styled sections — signals low design effort even if some parts look intentional. - **Data realism cheat**: some models may reuse placeholder values like "Lorem ipsum" or "$XXXX" instead of committing to plausible numbers — this isn't a visual bug but reflects low effort and should count against GT3. - **Exact clone risk**: a memorized close copy of a known real dashboard product (not just "inspired by" a style) should be flagged in notes even if it scores well, since it demonstrates memorization rather than design generation. ## Ground Truth checklist Render each submission in headless Chromium at standard desktop viewport (1440×900) and capture a full-page screenshot before scoring. - **GT1 — Visual hierarchy**: Is there one clear focal point (e.g., total balance or a headline metric) that draws the eye first, with everything else clearly secondary? - **GT2 — Palette coherence**: Does the page use a limited, deliberate color palette (roughly 2–4 core colors plus neutrals), with a consistent accent color used purposefully rather than a rainbow of unrelated colors? - **GT3 — Content realism**: Are the data labels and values plausible for a real fintech dashboard (real-sounding category names, sane dollar amounts), not placeholder/lorem-ipsum content? - **GT4 — Layout & spacing consistency**: Is spacing/padding consistent across cards and sections, with proper alignment on a grid (no overlapping elements, no ragged edges)? - **GT5 — Typography hierarchy**: Is there a clear, consistent distinction between headers, metric values, and body/labels (size and/or weight), rather than uniform text throughout? - **GT6 — Functional chart**: Does at least one chart/graph render correctly and legibly (not blank, not broken, not illegible due to overlapping labels)? - **GT7 — Generic-template avoidance**: Does the page avoid leaving visible, unstyled default component styling (raw Bootstrap buttons/tables) next to custom-styled sections? - **GT8 — Domain trustworthiness (bonus, not required for pass)**: Does the overall look read as "trustworthy financial product" rather than a generic admin panel or consumer app? Note qualitatively, don't require for tier decisions. ## Tiers - **PASS**: GT1, GT2, GT4, GT5, GT6 all met, plus at least one of GT3/GT7. - **PARTIAL**: GT6 met (chart functional) but two or more of GT1/GT2/GT4/GT5 fail, OR GT6 fails but everything else is strong (broken chart pulling down an otherwise good design). - **FAIL**: GT6 fails (broken/blank chart) AND two or more of GT1/GT2/GT4/GT5 also fail, or the output is not a working single HTML file. ## Scoring checklist block (per run) ``` Model: [name] GT1 Visual hierarchy: [PASS/FAIL] GT2 Palette coherence: [PASS/FAIL] GT3 Content realism: [PASS/FAIL] GT4 Layout/spacing: [PASS/FAIL] GT5 Typography hierarchy: [PASS/FAIL] GT6 Functional chart: [PASS/FAIL] GT7 Generic-template avoid.: [PASS/FAIL] GT8 Trustworthiness (bonus): [note only] Tier: [PASS/PARTIAL/FAIL] Notes: [cheats detected, clone risk, CDN failure, etc.] ```