complete story 10.6

docs/prd.md

@@ -83,7 +83,7 @@ Libra Law Firm requires a professional, bilingual (Arabic/English) web platform
 - Highly professional aesthetic
 - Detail-oriented with polished elements
 - Clean lines and sophisticated typography
-- Color palette: Dark Navy Blue background with Gold accents
+- Color palette: Charcoal with Warm Gray accents (see docs/brand.md)
 - Libra scales logo prominently displayed
 - Elegant, refined visual elements
 - Easy navigation despite sophistication
@@ -415,7 +415,7 @@ Central control panel for lawyer to manage all platform operations
 - Responsive design for tablet use
 - Arabic-first with English toggle
 - Clear visual hierarchy
-- Dark navy blue and gold color scheme
+- Charcoal and Warm Gray color scheme (see docs/brand.md)
 
 ---
 
@@ -464,7 +464,7 @@ Central control panel for lawyer to manage all platform operations
 - Clear status indicators
 - Mobile-friendly
 - Consistent with main site design
-- Dark navy blue and gold color scheme
+- Charcoal and Warm Gray color scheme (see docs/brand.md)
 
 ---
 
@@ -503,19 +503,21 @@ Central control panel for lawyer to manage all platform operations
 
 #### A. Color Palette
 
+> **Note:** The color palette was updated in Epic 10 (Brand Color Refresh).
+> See `docs/brand.md` for complete and current brand guidelines.
+
 **Primary Colors:**
-- **Dark Navy Blue:** #0A1F44
-  - Usage: Main background, header, footer, primary sections
-  - Creates professional, trustworthy atmosphere
-  
-- **Gold/Brass:** #D4AF37
-  - Usage: Accent elements, buttons, links, icons, dividers
-  - Represents prestige, excellence, legal authority
+- **Charcoal:** #4A4A42
+  - Usage: Primary brand color, buttons, links, headings
+  - Creates professional, grounded atmosphere
+
+- **Warm Gray:** #C9C4BA
+  - Usage: Accent elements, secondary buttons, borders, dividers
+  - Represents sophistication, balance, legal authority
 
 **Supporting Colors:**
-- **Light Gold:** #F4E4B8 (hover states, subtle highlights)
-- **Off-White/Cream:** #F9F7F4 (text on dark backgrounds, card backgrounds)
-- **Charcoal Gray:** #2C3E50 (secondary text, borders)
+- **Off-White:** #E8E4DC (backgrounds, card backgrounds, hover states)
+- **Deep Black:** #1A1A1A (text, footer, high-contrast elements)
 - **Success Green:** #27AE60 (approved status, success messages)
 - **Warning Red:** #E74C3C (rejected status, error messages)
 - **Pending Yellow:** #F39C12 (pending status indicators)
@@ -527,9 +529,9 @@ Central control panel for lawyer to manage all platform operations
 
 #### B. Logo Usage
 
-**Libra Scales Symbol:**
-- Primary logo featuring Libra scales in gold on navy background
-- Symbol represents justice, balance, and fairness
+**Botanical/Wheat Libra Symbol:**
+- Primary logo featuring botanical wheat stalks forming Libra scales
+- Symbol represents growth, balance, and natural justice
 - Logo placement:
   - Top left corner of navigation (desktop)
   - Centered in mobile navigation
@@ -540,9 +542,9 @@ Central control panel for lawyer to manage all platform operations
 - Clear space: Minimum 20px padding on all sides
 - Acceptable formats: SVG (primary), PNG (fallback)
 - Color variations:
-  - Full color (gold on navy) - primary use
-  - Reversed (navy on light background) - for light sections
-  - Monochrome gold - for special applications
+  - Charcoal on Off-White - primary use
+  - Off-White on Charcoal - for dark sections
+  - Monochrome Deep Black - for special applications
 
 #### C. Typography
 
@@ -566,9 +568,9 @@ Central control panel for lawyer to manage all platform operations
 
 #### D. Visual Elements
 
-**Gold Accent Usage:**
-- Primary action buttons (solid gold background)
-- Secondary buttons (gold outline)
+**Accent Usage:**
+- Primary action buttons (solid Charcoal background)
+- Secondary buttons (Warm Gray outline)
 - Links and hover states
 - Decorative dividers between sections
 - Icon highlights
@@ -578,37 +580,37 @@ Central control panel for lawyer to manage all platform operations
 **Cards & Containers:**
 - Subtle box-shadow: 0 2px 8px rgba(0,0,0,0.1)
 - Border-radius: 8px for consistency
-- Card backgrounds: Off-white/cream on navy page background
+- Card backgrounds: Off-White (#E8E4DC) on page background
 - Padding: 24px standard internal padding
 
 **Icons:**
 - Style: Line-based, minimalist (e.g., Feather Icons or Bootstrap Icons)
-- Color: Gold for primary actions, charcoal for secondary
+- Color: Charcoal for primary actions, Warm Gray for secondary
 - Size: 24px standard, 32px for featured icons
 
 **Buttons:**
-- **Primary Button:** 
-  - Background: Gold (#D4AF37)
-  - Text: Dark Navy Blue
-  - Hover: Light Gold (#F4E4B8)
+- **Primary Button:**
+  - Background: Charcoal (#4A4A42)
+  - Text: Off-White (#E8E4DC)
+  - Hover: Deep Black (#1A1A1A)
   - Border-radius: 6px
   - Padding: 12px 24px
-  
+
 - **Secondary Button:**
   - Background: Transparent
-  - Border: 2px solid Gold
-  - Text: Gold
-  - Hover: Gold background with Navy text
-  
+  - Border: 2px solid Warm Gray (#C9C4BA)
+  - Text: Charcoal (#4A4A42)
+  - Hover: Warm Gray background with Charcoal text
+
 - **Disabled State:**
   - Background: #CCCCCC
   - Text: #666666
   - No hover effect
 
 **Background Patterns (Optional):**
-- Subtle texture or geometric pattern on navy backgrounds
+- Subtle texture or geometric pattern on Off-White backgrounds
 - Very low opacity (5-10%) to add depth without distraction
-- Scales/justice motif integrated subtly if desired
+- Botanical/wheat motif integrated subtly if desired
 
 #### E. Spacing & Layout
 
@@ -683,13 +685,13 @@ All emails in both Arabic and English based on user preference:
 2. **System Notifications** - Critical system events
 
 ### 8.3 Email Requirements
-- Professional email templates matching brand design (navy blue & gold)
+- Professional email templates matching brand design (Charcoal & Warm Gray)
 - Mobile-responsive email layout
 - Plain text fallback
 - Clear subject lines (bilingual based on user preference)
 - Logo and branding elements in header
 - Consistent typography and spacing
-- Call-to-action buttons (gold) where applicable
+- Call-to-action buttons (Charcoal) where applicable
 - Footer with firm contact information
 
 ---
@@ -854,7 +856,7 @@ All emails in both Arabic and English based on user preference:
 
 ### Phase 7: Design & Branding (Week 5-6)
 - Logo integration and brand identity implementation
-- Professional design implementation (navy blue & gold)
+- Professional design implementation (Charcoal & Warm Gray palette)
 - UI/UX refinement
 - Responsive design testing
 - RTL/LTR layout perfection
@@ -891,7 +893,7 @@ All emails in both Arabic and English based on user preference:
 - Exports generate correctly (CSV, PDF)
 
 ### 13.2 Design Success
-- Professional, polished appearance with navy blue and gold branding
+- Professional, polished appearance with Charcoal and Warm Gray branding
 - Logo properly integrated throughout
 - Easy to use for non-technical users
 - Positive feedback from lawyer/admin