# Epic 12: Branding Refresh - Logo and Color Scheme Update

## Epic Goal

Update the LIBRA for Rights brand identity by implementing the new square logo with Palestinian tatreez patterns and transitioning the color scheme from charcoal/warm gray to an olive green palette that aligns with the new botanical logo design.

## Epic Description

### Existing System Context

- **Current relevant functionality:** The application uses a horizontal SVG logo (240×60px) in navbar and footer, with a color scheme based on Charcoal (#4A4A42) and Warm Gray (#C9C4BA)
- **Technology stack:** Laravel 12, Livewire 3, Tailwind CSS 4, Flux UI components
- **Integration points:** Logo appears in navbar, footer, emails, and favicon. Colors are defined in Tailwind config and used throughout Blade components.

### Enhancement Details

**What's being added/changed:**

1. Replace horizontal SVG logo with new square logo featuring Palestinian tatreez (embroidery) patterns
2. Update color palette from charcoal/warm gray to olive green theme
3. Adjust CSS/layouts to accommodate square logo dimensions
4. Update all brand assets (favicon, mobile icons, email logo)

**New Color Palette:**

| Color | Old Hex | New Hex | Usage |
|-------|---------|---------|-------|
| Primary | #4A4A42 (Charcoal) | #8AB357 (Olive Green) | Primary backgrounds, accents |
| Secondary | #C9C4BA (Warm Gray) | #A5C87A (Light Olive) | Secondary backgrounds, borders |
| Background | #E8E4DC (Off-White) | #E8E4DC (Off-White) | Light backgrounds (unchanged) |
| Text | #1A1A1A (Deep Black) | #1A1A1A (Deep Black) | Text, headings (unchanged) |

**How it integrates:**

- Logo files will be placed in `public/images/` replacing existing SVG files
- Tailwind CSS color configuration will be updated
- Existing Blade components will automatically use new colors via CSS variables

**Success criteria:**

- New square logo displays correctly in navbar and footer
- Color scheme consistently uses olive green palette across all pages
- All favicon and mobile app icons updated
- No visual regressions in existing UI components

## Stories

### Story 12.1: Logo Asset Deployment and CSS Layout Updates
**File:** `story-12.1-logo-asset-deployment.md`

Deploy the new square logo files and update CSS to accommodate square dimensions in navbar, footer, and auth pages. Includes favicon and mobile app icon deployment.

### Story 12.2: Core CSS Theme Update - Olive Green Palette
**File:** `story-12.2-core-css-theme-update.md`

Update Tailwind CSS theme variables from charcoal/warm gray to olive green palette. Add color variants for hover, active, and light states. Maintain backward compatibility aliases.

### Story 12.3: Blade Component Color Migration
**File:** `story-12.3-blade-component-color-migration.md`

Update all Blade components and pages to use the new olive green palette. Includes navigation, footer, cards, public pages, admin dashboard, and client dashboard components.

### Story 12.4: Email Template Color and Logo Update
**File:** `story-12.4-email-template-color-update.md`

Update email templates to use new olive green colors and square logo. Includes theme CSS, header/footer components, button styles, and all notification emails.

### Story 12.5: PDF Template Color and Logo Update
**File:** `story-12.5-pdf-template-color-update.md`

Update PDF export templates to use new olive green colors and square logo. Includes users export, consultations export, timelines export, and monthly report. Update chart colors in MonthlyReportService.

### Story 12.6: Brand Documentation and Cleanup
**File:** `story-12.6-documentation-update.md`

Update brand documentation (`docs/brand.md`, `docs/logo-generation-instructions.md`, `CLAUDE.md`) to reflect new branding. Update test color assertions. Remove old logo files and cleanup.

## Compatibility Requirements

- [x] Existing APIs remain unchanged
- [x] Database schema changes are backward compatible (N/A - no DB changes)
- [x] UI changes follow existing patterns
- [x] Performance impact is minimal

## Risk Mitigation

- **Primary Risk:** Color changes may affect accessibility (contrast ratios)
- **Mitigation:** Test all color combinations for WCAG AA compliance; adjust shades if needed
- **Rollback Plan:** Git revert to previous commit; old logo files preserved in git history

## Definition of Done

- [ ] All stories completed with acceptance criteria met
- [ ] New logo displays correctly across all pages and devices
- [ ] Color scheme is consistent throughout the application
- [ ] Brand documentation is updated
- [ ] No regression in existing features
- [ ] Visual QA completed on major pages

## Technical Notes

### Logo Files Generated

Located in `logo/` folder, ready for deployment:

| File | Dimensions | Target Location |
|------|------------|-----------------|
| `favicon.ico` | 16/32/48px | `public/favicon.ico` |
| `favicon-16x16.png` | 16×16 | `public/favicon-16x16.png` |
| `favicon-32x32.png` | 32×32 | `public/favicon-32x32.png` |
| `apple-touch-icon.png` | 180×180 | `public/apple-touch-icon.png` |
| `android-chrome-192x192.png` | 192×192 | `public/android-chrome-192x192.png` |
| `android-chrome-512x512.png` | 512×512 | `public/android-chrome-512x512.png` |
| `logo-square.png` | 623×628 | `public/images/logo.png` |
| `logo-email.png` | 200×200 | `public/images/logo-email.png` |

### Color Values for Implementation

```css
/* New Olive Green Palette */
--color-primary: #8AB357;      /* Olive Green - replaces Charcoal */
--color-secondary: #A5C87A;    /* Light Olive - replaces Warm Gray */
--color-background: #E8E4DC;   /* Off-White - unchanged */
--color-text: #1A1A1A;         /* Deep Black - unchanged */

/* Additional olive variants for UI states */
--color-primary-hover: #7AA347;   /* Darker olive for hover states */
--color-primary-dark: #6A9337;    /* Dark olive for active/pressed */
--color-primary-light: #B5D88A;   /* Light olive for highlights */
```

## Dependencies

- Logo files already generated in `logo/` folder
- No external dependencies required