docs: update CLAUDE.md for monochrome design system

Remove outdated purple gradient/theme toggle references, add monochrome
design system patterns and component guidelines for future sessions.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

CLAUDE.md

@@ -34,14 +34,15 @@ The project was rebranded from "Patherly" to "ResolutionFlow" in the frontend (P
 
 **Brand details:**
 
-- **Colors:** Purple gradient (`#818cf8` → `#a78bfa`)
-- **Fonts:** Plus Jakarta Sans (headings), Inter (body), Outfit (labels) - loaded via Google Fonts
-- **Logo:** Inline SVG in `AppLayout.tsx` and `LoginPage.tsx` (decision-tree icon with gradient)
+- **Colors:** Monochrome — pure black (`#000`) backgrounds, white text with opacity levels (PR #49)
+- **Fonts:** Inter (all text) — loaded via Google Fonts
+- **Logo:** Inline SVG in `BrandLogo.tsx` (decision-tree icon, white fill)
 - **Brand assets:** `brand-assets/` (source SVGs), `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`)
+- **CSS utilities:** `glass-card`, `glass-card-hover`, `glass-card-glow`, `glass-stat` (defined in `index.css`)
+- **Design system guide:** `docs/plans/Frontend/DESIGN_SYSTEM_GUIDE.md`
 - **Rebrand guide:** [REBRAND-IMPLEMENTATION-GUIDE.md](REBRAND-IMPLEMENTATION-GUIDE.md)
 
-When adding new frontend pages or components, use "ResolutionFlow" for any user-visible branding. Use `font-heading` for heading elements and the `text-gradient-brand` utility for brand-colored text.
+When adding new frontend pages or components, use "ResolutionFlow" for any user-visible branding. Follow the monochrome design system: black backgrounds, `glass-card` for containers, `text-white` with opacity variants for text hierarchy, white primary buttons, functional color only for status indicators.
 
 ---
 
@@ -59,7 +60,7 @@ When adding new frontend pages or components, use "ResolutionFlow" for any user-
 - Sessions tracking with decisions
 - Export API (Markdown, Text, HTML)
 - Tree Editor with form-based editing and visual preview
-- Dark/Light theme toggle
+- Dark-only monochrome design (theme toggle removed in PR #49)
 - Markdown rendering in session player and node editor
 - 7 comprehensive seed decision trees
 - **Tree Organization System:**
@@ -74,7 +75,6 @@ When adding new frontend pages or components, use "ResolutionFlow" for any user-
 - **User Preferences (Issue #3):**
   - Settings page at `/settings`
   - Default export format preference (persisted in localStorage)
-  - Theme toggle integrated in Settings
 - **Step Categories (Issue #5):**
   - Database table with 10 seeded global categories
   - Full CRUD API at `/api/v1/step-categories`
@@ -92,9 +92,14 @@ When adding new frontend pages or components, use "ResolutionFlow" for any user-
   - Rating/review system with verified use tracking
 - **Frontend Rebrand (PR #26):**
   - Renamed from "Patherly" to "ResolutionFlow" in all user-facing UI
-  - Purple gradient theme, custom fonts (Plus Jakarta Sans, Inter, Outfit)
   - Custom SVG logo in header and auth pages
   - Updated favicon and browser tab title
+- **Monochrome Design System (PR #49):**
+  - Dark-only mode, theme toggle removed
+  - Glass-morphism cards (`glass-card`, `glass-card-glow` CSS utilities)
+  - 84 files migrated from themed/colored to monochrome
+  - CSS variables remapped to monochrome, Tailwind config simplified (single font: Inter)
+  - Functional color (green/red/yellow/blue) reserved for status indicators only
 - **Token Refresh Fix:**
   - Silent refresh with single-flight queue (prevents concurrent 401 race conditions)
   - Backend `get_refresh_token_payload` dependency extracts refresh token from Authorization header
@@ -146,7 +151,7 @@ When adding new frontend pages or components, use "ResolutionFlow" for any user-
   - Main content adjusts width via padding transition when panel opens
 - **Global Thin Scrollbar Styling:**
   - 6px thin scrollbars site-wide (Firefox `scrollbar-width: thin` + WebKit pseudo-elements)
-  - Theme-aware colors using CSS variables (`--border`, `--muted-foreground`)
+  - Monochrome colors using CSS variables
 - **Admin Panel (Feb 2026):**
   - Full admin panel at `/admin/*` with 8 pages (dashboard, users, invite codes, audit logs, plan limits, feature flags, settings, categories)
   - Super admin access: requires `is_super_admin=true` on User model
@@ -180,8 +185,8 @@ When adding new frontend pages or components, use "ResolutionFlow" for any user-
 ### Frontend
 
 - **Framework:** React 19 + Vite + TypeScript
-- **Styling:** Tailwind CSS v3 with ResolutionFlow brand theme (purple gradient)
-- **Fonts:** Plus Jakarta Sans (headings), Inter (body), Outfit (labels) via Google Fonts
+- **Styling:** Tailwind CSS v3 — monochrome glass-morphism design (dark-only)
+- **Fonts:** Inter (all text) via Google Fonts
 - **State:** Zustand (with immer + zundo for undo/redo)
 - **Routing:** React Router v7
 - **API Client:** Axios with token interceptors
@@ -261,11 +266,11 @@ patherly/
 │   │   ├── hooks/                  # Custom React hooks (useKeyboardShortcuts, usePermissions)
 │   │   ├── store/
 │   │   │   ├── authStore.ts        # Zustand auth state
-│   │   │   ├── themeStore.ts       # Dark/light theme
+│   │   │   ├── themeStore.ts       # Unused (dark-only mode, no toggle)
 │   │   │   ├── treeEditorStore.ts  # Tree editor state (immer + zundo)
 │   │   │   └── userPreferencesStore.ts  # User preferences (NEW)
 │   │   ├── components/
-│   │   │   ├── common/             # Modal, ErrorBoundary, ThemeToggle, ConfirmDialog
+│   │   │   ├── common/             # Modal, ErrorBoundary, ConfirmDialog, BrandLogo
 │   │   │   ├── layout/             # AppLayout, ProtectedRoute
 │   │   │   ├── tree-editor/        # Tree editor components
 │   │   │   ├── tree-preview/       # Visual tree preview
@@ -676,7 +681,7 @@ Key JSONB structures stored in PostgreSQL. See `frontend/src/types/` for full Ty
 ### State Management
 
 - **Auth:** `useAuthStore` - Zustand with localStorage persistence (includes `setTokens` for silent refresh sync)
-- **Theme:** `useThemeStore` - Dark/light/system preference
+- **Theme:** Removed — dark-only mode (no theme toggle)
 - **Tree Editor:** `useTreeEditorStore` - Zustand + immer + zundo (undo/redo)
 - **User Preferences:** `useUserPreferencesStore` - Zustand with localStorage persistence (export format default)
 
@@ -689,6 +694,17 @@ Key JSONB structures stored in PostgreSQL. See `frontend/src/types/` for full Ty
 - Forms: Show field-level validation errors
 - Conditional rendering: Add null checks when node might not exist (`currentNode && currentNode.type`)
 
+### Monochrome Design System Patterns
+
+- **Backgrounds:** Pure black (`bg-black`), subtle radial gradients for depth
+- **Cards:** `glass-card rounded-2xl` (transparent gradient + backdrop-blur), NOT `bg-card border-border`
+- **Buttons:** Primary: `bg-white text-black hover:bg-white/90`. Secondary: `border border-white/10 text-white/60 hover:bg-white/10`
+- **Inputs:** `border-white/10 bg-black/50 text-white` + focus: `border-white/30 ring-white/20`
+- **Text hierarchy:** `text-white` → `text-white/70` → `text-white/40` → `text-white/30`
+- **Borders/dividers:** `border-white/[0.06]` or `border-white/10`
+- **Functional color only:** emerald-400 (success), red-400 (error), yellow-400 (warning), blue-400 (info)
+- **Reference:** `docs/plans/Frontend/DESIGN_SYSTEM_GUIDE.md` and `docs/plans/Frontend/COMPONENT_EXAMPLES.md`
+
 ### TypeScript Type Organization
 
 - New type modules: Create in `types/` directory (e.g., `types/step.ts`)