libra/docs/stories/story-12.6-documentation-up...

6.0 KiB

Story 12.6: Brand Documentation and Cleanup

Story

As a developer/designer I want to update brand documentation to reflect the new logo and olive green color scheme So that future development maintains consistent branding

Acceptance Criteria

AC1: Brand Guide Updated

Given docs/brand.md contains old color palette and logo description When I update the document Then it reflects the new branding:

Updated Color Palette:

Color Hex Code Usage
Olive Green #8AB357 Primary brand color, backgrounds, accents
Darker Olive #7AA347 Hover states
Dark Olive #6A9337 Active states, headings
Light Olive #A5C87A Secondary backgrounds, borders
Pale Olive #C5D9A5 Subtle backgrounds
Off-White #E8E4DC Light backgrounds
Deep Black #1A1A1A Text, headings

Updated Logo Description:

  • Square format featuring Palestinian tatreez (embroidery) patterns
  • Central botanical/olive motif
  • "LIBRA FOR RIGHTS" text integrated into design
  • Palestinian flag accent
  • Cultural heritage elements

AC2: Logo Generation Instructions Updated

Given docs/logo-generation-instructions.md describes horizontal logo generation When I update the document Then it reflects square logo format:

  • Update dimensions to square format
  • Update file naming conventions
  • Remove references to horizontal aspect ratio
  • Update tool instructions for square export

AC3: CLAUDE.md Updated

Given CLAUDE.md contains color scheme reference When I review and update if needed Then the design requirements section reflects:

  • New olive green color palette
  • Square logo format
  • Palestinian tatreez design elements

AC4: Architecture Documentation Updated

Given architecture docs may reference brand colors When I review architecture documentation Then any color references are updated to olive palette

AC5: Old Logo Files Archived/Removed

Given old SVG logo files exist in the repository When documentation is complete Then old files are handled appropriately:

  • public/images/logo.svg - Remove or archive
  • public/images/logo-reversed.svg - Remove or archive
  • public/images/logo-mono.svg - Remove or archive
  • public/favicon.svg - Remove or archive

Note: Keep git history for reference; no need to purge from history

AC6: Logo Folder Cleanup

Given logo files were generated in logo/ folder When deployment is complete Then the logo/ folder is removed (files moved to public/)

AC7: README Updated (if applicable)

Given README may contain branding information When I review README.md Then any visual/branding references are current

AC8: Test Assertions Updated

Given tests may contain color value assertions When I review test files Then color assertions use new olive palette values:

  • AccessibilityComplianceTest.php
  • Any component tests with color assertions
  • Email template tests
  • PDF template tests

Technical Notes

Files to Update

Documentation:

  • docs/brand.md - Full brand guide update
  • docs/logo-generation-instructions.md - Update for square format
  • CLAUDE.md - Update design requirements section

Tests to Review:

  • tests/Feature/AccessibilityComplianceTest.php
  • tests/Feature/Components/ - Any color assertions
  • tests/Feature/Mail/EmailTemplateColorsTest.php
  • tests/Feature/Admin/PdfBrandColorsTest.php

New Brand Guide Content

## Color Palette

| Color | Hex Code | Usage |
|-------|----------|-------|
| Olive Green | `#8AB357` | Primary brand color |
| Darker Olive | `#7AA347` | Hover states |
| Dark Olive | `#6A9337` | Active states |
| Light Olive | `#A5C87A` | Secondary accents |
| Pale Olive | `#C5D9A5` | Subtle backgrounds |
| Off-White | `#E8E4DC` | Light backgrounds |
| Deep Black | `#1A1A1A` | Text, headings |

## Logo

### Description
The logo features a square design incorporating Palestinian tatreez (traditional embroidery)
patterns with a central botanical/olive motif. The design represents:
- **Tatreez Patterns:** Palestinian cultural heritage and identity
- **Olive Branch:** Peace, dignity, and connection to the land
- **"LIBRA FOR RIGHTS":** Organization name and mission
- **Palestinian Flag:** National identity accent

### Logo Style
- Square format
- Traditional embroidery-inspired patterns
- Botanical/organic central element
- Deep black and olive green color scheme
- Cultural authenticity with modern presentation

Files to Remove

# Old logo files to remove after verification
rm public/images/logo.svg
rm public/images/logo-reversed.svg
rm public/images/logo-mono.svg
rm public/favicon.svg

# Temporary logo folder to remove
rm -rf logo/

Test Color Value Updates

// Old assertions
$this->assertStringContainsString('#4A4A42', $content);
$this->assertStringContainsString('#C9C4BA', $content);

// New assertions
$this->assertStringContainsString('#8AB357', $content);
$this->assertStringContainsString('#A5C87A', $content);

Dev Checklist

  • Update docs/brand.md with new color palette
  • Update docs/brand.md with new logo description
  • Update docs/logo-generation-instructions.md for square format
  • Review and update CLAUDE.md design requirements
  • Review architecture documentation for color references
  • Update AccessibilityComplianceTest.php color assertions
  • Update EmailTemplateColorsTest.php color assertions
  • Update PdfBrandColorsTest.php color assertions
  • Review and update any other test color assertions
  • Remove old SVG logo files from public/images/
  • Remove old public/favicon.svg
  • Remove temporary logo/ folder
  • Verify all tests pass with new color values
  • Final visual review of documentation

Estimation

Complexity: Low Risk: Low - Documentation and cleanup tasks

Dependencies

  • All other Epic 12 stories should be completed before final cleanup
  • This story should be completed last in the epic