136 lines
5.9 KiB
Markdown
136 lines
5.9 KiB
Markdown
# 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
|