docs(webui): spec for welcome screen gradient brand + pastel cards

2026-08-10 22:23:48 +08:00
parent cc1218bdaf
commit 37f9944ca1
1 changed files with 65 additions and 0 deletions
@@ -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 `<h2>`: 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.