generated logo and a new epic with stories for logo implimintation and color changing
This commit is contained in:
Naser Mansour
@@ -0,0 +1,193 @@
|
||||
# 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
|
||||
|
||||
```markdown
|
||||
## 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
|
||||
|
||||
```bash
|
||||
# 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
|
||||
|
||||
```php
|
||||
// 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
|
||||
Reference in New Issue
Block a user