diff --git a/docs/superpowers/specs/2026-08-10-welcome-screen-polish-design.md b/docs/superpowers/specs/2026-08-10-welcome-screen-polish-design.md new file mode 100644 index 0000000..4843bed --- /dev/null +++ b/docs/superpowers/specs/2026-08-10-welcome-screen-polish-design.md @@ -0,0 +1,65 @@ +# Welcome Screen Polish — Gradient Brand Mark + Pastel Stat Cards — Design + +Date: 2026-08-10 +Status: Approved (user reviewed verbally 2026-08-10) + +## Goal + +The bright/premium restyle shipped earlier today reads as too restrained. +Using the user's reference product (AI4Sci) as direction, make the chat +welcome screen feel lively and premium with two additions: a gradient brand +mark + larger title, and pastel-tinted stat cards. Purely visual: no logic, +no API changes. tsc, eslint, and `npm test` stay green. + +Decisions locked in: + +- **Keep the cyan brand.** The user did NOT choose the purple palette or the + composer overhaul from the reference — only the two elements below. +- **Scope:** the empty-conversation welcome screen only (brand block + + ResearchDashboard stat cards). Pinned list and Recent activity unchanged. + +## A. Gradient brand mark + title (`ChatInterface.tsx` welcome block, ~line 1743) + +- Above the `

`: a `size-14` (56px) `rounded-2xl` tile, + `bg-gradient-to-br from-cyan-400 to-cyan-600`, white `Sparkles` lucide + icon (`size-7`) centered, `shadow-lg shadow-cyan-500/30`. +- Title: `text-2xl sm:text-3xl font-semibold tracking-tight` (was lg/xl). +- Tagline and suggested-prompt pills unchanged. + +## B. Pastel stat cards (`ResearchDashboard.tsx` stats grid, ~line 215) + +Each of the four cards gets its own pastel family. The card carries a `tint` +entry per stat; classes are static strings per stat (no dynamic Tailwind +construction): + +| Card | Light card bg / border | Icon tile (light) | Dark card bg / border | Icon tile (dark) | +|---|---|---|---|---| +| Knowledge (cyan) | `bg-cyan-50` / `border-cyan-100` | `bg-cyan-100 text-cyan-700` | `dark:bg-cyan-950/40` / `dark:border-cyan-900/50` | `dark:bg-cyan-900/60 dark:text-cyan-300` | +| Timeline (violet) | `bg-violet-50` / `border-violet-100` | `bg-violet-100 text-violet-700` | `dark:bg-violet-950/40` / `dark:border-violet-900/50` | `dark:bg-violet-900/60 dark:text-violet-300` | +| Workspace (amber) | `bg-amber-50` / `border-amber-100` | `bg-amber-100 text-amber-700` | `dark:bg-amber-950/40` / `dark:border-amber-900/50` | `dark:bg-amber-900/60 dark:text-amber-300` | +| Scheduled (emerald) | `bg-emerald-50` / `border-emerald-100` | `bg-emerald-100 text-emerald-700` | `dark:bg-emerald-950/40` / `dark:border-emerald-900/50` | `dark:bg-emerald-900/60 dark:text-emerald-300` | + +Card structure changes: + +- Icon moves into a `size-8 rounded-lg` tile (grid place-items-center) + carrying the colors above; icon itself `size-4`. +- Card: `rounded-xl`, keeps `min-h-[82px]` flex-center layout. +- Hover: `hover:-translate-y-0.5 hover:shadow-md` (replace the current + brand-border hover); `transition-all` replaces `transition-colors`. +- Focus ring unchanged (`focus-visible:ring-2 focus-visible:ring-ring`). +- Value/label typography unchanged. + +## Error handling + +None — visual only. + +## Testing & verification + +- `npx tsc --noEmit`, `npx eslint` on the two files, `npm test` green. +- Manual visual gate (user, dev server :4716): welcome screen in light AND + dark mode — brand tile, four tinted cards, hover lift, focus rings. + +## Out of scope + +- Purple palette, composer/controls restyle (declined by user). +- Suggested-prompt pills, pinned list, Recent activity, all other screens.