updates storys 12.2-12.6 for reimplimintation
This commit is contained in:
Naser Mansour
@@ -1,193 +1,168 @@
|
||||
# Story 12.6: Brand Documentation and Cleanup
|
||||
# Story 12.6: Brand Documentation Update - Dark Charcoal & Warm Gold
|
||||
|
||||
## 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
|
||||
**As a** developer
|
||||
**I want to** update all brand documentation to reflect the new dark charcoal and warm gold color palette
|
||||
**So that** documentation accurately represents the current brand identity
|
||||
|
||||
## Acceptance Criteria
|
||||
|
||||
### AC1: Brand Guide Updated
|
||||
### AC1: Update `docs/brand.md`
|
||||
|
||||
**Given** `docs/brand.md` contains old color palette and logo description
|
||||
**When** I update the document
|
||||
**Then** it reflects the new branding:
|
||||
**Given** the brand documentation references old colors
|
||||
**When** I update the file
|
||||
**Then** the following sections are updated:
|
||||
- Color palette section with new hex values
|
||||
- Color usage guidelines
|
||||
- Any color swatches or examples
|
||||
|
||||
**Updated Color Palette:**
|
||||
**New 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 |
|
||||
| Color Name | Hex | Usage |
|
||||
|------------|-----|-------|
|
||||
| Dark Charcoal | `#1B1D1A` | Header/Footer backgrounds |
|
||||
| Warm Gold | `#A68966` | CTA buttons, links, accents |
|
||||
| Warm Cream | `#F4F1EA` | Main page background |
|
||||
| Forest Green | `#2D322A` | Headings, body text |
|
||||
| Pure White | `#FFFFFF` | Card backgrounds |
|
||||
| Olive Green | `#4A5D23` | Active states |
|
||||
| Gold Hover | `#8A7555` | Button hover states |
|
||||
| Gold Light | `#C4A882` | Light accents |
|
||||
|
||||
**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: Update `CLAUDE.md`
|
||||
|
||||
### AC2: Logo Generation Instructions Updated
|
||||
**Given** CLAUDE.md contains design requirements with old colors
|
||||
**When** I update the file
|
||||
**Then** the Design Requirements section reflects new palette:
|
||||
- Update color scheme description
|
||||
- Update hex values
|
||||
- Maintain bilingual requirement notes
|
||||
|
||||
**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
|
||||
### AC3: Update `docs/architecture.md` (if applicable)
|
||||
|
||||
**Given** architecture docs may reference brand colors
|
||||
**When** I review architecture documentation
|
||||
**Then** any color references are updated to olive palette
|
||||
**When** I review the file
|
||||
**Then** any color references are updated to new palette
|
||||
|
||||
### AC5: Old Logo Files Archived/Removed
|
||||
### AC4: Update `docs/prd.md` (if applicable)
|
||||
|
||||
**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
|
||||
**Given** PRD may reference brand colors
|
||||
**When** I review the file
|
||||
**Then** any color references are updated to new palette
|
||||
|
||||
**Note:** Keep git history for reference; no need to purge from history
|
||||
### AC5: Update Test Color Assertions
|
||||
|
||||
### 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
|
||||
**Given** tests may assert specific color values
|
||||
**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
|
||||
**Then** color assertions are updated:
|
||||
- `tests/Feature/Admin/PdfBrandColorsTest.php`
|
||||
- Any other tests checking brand colors
|
||||
|
||||
### AC6: Review and Update Code Comments
|
||||
|
||||
**Given** code comments may reference old color names
|
||||
**When** I review key files
|
||||
**Then** comments are updated:
|
||||
- `resources/css/app.css` - CSS comments
|
||||
- Any inline style comments in Blade files
|
||||
|
||||
### AC7: Update Logo Generation Instructions (if exists)
|
||||
|
||||
**Given** `docs/logo-generation-instructions.md` may exist
|
||||
**When** I review the file
|
||||
**Then** any color references match new palette
|
||||
|
||||
## Technical Notes
|
||||
|
||||
### Files to Update
|
||||
### Files to Review/Modify
|
||||
|
||||
**Documentation:**
|
||||
- `docs/brand.md` - Full brand guide update
|
||||
- `docs/logo-generation-instructions.md` - Update for square format
|
||||
- `CLAUDE.md` - Update design requirements section
|
||||
- `docs/brand.md` - Primary brand documentation
|
||||
- `CLAUDE.md` - Project instructions
|
||||
- `docs/architecture.md` - Architecture documentation
|
||||
- `docs/prd.md` - Product requirements
|
||||
|
||||
**Tests to Review:**
|
||||
- `tests/Feature/AccessibilityComplianceTest.php`
|
||||
- `tests/Feature/Components/` - Any color assertions
|
||||
- `tests/Feature/Mail/EmailTemplateColorsTest.php`
|
||||
**Tests:**
|
||||
- `tests/Feature/Admin/PdfBrandColorsTest.php`
|
||||
- Any other brand color tests
|
||||
|
||||
### New Brand Guide Content
|
||||
**Code Comments:**
|
||||
- `resources/css/app.css`
|
||||
|
||||
### Color Reference Quick Sheet
|
||||
|
||||
```
|
||||
Primary Colors:
|
||||
- Dark Charcoal: #1B1D1A (header/footer bg)
|
||||
- Warm Gold: #A68966 (CTA, links)
|
||||
- Warm Cream: #F4F1EA (page background)
|
||||
- Forest Green: #2D322A (text)
|
||||
- Pure White: #FFFFFF (cards)
|
||||
- Olive Green: #4A5D23 (active states)
|
||||
|
||||
Variants:
|
||||
- Gold Hover: #8A7555
|
||||
- Gold Light: #C4A882
|
||||
- Olive Hover: #5A7030
|
||||
- Primary Light: #2D322A
|
||||
```
|
||||
|
||||
### CLAUDE.md Design Requirements Update
|
||||
|
||||
Replace the existing color scheme section with:
|
||||
|
||||
```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);
|
||||
- **Color scheme:**
|
||||
- Dark Charcoal (#1B1D1A) - Header/Footer backgrounds
|
||||
- Warm Gold (#A68966) - CTA buttons, links, accents
|
||||
- Warm Cream (#F4F1EA) - Main page background
|
||||
- Forest Green (#2D322A) - Headings, body text
|
||||
- Pure White (#FFFFFF) - Card backgrounds
|
||||
- Olive Green (#4A5D23) - Active states
|
||||
```
|
||||
|
||||
## 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
|
||||
- [ ] Update `docs/brand.md` color palette section
|
||||
- [ ] Update `docs/brand.md` color usage guidelines
|
||||
- [ ] Update `CLAUDE.md` Design Requirements section
|
||||
- [ ] Review `docs/architecture.md` for color references
|
||||
- [ ] Review `docs/prd.md` for color references
|
||||
- [ ] Update `PdfBrandColorsTest.php` assertions
|
||||
- [ ] Review other test files for color assertions
|
||||
- [ ] Update CSS comments in `app.css`
|
||||
- [ ] Review `docs/logo-generation-instructions.md` if exists
|
||||
- [ ] Final review of all documentation for consistency
|
||||
|
||||
## Estimation
|
||||
|
||||
**Complexity:** Low
|
||||
**Risk:** Low - Documentation and cleanup tasks
|
||||
**Risk:** Low - Documentation only, no code changes
|
||||
|
||||
## Dependencies
|
||||
|
||||
- All other Epic 12 stories should be completed before final cleanup
|
||||
- This story should be completed last in the epic
|
||||
- Stories 12.2, 12.3, 12.4, 12.5 must be completed first
|
||||
- New colors must be implemented and verified before documenting
|
||||
|
||||
---
|
||||
|
||||
## Dev Agent Record
|
||||
|
||||
### Status
|
||||
Not Started - Blocked (waiting for Stories 12.2-12.5 completion)
|
||||
|
||||
### Agent Model Used
|
||||
(To be filled during implementation)
|
||||
|
||||
### File List
|
||||
(To be filled during implementation)
|
||||
|
||||
### Change Log
|
||||
|
||||
| Date | Change |
|
||||
|------|--------|
|
||||
| 2026-01-04 | Story created for documenting new Dark Charcoal & Warm Gold palette |
|
||||
|
||||
### Completion Notes
|
||||
(To be filled during implementation)
|
||||
|
||||
Reference in New Issue
Block a user