naser/libra
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

generated stories for changing the colors after the client changed his logo

Browse Source
This commit is contained in:
Naser Mansour
2026-01-03 03:10:49 +02:00
parent 5a19903e30
commit 19f6386532
7 changed files with 986 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/stories/story-10.1-core-css-theme-update.md
+131
View File
@@ -0,0 +1,131 @@
# Story 10.1: Core CSS Theme Update
## Story
**As a** developer
**I want to** update the Tailwind CSS theme color variables
**So that** the application uses the new LIBRA for Rights brand palette
## Acceptance Criteria
### AC1: Update Color Variables in `resources/css/app.css`
**Given** the current theme uses Navy Blue + Gold palette
**When** I update the `@theme` block
**Then** the following color mappings are applied:
| Old Variable | Old Hex | New Variable | New Hex |
|--------------|---------|--------------|---------|
| `--color-navy` | `#0A1F44` | `--color-primary` | `#4A4A42` (Charcoal) |
| `--color-gold` | `#D4AF37` | `--color-accent` | `#C9C4BA` (Warm Gray) |
| `--color-gold-light` | `#F4E4B8` | `--color-accent-light` | `#E8E4DC` (Off-White) |
| `--color-cream` | `#F9F7F4` | `--color-background` | `#E8E4DC` (Off-White) |
| `--color-charcoal` | `#2C3E50` | `--color-text` | `#1A1A1A` (Deep Black) |
### AC2: Maintain Backward Compatibility Aliases
**Given** existing components use `navy`, `gold`, `cream` class names
**When** the theme is updated
**Then** aliases are created so existing classes continue to work:
- `--color-navy` → points to `--color-primary` (Charcoal)
- `--color-gold` → points to `--color-accent` (Warm Gray)
- `--color-gold-light` → points to `--color-accent-light` (Off-White)
- `--color-cream` → points to `--color-background` (Off-White)
- `--color-charcoal` → points to `--color-text` (Deep Black)
### AC3: Update Semantic Aliases
**Given** semantic aliases exist for components
**When** theme is updated
**Then** these mappings are correct:
- `--color-primary` → `#4A4A42` (Charcoal)
- `--color-accent` → `#C9C4BA` (Warm Gray)
- `--color-accent-content` → `#C9C4BA` (Warm Gray)
- `--color-accent-foreground` → `#4A4A42` (Charcoal)
- `--color-background` → `#E8E4DC` (Off-White)
- `--color-text` → `#1A1A1A` (Deep Black)
### AC4: Update Button Styles
**Given** button classes use gold/navy colors
**When** theme is updated
**Then** `.btn-primary` and `.btn-secondary` use new palette:
- Primary: Charcoal background, Off-White text
- Secondary: Warm Gray border, Charcoal text
- Hover states updated accordingly
### AC5: Update Form Focus States
**Given** form inputs have gold focus rings
**When** theme is updated
**Then** focus states use Warm Gray:
- `focus:border-gold` → Warm Gray border
- `focus:ring-gold` → Warm Gray ring
### AC6: Update Prose Class
**Given** `.prose-navy` class exists for blog content
**When** theme is updated
**Then** rename to `.prose-brand` or update colors:
- Headings: Charcoal
- Links: Warm Gray
- Body: Deep Black
### AC7: Status Colors Unchanged
**Given** status colors serve functional purposes
**When** theme is updated
**Then** these remain unchanged:
- `--color-success: #27AE60`
- `--color-danger: #E74C3C`
- `--color-warning: #F39C12`
### AC8: WCAG AA Contrast Compliance
**Given** accessibility requirements
**When** new colors are applied
**Then** all text/background combinations meet WCAG AA:
- Deep Black (`#1A1A1A`) on Off-White (`#E8E4DC`): ≥4.5:1 for body text
- Off-White on Charcoal (`#4A4A42`): ≥4.5:1 for body text
- Warm Gray (`#C9C4BA`) usage verified for sufficient contrast
## Technical Notes
### Files to Modify
- `resources/css/app.css` - Main theme file
### Color Reference (from `docs/brand.md`)
| Color | Hex | Usage |
|-------|-----|-------|
| Charcoal | `#4A4A42` | Primary backgrounds, text |
| Warm Gray | `#C9C4BA` | Secondary backgrounds, accents |
| Off-White | `#E8E4DC` | Light backgrounds |
| Deep Black | `#1A1A1A` | Logo artwork, headlines |
### Contrast Verification
Use WebAIM Contrast Checker or similar tool to verify:
- Deep Black on Off-White: ~12.5:1 (passes AAA)
- Off-White on Charcoal: ~4.8:1 (passes AA)
- Charcoal on Off-White: ~4.8:1 (passes AA)
## Dev Checklist
- [ ] Update `@theme` block with new color values
- [ ] Create backward-compatible aliases
- [ ] Update semantic aliases
- [ ] Update `.btn-primary` styles
- [ ] Update `.btn-secondary` styles
- [ ] Update form focus states (input, textarea, select, checkbox, radio)
- [ ] Update `.prose-navy` → `.prose-brand`
- [ ] Update skip-link focus styles
- [ ] Update timeline-dot color
- [ ] Update skeleton loader color
- [ ] Verify status colors unchanged
- [ ] Run contrast checker on all combinations
- [ ] Run `npm run build` successfully
- [ ] Visual test in browser (both light and dark mode if applicable)
## Estimation
**Complexity:** Low
**Risk:** Low - CSS-only changes with aliases for backward compatibility
docs/stories/story-10.2-blade-component-color-migration.md
+179
View File
@@ -0,0 +1,179 @@
# Story 10.2: Blade Component Color Migration
## Story
**As a** developer
**I want to** update all Blade components and pages to use the new color palette
**So that** the entire application has consistent branding
## Acceptance Criteria
### AC1: Navigation Component Updated
**Given** `resources/views/components/navigation.blade.php` uses old colors
**When** I update the component
**Then** the following changes are applied:
- Background: Navy → Charcoal (`bg-navy` → `bg-charcoal` or use CSS variable)
- Text/Links: Gold → Warm Gray/Off-White
- Active states updated accordingly
- Mobile menu uses new colors
### AC2: Footer Component Updated
**Given** `resources/views/components/footer.blade.php` uses old colors
**When** I update the component
**Then** the following changes are applied:
- Background: Navy → Charcoal
- Text: Appropriate contrast colors
- Links: Gold → Warm Gray
### AC3: Logo Component Updated
**Given** `resources/views/components/logo.blade.php` references logo files
**When** I update the component
**Then** it references the correct logo variant for the background
### AC4: Language Toggle Updated
**Given** `resources/views/components/language-toggle.blade.php` uses old colors
**When** I update the component
**Then** colors match new palette
### AC5: Card Components Updated
**Given** card components use old colors
**When** I update `resources/views/components/ui/card.blade.php`
**Then** the following changes are applied:
- Background: Off-White
- Borders/accents: Warm Gray
- Text: Deep Black
### AC6: Stat Card Component Updated
**Given** `resources/views/components/ui/stat-card.blade.php` uses old colors
**When** I update the component
**Then** colors match new palette
### AC7: Spinner Component Updated
**Given** `resources/views/components/spinner.blade.php` uses old colors
**When** I update the component
**Then** spinner uses Charcoal or Warm Gray
### AC8: Toast Component Updated
**Given** `resources/views/components/toast.blade.php` uses old colors
**When** I update the component
**Then** colors match new palette (status colors remain unchanged)
### AC9: Public Pages Updated
**Given** public pages use old colors
**When** I update the following pages
**Then** they use the new palette:
- `resources/views/pages/home.blade.php`
- `resources/views/pages/booking.blade.php`
- `resources/views/pages/terms.blade.php`
- `resources/views/pages/privacy.blade.php`
- `resources/views/pages/legal.blade.php`
### AC10: Post Pages Updated
**Given** post display pages use old colors
**When** I update the following pages
**Then** they use the new palette:
- `resources/views/livewire/pages/posts/index.blade.php`
- `resources/views/livewire/pages/posts/show.blade.php`
### AC11: Public Layout Updated
**Given** `resources/views/components/layouts/public.blade.php` uses old colors
**When** I update the layout
**Then** it uses the new palette
### AC12: RTL Layout Integrity
**Given** the application supports RTL (Arabic)
**When** colors are updated
**Then** RTL layout displays correctly with new colors
### AC13: Responsive Appearance
**Given** the application is responsive
**When** colors are updated
**Then** all breakpoints display correctly (mobile, tablet, desktop)
## Technical Notes
### Files to Modify (16 files with 64 occurrences)
**Components:**
- `resources/views/components/navigation.blade.php` (25 occurrences)
- `resources/views/components/footer.blade.php` (9 occurrences)
- `resources/views/components/logo.blade.php` (1 occurrence)
- `resources/views/components/language-toggle.blade.php` (5 occurrences)
- `resources/views/components/spinner.blade.php` (1 occurrence)
- `resources/views/components/toast.blade.php` (2 occurrences)
- `resources/views/components/ui/card.blade.php` (2 occurrences)
- `resources/views/components/ui/stat-card.blade.php` (3 occurrences)
- `resources/views/components/layouts/public.blade.php` (1 occurrence)
**Pages:**
- `resources/views/pages/home.blade.php` (4 occurrences)
- `resources/views/pages/booking.blade.php` (1 occurrence)
- `resources/views/pages/terms.blade.php` (1 occurrence)
- `resources/views/pages/privacy.blade.php` (1 occurrence)
- `resources/views/pages/legal.blade.php` (1 occurrence)
- `resources/views/livewire/pages/posts/index.blade.php` (5 occurrences)
- `resources/views/livewire/pages/posts/show.blade.php` (2 occurrences)
### Color Class Mapping
| Old Class | New Approach |
|-----------|--------------|
| `bg-navy` | `bg-primary` or `bg-charcoal` |
| `text-navy` | `text-primary` or `text-charcoal` |
| `border-navy` | `border-primary` or `border-charcoal` |
| `bg-gold` | `bg-accent` or `bg-warm-gray` |
| `text-gold` | `text-accent` or `text-warm-gray` |
| `border-gold` | `border-accent` or `border-warm-gray` |
| `bg-cream` | `bg-background` or `bg-off-white` |
| `text-cream` | `text-background` or `text-off-white` |
### Recommended Approach
Since Story 10.1 creates backward-compatible aliases, the Tailwind classes should continue to work. However, verify each component visually to ensure:
1. Contrast is sufficient
2. Visual hierarchy is maintained
3. Interactive states (hover, focus, active) work correctly
## Dev Checklist
- [ ] Update `navigation.blade.php`
- [ ] Update `footer.blade.php`
- [ ] Update `logo.blade.php`
- [ ] Update `language-toggle.blade.php`
- [ ] Update `spinner.blade.php`
- [ ] Update `toast.blade.php`
- [ ] Update `card.blade.php`
- [ ] Update `stat-card.blade.php`
- [ ] Update `public.blade.php` layout
- [ ] Update `home.blade.php`
- [ ] Update `booking.blade.php`
- [ ] Update `terms.blade.php`
- [ ] Update `privacy.blade.php`
- [ ] Update `legal.blade.php`
- [ ] Update `posts/index.blade.php`
- [ ] Update `posts/show.blade.php`
- [ ] Test RTL layout (Arabic)
- [ ] Test responsive breakpoints
- [ ] Visual review all updated pages
## Estimation
**Complexity:** Medium
**Risk:** Low - Mostly class name updates with CSS variables doing the heavy lifting
## Dependencies
- Story 10.1 (Core CSS Theme Update) must be completed first
docs/stories/story-10.3-email-template-color-update.md
+140
View File
@@ -0,0 +1,140 @@
# Story 10.3: Email Template Color Update
## Story
**As a** developer
**I want to** update email templates to use the new brand colors
**So that** all email communications reflect the new LIBRA for Rights branding
## Acceptance Criteria
### AC1: Email Theme CSS Updated
**Given** `resources/views/vendor/mail/html/themes/default.css` uses old colors
**When** I update the stylesheet
**Then** the following changes are applied:
| Element | Old Color | New Color |
|---------|-----------|-----------|
| Links (`a`) | `#0A1F44` (Navy) | `#4A4A42` (Charcoal) |
| Headings (h1, h2, h3) | `#0A1F44` (Navy) | `#4A4A42` (Charcoal) |
| Header background | `#0A1F44` (Navy) | `#4A4A42` (Charcoal) |
| Footer links | `#D4AF37` (Gold) | `#C9C4BA` (Warm Gray) |
| Primary button | `#D4AF37` bg, `#0A1F44` text | `#4A4A42` bg, `#E8E4DC` text |
| Table headers | `#0A1F44` (Navy) | `#4A4A42` (Charcoal) |
| Panel border | `#D4AF37` (Gold) | `#C9C4BA` (Warm Gray) |
### AC2: Email Header Component Updated
**Given** `resources/views/vendor/mail/html/header.blade.php` may have inline styles
**When** I update the component
**Then** any inline color references use new palette
### AC3: Email Footer Component Updated
**Given** `resources/views/vendor/mail/html/footer.blade.php` may have inline styles
**When** I update the component
**Then** any inline color references use new palette
### AC4: Button Component Updated
**Given** `resources/views/vendor/mail/html/button.blade.php` may have inline styles
**When** I update the component
**Then** primary buttons use:
- Background: Charcoal (`#4A4A42`)
- Text: Off-White (`#E8E4DC`)
### AC5: Panel Component Updated
**Given** `resources/views/vendor/mail/html/panel.blade.php` may have inline styles
**When** I update the component
**Then** panel border uses Warm Gray (`#C9C4BA`)
### AC6: Email Logo Updated
**Given** email header displays the logo
**When** emails are sent
**Then** the logo matches the new brand identity
### AC7: All Email Templates Tested
**Given** the application sends various email types
**When** I test each email template
**Then** colors display correctly:
- Welcome email
- Booking submitted confirmation
- Booking approved/rejected
- Consultation reminders (24h, 2h)
- Timeline update notification
- Admin notifications
### AC8: Plain Text Fallback Unaffected
**Given** plain text email templates exist
**When** colors are updated
**Then** plain text templates continue to work (no color changes needed)
## Technical Notes
### Files to Modify
**Theme CSS:**
- `resources/views/vendor/mail/html/themes/default.css`
**HTML Components:**
- `resources/views/vendor/mail/html/header.blade.php`
- `resources/views/vendor/mail/html/footer.blade.php`
- `resources/views/vendor/mail/html/button.blade.php`
- `resources/views/vendor/mail/html/panel.blade.php`
- `resources/views/vendor/mail/html/layout.blade.php` (if contains colors)
### Color Mapping for Email CSS
```css
/* Old → New */
#0A1F44 → #4A4A42 /* Navy → Charcoal */
#D4AF37 → #C9C4BA /* Gold → Warm Gray */
```
### Email-Safe Colors
Email clients have limited CSS support. Ensure:
- Use inline styles for critical colors
- Test in major email clients (Gmail, Outlook, Apple Mail)
- Maintain fallback background colors
### Testing Emails
Use Laravel's mail preview or Mailtrap to test:
```bash
# Preview emails in browser
php artisan make:mail TestEmail --markdown=emails.test
```
## Dev Checklist
- [ ] Update `default.css` header background color
- [ ] Update `default.css` link colors
- [ ] Update `default.css` heading colors
- [ ] Update `default.css` button colors (`.button-primary`)
- [ ] Update `default.css` table header colors
- [ ] Update `default.css` panel border color
- [ ] Update `default.css` footer link colors
- [ ] Review `header.blade.php` for inline styles
- [ ] Review `footer.blade.php` for inline styles
- [ ] Review `button.blade.php` for inline styles
- [ ] Review `panel.blade.php` for inline styles
- [ ] Test Welcome email appearance
- [ ] Test Booking emails appearance
- [ ] Test Reminder emails appearance
- [ ] Test Timeline update email appearance
- [ ] Verify RTL email layout (Arabic)
## Estimation
**Complexity:** Low-Medium
**Risk:** Low - Email styling is isolated from main app
## Dependencies
- Story 10.5 (Logo Update) should be completed for email logo consistency
docs/stories/story-10.4-pdf-template-color-update.md
+132
View File
@@ -0,0 +1,132 @@
# Story 10.4: PDF Template Color Update
## Story
**As a** developer
**I want to** update PDF export templates to use the new brand colors
**So that** all exported documents reflect the new LIBRA for Rights branding
## Acceptance Criteria
### AC1: Users Export PDF Updated
**Given** `resources/views/pdf/users-export.blade.php` uses old colors
**When** I update the template
**Then** the following changes are applied:
- Header background: Navy → Charcoal (`#4A4A42`)
- Header text: appropriate contrast color
- Accent elements: Gold → Warm Gray (`#C9C4BA`)
- Table headers: Navy → Charcoal
- Borders: updated to new palette
### AC2: Consultations Export PDF Updated
**Given** `resources/views/pdf/consultations-export.blade.php` uses old colors
**When** I update the template
**Then** colors match the new brand palette
### AC3: Timelines Export PDF Updated
**Given** `resources/views/pdf/timelines-export.blade.php` uses old colors
**When** I update the template
**Then** colors match the new brand palette
### AC4: Monthly Report PDF Updated
**Given** `resources/views/pdf/monthly-report.blade.php` uses old colors
**When** I update the template
**Then** the following changes are applied:
- Header/footer: Charcoal background
- Accent colors: Warm Gray
- Charts/graphs: updated color scheme
- Text: Deep Black for readability
### AC5: Monthly Report Service Updated
**Given** `app/Services/MonthlyReportService.php` may contain color references
**When** I review the service
**Then** any hardcoded colors are updated to new palette
### AC6: PDF Logo Updated
**Given** PDF templates include the logo
**When** PDFs are generated
**Then** the logo matches the new brand identity
### AC7: Print-Friendly Colors
**Given** PDFs are often printed
**When** colors are updated
**Then** they remain legible when printed in grayscale
### AC8: All PDF Exports Tested
**Given** the admin can export various data types
**When** I test each PDF export
**Then** colors display correctly and documents are professional
## Technical Notes
### Files to Modify
**PDF Templates:**
- `resources/views/pdf/users-export.blade.php`
- `resources/views/pdf/consultations-export.blade.php`
- `resources/views/pdf/timelines-export.blade.php`
- `resources/views/pdf/monthly-report.blade.php`
**Services (review for color references):**
- `app/Services/MonthlyReportService.php`
**Livewire Components (review for inline PDF styles):**
- `resources/views/livewire/admin/reports/monthly-report.blade.php`
### Color Mapping for PDFs
| Element | Old Color | New Color |
|---------|-----------|-----------|
| Primary Background | `#0A1F44` | `#4A4A42` |
| Accent/Highlight | `#D4AF37` | `#C9C4BA` |
| Light Background | `#F9F7F4` | `#E8E4DC` |
| Text | `#2C3E50` | `#1A1A1A` |
### PDF Styling Notes
PDF templates use inline CSS. Common patterns to update:
```html
<!-- Old -->
<div style="background-color: #0A1F44; color: #D4AF37;">
<!-- New -->
<div style="background-color: #4A4A42; color: #E8E4DC;">
```
### Print Considerations
- Charcoal (`#4A4A42`) prints well in grayscale
- Warm Gray (`#C9C4BA`) may appear light when printed - consider using for accents only
- Ensure sufficient contrast for all text
## Dev Checklist
- [ ] Update `users-export.blade.php` colors
- [ ] Update `consultations-export.blade.php` colors
- [ ] Update `timelines-export.blade.php` colors
- [ ] Update `monthly-report.blade.php` colors
- [ ] Review `MonthlyReportService.php` for color references
- [ ] Review `monthly-report.blade.php` Livewire component
- [ ] Test Users PDF export
- [ ] Test Consultations PDF export
- [ ] Test Timelines PDF export
- [ ] Test Monthly Report PDF generation
- [ ] Verify logo displays correctly in PDFs
- [ ] Test print preview for readability
## Estimation
**Complexity:** Low
**Risk:** Low - PDF templates are isolated
## Dependencies
- Story 10.5 (Logo Update) should be completed for PDF logo consistency
docs/stories/story-10.5-logo-assets-update.md
+151
View File
@@ -0,0 +1,151 @@
# Story 10.5: Logo and SVG Assets Update
## Story
**As a** developer
**I want to** update all logo files and SVG assets to match the new brand
**So that** the application displays the correct LIBRA for Rights logo everywhere
## Acceptance Criteria
### AC1: Primary Logo Updated
**Given** `public/images/logo.svg` contains the old Scales of Justice logo with gold colors
**When** I update or replace the logo
**Then** the new botanical/wheat logo is displayed with correct colors:
- Primary artwork: Deep Black (`#1A1A1A`) or Charcoal (`#4A4A42`)
- For use on light backgrounds
### AC2: Reversed Logo Updated
**Given** `public/images/logo-reversed.svg` is for dark backgrounds
**When** I update or replace the logo
**Then** the logo displays correctly on Charcoal backgrounds:
- Artwork: Off-White (`#E8E4DC`) or Warm Gray (`#C9C4BA`)
### AC3: Monochrome Logo Updated
**Given** `public/images/logo-mono.svg` exists for single-color applications
**When** I update or replace the logo
**Then** the logo uses appropriate single color from new palette
### AC4: PNG Logo Updated
**Given** `public/images/logo.png` is used in some contexts
**When** I update or replace the logo
**Then** the PNG matches the new SVG logo
### AC5: Favicon Updated
**Given** the application has a favicon
**When** I review favicon files
**Then** they are updated to match new brand (if applicable)
### AC6: Logo Component References Correct Files
**Given** `resources/views/components/logo.blade.php` references logo files
**When** I review the component
**Then** it uses the correct logo variant based on context (light/dark background)
### AC7: Logo Displays Correctly Throughout App
**Given** the logo appears in multiple locations
**When** logos are updated
**Then** they display correctly in:
- Navigation header
- Footer
- Auth pages (login, password reset, etc.)
- Email headers
- PDF exports
- Mobile views
### AC8: Logo Clear Space Maintained
**Given** brand guidelines specify clear space around logo
**When** logo is displayed
**Then** minimum padding/margin is maintained as per `docs/brand.md`
## Technical Notes
### Files to Update/Replace
**Logo Files:**
- `public/images/logo.svg` - Primary full-color logo
- `public/images/logo-reversed.svg` - For dark backgrounds
- `public/images/logo-mono.svg` - Single-color version
- `public/images/logo.png` - PNG fallback
**Favicon (if exists):**
- `public/favicon.ico`
- `public/favicon.svg`
- Any other favicon variants
**Component:**
- `resources/views/components/logo.blade.php`
### New Logo Requirements (from `docs/brand.md`)
The new logo features:
- Stylized botanical illustration
- Central plant with symmetrical leaves
- Wheat stalks and water droplets
- Decorative border with traditional patterns
- Woodcut/linocut aesthetic
- High contrast black on neutral background
### Logo Color Variants
| Variant | Background | Logo Color |
|---------|------------|------------|
| Primary | Light (Off-White) | Deep Black (`#1A1A1A`) |
| Reversed | Dark (Charcoal) | Off-White (`#E8E4DC`) |
| Monochrome | Any | Single color from palette |
### Implementation Options
**Option A: Replace SVG files entirely**
- Obtain new SVG logo files from brand assets
- Replace existing files with same names
**Option B: Update existing SVG colors**
- If logo shape remains similar, update color values in SVG
- Change gradients from gold/navy to new palette
### Logo Sizing
Per `docs/brand.md`:
- Minimum size: 40px height (digital), 15mm (print)
- Clear space: Equal to height of one water droplet element
## Dev Checklist
- [ ] Obtain or create new logo SVG files
- [ ] Update/replace `logo.svg`
- [ ] Update/replace `logo-reversed.svg`
- [ ] Update/replace `logo-mono.svg`
- [ ] Update/replace `logo.png`
- [ ] Review and update favicon files
- [ ] Update `logo.blade.php` component if needed
- [ ] Verify logo in navigation header
- [ ] Verify logo in footer
- [ ] Verify logo on auth pages
- [ ] Verify logo in emails
- [ ] Verify logo in PDF exports
- [ ] Test logo on mobile views
- [ ] Verify clear space is maintained
## Estimation
**Complexity:** Low-Medium
**Risk:** Medium - Logo files may need to be provided by client/designer
## Dependencies
- New logo asset files should be provided or approved
- Coordinate with client on final logo design
## Open Questions
1. Are new logo SVG files available, or should existing SVGs be color-updated?
2. Should the tagline text ("LAW FIRM") be updated or removed?
3. Are favicon updates required?
docs/stories/story-10.6-documentation-update.md
+150
View File
@@ -0,0 +1,150 @@
# Story 10.6: Documentation Update
## Story
**As a** developer
**I want to** update all documentation to reflect the new brand colors
**So that** future development references accurate color information
## Acceptance Criteria
### AC1: CLAUDE.md Updated
**Given** `CLAUDE.md` contains color guidance
**When** I update the file
**Then** the following sections are updated:
- Design Requirements section
- Color scheme references (Navy → Charcoal, Gold → Warm Gray)
- Any hex value references
### AC2: PRD Updated
**Given** `docs/prd.md` contains detailed color specifications
**When** I update the document
**Then** the following sections are updated:
- Section 7.1 Brand Identity & Visual Guidelines
- Color Palette table
- All hex value references
- Button styling specifications
- Any Navy/Gold color mentions
### AC3: Architecture Document Updated
**Given** `docs/architecture.md` may contain color references
**When** I review and update the document
**Then** any color references are updated to new palette
### AC4: Epic 9 Stories Referenced as Superseded
**Given** Epic 9 stories implemented the original Navy+Gold palette
**When** I review Epic 9 story files
**Then** a note is added indicating colors were updated in Epic 10:
- `story-9.1-color-system-implementation.md`
- `story-9.4-component-styling-buttons.md`
- `story-9.5-component-styling-forms.md`
- Other affected stories
### AC5: Epic 10 Document Updated
**Given** `docs/epics/epic-10-brand-color-refresh.md` exists
**When** all stories are complete
**Then** the epic document is updated with completion status
### AC6: brand.md Verified Accurate
**Given** `docs/brand.md` defines the new brand
**When** I review the document
**Then** it accurately describes:
- The botanical/wheat logo
- Correct color palette (Charcoal, Warm Gray, Off-White, Deep Black)
- Typography guidelines
- Usage guidelines
### AC7: No Stale Color References
**Given** documentation should be accurate
**When** I search all markdown files for old hex values
**Then** no references to old colors remain:
- `#0A1F44` (old Navy) - replaced or removed
- `#D4AF37` (old Gold) - replaced or removed
- `#F4E4B8` (old Gold Light) - replaced or removed
- `#F9F7F4` (old Cream) - replaced or removed
- `#2C3E50` (old Charcoal) - replaced or removed
## Technical Notes
### Files to Update
**Core Documentation:**
- `CLAUDE.md`
- `docs/prd.md`
- `docs/architecture.md`
- `docs/brand.md` (verify accuracy)
**Epic Files:**
- `docs/epics/epic-10-brand-color-refresh.md`
- `docs/epics/epic-9-design-branding.md` (add supersession note)
**Story Files (44 files contain old hex values):**
- `docs/stories/story-9.1-color-system-implementation.md`
- `docs/stories/story-9.4-component-styling-buttons.md`
- `docs/stories/story-9.5-component-styling-forms.md`
- `docs/stories/story-9.6-component-styling-cards-containers.md`
- `docs/stories/story-9.7-navigation-footer-styling.md`
- `docs/stories/story-9.10-accessibility-compliance.md`
- And others found via grep
### Color Replacement Reference
| Old Color | Old Hex | New Color | New Hex |
|-----------|---------|-----------|---------|
| Navy Blue | `#0A1F44` | Charcoal | `#4A4A42` |
| Gold | `#D4AF37` | Warm Gray | `#C9C4BA` |
| Gold Light | `#F4E4B8` | Off-White | `#E8E4DC` |
| Cream | `#F9F7F4` | Off-White | `#E8E4DC` |
| Charcoal | `#2C3E50` | Deep Black | `#1A1A1A` |
### Search Commands
To find all old color references:
```bash
# Find files with old hex values
grep -r "#0A1F44\|#D4AF37\|#F4E4B8\|#F9F7F4\|#2C3E50" docs/
# Find Navy/Gold word references
grep -ri "navy\|gold" docs/*.md
```
### Documentation Update Pattern
For Epic 9 stories, add a note at the top:
```markdown
> **Note:** The color values in this story were implemented with the original Navy+Gold palette.
> These colors were updated in Epic 10 (Brand Color Refresh) to the new Charcoal+Warm Gray palette.
> See `docs/brand.md` for current color specifications.
```
## Dev Checklist
- [ ] Update `CLAUDE.md` color references
- [ ] Update `docs/prd.md` Section 7.1 Color Palette
- [ ] Update `docs/prd.md` all other color references
- [ ] Review and update `docs/architecture.md`
- [ ] Verify `docs/brand.md` is accurate
- [ ] Add supersession note to `story-9.1-color-system-implementation.md`
- [ ] Add supersession note to `story-9.4-component-styling-buttons.md`
- [ ] Add supersession note to `story-9.5-component-styling-forms.md`
- [ ] Add supersession note to other affected Epic 9 stories
- [ ] Update `epic-10-brand-color-refresh.md` with completion status
- [ ] Run grep to verify no old hex values remain
- [ ] Review all documentation for consistency
## Estimation
**Complexity:** Low
**Risk:** Low - Documentation only, no code impact
## Dependencies
- Should be completed last, after Stories 10.1-10.5 are done
- Ensures documentation reflects actual implemented state