naser
/
libra
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
libra/docs/stories/epic-12-branding-refresh.md

5.9 KiB
Raw Blame History

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

  • Existing APIs remain unchanged
  • Database schema changes are backward compatible (N/A - no DB changes)
  • UI changes follow existing patterns
  • 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

/* 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