From 293ceaa9e97da2437c4f4a9a5cbcd7a9b9ebb390 Mon Sep 17 00:00:00 2001 From: chihlasm Date: Sun, 15 Feb 2026 22:48:20 -0500 Subject: [PATCH] docs: update CLAUDE.md design system section to match new patterns Replace outdated monochrome design system reference with current purple gradient accent tokens (bg-card, border-border, text-foreground, bg-gradient-brand, etc.). Co-Authored-By: Claude Opus 4.6 --- CLAUDE.md | 20 ++++++++++++-------- 1 file changed, 12 insertions(+), 8 deletions(-) diff --git a/CLAUDE.md b/CLAUDE.md index 40dd0e05..d4c1fe89 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -1,6 +1,6 @@ # CLAUDE.md - Patherly / ResolutionFlow Project Context -> **Last Updated:** February 14, 2026 +> **Last Updated:** February 15, 2026 --- @@ -262,15 +262,19 @@ navigate(`/trees/${newTree.id}/edit`) --- -## Monochrome Design System +## Design System (Purple Gradient Accent) -- **Backgrounds:** `bg-black`, subtle radial gradients -- **Cards:** `glass-card rounded-2xl` (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:** `text-white` → `text-white/70` → `text-white/40` → `text-white/30` -- **Borders:** `border-white/[0.06]` or `border-white/10` +- **Theme:** Dark-only, purple gradient accents — NO monochrome `text-white/N` or `glass-card` patterns +- **Backgrounds:** `bg-background` (page), `bg-card` (cards/inputs/modals) +- **Cards:** `bg-card border border-border rounded-xl` +- **Buttons:** Primary: `bg-gradient-brand text-white shadow-lg shadow-primary/20 hover:opacity-90`. Secondary: `border border-border text-muted-foreground hover:bg-accent hover:text-foreground` +- **Inputs:** `border-border bg-card text-foreground placeholder:text-muted-foreground` + focus: `focus:border-primary focus:ring-1 focus:ring-primary/20` +- **Text:** `text-foreground` → `text-muted-foreground` (two levels only) +- **Borders:** `border-border` (single token, not opacity variants) +- **Hover states:** `hover:bg-accent` (backgrounds), `hover:text-foreground` (text) +- **Active/selected:** `bg-accent text-foreground` or `border-primary/30 bg-primary/10` - **Functional color only:** emerald-400 (success), red-400 (error), yellow-400 (warning), blue-400 (info) +- **CSS variables:** Defined in `index.css` `:root` — `--primary`, `--card`, `--border`, `--accent`, `--muted-foreground`, etc. ---