198 lines
6.3 KiB
Markdown
198 lines
6.3 KiB
Markdown
# 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
|
|
|
|
- [x] Obtain or create new logo SVG files
|
|
- [x] Update/replace `logo.svg`
|
|
- [x] Update/replace `logo-reversed.svg`
|
|
- [x] Update/replace `logo-mono.svg`
|
|
- [x] Update/replace `logo.png`
|
|
- [x] Review and update favicon files
|
|
- [x] Update `logo.blade.php` component if needed
|
|
- [x] Verify logo in navigation header
|
|
- [x] Verify logo in footer
|
|
- [x] Verify logo on auth pages
|
|
- [x] Verify logo in emails
|
|
- [x] Verify logo in PDF exports
|
|
- [x] Test logo on mobile views
|
|
- [x] 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?
|
|
|
|
---
|
|
|
|
## Dev Agent Record
|
|
|
|
### Status: Ready for Review
|
|
|
|
### Agent Model Used
|
|
Claude Opus 4.5 (claude-opus-4-5-20251101)
|
|
|
|
### Debug Log References
|
|
None
|
|
|
|
### Completion Notes
|
|
- Created new botanical logo SVGs based on brand.md guidelines (plant with leaves, wheat stalks, water droplets, decorative border)
|
|
- Updated tagline from "LAW FIRM" to "for Rights" per new brand identity
|
|
- Primary logo uses Deep Black (#1A1A1A) for light backgrounds
|
|
- Reversed logo uses Off-White (#E8E4DC) for dark backgrounds
|
|
- Monochrome logo uses Charcoal (#4A4A42) as single color
|
|
- Updated favicon.svg with botanical icon design
|
|
- Updated logo.blade.php component to support variant prop (full/reversed/mono)
|
|
- Updated app-logo.blade.php and app-logo-icon.blade.php with new botanical design
|
|
- Changed alt text from "Libra Law Firm" to "LIBRA for Rights"
|
|
- Updated LogoComponentTest.php to expect new brand name
|
|
- **Note**: logo.png and favicon.ico require manual regeneration from SVG (no conversion tools available)
|
|
|
|
### File List
|
|
|
|
**Modified:**
|
|
- `public/images/logo.svg` - New botanical logo with Deep Black (#1A1A1A)
|
|
- `public/images/logo-reversed.svg` - New botanical logo with Off-White (#E8E4DC)
|
|
- `public/images/logo-mono.svg` - New botanical logo with Charcoal (#4A4A42)
|
|
- `public/favicon.svg` - New botanical favicon icon
|
|
- `resources/views/components/logo.blade.php` - Added variant prop, updated alt text
|
|
- `resources/views/components/app-logo.blade.php` - Updated alt text and displayed text
|
|
- `resources/views/components/app-logo-icon.blade.php` - New botanical SVG icon
|
|
- `tests/Feature/Components/LogoComponentTest.php` - Updated expectations for new brand name
|
|
|
|
**Requires Manual Update:**
|
|
- `public/images/logo.png` - Needs regeneration from logo.svg
|
|
- `public/favicon.ico` - Needs regeneration from favicon.svg
|
|
|
|
### Change Log
|
|
| Date | Change | Author |
|
|
|------|--------|--------|
|
|
| 2026-01-03 | Initial implementation of new botanical logo assets | Dev Agent |
|