Major UI overhaul plans; Other random docs

CLAUDE.md

@@ -19,12 +19,28 @@
 | Repository / directory / database / Docker | `patherly` / `patherly_postgres` |
 | Backend, frontend UI, production URLs | **ResolutionFlow** |
 
-- **Design:** Monochrome dark-only — black backgrounds, white text with opacity, Inter font
-- **CSS utilities:** `glass-card`, `glass-card-hover`, `glass-card-glow`, `glass-stat` (in `index.css`)
-- **Logo:** Inline SVG in `BrandLogo.tsx`
-- **Design system guide:** `docs/plans/Frontend/DESIGN_SYSTEM_GUIDE.md`
+- **Design:** Dark-first with purple gradient accents (`#818cf8` → `#a78bfa`). NOT monochrome — use gradient for primary buttons, active nav indicators, stat highlights, and brand text.
+- **Fonts:** Plus Jakarta Sans (`font-heading`, headings/titles), Inter (`font-sans`, body text), Outfit (`font-label`, labels/badges/counts) — loaded via Google Fonts
+- **Logo:** Inline SVG in `BrandLogo.tsx` (decision-tree icon with gradient). Wordmark: "Resolution" in white + "Flow" in `text-gradient-brand`
+- **Brand assets:** `brand-assets/` (source SVGs + brand-guide.html), `frontend/src/assets/brand/` (app assets), `frontend/public/icons/` (favicon)
+- **CSS utilities:** `text-gradient-brand`, `bg-gradient-brand`, `bg-gradient-brand-hover` (defined in `tailwind.config.js` and `index.css`)
+- **Layout:** App shell with persistent sidebar + top bar + main workspace (CSS Grid). See [UI-DESIGN-SYSTEM.md](UI-DESIGN-SYSTEM.md)
+- **Workspace system:** Top-level context switcher (Troubleshooting, Procedures, Policies, Finance). Sidebar categories, tags, stats, and content adapt per workspace. See [UI-DESIGN-SYSTEM.md](UI-DESIGN-SYSTEM.md)
+- **Rebrand guide:** [REBRAND-IMPLEMENTATION-GUIDE.md](REBRAND-IMPLEMENTATION-GUIDE.md)
+- **Interactive mockup:** `docs/mockups/resolutionflow-workspaces-mockup.html` (open in browser for visual reference)
 
-When adding new pages/components: use "ResolutionFlow" branding, monochrome design, `glass-card` containers, `text-white` hierarchy, white primary buttons, functional color only for status.
+**Component styling rules:**
+- Primary buttons: `bg-gradient-brand` with `shadow-lg shadow-primary/20`, hover lifts with stronger shadow
+- Secondary buttons: `bg-card` with `border-border`, hover brightens border
+- Active nav items: `bg-primary/8` background + 3px left gradient accent bar
+- Stat values: use `text-gradient-brand` for highlighted metrics
+- Status colors: green (`text-green-500`) for success, amber (`text-amber-500`) for in-progress, red (`text-red-500`) for error/critical
+- Category dots: 8px colored circles using the category color palette
+- Tags/badges: `font-label` (Outfit), small rounded chips with `bg-card border-border`
+- Cards: `bg-card border-border rounded-xl`, hover brightens border
+- Section labels: `font-label text-[0.6875rem] uppercase tracking-wide text-muted-foreground`
+
+When adding new pages/components: use "ResolutionFlow" branding, purple gradient accent theme, `bg-card` containers, `text-foreground`/`text-muted-foreground` hierarchy. Primary actions use `bg-gradient-brand`. Pages render inside the app shell (CSS Grid: topbar + sidebar + main). Reference [UI-DESIGN-SYSTEM.md](UI-DESIGN-SYSTEM.md) for layout patterns, workspace context, and component specs.
 
 ---
 
@@ -61,7 +77,7 @@ When adding new pages/components: use "ResolutionFlow" branding, monochrome desi
 
 ### Frontend
 - **Framework:** React 19 + Vite + TypeScript
-- **Styling:** Tailwind CSS v3 — monochrome glass-morphism (dark-only)
+- **Styling:** Tailwind CSS v3 — dark-first with purple gradient accents (see Branding section)
 - **State:** Zustand (with immer + zundo for undo/redo)
 - **Routing:** React Router v7
 - **API Client:** Axios with token refresh interceptor