# Design Brief — Paste This Prompt to Claude (or any designer)

Copy everything between the lines into a fresh Claude conversation to get an
implementable visual prototype for this project. Attach screenshots of the
current app for best results.

---

You are designing an updated UI prototype for **AI Trading Signal Lab**, a
working paper-trading research platform. Your job is VISUAL DESIGN ONLY —
the functionality, data, and information architecture below are fixed and
must all be preserved.

## Product context

A single dashboard app where an AI pipeline scans stocks/options/crypto,
scores trade setups, enforces risk rules, and tracks paper trades. Users are
retail traders checking it a few times daily, often on phones. Tone:
professional trading terminal — trustworthy, dense but calm, never gamified
or casino-like. It must always be obvious this is research, not advice.

## Current tech + constraints (the prototype must respect these)

- Next.js + Tailwind CSS; single-file React components; no component
  library migrations. Deliver designs implementable in Tailwind utilities.
- Dark theme is primary. Current tokens (may be refined, not replaced):
  background #07090f, surfaces #0b0e17/#10141f, borders #1e2638,
  bull-green #22c55e, bear-red #ef4444, accent-blue #38bdf8, gold #f59e0b,
  violet (crypto) — monospace for all numbers.
- Mobile-first: bottom navigation with 4 primary tabs + "More" sheet;
  44px+ touch targets; desktop uses a permanent left sidebar (240px).
- Every page already has loading/empty/demo states — design them too.
- A "● Live API / ● Demo data" badge must remain visible on every page.
- Disclaimers ("paper trading only — not financial advice") must remain
  prominent, not buried.

## Pages to design (12) with their fixed content

1. **Login** — sign-in/create-account toggle, minimal, brand mark.
2. **Dashboard** — AI CIO morning briefing (5-line narrative), executive
   metrics strip (portfolio, today/7d/30d P&L, win rate, risk used),
   trading-mode chip (Aggressive/Moderate/Defensive), opportunities table
   ranked by a 0-100 Trade Readiness score, top signal cards.
3. **Scanner** — ranked universe table (price, change, volume, activity).
4. **Signals** — filterable table (type: options/swing/crypto; status:
   approved/rejected), direction badges (CALL/PUT/BUY/SELL), confidence
   bars, entry/stop/target prices, clear-history action.
5. **Signal detail** — trade plan card (entry/stop/2 targets/size), agent
   score bars, indicator grid, option contract card with Greeks, rejection
   banner (red) when risk-gated, AI rationale list, price sparkline (a
   proper candlestick chart is welcome as an upgrade).
6. **Paper Trades** — open/closed tables with share P&L AND option P&L,
   option contract cells, scale-out/time-stop/stop/target exit reasons,
   mark-to-market action.
7. **Market News** — article cards with tone chips (positive/negative/
   neutral), symbol chips, source links, symbol + tone filters.
8. **Risk Manager** — risk budget utilization bar, rule cards, live-trading
   BLOCKED card (must stay visually unmistakable).
9. **Backtest** — parameter controls (history, score threshold, hold time),
   six stat cards, equity curve, per-symbol and recent-trades tables,
   calibration bucket cards.
10. **AI Performance** — strategy report cards with A–F letter grades,
    composite scores, MFE/MAE, benchmark-vs-SPY strip.
11. **Daily Reports** — dated report cards with metrics + monospace summary.
12. **Settings** — risk config form, data-provider status list, trading-mode
    (paper ENABLED / live NOT AVAILABLE) card.

## What we want from the redesign

Sharper visual hierarchy (a trader should read any page's answer in 5
seconds), more polished cards/tables (the current ones are functional but
plain), better data-density handling on mobile, tasteful motion (150-250ms,
respect reduced-motion), refined typography scale, and a distinctive but
professional identity. Candlestick charts on signal detail and equity
curves are the most-wanted visual upgrades.

## Deliverables

1. Design tokens (colors incl. both themes if you propose light mode,
   type scale, spacing, radii, shadows) as a Tailwind config snippet.
2. High-fidelity mockups as single-file HTML/Tailwind (or React+Tailwind)
   pages for at minimum: Dashboard, Signal detail, Paper Trades, Login —
   mobile (390px) AND desktop (1280px) for each.
3. A component sheet: badges, chips, stat cards, tables, confidence bars,
   grade blocks, tone chips, buttons, empty/loading states.
4. One-paragraph rationale per page: what changed and why it helps a
   trader decide faster.

## Hard rules

- Never hide or shrink risk information, rejection reasons, or disclaimers.
- Red/green only for direction and P&L semantics — never decorative.
- No dark-pattern urgency (countdowns, flashing, FOMO language).
- Numbers stay monospace, right-aligned in tables.
- Anything you propose must be buildable with Tailwind utilities alone.

---