From 2bd47004e7ea309255588092ca113fe2831d8560 Mon Sep 17 00:00:00 2001 From: chihlasm Date: Mon, 9 Feb 2026 22:41:26 -0500 Subject: [PATCH] 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 --- CLAUDE.md | 44 ++++++++++++++++++++++++++++++-------------- 1 file changed, 30 insertions(+), 14 deletions(-) diff --git a/CLAUDE.md b/CLAUDE.md index 4046edbe..52342af2 100644 --- a/CLAUDE.md +++ b/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`)