complete story 12.6
This commit is contained in:
Naser Mansour
parent
45f029a1db
commit
149b3c4e53
|
|
@ -173,7 +173,13 @@ Located in `app/Notifications/`:
|
|||
- **Bilingual required:** All user-facing text needs Arabic and English
|
||||
|
||||
## Design Requirements (from PRD)
|
||||
- **Color scheme:** Charcoal (#4A4A42) + Warm Gray (#C9C4BA), Off-White (#E8E4DC), Deep Black (#1A1A1A)
|
||||
- **Color scheme:**
|
||||
- Dark Forest Green (#2D3624) - Header/Footer backgrounds
|
||||
- Warm Gold (#A68966) - CTA buttons, links, accents
|
||||
- Warm Cream (#F4F1EA) - Main page background
|
||||
- Forest Green (#2D322A) - Headings, body text
|
||||
- Pure White (#FFFFFF) - Card backgrounds
|
||||
- Olive Green (#4A5D23) - Active states
|
||||
- **Bilingual:** Arabic (primary, RTL) / English (LTR)
|
||||
- Professional, elegant aesthetic with botanical/wheat Libra logo
|
||||
- See `docs/brand.md` for complete brand guidelines
|
||||
|
|
|
|||
|
|
@ -1814,10 +1814,16 @@ resources/lang/
|
|||
--font-arabic: 'Cairo', sans-serif;
|
||||
--font-english: 'Montserrat', sans-serif;
|
||||
|
||||
/* Brand colors - Updated in Epic 10 */
|
||||
--color-charcoal: #4A4A42;
|
||||
--color-warm-gray: #C9C4BA;
|
||||
--color-off-white: #E8E4DC;
|
||||
/* Brand colors - Updated in Epic 12 */
|
||||
--color-dark-forest: #2D3624;
|
||||
--color-warm-gold: #A68966;
|
||||
--color-warm-cream: #F4F1EA;
|
||||
--color-forest-green: #2D322A;
|
||||
--color-pure-white: #FFFFFF;
|
||||
--color-olive-green: #4A5D23;
|
||||
--color-primary-light: #3D4634;
|
||||
--color-gold-hover: #8A7555;
|
||||
--color-gold-light: #C4A882;
|
||||
--color-deep-black: #1A1A1A;
|
||||
}
|
||||
|
||||
|
|
@ -3119,14 +3125,20 @@ select, separator, skeleton, switch, text, textarea, tooltip
|
|||
|
||||
### B. Color Palette
|
||||
|
||||
> **Note:** Color palette updated in Epic 10 (Brand Color Refresh).
|
||||
> **Note:** Color palette updated in Epic 12 (Dark Charcoal & Warm Gold refresh).
|
||||
> See `docs/brand.md` for complete brand guidelines.
|
||||
|
||||
| Name | Hex | CSS Variable | Usage |
|
||||
|------|-----|--------------|-------|
|
||||
| Charcoal | `#4A4A42` | `--color-charcoal` | Primary brand, buttons |
|
||||
| Warm Gray | `#C9C4BA` | `--color-warm-gray` | Accents, borders |
|
||||
| Off-White | `#E8E4DC` | `--color-off-white` | Backgrounds, cards |
|
||||
| Dark Forest Green | `#2D3624` | `--color-dark-forest` | Header/Footer backgrounds |
|
||||
| Warm Gold | `#A68966` | `--color-warm-gold` | CTA buttons, links, accents |
|
||||
| Warm Cream | `#F4F1EA` | `--color-warm-cream` | Main page background |
|
||||
| Forest Green | `#2D322A` | `--color-forest-green` | Headings, body text |
|
||||
| Pure White | `#FFFFFF` | `--color-pure-white` | Card backgrounds |
|
||||
| Olive Green | `#4A5D23` | `--color-olive-green` | Active states |
|
||||
| Primary Light | `#3D4634` | `--color-primary-light` | Primary hover states |
|
||||
| Gold Hover | `#8A7555` | `--color-gold-hover` | Button hover states |
|
||||
| Gold Light | `#C4A882` | `--color-gold-light` | Light accents |
|
||||
| Deep Black | `#1A1A1A` | `--color-deep-black` | Text, footer |
|
||||
| Success Green | `#27AE60` | `--color-success` | Success states |
|
||||
| Warning Red | `#E74C3C` | `--color-danger` | Error states |
|
||||
|
|
|
|||
|
|
@ -29,11 +29,25 @@ The logo features a stylized botanical illustration within a square frame. Centr
|
|||
|
||||
## Color Palette
|
||||
|
||||
### Primary Colors
|
||||
|
||||
| Color | Hex Code | Usage |
|
||||
|-------|----------|-------|
|
||||
| Charcoal | `#4A4A42` | Primary backgrounds, text |
|
||||
| Warm Gray | `#C9C4BA` | Secondary backgrounds, accents |
|
||||
| Off-White | `#E8E4DC` | Light backgrounds |
|
||||
| Dark Forest Green | `#2D3624` | Header/Footer backgrounds |
|
||||
| Warm Gold | `#A68966` | CTA buttons, links, accents |
|
||||
| Warm Cream | `#F4F1EA` | Main page background |
|
||||
| Forest Green | `#2D322A` | Headings, body text |
|
||||
| Pure White | `#FFFFFF` | Card backgrounds |
|
||||
| Olive Green | `#4A5D23` | Active states |
|
||||
|
||||
### Color Variants
|
||||
|
||||
| Color | Hex Code | Usage |
|
||||
|-------|----------|-------|
|
||||
| Primary Light | `#3D4634` | Primary hover states |
|
||||
| Gold Hover | `#8A7555` | Button hover states |
|
||||
| Gold Light | `#C4A882` | Light accents |
|
||||
| Olive Hover | `#5A7030` | Olive hover states |
|
||||
| Deep Black | `#1A1A1A` | Logo artwork, headlines |
|
||||
|
||||
---
|
||||
|
|
@ -79,12 +93,12 @@ Maintain clear space around the logo equal to the height of one water droplet el
|
|||
Logo should not appear smaller than 40px in height for digital or 15mm for print.
|
||||
|
||||
### Backgrounds
|
||||
- Use on light neutral backgrounds (off-white, warm gray)
|
||||
- May be reversed to light color on dark charcoal backgrounds
|
||||
- Use on light neutral backgrounds (Warm Cream #F4F1EA, Pure White #FFFFFF)
|
||||
- May be reversed to light color on Dark Forest Green (#2D3624) backgrounds
|
||||
- Avoid busy or patterned backgrounds
|
||||
|
||||
### Badge Style (for colored backgrounds)
|
||||
When the logo appears on olive green or other colored backgrounds (e.g., navigation, footer), apply badge styling to make the logo's beige background look intentional:
|
||||
When the logo appears on Dark Forest Green (#2D3624) or other colored backgrounds (e.g., navigation, footer), apply badge styling to make the logo's cream background look intentional:
|
||||
- Border: 2px solid Deep Black (#1A1A1A)
|
||||
- Shadow: 4px 4px 6px rgba(26, 26, 26, 0.5)
|
||||
- This creates a "seal/stamp" effect that frames the logo professionally
|
||||
|
|
|
|||
|
|
@ -10,9 +10,9 @@ The following SVG files have been updated with the new LIBRA for Rights botanica
|
|||
|
||||
| Source File | Purpose |
|
||||
|-------------|---------|
|
||||
| `public/images/logo.svg` | Primary logo (Deep Black on light backgrounds) |
|
||||
| `public/images/logo-reversed.svg` | Reversed logo (Off-White on dark backgrounds) |
|
||||
| `public/images/logo-mono.svg` | Monochrome logo (Charcoal, single color) |
|
||||
| `public/images/logo.svg` | Primary logo (Forest Green on light backgrounds) |
|
||||
| `public/images/logo-reversed.svg` | Reversed logo (Warm Cream on dark backgrounds) |
|
||||
| `public/images/logo-mono.svg` | Monochrome logo (Deep Black, single color) |
|
||||
| `public/favicon.svg` | Favicon source |
|
||||
|
||||
---
|
||||
|
|
@ -212,10 +212,12 @@ For any manual adjustments, use these exact colors from `docs/brand.md`:
|
|||
|
||||
| Color | Hex Code | Usage |
|
||||
|-------|----------|-------|
|
||||
| Deep Black | `#1A1A1A` | Primary logo artwork |
|
||||
| Charcoal | `#4A4A42` | Monochrome logo, text |
|
||||
| Warm Gray | `#C9C4BA` | Secondary accents |
|
||||
| Off-White | `#E8E4DC` | Reversed logo artwork |
|
||||
| Dark Forest Green | `#2D3624` | Header/Footer backgrounds |
|
||||
| Warm Gold | `#A68966` | CTA buttons, links, accents |
|
||||
| Warm Cream | `#F4F1EA` | Main page background, reversed logo |
|
||||
| Forest Green | `#2D322A` | Headings, body text, primary logo |
|
||||
| Pure White | `#FFFFFF` | Card backgrounds |
|
||||
| Deep Black | `#1A1A1A` | Monochrome logo artwork |
|
||||
|
||||
---
|
||||
|
||||
|
|
@ -251,3 +253,4 @@ Generate from `logo.svg` at appropriate size for email clients (max width ~200px
|
|||
---
|
||||
|
||||
*Generated for Story 10.5: Logo and SVG Assets Update*
|
||||
*Updated for Story 12.6: Brand Documentation Update (Dark Charcoal & Warm Gold)*
|
||||
|
|
|
|||
67
docs/prd.md
67
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: Charcoal with Warm Gray accents (see docs/brand.md)
|
||||
- Color palette: Dark Forest Green with Warm Gold accents (see docs/brand.md)
|
||||
- Libra scales logo prominently displayed
|
||||
- Elegant, refined visual elements
|
||||
- Easy navigation despite sophistication
|
||||
|
|
@ -462,7 +462,7 @@ Central control panel for lawyer to manage all platform operations
|
|||
- Responsive design for tablet use
|
||||
- Arabic-first with English toggle
|
||||
- Clear visual hierarchy
|
||||
- Charcoal and Warm Gray color scheme (see docs/brand.md)
|
||||
- Dark Forest Green and Warm Gold color scheme (see docs/brand.md)
|
||||
|
||||
---
|
||||
|
||||
|
|
@ -511,7 +511,7 @@ Central control panel for lawyer to manage all platform operations
|
|||
- Clear status indicators
|
||||
- Mobile-friendly
|
||||
- Consistent with main site design
|
||||
- Charcoal and Warm Gray color scheme (see docs/brand.md)
|
||||
- Dark Forest Green and Warm Gold color scheme (see docs/brand.md)
|
||||
|
||||
---
|
||||
|
||||
|
|
@ -550,21 +550,30 @@ 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).
|
||||
> **Note:** The color palette was updated in Epic 12 (Dark Charcoal & Warm Gold refresh).
|
||||
> See `docs/brand.md` for complete and current brand guidelines.
|
||||
|
||||
**Primary Colors:**
|
||||
- **Charcoal:** #4A4A42
|
||||
- Usage: Primary brand color, buttons, links, headings
|
||||
- **Dark Forest Green:** #2D3624
|
||||
- Usage: Header/Footer backgrounds
|
||||
- Creates professional, grounded atmosphere
|
||||
|
||||
- **Warm Gray:** #C9C4BA
|
||||
- Usage: Accent elements, secondary buttons, borders, dividers
|
||||
- **Warm Gold:** #A68966
|
||||
- Usage: CTA buttons, links, accents
|
||||
- Represents sophistication, balance, legal authority
|
||||
|
||||
- **Forest Green:** #2D322A
|
||||
- Usage: Headings, body text
|
||||
- Creates refined, professional tone
|
||||
|
||||
**Supporting Colors:**
|
||||
- **Off-White:** #E8E4DC (backgrounds, card backgrounds, hover states)
|
||||
- **Deep Black:** #1A1A1A (text, footer, high-contrast elements)
|
||||
- **Warm Cream:** #F4F1EA (main page background)
|
||||
- **Pure White:** #FFFFFF (card backgrounds)
|
||||
- **Olive Green:** #4A5D23 (active states)
|
||||
- **Primary Light:** #3D4634 (primary hover states)
|
||||
- **Gold Hover:** #8A7555 (button hover states)
|
||||
- **Gold Light:** #C4A882 (light accents)
|
||||
- **Deep Black:** #1A1A1A (logo artwork, headlines)
|
||||
- **Success Green:** #27AE60 (approved status, success messages)
|
||||
- **Warning Red:** #E74C3C (rejected status, error messages)
|
||||
- **Pending Yellow:** #F39C12 (pending status indicators)
|
||||
|
|
@ -589,8 +598,8 @@ 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:
|
||||
- Charcoal on Off-White - primary use
|
||||
- Off-White on Charcoal - for dark sections
|
||||
- Forest Green on Warm Cream - primary use
|
||||
- Warm Cream on Dark Forest Green - for dark sections
|
||||
- Monochrome Deep Black - for special applications
|
||||
|
||||
#### C. Typography
|
||||
|
|
@ -616,38 +625,38 @@ Central control panel for lawyer to manage all platform operations
|
|||
#### D. Visual Elements
|
||||
|
||||
**Accent Usage:**
|
||||
- Primary action buttons (solid Charcoal background)
|
||||
- Secondary buttons (Warm Gray outline)
|
||||
- Links and hover states
|
||||
- Primary action buttons (solid Warm Gold background)
|
||||
- Secondary buttons (Dark Forest Green outline)
|
||||
- Links and hover states (Warm Gold)
|
||||
- Decorative dividers between sections
|
||||
- Icon highlights
|
||||
- Active state indicators
|
||||
- Active state indicators (Olive Green)
|
||||
- Border highlights on cards
|
||||
|
||||
**Cards & Containers:**
|
||||
- Subtle box-shadow: 0 2px 8px rgba(0,0,0,0.1)
|
||||
- Border-radius: 8px for consistency
|
||||
- Card backgrounds: Off-White (#E8E4DC) on page background
|
||||
- Card backgrounds: Pure White (#FFFFFF) on Warm Cream page background
|
||||
- Padding: 24px standard internal padding
|
||||
|
||||
**Icons:**
|
||||
- Style: Line-based, minimalist (e.g., Feather Icons or Bootstrap Icons)
|
||||
- Color: Charcoal for primary actions, Warm Gray for secondary
|
||||
- Color: Forest Green for primary actions, Warm Gold for accents
|
||||
- Size: 24px standard, 32px for featured icons
|
||||
|
||||
**Buttons:**
|
||||
- **Primary Button:**
|
||||
- Background: Charcoal (#4A4A42)
|
||||
- Text: Off-White (#E8E4DC)
|
||||
- Hover: Deep Black (#1A1A1A)
|
||||
- Background: Warm Gold (#A68966)
|
||||
- Text: Pure White (#FFFFFF)
|
||||
- Hover: Gold Hover (#8A7555)
|
||||
- Border-radius: 6px
|
||||
- Padding: 12px 24px
|
||||
|
||||
- **Secondary Button:**
|
||||
- Background: Transparent
|
||||
- Border: 2px solid Warm Gray (#C9C4BA)
|
||||
- Text: Charcoal (#4A4A42)
|
||||
- Hover: Warm Gray background with Charcoal text
|
||||
- Border: 2px solid Dark Forest Green (#2D3624)
|
||||
- Text: Forest Green (#2D322A)
|
||||
- Hover: Primary Light (#3D4634) background with white text
|
||||
|
||||
- **Disabled State:**
|
||||
- Background: #CCCCCC
|
||||
|
|
@ -655,7 +664,7 @@ Central control panel for lawyer to manage all platform operations
|
|||
- No hover effect
|
||||
|
||||
**Background Patterns (Optional):**
|
||||
- Subtle texture or geometric pattern on Off-White backgrounds
|
||||
- Subtle texture or geometric pattern on Warm Cream backgrounds
|
||||
- Very low opacity (5-10%) to add depth without distraction
|
||||
- Botanical/wheat motif integrated subtly if desired
|
||||
|
||||
|
|
@ -737,13 +746,13 @@ All emails in both Arabic and English based on user preference:
|
|||
3. **Guest Booking Rejected** - With reason (if provided)
|
||||
|
||||
### 8.3 Email Requirements
|
||||
- Professional email templates matching brand design (Charcoal & Warm Gray)
|
||||
- Professional email templates matching brand design (Dark Forest Green & Warm Gold)
|
||||
- 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 (Charcoal) where applicable
|
||||
- Call-to-action buttons (Warm Gold) where applicable
|
||||
- Footer with firm contact information
|
||||
|
||||
---
|
||||
|
|
@ -908,7 +917,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 (Charcoal & Warm Gray palette)
|
||||
- Professional design implementation (Dark Forest Green & Warm Gold palette)
|
||||
- UI/UX refinement
|
||||
- Responsive design testing
|
||||
- RTL/LTR layout perfection
|
||||
|
|
@ -945,7 +954,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 Charcoal and Warm Gray branding
|
||||
- Professional, polished appearance with Dark Forest Green and Warm Gold branding
|
||||
- Logo properly integrated throughout
|
||||
- Easy to use for non-technical users
|
||||
- Positive feedback from lawyer/admin
|
||||
|
|
|
|||
|
|
@ -125,16 +125,16 @@ Replace the existing color scheme section with:
|
|||
|
||||
## Dev Checklist
|
||||
|
||||
- [ ] Update `docs/brand.md` color palette section
|
||||
- [ ] Update `docs/brand.md` color usage guidelines
|
||||
- [ ] Update `CLAUDE.md` Design Requirements section
|
||||
- [ ] Review `docs/architecture.md` for color references
|
||||
- [ ] Review `docs/prd.md` for color references
|
||||
- [ ] Update `PdfBrandColorsTest.php` assertions
|
||||
- [ ] Review other test files for color assertions
|
||||
- [ ] Update CSS comments in `app.css`
|
||||
- [ ] Review `docs/logo-generation-instructions.md` if exists
|
||||
- [ ] Final review of all documentation for consistency
|
||||
- [x] Update `docs/brand.md` color palette section
|
||||
- [x] Update `docs/brand.md` color usage guidelines
|
||||
- [x] Update `CLAUDE.md` Design Requirements section
|
||||
- [x] Review `docs/architecture.md` for color references
|
||||
- [x] Review `docs/prd.md` for color references
|
||||
- [x] Update `PdfBrandColorsTest.php` assertions
|
||||
- [x] Review other test files for color assertions
|
||||
- [x] Update CSS comments in `app.css`
|
||||
- [x] Review `docs/logo-generation-instructions.md` if exists
|
||||
- [x] Final review of all documentation for consistency
|
||||
|
||||
## Estimation
|
||||
|
||||
|
|
@ -151,19 +151,31 @@ Replace the existing color scheme section with:
|
|||
## Dev Agent Record
|
||||
|
||||
### Status
|
||||
Not Started - Blocked (waiting for Stories 12.2-12.5 completion)
|
||||
Ready for Review
|
||||
|
||||
### Agent Model Used
|
||||
(To be filled during implementation)
|
||||
Claude Opus 4.5
|
||||
|
||||
### File List
|
||||
(To be filled during implementation)
|
||||
- `docs/brand.md` - Updated color palette section with new Dark Forest Green & Warm Gold palette
|
||||
- `CLAUDE.md` - Updated Design Requirements section with new color scheme
|
||||
- `docs/architecture.md` - Updated CSS theme variables and color palette reference table
|
||||
- `docs/prd.md` - Updated all color references throughout (color palette, buttons, logo specs, visual elements)
|
||||
- `tests/Feature/AccessibilityComplianceTest.php` - Updated WCAG color contrast tests for new palette
|
||||
- `docs/logo-generation-instructions.md` - Updated brand color reference section
|
||||
|
||||
### Change Log
|
||||
|
||||
| Date | Change |
|
||||
|------|--------|
|
||||
| 2026-01-04 | Story created for documenting new Dark Charcoal & Warm Gold palette |
|
||||
| 2026-01-04 | Completed all documentation updates for new brand colors |
|
||||
|
||||
### Completion Notes
|
||||
(To be filled during implementation)
|
||||
- All documentation files updated to reference new Dark Forest Green (#2D3624) and Warm Gold (#A68966) palette
|
||||
- Replaced all old color references (Charcoal #4A4A42, Warm Gray #C9C4BA, Off-White #E8E4DC)
|
||||
- Updated test assertions in AccessibilityComplianceTest.php to match new CSS variable values
|
||||
- PdfBrandColorsTest.php was already updated in previous stories (12.2-12.5)
|
||||
- CSS app.css already had correct comments from Story 12.2 implementation
|
||||
- All color-related tests pass (5 WCAG Color Contrast tests, 6 PDF Brand Color tests)
|
||||
- Note: Some pre-existing test failures in AccessibilityComplianceTest.php unrelated to this story (role="main" landmark issues)
|
||||
|
|
|
|||
|
|
@ -240,28 +240,28 @@ describe('RTL Accessibility Support', function () {
|
|||
});
|
||||
|
||||
describe('WCAG Color Contrast', function () {
|
||||
test('primary color (Charcoal) is defined in theme', function () {
|
||||
test('primary color (Dark Forest Green) is defined in theme', function () {
|
||||
$cssContent = file_get_contents(resource_path('css/app.css'));
|
||||
|
||||
expect($cssContent)->toContain('--color-primary: #4A4A42');
|
||||
expect($cssContent)->toContain('--color-primary: #2D3624');
|
||||
});
|
||||
|
||||
test('accent color (Warm Gray) is defined in theme', function () {
|
||||
test('CTA color (Warm Gold) is defined in theme', function () {
|
||||
$cssContent = file_get_contents(resource_path('css/app.css'));
|
||||
|
||||
expect($cssContent)->toContain('--color-accent: #C9C4BA');
|
||||
expect($cssContent)->toContain('--color-cta: #A68966');
|
||||
});
|
||||
|
||||
test('background color (Off-White) is defined', function () {
|
||||
test('background color (Warm Cream) is defined', function () {
|
||||
$cssContent = file_get_contents(resource_path('css/app.css'));
|
||||
|
||||
expect($cssContent)->toContain('--color-background: #E8E4DC');
|
||||
expect($cssContent)->toContain('--color-background: #F4F1EA');
|
||||
});
|
||||
|
||||
test('text color (Deep Black) is defined', function () {
|
||||
test('text color (Forest Green) is defined', function () {
|
||||
$cssContent = file_get_contents(resource_path('css/app.css'));
|
||||
|
||||
expect($cssContent)->toContain('--color-text: #1A1A1A');
|
||||
expect($cssContent)->toContain('--color-text: #2D322A');
|
||||
});
|
||||
|
||||
test('backward-compatible color aliases exist', function () {
|
||||
|
|
@ -269,8 +269,8 @@ describe('WCAG Color Contrast', function () {
|
|||
|
||||
// Legacy color names should be aliased to new colors
|
||||
expect($cssContent)->toContain('--color-navy: var(--color-primary)');
|
||||
expect($cssContent)->toContain('--color-gold: var(--color-accent)');
|
||||
expect($cssContent)->toContain('--color-gold: var(--color-cta)');
|
||||
expect($cssContent)->toContain('--color-cream: var(--color-background)');
|
||||
expect($cssContent)->toContain('--color-charcoal: var(--color-text)');
|
||||
expect($cssContent)->toContain('--color-charcoal: var(--color-primary)');
|
||||
});
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in New Issue